small layout refactor

mrmegatelo · Dec 6, 2024 · 1c8e6d7 · 1c8e6d7
1 parent 7627141
commit 1c8e6d7
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 36 deletions.
diff --git a/feed/templates/feed/base.html b/feed/templates/feed/base.html
@@ -60,15 +60,15 @@ <h3 class="heading">{% translate 'Feeds' noop %}:</h3>
                 {% include 'blocks/feed/feeds_full.html' %}
             </div>
         </div>
-        <div class="sidebar-block sidebar-block__sticky">
+        {% block sidebar_bottom %}
             <button class="button button--primary button--sm"
                     hx-target="#dialogs-root"
                     hx-get="{% url 'api_dialog_feed_new' %}"
             >
                 <span class="button__icon">{% include 'icons/plus_circle.svg' %}</span>
                 {% translate 'Add new source' noop %}
             </button>
-        </div>
+        {% endblock %}
     </div>
 {% endblock %}
 

diff --git a/feed/templates/layouts/base.html b/feed/templates/layouts/base.html
@@ -59,25 +59,9 @@
         </script>
     {% endif %}
 </head>
-<body class="root-container" hx-ext="morph">
-{#<header class="header subgrid spread">#}
-{#    <span class="cols-3">#}
-{##}
-{#    </span>#}
-{#    {% if user.is_authenticated %}#}
-{#        {% include 'blocks/header/authenticated.html' %}#}
-{#    {% else %}#}
-{#        {% include 'blocks/header/anonym.html' %}#}
-{#    {% endif %}#}
-{#</header>#}
+<body hx-ext="morph">
 {% block content %}
 {% endblock %}
-<footer class="spread">
-    <footer class="footer">
-        © {% now "Y" %} | thewalter.app by
-        <a href="https://www.linkedin.com/in/mivanov24/" target="_blank" class="link medium">Mikhail Ivanov</a>
-    </footer>
-</footer>
 <div id="dialogs-root"
 ></div>
 <script>

diff --git a/feed/templates/layouts/centered.html b/feed/templates/layouts/centered.html
@@ -1,7 +1,27 @@
 {% extends 'layouts/base.html' %}
-
+{% load static %}
 {% block content %}
-    <main class="spread v-full center landing-hero">
-        {% block main %}{% endblock %}
-    </main>
+    <body hx class="container">
+        <header class="header spread subgrid">
+        <span class="cols-3">
+            <a href="{% url 'index' %}">
+                <img width="200" src="{% static 'feed/img/logo.svg' %}"/>
+            </a>
+        </span>
+            {% if user.is_authenticated %}
+                {% include 'blocks/header/authenticated.html' %}
+            {% else %}
+                {% include 'blocks/header/anonym.html' %}
+            {% endif %}
+        </header>
+        <section class="spread center landing-hero">
+            {% block main %}{% endblock %}
+        </section>
+        <footer class="footer spread">
+            <small class="spread">
+                © {% now "Y" %} | thewalter.app by
+                <a href="https://www.linkedin.com/in/mivanov24/" target="_blank" class="link medium">Mikhail Ivanov</a>
+            </small>
+        </footer>
+    </body>
 {% endblock %}
diff --git a/feed/templates/layouts/with_sidebar.html b/feed/templates/layouts/with_sidebar.html
@@ -2,17 +2,28 @@
 {% load static %}
 
 {% block content %}
-    <aside id="sidebar" class="section sidebar">
-        <a class="sidebar-logo"
-           href="{% if user.is_authenticated %}{% url 'feed_index' %}{% else %}{% url 'index' %}{% endif %}">
-            <img src="{% static 'feed/img/logo.svg' %}" alt="thewalter.app" class="logo">
-        </a>
-        {% block sidebar %}{% endblock %}
-    </aside>
-    <section id="feed-list-section" class="section main">
-        {% block main %}{% endblock %}
-    </section>
-    <section id="detail-section" class="section">
-        {% block detail %}{% endblock %}
-    </section>
+    <main class="root-container">
+        <aside id="sidebar" class="section sidebar">
+            <a class="sidebar-logo"
+               href="{% if user.is_authenticated %}{% url 'feed_index' %}{% else %}{% url 'index' %}{% endif %}">
+                <img src="{% static 'feed/img/logo.svg' %}" alt="thewalter.app" class="logo">
+            </a>
+            {% block sidebar %}{% endblock %}
+            <footer class="sidebar-block sidebar-block__sticky">
+                {% block sidebar_bottom %}
+                {% endblock %}
+                <small>
+                    © {% now "Y" %} | thewalter.app
+                    {#                by#}
+                    {#                <a href="https://www.linkedin.com/in/mivanov24/" target="_blank" class="link medium">Mikhail Ivanov</a>#}
+                </small>
+            </footer>
+        </aside>
+        <section id="feed-list-section" class="section main">
+            {% block main %}{% endblock %}
+        </section>
+        <section id="detail-section" class="section">
+            {% block detail %}{% endblock %}
+        </section>
+    </main>
 {% endblock %}