Layout: simplify CSS layout on most pages

8 files changed, 121 insertions, 212 deletions

diff --git a/youtube/static/shared.css b/youtube/static/shared.css
index 382f86c..611cdb7 100644
--- a/youtube/static/shared.css
+++ b/youtube/static/shared.css
@@ -267,7 +267,10 @@ body{
 
 
 .page-button-row{
+    margin-top: 10px;
+    margin-bottom: 10px;
     justify-self:center;
+    justify-content: center;
     display: grid;
     grid-auto-columns: 40px;
     grid-auto-flow: column; 
diff --git a/youtube/templates/comments_page.html b/youtube/templates/comments_page.html
index 68c8537..047404a 100644
--- a/youtube/templates/comments_page.html
+++ b/youtube/templates/comments_page.html
@@ -3,63 +3,46 @@
 {% import "comments.html" as comments %}
 
 {% block style %}
-    main{
-        display:grid;
-        grid-template-columns: 3fr 2fr;
+    .comments-area{
+        margin: auto;
+        width:640px;
     }
-    #left{
-        background-color:#bcbcbc;
-        
-        display: grid;
-        grid-column: 1;
-        grid-row: 1;
-        grid-template-columns: 1fr 640px;
-        grid-template-rows: 0fr 0fr 0fr;
-    }
-        .comments-area{
-            grid-column:2;
-        }
-            .comment{
-                width:640px;
-            }
 {% endblock style %}
 
 
 {% block main %}
-    <div id="left">
-        <section class="comments-area">
-            {% if not comments_info['is_replies'] %}
-                <section class="video-metadata">
-                    <a class="video-metadata-thumbnail-box" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">
-                        <img class="video-metadata-thumbnail-img" src="{{ comments_info['video_thumbnail'] }}" height="180px" width="320px">
-                    </a>
-                    <a class="title" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">{{ comments_info['video_title'] }}</a>
-
-                    <h2>Comments page {{ comments_info['page_number'] }}</h2>
-                    <span>Sorted by {{ comments_info['sort_text'] }}</span>
-                </section>
-            {% endif %}
-
-            {{ comments.comment_posting_box(comment_posting_box_info) }}
-
-            {% if not comments_info['is_replies'] %}
-                <div class="comment-links">
-                    {% for link_text, link_url in comments_info['comment_links'] %}
-                        <a class="sort-button" href="{{ link_url }}">{{ link_text }}</a>
-                    {% endfor %}
-                </div>
-            {% endif %}
-
-            <div class="comments">
-                {% for comment in comments_info['comments'] %}
-                    {{ comments.render_comment(comment, comments_info['include_avatars']) }}
+    <section class="comments-area">
+        {% if not comments_info['is_replies'] %}
+            <section class="video-metadata">
+                <a class="video-metadata-thumbnail-box" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">
+                    <img class="video-metadata-thumbnail-img" src="{{ comments_info['video_thumbnail'] }}" height="180px" width="320px">
+                </a>
+                <a class="title" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">{{ comments_info['video_title'] }}</a>
+
+                <h2>Comments page {{ comments_info['page_number'] }}</h2>
+                <span>Sorted by {{ comments_info['sort_text'] }}</span>
+            </section>
+        {% endif %}
+
+        {{ comments.comment_posting_box(comment_posting_box_info) }}
+
+        {% if not comments_info['is_replies'] %}
+            <div class="comment-links">
+                {% for link_text, link_url in comments_info['comment_links'] %}
+                    <a class="sort-button" href="{{ link_url }}">{{ link_text }}</a>
                 {% endfor %}
             </div>
-            {% if 'more_comments_url' is in comments_info %}
-                <a class="page-button more-comments" href="{{ comments_info['more_comments_url'] }}">More comments</a>
-            {% endif %}
-        </section>
-    </div>
+        {% endif %}
+
+        <div class="comments">
+            {% for comment in comments_info['comments'] %}
+                {{ comments.render_comment(comment, comments_info['include_avatars']) }}
+            {% endfor %}
+        </div>
+        {% if 'more_comments_url' is in comments_info %}
+            <a class="page-button more-comments" href="{{ comments_info['more_comments_url'] }}">More comments</a>
+        {% endif %}
+    </section>
 {% endblock main %}
 
 
diff --git a/youtube/templates/delete_comment.html b/youtube/templates/delete_comment.html
index 71555ee..28c8f2a 100644
--- a/youtube/templates/delete_comment.html
+++ b/youtube/templates/delete_comment.html
@@ -2,14 +2,10 @@
 {% extends "base.html" %}
 
 {% block style %}
-    main{
-        display: grid;
-        grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
-        align-content: start;
-    }
     main > div, main > form{
+        margin: auto;
         margin-top:20px;
-        grid-column:2;
+        width: 640px;
     }
 {% endblock style %}
 
diff --git a/youtube/templates/local_playlist.html b/youtube/templates/local_playlist.html
index f8e6f01..7ba0642 100644
--- a/youtube/templates/local_playlist.html
+++ b/youtube/templates/local_playlist.html
@@ -2,59 +2,41 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-    main{
-        display:grid;
-        grid-template-columns: 3fr 1fr;
+    main > *{
+        width: 800px;
+        margin: auto;
     }
 
-
-        
-    #left{
-        grid-column: 1;
-        grid-row: 1;
-        
-        display: grid;
-        grid-template-columns: 1fr 800px auto;
-        grid-template-rows: 0fr 1fr 0fr;
+    .playlist-metadata{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
     }
         .playlist-title{
-            grid-column:2;
         }
         #playlist-remove-button{
-            grid-column:3;
             align-self: center;
             white-space: nowrap;
         }
         #results{
-            
-            grid-row: 2;
-            grid-column: 2 / span 2;
-            
-            
             display: grid;
             grid-auto-rows: 0fr;
             grid-row-gap: 10px;
-            
-        }
-        .page-button-row{
-            grid-row: 3;
-            grid-column: 2;
-            justify-self: center;
         }
 {% endblock style %}
 
 {% block main %}   
-    <div id="left">
+    <div class="playlist-metadata">
         <h2 class="playlist-title">{{ playlist_name }}</h2>
         <input type="hidden" name="playlist_page" value="{{ playlist_name }}" form="playlist-edit">
         <button type="submit" id="playlist-remove-button" name="action" value="remove" form="playlist-edit" formaction="">Remove from playlist</button>
-        <div id="results">          
-            {% for video_info in videos %}
-                {{ common_elements.item(video_info) }}
-            {% endfor %}
-        </div>
-        <nav class="page-button-row">
-            {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlists/' + playlist_name, parameters_dictionary) }}
-        </nav>
     </div>
+    <div id="results">
+        {% for video_info in videos %}
+            {{ common_elements.item(video_info) }}
+        {% endfor %}
+    </div>
+    <nav class="page-button-row">
+        {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlists/' + playlist_name, parameters_dictionary) }}
+    </nav>
 {% endblock main %}
diff --git a/youtube/templates/login.html b/youtube/templates/login.html
index 0f09a62..156bc01 100644
--- a/youtube/templates/login.html
+++ b/youtube/templates/login.html
@@ -2,16 +2,12 @@
 {% extends "base.html" %}
 
 {% block style %}
-    main{
-        display: grid;
-        grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
-        align-content: start;
-        grid-row-gap: 40px;
+    main > * {
+        width: 640px;
+        margin: auto;
     }
-
     main form{
         margin-top:20px;
-        grid-column:2;
         display:grid;
         justify-items: start;
         align-content: start;
@@ -26,10 +22,9 @@
         margin-top:20px;
     }
     #tor-note{
-        grid-row:2;
-        grid-column:2;
         background-color: #dddddd;
         padding: 10px;
+        margin-top: 40px;
     }
 {% endblock style %}
 
diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html
index 371b51b..ab2640f 100644
--- a/youtube/templates/playlist.html
+++ b/youtube/templates/playlist.html
@@ -2,72 +2,45 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-    main{
-        display:grid;
-        grid-template-columns: 3fr 1fr;
+    main > * {
+        width: 800px;
+        margin:auto;
     }
-
-
         
-    #left{
-        grid-column: 1;
-        grid-row: 1;
-        
-        display: grid;
-        grid-template-columns: 1fr 800px;
-        grid-template-rows: 0fr 1fr 0fr;
+    .playlist-metadata{
+        display:grid;
+        grid-template-columns: 0fr 1fr;
     }
-        .playlist-metadata{
+        .playlist-thumbnail{
+            grid-row: 1 / span 5;
+            grid-column:1;
+            justify-self:start;
+            width:250px;
+            margin-right: 10px;
+        }
+        .playlist-title{
+            grid-row: 1;
+            grid-column:2;
+        }
+        .playlist-author{
+            grid-row:2;
             grid-column:2;
-            grid-row:1;
-
-            display:grid;
-            grid-template-columns: 0fr 1fr;
         }
-            .playlist-thumbnail{
-                grid-row: 1 / span 5;
-                grid-column:1;
-                justify-self:start;
-                width:250px;
-                margin-right: 10px;
-            }
-            .playlist-title{
-                grid-row: 1;
-                grid-column:2;
-            }
-            .playlist-author{
-                grid-row:2;
-                grid-column:2;
-            }
-            .playlist-stats{
-                grid-row:3;
-                grid-column:2;
-            }
-            
-            .playlist-description{
-                grid-row:4;
-                grid-column:2;
-                min-width:0px;
-                white-space: pre-line;
-            }
-        .page-button-row{
-            grid-row: 3;
-            grid-column: 2;
-            justify-self: center;
+        .playlist-stats{
+            grid-row:3;
+            grid-column:2;
+        }
+
+        .playlist-description{
+            grid-row:4;
+            grid-column:2;
+            min-width:0px;
+            white-space: pre-line;
         }
-    
-    
-    #right{
-        grid-column: 2;
-        grid-row: 1;
 
-    }
     #results{
-        
-        grid-row: 2;
-        grid-column: 2;
         margin-top:10px;
-        
+
         display: grid;
         grid-auto-rows: 0fr;
         grid-row-gap: 10px;
@@ -76,27 +49,25 @@
 {% endblock style %}
 
 {% block main %}
-    <div id="left">
-        <div class="playlist-metadata">
-            <img class="playlist-thumbnail" src="{{ thumbnail }}">
-            <h2 class="playlist-title">{{ title }}</h2>
-            <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
-            <div class="playlist-stats">
-                <div>{{ views }}</div>
-                <div>{{ size }}</div>
-            </div>
-            <div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
+    <div class="playlist-metadata">
+        <img class="playlist-thumbnail" src="{{ thumbnail }}">
+        <h2 class="playlist-title">{{ title }}</h2>
+        <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
+        <div class="playlist-stats">
+            <div>{{ views }}</div>
+            <div>{{ size }}</div>
         </div>
+        <div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
+    </div>
 
-        <div id="results">          
-            {% for info in video_list %}
-                {{ common_elements.item(info) }}
-            {% endfor %}
-        </div>
-        <nav class="page-button-row">
-            {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
-        </nav>
+    <div id="results">          
+        {% for info in video_list %}
+            {{ common_elements.item(info) }}
+        {% endfor %}
     </div>
+    <nav class="page-button-row">
+        {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
+    </nav>
 {% endblock main %}
 
 
diff --git a/youtube/templates/post_comment.html b/youtube/templates/post_comment.html
index 67c54f1..ba6a22c 100644
--- a/youtube/templates/post_comment.html
+++ b/youtube/templates/post_comment.html
@@ -3,27 +3,18 @@
 {% import "comments.html" as comments %}
 
 {% block style %}
-    main{
-        display: grid;
-        grid-template-columns: 3fr 2fr;
-    }
-    .left{
-        display:grid;
-        grid-template-columns: 1fr 640px;
-    }
-    textarea{
-        width: 460px;
-        height: 85px;
-    }
     .comment-form{
-        grid-column:2;
+        width: 640px;
+        margin: auto;
         justify-content:start;
     }
+        textarea{
+            width: 460px;
+            height: 85px;
+        }
 {% endblock style %}
 
 {% block main %}
-    <div class="left">
-        {{ comments.comment_posting_box(comment_posting_box_info) }}
-    </div>
+    {{ comments.comment_posting_box(comment_posting_box_info) }}
 {% endblock %}
 
diff --git a/youtube/templates/search.html b/youtube/templates/search.html
index f429da0..63f930e 100644
--- a/youtube/templates/search.html
+++ b/youtube/templates/search.html
@@ -3,31 +3,19 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-            main{
-                display:grid;
-                grid-template-columns: minmax(0px, 1fr) 800px minmax(0px,2fr);
-                max-width:100vw;
-            }
-                
-
+    main > * {
+        max-width: 800px;
+        margin: auto;
+    }
+        #result-info{
+        }
             #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;
-            }
-
-
-            .item-list{
-                grid-row: 2;
-                grid-column: 2;
-            }
+        .item-list{
+            padding-left: 10px;
+            padding-right: 10px;
+        }
             .badge{
                 background-color:#cccccc;
             }