<!DOCTYPE html>
<html lang='en'>
<head>
<title>Livestreams</title>
<script async src="https://www.youtube.com/iframe_api"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style>
headingLink {
color: white; text-decoration: none ;
}
.freeze-table {
border-spacing: 0;
padding: 0;
}
thead th {
top: 0;
position: sticky;
background-color: #666 ;
color: #fff ;
z-index: 20 ;
min-height: 30px ;
height: 30px ;
text-align: left ;
}
.incomplete {
color: red ;
font-weight: bold ;
}
.invalidValue {
background-color: red ;
}
tr:nth-child(even) {
background-color: #f2f2f2 ;
}
tr.selected, td.selected {
background-color:yellow ;
color: black ;
}
.currentActive {
background-color: yellow ;
font-weight: bold ;
}
tr.unsaved, td.unsaved {
background-color:orange ;
color: black ;
}
th, td { padding: 0 5px;
outline: 1px solid #ccc ;
border: none ;
outline-offset: -1px ;
padding-left: 5px ;
}
tr {
min-height: 25px ;
height: 25px ;
}
td {
text-wrap: nowrap
}
pageElement {display:flex; flex-wrap: nowrap; align-items: center}
* { padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
.imgbox {
display: grid;
width: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div id='fullPageDiv' style='width: 100%; overflow:hidden;'>
<div id='player_hints_songs'>
<div id="YouTubeVideoPlayer" style='overflow:hidden; float:left; width:300px'>
<img src="https://web.lovelady.com/siteImages/bunnyfuzz.jpg" style="width:300px; height:300px" alt="placeholder">
</div> <!-- YouTubeVideoPlayer -->
<div id='hints_and_songs'>
<div id='hintsDiv'>
<label for="selectSong">Matching songs:</label>
<select name='selectSong' id='selectSong' onchange='selectedSongFromHints(this) ;'>
<option value='Song suggestions:'>Songs matching "Cool "</option>
<option value='COOL WATER 0'>Cool Water (Marty Robbins cover)</option>
<option value='THAT AINT COOL 1'>That Ain't Cool</option>
</select>
</div><!-- hintsDiv-->
<div id='songsDiv'>
<table id='songsTable'>
<thead>
<tr>
<th style='text-align:center;'>Sav</th>
<th style='text-align:center;'>Clr</th>
<th style='text-align:right;'>Time</th>
<th style='text-align:left;'>Song title</th>
<th style='text-align:left;'>Category</th>
<th style='display: none;'>SaveArea</th>
<th style='display: none;'>ids</th>
</tr>
</thead>
<tbody>
<tr onclick='selectSongRow(this, 0) ;' id='perf_row_0'>
<td style='text-align:center;'><input type='checkbox' id='perf_saved_0' name='perf_saved_0' checked onclick='savePerfSong(this, 0);'></td>
<td style='text-align:center;' onclick='clearSongRow(0);'>✖</td>
<td><input type='text' id='perf_time_0' name='perf_time_0' style='text-align:right;' minLength='4' maxLength='7' size='7' value='0:20' onkeyup='changedPerfTime(this, 0);'></td>
<td><input type='text' id='perf_title_0' name='perf_title_0' style='text-align:left;' minLength='4' maxlength='80' size='50' value="You Don't Bring Me Flowers" onkeyup='changedPerfSong(this, 0);'></td>
<td><input type='text' id='perf_cat_0' name='perf_cat_0' style='text-align:left;' minLength='0' maxLength='15' size='10' value='' onkeyup='changedPerfCat(this, 0);'
onblur='leftTheTitleField(this, 0);'></td>
<td style='display:none;'><input type='text' id='perf_save_0' name='perf_save_0'></td>
<td style='display:none;'><input type='text' id='perf_ids_0' name='perf_ids_0' value='773;;;'></td>
</tr>
<tr onclick='selectSongRow(this, 1) ;' id='perf_row_1'>
<td style='text-align:center;'><input type='checkbox' id='perf_saved_1' name='perf_saved_1' checked onclick='savePerfSong(this, 1);'></td>
<td style='text-align:center;' onclick='clearSongRow(1);'>✖</td>
<td><input type='text' id='perf_time_1' name='perf_time_1' style='text-align:right;' minLength='4' maxLength='7' size='7' value='' onkeyup='changedPerfTime(this, 1);'></td>
<td><input type='text' id='perf_title_1' name='perf_title_1' style='text-align:left;' minLength='4' maxlength='50' size='50' value='' onkeyup='changedPerfSong(this, 1);'></td>
<td><input type='text' id='perf_cat_1' name='perf_cat_1' style='text-align:left;' minLength='0' maxLength='10' size='10' value='' onkeyup='changedPerfCat(this, 1);'
onblur='leftTheTitleField(this, 1);'></td>
<td style='display:none;'><input type='text' id='perf_save_1' name='perf_save_1'></td>
<td style='display:none;'><input type='text' id='perf_ids_1' name='perf_ids_1' value='773;;;'></td>
</tr>
<tr>
<td colspan='7' style='text-align:center'>
<button id='completeButton' type='button' onclick='markComplete(this, 773, false);' style='margin: 5px 10px auto;'>Mark incomplete</button>
<button id='incompleteButton' type='button' disabled onclick='markComplete(this, 773, true);'>Mark complete</button>
</td>
</tr>
</tbody>
</table>
</div><!-- songsDiv -->
</div><!-- hints_and_songs -->
</div> <!-- 'player_hints_songs'-->
<div id='form_and_streams'>
<div id='formDiv'>
<form method = 'POST' action = /YouTube/performed.php>
<table>
<tr>
<td><input type = 'checkbox' name='filterFromDate' id='filterFromDate' checked>
<label for='filterFromDate'>Earliest date</label>
</td>
<td><input type = 'text' name='fromDate' id='fromDate' size=10 value='06/20/2016'>
</td>
<td><input type = 'checkbox' name='filterToDate' id='filterToDate'>
<label for='filterFromDate'>Latest date</label>
</td>
<td><input type = 'text' name='toDate' size=10 value=''>
</td>
<td><input type = 'checkbox' name='omitCompleted' id='omitCompleted' checked>
<label for='omitCompleted'>Omit if completed review</label>
</td>
</tr>
</table>
<br>
<input style='margin-left: 10px;' type='submit' name='submit' value='Submit'>
<input style='margin-left: 10px;' type='submit' name='backToYouTubeStuff' value='GoBack'>
<input style='margin-left: 50px;' type='button' name='prevPageButton' id='prevPageButton' onclick='prevPage();' value='Prev page'>
<input style='margin-left: 50px;' type='button' name='nextPageButton' id='nextPageButton' onclick='nextPage();' value='Next page'>
<br>
</form>
</div><!-- formDiv-->
<div id='livestreamsDiv'>
<br>
<table id='livestreamsTable'>
<thead>
<tr>
<th>Started</th>
<th>Noted</th>
<th style='text-align:right;'>Duration</th>
<th><span style='margin-left:30px;'>Livestream Title</span></th>
</tr>
</thead>
<tbody id='livestreamsBody'>
<tr id='livestream_row_0'>
<td style='text-wrap:nowrap;' id='livestream_date_0'>2018-12-23 17:18</td>
<td style='text-align:right;' id='livestream_songCount_0'></td>
<td style='text-align:right;' id='livestream_elapsed_0'>0:20:09</td>
<td><span onclick='selectVidId("n3tSP_imMI", 0, "livestream_row_0", "1280", "720");'>First Sunday</span></td>
</tr>
<tr id='livestream_row_1'>
<td style='text-wrap:nowrap;' id='livestream_date_1'>2018-12-24 18:16</td>
<td style='text-align:right;' id='livestream_songCount_1'></td>
<td style='text-align:right;' id='livestream_elapsed_1'>0:15:17</td>
<td><span onclick='selectVidId("qtcQtqsaTU", 1, "livestream_row_1", "1280", "720");'>Live from the Lights Display</span></td>
</tr>
<tr id='livestream_row_2'>
<td style='text-wrap:nowrap;' id='livestream_date_2'>2019-01-06 07:31</td>
<td style='text-align:right;' id='livestream_songCount_2'></td>
<td style='text-align:right;' id='livestream_elapsed_2'>0:19:04</td>
<td><span onclick='selectVidId("c4y42xI6_o", 2, "livestream_row_2", "1280", "720");'>Jun 26 Follow the sun</span></td>
</tr>
</tbody>
</table>
</div> <!-- livestreamsDiv-->
</div> <!-- forms_and_streams -->
</div><!-- This is the "page" division (the whole page after the form) -->
</html>
thins几乎是我想要的方式，除了出乎意料的是，名为
的Div不会出现在左边的边缘（图像下方）。 我在
div上必须错过一些属性，以使它们对齐，但是我看不到。 我想我可以切换到Flex，但这似乎是我希望该项目可以避免的另一个学习曲线。 （也许不像最初出现的那样令人生畏？）
有一个简单的修复程序，可以强制“form_and_streams” div将图像对齐（换句话说，在“
player_hits_songs”下方 Maybe #form_and_streams在＃player_hints_songs.中不对齐。
#form_and_streams div没有出现在#player_hints_songs下方，因为#YoutuBevideOplayer使用float：left;。这会导致布局问题，因此很难正确定位元素。#fullPageDiv {
display: flex;
flex-direction: column;
width: 100%;
}
#player_hints_songs {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
}
#YouTubeVideoPlayer {
width: 300px;
flex-shrink: 0;
}
#hints_and_songs {
flex: 1;
}
#form_and_streams {
width: 100%;
margin-top: 20px;
}