Layout: Replace local playlists link with home link in header and use flexbox to make it work on smaller window sizes

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 %}