Rework UI to have vertical menus

6 files changed, 60 insertions, 92 deletions

diff --git a/templates/activities/_home_menu.html b/templates/activities/_home_menu.html
index c88a1d7..db441a2 100644
--- a/templates/activities/_home_menu.html
+++ b/templates/activities/_home_menu.html
@@ -1,6 +1,27 @@
 <nav>
-    <a href="/" {% if current_page == "home" %}class="selected"{% endif %}>Home</a>
-    <a href="/notifications/" {% if current_page == "notifications" %}class="selected"{% endif %}>Notifications</a>
-    <a href="/local/" {% if current_page == "local" %}class="selected"{% endif %}>Local</a>
-    <a href="/federated/" {% if current_page == "federated" %}class="selected"{% endif %}>Federated</a>
+    <a href="/" {% if current_page == "home" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-home"></i> Home
+    </a>
+    <a href="/notifications/" {% if current_page == "notifications" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-at"></i> Notifications
+    </a>
+    <a href="/local/" {% if current_page == "local" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-city"></i> Local
+    </a>
+    <a href="/federated/" {% if current_page == "federated" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-globe"></i> Federated
+    </a>
 </nav>
+
+{% if current_page == "home" %}
+    <h2>Compose</h2>
+    <form action="/compose/" method="POST" class="compose">
+        {% csrf_token %}
+        {{ form.text }}
+        {{ form.content_warning }}
+        <div class="buttons">
+            <span class="button toggle" _="on click toggle .enabled then toggle .hidden on #id_content_warning">CW</span>
+            <button>{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
+        </div>
+    </form>
+{% endif %}
diff --git a/templates/activities/compose.html b/templates/activities/compose.html
index dfa6d1e..55b4eb3 100644
--- a/templates/activities/compose.html
+++ b/templates/activities/compose.html
@@ -3,15 +3,14 @@
 {% block title %}Compose{% endblock %}
 
 {% block content %}
-    <nav>
-        <a href="." class="selected">Compose</a>
-    </nav>
-
     <form action="." method="POST">
         {% csrf_token %}
-        {% for field in form %}
-            {% include "forms/_field.html" %}
-        {% endfor %}
+        <fieldset>
+            <legend>Content</legend>
+            {% include "forms/_field.html" with field=form.text %}
+            {% include "forms/_field.html" with field=form.content_warning %}
+            {% include "forms/_field.html" with field=form.visibility %}
+        </fieldset>
         <div class="buttons">
             <button>{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
         </div>
diff --git a/templates/activities/federated.html b/templates/activities/federated.html
index b6143c3..4b57b9d 100644
--- a/templates/activities/federated.html
+++ b/templates/activities/federated.html
@@ -3,19 +3,9 @@
 {% block title %}Federated Timeline{% endblock %}
 
 {% block content %}
-    {% include "activities/_home_menu.html" %}
-
-    <section class="columns">
-        <div class="left-column">
-            {% for post in posts %}
-                {% include "activities/_post.html" %}
-            {% empty %}
-                No posts yet.
-            {% endfor %}
-        </div>
-        <div class="right-column">
-            <h2>?</h2>
-        </div>
-
-    </section>
+    {% for post in posts %}
+        {% include "activities/_post.html" %}
+    {% empty %}
+        No posts yet.
+    {% endfor %}
 {% endblock %}
diff --git a/templates/activities/home.html b/templates/activities/home.html
index 08e338e..5171842 100644
--- a/templates/activities/home.html
+++ b/templates/activities/home.html
@@ -3,39 +3,18 @@
 {% block title %}Home{% endblock %}
 
 {% block content %}
-    {% include "activities/_home_menu.html" %}
-
-    <section class="columns">
-
-        <div class="left-column">
-            {% for event in events %}
-                {% if event.type == "post" %}
-                    {% include "activities/_post.html" with post=event.subject_post %}
-                {% elif event.type == "boost" %}
-                    <div class="boost-banner">
-                        <a href="{{ event.subject_identity.urls.view }}">
-                            {{ event.subject_identity.name_or_handle }}
-                        </a> boosted
-                    </div>
-                    {% include "activities/_post.html" with post=event.subject_post %}
-                {% endif %}
-            {% empty %}
-                Nothing to show yet.
-            {% endfor %}
-        </div>
-
-        <div class="right-column">
-            <h2>Compose</h2>
-            <form action="/compose/" method="POST" class="compose">
-                {% csrf_token %}
-                {{ form.text }}
-                {{ form.content_warning }}
-                <div class="buttons">
-                    <span class="button toggle" _="on click toggle .enabled then toggle .hidden on #id_content_warning">CW</span>
-                    <button>{% if config_identity.toot_mode %}Toot!{% else %}Post{% endif %}</button>
-                </div>
-            </form>
-        </div>
-
-    </section>
+    {% for event in events %}
+        {% if event.type == "post" %}
+            {% include "activities/_post.html" with post=event.subject_post %}
+        {% elif event.type == "boost" %}
+            <div class="boost-banner">
+                <a href="{{ event.subject_identity.urls.view }}">
+                    {{ event.subject_identity.name_or_handle }}
+                </a> boosted
+            </div>
+            {% include "activities/_post.html" with post=event.subject_post %}
+        {% endif %}
+    {% empty %}
+        Nothing to show yet.
+    {% endfor %}
 {% endblock %}
diff --git a/templates/activities/local.html b/templates/activities/local.html
index 520a0ce..79ce9a3 100644
--- a/templates/activities/local.html
+++ b/templates/activities/local.html
@@ -3,19 +3,9 @@
 {% block title %}Local Timeline{% endblock %}
 
 {% block content %}
-    {% include "activities/_home_menu.html" %}
-
-    <section class="columns">
-        <div class="left-column">
-            {% for post in posts %}
-                {% include "activities/_post.html" %}
-            {% empty %}
-                No posts yet.
-            {% endfor %}
-        </div>
-        <div class="right-column">
-            <h2>?</h2>
-        </div>
-
-    </section>
+    {% for post in posts %}
+        {% include "activities/_post.html" %}
+    {% empty %}
+        No posts yet.
+    {% endfor %}
 {% endblock %}
diff --git a/templates/activities/notifications.html b/templates/activities/notifications.html
index c071a49..9bf66bb 100644
--- a/templates/activities/notifications.html
+++ b/templates/activities/notifications.html
@@ -3,20 +3,9 @@
 {% block title %}Notifications{% endblock %}
 
 {% block content %}
-    {% include "activities/_home_menu.html" %}
-
-    <section class="columns">
-        <div class="left-column">
-            {% for event in events %}
-                {% include "activities/_event.html" %}
-            {% empty %}
-                No events yet.
-            {% endfor %}
-        </div>
-
-        <div class="right-column">
-            <h2>?</h2>
-        </div>
-
-    </section>
+    {% for event in events %}
+        {% include "activities/_event.html" %}
+    {% empty %}
+        No events yet.
+    {% endfor %}
 {% endblock %}