Layout: refactor item system to be more maintainable, add vertical item type

3 files changed, 38 insertions, 109 deletions

diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html
index 49e2fad..b9ceafa 100644
--- a/youtube/templates/common_elements.html
+++ b/youtube/templates/common_elements.html
@@ -14,121 +14,53 @@
     {%- endif -%}
 {% endmacro %}
 
-{% macro small_item(info, include_author=true) %}
-    <div class="small-item-box">
-        <div class="small-item">
-            {% if info['type'] == 'video' %}
-                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
-                    <span class="video-duration">{{ info['duration'] }}</span>
-                </a>
-                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
-                
-                <address>{{ info['author'] }}</address>
-                <span class="views">{{ info['views'] }}</span>
-
-            {% elif info['type'] == 'playlist' %}
-                <a class="playlist-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="playlist-thumbnail-img" src="{{ info['thumbnail'] }}">
-                    <div class="playlist-thumbnail-info">
-                        <span>{{ info['size'] }}</span>
+{% macro item(info, description=false, horizontal=true, include_author=true) %}
+    <div class="item-box {{ info['type'] + '-item-box' }} {{'horizontal-item-box' if horizontal else 'vertical-item-box'}} {{'has-description' if description else 'no-description'}}">
+        <div class="item {{ info['type'] + '-item' }}">
+            <a class="thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
+                <img class="thumbnail-img" src="{{ info['thumbnail'] }}">
+                {% if info['type'] != 'channel' %}
+                    <div class="thumbnail-info">
+                        <span>{{ info['size'] if info['type'] == 'playlist' else info['duration'] }}</span>
                     </div>
-                </a>
-                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
-                
-                <address>{{ info['author'] }}</address>
-            {% else %}
-                Error: unsupported item type
-            {% endif %}
-        </div>
-        {% if info['type'] == 'video' %}
-            <input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
-        {% endif %}
-    </div>
-{% endmacro %}
-
-{% macro get_stats(info, include_author=true) %}
-    {% if include_author %}
-        {% if 'author_url' is in(info) %}
-            <address>By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address>
-        {% else %}
-            <address><b>{{ info['author'] }}</b></address>
-        {% endif %}
-    {% endif %}
-    {% if 'views' is in(info) %}
-        <span class="views">{{ info['views'] }}</span>
-    {% endif %}
-    {% if 'published' is in(info) %}
-        <time>{{ info['published'] }}</time>
-    {% endif %}
-{% endmacro %}
-
-
-
-{% macro medium_item(info, include_author=true) %}
-    <div class="medium-item-box">
-        <div class="medium-item">
-            {% if info['type'] == 'video' %}
-                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
-                    <span class="video-duration">{{ info['duration'] }}</span>
-                </a>
-
-                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
-                
-                <div class="stats">
-                    {{ get_stats(info, include_author) }}
-                </div>
-
+                {% endif %}
+            </a>
+
+            <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
+
+            <ul class="stats {{'vertical-stats' if horizontal and not description and include_author else 'horizontal-stats'}}">
+                {% if info['type'] == 'channel' %}
+                    <li><span>{{ info['subscriber_count'] }} subscribers</span></li>
+                    <li><span>{{ info['size'] }} videos</span></li>
+                {% else %}
+                    {% if include_author %}
+                        {% if 'author_url' is in(info) %}
+                            <li><address>By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address></li>
+                        {% else %}
+                            <li><address><b>{{ info['author'] }}</b></address></li>
+                        {% endif %}
+                    {% endif %}
+                    {% if 'views' is in(info) %}
+                        <li><span class="views">{{ info['views'] }}</span></li>
+                    {% endif %}
+                    {% if 'published' is in(info) %}
+                        <li><time>{{ info['published'] }}</time></li>
+                    {% endif %}
+                {% endif %}
+            </ul>
+
+            {% if description %}
                 <span class="description">{{ text_runs(info.get('description', '')) }}</span>
-                <span class="badges">{{ info['badges']|join(' | ') }}</span>
-            {% elif info['type'] == 'playlist' %}
-                <a class="playlist-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="playlist-thumbnail-img" src="{{ info['thumbnail'] }}">
-                    <div class="playlist-thumbnail-info">
-                        <span>{{ info['size'] }}</span>
-                    </div>
-                </a>
-
-                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
-                
-                <div class="stats">
-                    {{ get_stats(info, include_author) }}
-                </div>
-            {% elif info['type'] == 'channel' %}
-                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
-                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
-                </a>
-
-                <a class="title" href="{{ info['url'] }}">{{ info['title'] }}</a>
-                
-                <span>{{ info['subscriber_count'] }} subscribers</span>
-                <span>{{ info['size'] }} videos</span>
-
-                <span class="description">{{ text_runs(info.get('description', '')) }}</span>
-            {% else %}
-                Error: unsupported item type
             {% endif %}
+            <span class="badges">{{ info['badges']|join(' | ') }}</span>
         </div>
         {% if info['type'] == 'video' %}
             <input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
         {% endif %}
     </div>
-{% endmacro %}
 
-
-{% macro item(info, include_author=true) %}
-    {% if info['item_size'] == 'small' %}
-        {{ small_item(info, include_author) }}
-    {% elif info['item_size'] == 'medium' %}
-        {{ medium_item(info, include_author) }}
-    {% else %}
-        Error: Unknown item size
-    {% endif %}
 {% endmacro %}
 
-
-
 {% macro page_buttons(estimated_pages, url, parameters_dictionary) %}
     {% set current_page = parameters_dictionary.get('page', 1)|int %}
     {% set parameters_dictionary = parameters_dictionary.to_dict() %}
diff --git a/youtube/templates/search.html b/youtube/templates/search.html
index 782a85e..f429da0 100644
--- a/youtube/templates/search.html
+++ b/youtube/templates/search.html
@@ -45,7 +45,7 @@
             </div>
             <div class="item-list">
                 {% for info in results %}
-                    {{ common_elements.item(info) }}
+                    {{ common_elements.item(info, description=true) }}
                 {% endfor %}
             </div>
             <nav class="page-button-row">
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 82c1a97..27f9e96 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -109,12 +109,9 @@
                 #related{
                     grid-column: 4;
                     display: grid;
-                    grid-auto-rows: 90px;
+                    grid-auto-rows: 94px;
                     grid-row-gap: 10px;
                 }
-                    #related .medium-item{
-                        grid-template-columns: 160px 1fr 0fr;
-                    }
 
             .download-dropdown{
                 z-index:1;