Use less laggy grid layout strategy for watch page

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>