Change general design theme

1 files changed, 31 insertions, 36 deletions

diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html
index 0587ce3..fcd4125 100644
--- a/youtube/templates/common_elements.html
+++ b/youtube/templates/common_elements.html
@@ -15,60 +15,55 @@
 {% endmacro %}
 
 {% macro item(info, description=false, horizontal=true, include_author=true, include_badges=true, lazy_load=false) %}
-    <div class="item-box {{ info['type'] + '-item-box' }} {{'horizontal-item-box' if horizontal else 'vertical-item-box'}} {{'has-description' if description else 'no-description'}}">
+    <article class="item-box">
         {% if info['error'] %}
             {{ info['error'] }}
         {% else %}
-            <div class="item {{ info['type'] + '-item' }}">
+            <div class="item-video {{ info['type'] + '-item' }}">
                 <a class="thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    {% if lazy_load %}
-                        <img class="thumbnail-img lazy" data-src="{{ info['thumbnail'] }}">
-                    {% else %}
-                        <img class="thumbnail-img" src="{{ info['thumbnail'] }}">
-                    {% endif %}
-                    {% if info['type'] != 'channel' %}
-                        <div class="thumbnail-info">
-                            <span>{{ (info['video_count']|commatize + ' videos') if info['type'] == 'playlist' else info['duration'] }}</span>
-                        </div>
-                    {% endif %}
-                </a>
+                    <div class="thumbnail {% if info['type'] == 'channel' %} channel {% endif %}">
+                        {% if lazy_load %}
+                            <img class="thumbnail-img lazy" alt="thumbnail" data-src="{{ info['thumbnail'] }}">
+                        {% elif info['type'] == 'channel' %}
+                            <img class="thumbnail-img channel" alt="thumbnail" src="{{ info['thumbnail'] }}">
+                        {% else %}
+                            <img class="thumbnail-img" alt="thumbnail" src="{{ info['thumbnail'] }}">
+                        {% endif %}
 
-                <div class="title"><a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a></div>
+                        {% if info['type'] != 'channel' %}
+                            <p class="length">{{ (info['video_count']|commatize + ' videos') if info['type'] == 'playlist' else info['duration'] }}</p>
+                        {% endif %}
+                    </div>
+                </a>
+                <h4 class="title"><a href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a></h4>
 
                 {% if include_author %}
                     {% if info.get('author_url') %}
-                        <address title="{{ info['author'] }}">By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address>
+                        <address title="{{ info['author'] }}"><b><a href="{{ info['author_url'] }}">{{ info['author'] }}</a></b></address>
                     {% else %}
                         <address title="{{ info['author'] }}"><b>{{ info['author'] }}</b></address>
                     {% endif %}
                 {% endif %}
-                <ul class="stats {{'horizontal-stats' if horizontal else 'vertical-stats'}}">
+
+                <div class="stats {{'horizontal-stats' if horizontal else 'vertical-stats'}}">
                     {% if info['type'] == 'channel' %}
-                        <li><span>{{ info['approx_subscriber_count'] }} subscribers</span></li>
-                        <li><span>{{ info['video_count']|commatize }} videos</span></li>
+                        <div>{{ info['approx_subscriber_count'] }} subscribers</div>
+                        <div>{{ info['video_count']|commatize }} videos</div>
                     {% else %}
-                        {% if info.get('approx_view_count') %}
-                            <li><span class="views">{{ info['approx_view_count'] }} views</span></li>
-                        {% endif %}
                         {% if info.get('time_published') %}
-                            <li><time>{{ info['time_published'] }}</time></li>
+                            <time>{{ info['time_published'] }}</time>
+                        {% endif %}
+                        {% if info.get('approx_view_count') %}
+                            <div class="views">{{ info['approx_view_count'] }} views</div>
                         {% endif %}
                     {% endif %}
-                </ul>
-
-                {% if description %}
-                    <span class="description">{{ text_runs(info.get('description', '')) }}</span>
-                {% endif %}
-                {% if include_badges %}
-                    <span class="badges">{{ info['badges']|join(' | ') }}</span>
-                {% endif %}
+                </div>
             </div>
             {% if info['type'] == 'video' %}
                 <input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
             {% endif %}
         {% endif %}
-    </div>
-
+    </article>
 {% endmacro %}
 
 {% macro page_buttons(estimated_pages, url, parameters_dictionary) %}
@@ -84,12 +79,12 @@
 
     {% for page in range(page_start, page_end+1) %}
         {% if page == current_page %}
-            <div class="page-button">{{ page }}</div>
+            <div class="page-link is-current">{{ page }}</div>
         {% else %}
             {# IMPORTANT: Jinja SUCKS #}
             {# https://stackoverflow.com/questions/36886650/how-to-add-a-new-entry-into-a-dictionary-object-while-using-jinja2 #}
             {% set _ = parameters_dictionary.__setitem__('page', page) %}
-            <a class="page-button" href="{{ url + '?' + parameters_dictionary|urlencode }}">{{ page }}</a>
+            <a class="page-link" href="{{ url + '?' + parameters_dictionary|urlencode }}">{{ page }}</a>
         {% endif %}
     {% endfor %}
 
@@ -101,11 +96,11 @@
 
     {% if current_page != 1 %}
             {% set _ = parameters_dictionary.__setitem__('page', current_page - 1) %}
-            <a class="page-button previous-page" href="{{ url + '?' + parameters_dictionary|urlencode }}">Previous page</a>
+            <a class="page-link previous-page" href="{{ url + '?' + parameters_dictionary|urlencode }}">Previous page</a>
     {% endif %}
 
     {% if not is_last_page %}
             {% set _ = parameters_dictionary.__setitem__('page', current_page + 1) %}
-            <a class="page-button next-page" href="{{ url + '?' + parameters_dictionary|urlencode }}">Next page</a>
+            <a class="page-link next-page" href="{{ url + '?' + parameters_dictionary|urlencode }}">Next page</a>
     {% endif %}
 {% endmacro %}