diff options
| -rw-r--r-- | youtube/static/shared.css | 161 | ||||
| -rw-r--r-- | youtube/templates/base.html | 24 |
2 files changed, 78 insertions, 107 deletions
diff --git a/youtube/static/shared.css b/youtube/static/shared.css index a360972..f3e30cb 100644 --- a/youtube/static/shared.css +++ b/youtube/static/shared.css @@ -4,6 +4,9 @@ h1, h2, h3, h4, h5, h6, div, button{ } +address{ + font-style:normal; +} body{ margin:0; @@ -14,76 +17,90 @@ body{ background-color:#cccccc; min-height:100vh; - - display:grid; - grid-template-rows: 50px 1fr; } header{ background-color:#333333; + height: 50px; - grid-row: 1; - - display:grid; - grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); - } - - main{ - grid-row: 2; + display: flex; } -address{ - font-style:normal; -} - - - - #site-search{ - grid-column: 2; - display: grid; - grid-template-columns: 1fr auto auto; + #home-link{ + align-self: center; + margin-left:10px; + color: #ffffff; + } - } - #site-search .search-box{ - align-self:center; - height:25px; - border:0; - - grid-column: 1; + #site-search{ + max-width: 600px; + margin-left:10px; + display: flex; + flex-grow: 1; } - #site-search .search-button{ - grid-column: 2; - align-self:center; - height:25px; - border-style:solid; - border-width:1px; - } - #site-search .dropdown{ - margin-left:5px; - grid-column: 3; - align-self:center; - height:25px; - } - #site-search .dropdown button{ + #site-search .search-box{ + align-self:center; + height:25px; + border:0; + + flex-grow: 1; + } + #site-search .search-button{ align-self:center; height:25px; border-style:solid; border-width:1px; } - #site-search .css-sucks{ - width:0px; - height:0px; + #site-search .dropdown{ + margin-left:5px; + align-self:center; + height:25px; } - #site-search .dropdown-content{ - grid-template-columns: auto auto; - white-space: nowrap; + #site-search .dropdown button{ + align-self:center; + height:25px; + + border-style:solid; + border-width:1px; } - #site-search .dropdown-content h3{ - grid-column:1 / span 2; + #site-search .css-sucks{ + width:0px; + height:0px; + } + #site-search .dropdown-content{ + grid-template-columns: auto auto; + white-space: nowrap; } + #site-search .dropdown-content h3{ + grid-column:1 / span 2; + } + + #playlist-edit{ + margin-left: 10px; + align-self: center; + } + #local-playlists{ + margin-right:5px; + color: #ffffff; + } + #playlist-name-selection{ + } + #playlist-add-button{ + padding-left: 10px; + padding-right: 10px; + } + #item-selection-reset{ + padding-left: 10px; + padding-right: 10px; + } + + main{ + grid-row: 2; + } + .dropdown{ z-index:1; @@ -98,50 +115,6 @@ address{ display:inline-grid; } - - -#header-right{ - grid-column:4; - - display:grid; - grid-template-columns:auto auto auto 1fr; - grid-template-rows: 1fr; - width: 540px; -} - #playlist-edit{ - display:contents; - } - #local-playlists{ - grid-column: 1; - grid-row:1; - align-self: center; - margin-right:5px; - color: #ffffff; - } - #playlist-name-selection{ - grid-column:2; - grid-row:1; - justify-self:start; - align-self: center; - } - #playlist-add-button{ - grid-column:3; - grid-row:1; - align-self: center; - padding-left: 10px; - padding-right: 10px; - } - #item-selection-reset{ - grid-column:4; - grid-row:1; - align-self: center; - justify-self:start; - padding-left: 10px; - padding-right: 10px; - } - - - .item-list{ display: grid; grid-auto-rows: 138px; diff --git a/youtube/templates/base.html b/youtube/templates/base.html index 72e3691..aaa0351 100644 --- a/youtube/templates/base.html +++ b/youtube/templates/base.html @@ -16,6 +16,7 @@ </head> <body> <header> + <a href="/youtube.com" id="home-link">Home</a> <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> @@ -91,19 +92,16 @@ </div> </form> - <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"> - <datalist id="playlist-options"> - {% for playlist_name in header_playlist_names %} - <option value="{{ playlist_name }}">{{ playlist_name }}</option> - {% endfor %} - </datalist> - <button type="submit" id="playlist-add-button" name="action" value="add">Add to playlist</button> - <button type="reset" id="item-selection-reset">Clear selection</button> - </form> - <a href="/youtube.com/playlists" id="local-playlists">Local playlists</a> - </div> + <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"> + <datalist id="playlist-options"> + {% for playlist_name in header_playlist_names %} + <option value="{{ playlist_name }}">{{ playlist_name }}</option> + {% endfor %} + </datalist> + <button type="submit" id="playlist-add-button" name="action" value="add">Add to playlist</button> + <button type="reset" id="item-selection-reset">Clear selection</button> + </form> </header> <main> {% block main %} |