Change general design theme

1 files changed, 32 insertions, 111 deletions

diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index dddbff1..25b0971 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -7,114 +7,30 @@
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
-    main{
-        display:grid;
-{% if current_tab == 'about' %}
-        grid-template-rows: 0fr 0fr 1fr;
-        grid-template-columns: 0fr 1fr;
-{% else %}
-        grid-template-rows: repeat(5, 0fr);
-        grid-template-columns: auto 1fr;
-{% endif %}
-    }
-        main .avatar{
-            grid-row:1;
-            grid-column:1;
-            height:200px;
-            width:200px;
-        }
-        main .summary{
-            grid-row:1;
-            grid-column:2;
-            margin-left: 5px;
-        }
-            .summary subscribe-unsubscribe, .summary short-description{
-                margin-top: 10px;
-            }
-        main .channel-tabs{
-            grid-row:2;
-            grid-column: 1 / span 2;
-
-            display:grid;
-            grid-auto-flow: column;
-            justify-content:start;
-
-            background-color: var(--interface-color);
-            padding: 3px;
-            padding-left: 6px;
-        }
-        #links-metadata{
-            display: grid;
-            grid-auto-flow: column;
-            grid-column-gap: 10px;
-            grid-column: 1/span 2;
-            justify-content: start;
-            padding-top: 8px;
-            padding-bottom: 8px;
-            padding-left: 6px;
-            margin-bottom: 10px;
-        }
-            #number-of-results{
-                font-weight:bold;
-            }
-        .content{
-            grid-row: 4;
-            grid-column: 1 / span 2;
-        }
-        .search-content{
-            width: 800px;
-            margin-left: 10px;
-        }
-            .item-grid{
-                padding-left: 20px;
-            }
-            .item-list{
-                width:800px;
-                margin: auto;
-            }
-            .page-button-row{
-                margin-left: auto;
-                margin-right: auto;
-            }
-            .next-previous-button-row{
-                margin-left: auto;
-                margin-right: auto;
-            }
-        .tab{
-            padding: 5px 75px;
-        }
-        .channel-info{
-            grid-row: 3;
-            grid-column: 1 / span 3;
-        }
-        .channel-info ul{
-            padding-left: 40px;
-        }
-        .channel-info h3{
-            margin-left: 40px;
-        }
-        .channel-info .description{
-            white-space: pre-wrap;
-            min-width: 0;
-            margin-left: 40px;
-        }
-        .medium-item img{
-            max-width: 168px;
-        }
+    <link href="/youtube.com/static/channel.css" rel="stylesheet">
 {% endblock style %}
 
 {% block main %}
-    <img class="avatar" src="{{ avatar }}">
-    <div class="summary">
-        <h2 class="title">{{ channel_name }}</h2>
-        <p class="short-description">{{ short_description }}</p>
-        <form method="POST" action="/youtube.com/subscriptions" class="subscribe-unsubscribe">
-            <input type="submit" value="{{ 'Unsubscribe' if subscribed else 'Subscribe' }}">
-            <input type="hidden" name="channel_id" value="{{ channel_id }}">
-            <input type="hidden" name="channel_name" value="{{ channel_name }}">
-            <input type="hidden" name="action" value="{{ 'unsubscribe' if subscribed else 'subscribe' }}">
-        </form>
+
+    <div class="author-container">
+        <div class="author">
+            <img alt="{{ channel_name }}" src="{{ avatar }}"/>
+            <h2>{{ channel_name }}</h2>
+        </div>
+        <div class="summary">
+            <p>{{ short_description }}</p>
+        </div>
+        <div class="subscribe">
+            <form method="POST" action="/youtube.com/subscriptions" class="subscribe-unsubscribe">
+                <input class="btn-subscribe" type="submit" value="{{ 'Unsubscribe' if subscribed else 'Subscribe' }}">
+                <input type="hidden" name="channel_id" value="{{ channel_id }}">
+                <input type="hidden" name="channel_name" value="{{ channel_name }}">
+                <input type="hidden" name="action" value="{{ 'unsubscribe' if subscribed else 'subscribe' }}">
+            </form>
+        </div>
     </div>
+    <hr/>
+
     <nav class="channel-tabs">
         {% for tab_name in ('Videos', 'Playlists', 'About') %}
             {% if tab_name.lower() == current_tab %}
@@ -153,8 +69,9 @@
             </ul>
         </div>
     {% else %}
-        <div class="content {{ current_tab + '-content'}}">
-            <div id="links-metadata">
+
+        <!-- new-->
+        <div id="links-metadata">
                 {% if current_tab == 'videos' %}
                     {% set sorts = [('1', 'views'), ('2', 'oldest'), ('3', 'newest')] %}
                     <div id="number-of-results">{{ number_of_videos }} videos</div>
@@ -177,16 +94,18 @@
                         <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a>
                     {% endif %}
                 {% endfor %}
-            </div>
+        </div>
 
-            <nav class="{{ 'item-list' if current_tab == 'search' else 'item-grid' }}">
+        <div class="video-container {{ current_tab + '-content'}}">
                 {% for item_info in items %}
                     {{ common_elements.item(item_info, include_author=false) }}
                 {% endfor %}
-            </nav>
+        </div>
+        <hr/>
 
+        <footer class="pagination-container">
             {% if current_tab == 'videos' %}
-                <nav class="page-button-row">
+                <nav class="pagination-list">
                     {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary) }}
                 </nav>
             {% elif current_tab == 'search' %}
@@ -194,6 +113,8 @@
                     {{ common_elements.next_previous_buttons(is_last_page, channel_url + '/' + current_tab, parameters_dictionary) }}
                 </nav>
             {% endif %}
-        </div>
+        </footer>
+        <!-- /new-->
     {% endif %}
+
 {% endblock main %}