diff options
| author | James Taylor <user234683@users.noreply.github.com> | 2019-02-14 22:45:46 -0800 |
|---|---|---|
| committer | James Taylor <user234683@users.noreply.github.com> | 2019-02-14 22:45:46 -0800 |
| commit | 0cb61ef4b60e8b32b4242f0f300558c5f12f9413 (patch) | |
| tree | f52b27abfbe1d26c1e376d86c78f9e5427e316ad | |
| parent | 4d7bba92eb62518e2273d030235214f4a7605444 (diff) | |
| download | yt-local-0cb61ef4b60e8b32b4242f0f300558c5f12f9413.tar.lz yt-local-0cb61ef4b60e8b32b4242f0f300558c5f12f9413.tar.xz yt-local-0cb61ef4b60e8b32b4242f0f300558c5f12f9413.zip | |
Search results: Use more performant layout strategy
| -rw-r--r-- | yt_search_results_template.html | 59 |
1 files changed, 20 insertions, 39 deletions
diff --git a/yt_search_results_template.html b/yt_search_results_template.html index 31509a2..d73fb9e 100644 --- a/yt_search_results_template.html +++ b/yt_search_results_template.html @@ -9,37 +9,25 @@ <style type="text/css"> main{ display:grid; - grid-template-columns: 3fr 1fr; + grid-template-columns: minmax(0px, 1fr) 800px minmax(0px,2fr); + max-width:100vw; } - #left{ - grid-column: 1; + + #number-of-results{ + font-weight:bold; + } + #result-info{ grid-row: 1; - - display: grid; - grid-template-columns: 1fr 800px; - grid-row-gap: 20px; - align-content:start; + grid-column:2; + align-self:center; } - #number-of-results{ - font-weight:bold; - } - #result-info{ - grid-row: 1; - grid-column:2; - align-self:center; - } - .page-button-row{ - grid-column: 2; - justify-self: center; - } - - - #right{ + .page-button-row{ grid-column: 2; - grid-row: 1; - + justify-self: center; } + + .item-list{ grid-row: 2; grid-column: 2; @@ -53,23 +41,16 @@ <body> $header <main> - <div id="left"> - <div id="result-info"> - <div id="number-of-results">Approximately $number_of_results results ($number_of_pages pages)</div> + <div id="result-info"> + <div id="number-of-results">Approximately $number_of_results results ($number_of_pages pages)</div> $corrections - </div> - <div class="item-list"> -$results - </div> - <nav class="page-button-row"> -$page_buttons - </nav> </div> - - - <div id="right"> - + <div class="item-list"> +$results </div> + <nav class="page-button-row"> +$page_buttons + </nav> </main> |