From 2154e6f02252576d8652e66f26fa4ae635d0f8ee Mon Sep 17 00:00:00 2001 From: Andrew Godwin Date: Thu, 17 Nov 2022 17:43:00 -0700 Subject: Rework UI to have vertical menus --- activities/views/timelines.py | 6 +- core/models/config.py | 1 + static/css/style.css | 137 ++++++++++++++++++++++++++------ templates/activities/_home_menu.html | 29 ++++++- templates/activities/compose.html | 13 ++- templates/activities/federated.html | 20 ++--- templates/activities/home.html | 49 ++++-------- templates/activities/local.html | 20 ++--- templates/activities/notifications.html | 21 ++--- templates/admin/_menu.html | 6 -- templates/admin/domain_create.html | 20 ++--- templates/admin/domain_delete.html | 7 +- templates/admin/domain_edit.html | 19 +++-- templates/admin/domains.html | 7 +- templates/admin/identities.html | 15 ++-- templates/admin/settings.html | 18 ----- templates/admin/users.html | 15 ++-- templates/base.html | 21 +++-- templates/forms/_field.html | 25 +++--- templates/identity/_identity_menu.html | 5 -- templates/identity/_menu.html | 5 ++ templates/identity/base.html | 7 ++ templates/identity/create.html | 12 +-- templates/identity/select.html | 10 +-- templates/settings/_menu.html | 29 ++++++- templates/settings/base.html | 7 ++ templates/settings/profile.html | 22 ++--- templates/settings/settings.html | 16 ++-- users/views/admin.py | 10 ++- users/views/settings.py | 28 +++++-- 30 files changed, 349 insertions(+), 251 deletions(-) delete mode 100644 templates/admin/_menu.html delete mode 100644 templates/admin/settings.html delete mode 100644 templates/identity/_identity_menu.html create mode 100644 templates/identity/_menu.html create mode 100644 templates/identity/base.html create mode 100644 templates/settings/base.html diff --git a/activities/views/timelines.py b/activities/views/timelines.py index ae01a45..02afc2c 100644 --- a/activities/views/timelines.py +++ b/activities/views/timelines.py @@ -40,7 +40,7 @@ class Home(FormView): ) .select_related("subject_post", "subject_post__author") .prefetch_related("subject_post__attachments") - .order_by("-created")[:100] + .order_by("-created")[:50] ) context["interactions"] = PostInteraction.get_event_interactions( context["events"], self.request.identity @@ -68,7 +68,7 @@ class Local(TemplateView): Post.objects.filter(visibility=Post.Visibilities.public, author__local=True) .select_related("author") .prefetch_related("attachments") - .order_by("-created")[:100] + .order_by("-created")[:50] ) context["current_page"] = "local" return context @@ -85,7 +85,7 @@ class Federated(TemplateView): Post.objects.filter(visibility=Post.Visibilities.public) .select_related("author") .prefetch_related("attachments") - .order_by("-created")[:100] + .order_by("-created")[:50] ) context["current_page"] = "federated" return context diff --git a/core/models/config.py b/core/models/config.py index 8a2e40b..19ac85d 100644 --- a/core/models/config.py +++ b/core/models/config.py @@ -100,6 +100,7 @@ class Config(models.Model): site_name: str = "takahē" highlight_color: str = "#449c8c" + post_length: int = 500 identity_max_age: int = 24 * 60 * 60 class UserOptions(pydantic.BaseModel): diff --git a/static/css/style.css b/static/css/style.css index b3495b5..fba7f97 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -16,6 +16,7 @@ figure, blockquote, dl, dd, +fieldset, menu { margin: 0; padding: 0; @@ -166,6 +167,9 @@ header menu a.identity { border-right: 0; text-align: right; padding-right: 10px; + background: var(--color-bg-menu); + border-radius: 0 5px 0 0; + width: 250px; } header menu a i { @@ -188,26 +192,47 @@ header menu a small { } nav { - display: flex; - height: 40px; - background: var(--color-bg-menu); + padding: 10px 10px 20px 0; +} + +nav h3 { + text-transform: uppercase; + font-weight: bold; + font-size: 90%; + padding: 15px 18px 7px 16px; +} + +nav h3:first-child { + padding-top: 0; } nav a { display: block; color: var(--color-text-dull); - text-transform: uppercase; - font-weight: bold; - padding: 9px 18px 9px 18px; + padding: 7px 18px 7px 13px; + border-left: 3px solid transparent; } nav a.selected { color: var(--color-text-main); - border-bottom: 3px solid var(--color-highlight); + background: var(--color-bg-main); + border-radius: 0 5px 5px 0; } nav a:hover { color: var(--color-text-main); + border-left: 3px solid var(--color-highlight); +} + +nav a.selected:hover { + border-left: 3px solid transparent; +} + +nav a i { + width: 20px; + text-align: center; + margin-right: 4px; + display: inline-block; } /* Left-right columns */ @@ -225,6 +250,7 @@ nav a:hover { .right-column { width: 250px; background: var(--color-bg-menu); + border-radius: 0 0 5px 0; } .right-column h2 { @@ -237,22 +263,16 @@ nav a:hover { /* Icon menus */ -.icon-menu { - display: flex; - flex-wrap: wrap; - padding: 30px 0 0 30px; -} +.icon-menu {} .icon-menu>a { - margin: 0px 40px 40px 0; + display: block; + margin: 0px 0 20px 0; background: var(--color-bg-box); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); - width: 370px; - height: 100px; - line-height: 100px; color: inherit; text-decoration: none; - padding: 0 20px; + padding: 10px 20px; border: 2px solid rgba(255, 255, 255, 0); border-radius: 3px; } @@ -291,8 +311,21 @@ nav a:hover { /* Forms */ -form { - padding: 20px 40px 20px 30px; +fieldset { + border: 0; + background: var(--color-bg-box); + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); + margin: 25px 0 45px 0; + padding: 5px 15px; +} + +fieldset legend { + position: relative; + top: -15px; + left: -15px; + font-weight: bold; + text-transform: uppercase; + color: var(--color-text-dull); } .right-column form, @@ -316,10 +349,16 @@ form p { } form .field { - margin: 25px 0 25px 0; - background: var(--color-bg-box); - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); - padding: 10px 10px; + margin: 0 0 25px 0; + display: flex; +} + +form .field:last-of-type { + margin-bottom: 10px; +} + +form .field .label-input { + flex-grow: 1; } .right-column form .field { @@ -334,6 +373,7 @@ form label { text-transform: uppercase; font-size: 100%; font-weight: bold; + margin: 0 0 5px 0; } form label small { @@ -349,7 +389,7 @@ form label small { form .help { color: var(--color-text-dull); font-size: 90%; - margin: 2px 0 6px 0; + margin: -5px 0 5px 0; } form .errorlist { @@ -422,9 +462,16 @@ form input[type=submit]:hover { background: var(--color-button-main-hover); } +form img.preview { + max-height: 100%; + max-width: 100px; + margin: 0 0 0 20px; + align-self: center; +} + form .buttons { text-align: right; - margin: 25px 0 15px 0; + margin: -20px 0 15px 0; } .right-column form .buttons { @@ -459,6 +506,12 @@ form .button.toggle { background: var(--color-bg-main); } +form button.left, +form .button.left { + float: left; + margin: 0 5px 0 0; +} + form button.toggle.enabled, form .button.toggle.enabled { background: var(--color-highlight); @@ -661,3 +714,37 @@ h1.identity small { font-size: 20px; } } + + +@media (max-width: 700px) { + header menu a.identity { + width: 50px; + padding: 10px 10px 0 0; + } + + .right-column { + width: 50px; + } + + .right-column nav { + padding-right: 0; + } + + .right-column nav a { + font-size: 0; + padding: 10px 0 10px 10px; + } + + .right-column nav a i { + font-size: 22px; + } + + .right-column h3 { + visibility: hidden; + } + + .right-column h2, + .right-column .compose { + display: none; + } +} 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 @@ + +{% if current_page == "home" %} +
@@ -28,12 +25,17 @@ service domain.
{% csrf_token %} - {% for field in form %} - {% include "forms/_field.html" %} - {% endfor %} + +