diff options
| -rw-r--r-- | youtube/common.py | 4 | ||||
| -rw-r--r-- | youtube/shared.css | 21 | ||||
| -rw-r--r-- | yt_watch_template.html | 29 |
3 files changed, 21 insertions, 33 deletions
diff --git a/youtube/common.py b/youtube/common.py index 6061c9b..23b05fb 100644 --- a/youtube/common.py +++ b/youtube/common.py @@ -292,7 +292,7 @@ def medium_video_item_html(medium_video_info): header_template = Template(''' <header> - <div id="header-left"> + <form id="site-search" action="/youtube.com/search"> <input type="search" name="query" class="search-box" value="$search_box_value"> <button type="submit" value="Search" class="search-button">Search</button> @@ -316,7 +316,7 @@ header_template = Template(''' </div> </div> </form> - </div> + <div id="header-right"> <form id="playlist-edit" action="/youtube.com/edit_playlist" method="post" target="_self"> <input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text"> diff --git a/youtube/shared.css b/youtube/shared.css index 712a2fe..1c25b6d 100644 --- a/youtube/shared.css +++ b/youtube/shared.css @@ -25,7 +25,7 @@ body{ grid-row: 1; display:grid; - grid-template-columns: 3fr 2fr; + grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); } main{ @@ -36,12 +36,7 @@ address{ font-style:normal; } -#header-left{ - grid-column:1; - - display:grid; - grid-template-columns: 1fr 640px; -} + #site-search{ grid-column: 2; @@ -106,10 +101,10 @@ address{ #header-right{ - grid-column:2; + grid-column:4; display:grid; - grid-template-columns:40px auto auto auto 1fr; + grid-template-columns:auto auto auto 1fr; grid-template-rows: 1fr; width: 540px; } @@ -117,27 +112,27 @@ address{ display:contents; } #local-playlists{ - grid-column: 2; + grid-column: 1; grid-row:1; align-self: center; margin-right:5px; color: #ffffff; } #playlist-name-selection{ - grid-column:3; + grid-column:2; grid-row:1; justify-self:start; align-self: center; } #playlist-add-button{ - grid-column:4; + grid-column:3; grid-row:1; align-self: center; padding-left: 10px; padding-right: 10px; } #item-selection-reset{ - grid-column:5; + grid-column:4; grid-row:1; align-self: center; justify-self:start; diff --git a/yt_watch_template.html b/yt_watch_template.html index 4a2f8e0..84ae40e 100644 --- a/yt_watch_template.html +++ b/yt_watch_template.html @@ -10,16 +10,14 @@ <style type="text/css"> main{ display:grid; - grid-template-columns: 3fr 2fr; + grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); + background-color:#cccccc; } #left{ background-color:#bcbcbc; - - display: grid; grid-column: 1; - grid-row: 1; - grid-template-columns: 1fr 640px; + } .full-item{ display: grid; @@ -27,6 +25,7 @@ grid-template-rows: 0fr 0fr 0fr 0fr 20px 0fr 0fr; grid-template-columns: 1fr 1fr; align-content: start; + background-color:#bcbcbc; } .full-item > video{ grid-column: 1 / span 2; @@ -111,16 +110,9 @@ font-weight:bold; margin-bottom:5px; } - #right{ - background-color:#cccccc; - grid-column: 2; - grid-row: 1; - - display: grid; - grid-template-columns: 40px 500px 1fr; - } + #related{ - grid-column: 2; + grid-column: 4; display: grid; grid-auto-rows: 90px; grid-row-gap: 10px; @@ -162,7 +154,8 @@ <body> $header <main> - <div id="left"> + <div id="left"> + </div> <article class="full-item"> <video width="640" height="360" controls autofocus> @@ -192,14 +185,14 @@ $music_list </div> $comments </article> - </div> + - <div id="right"> + <nav id="related"> $related </nav> - </div> + </main> |