From: Aidan Cornelius-Bell Date: Sun, 15 Dec 2024 22:27:03 +0000 (+1030) Subject: Added mobile navigation (collapsed nav) X-Git-Url: https://gitweb.mndrdr.org/?a=commitdiff_plain;h=e10032dbc748037f585f7781f1691f9b2baf6667;p=arelpe.git Added mobile navigation (collapsed nav) --- diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 8ff7dfb..ef1ed66 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -254,6 +254,10 @@ footer { max-width: 945px; } +footer { + padding-bottom: +50px; /* hacky overflow fix */ +} + .callout { color: var(--accent-b); } @@ -463,8 +467,9 @@ ul .pinned::before { } .filter-buttons { - margin: 20px 0; + margin: 20px auto auto; text-align: center; + max-width: 945px; } .filter-buttons .button { @@ -611,7 +616,11 @@ ul .post-item a:visited { } } -@media (max-width: 506px) { +.nav-toggle { + display: none; +} + +@media (max-width: 515px) { .container, footer { margin: 5px 10px -10px 5px; @@ -632,4 +641,46 @@ ul .post-item a:visited { .postmeta { max-width: 100%; } + + .button-bottomless:first-of-type { + margin-bottom: -4px; + } + + .nav-toggle { + display: flex; + width: 98%; + margin: auto; + align-items: center; + justify-content: space-between; + padding: 0.5rem 1rem; + margin-bottom: 0.5rem; + background-color: var(--filter-button); + color: var(--filter-button-text); + border: none; + border-radius: 0.25rem; + } + + .nav-toggle:hover { + background-color: var(--filter-button-hover); + } + + .filter-buttons { + display: none; + } + + .filter-buttons.expanded { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + + .filter-buttons .button { + width: 80%; + max-width: 75%; + text-align: center; + } + + .toggle-icon { + transition: transform 0.2s ease; + } } diff --git a/app/views/layouts/_navigation_buttons.html.erb b/app/views/layouts/_navigation_buttons.html.erb index 61956dc..caa8ddc 100644 --- a/app/views/layouts/_navigation_buttons.html.erb +++ b/app/views/layouts/_navigation_buttons.html.erb @@ -13,10 +13,36 @@ <% end %> <% if current_user&.admin? %> -
<%= link_to "Manage posts", posts_path, class: "button" %> <%= link_to "Manage pages", pages_path, class: "button" %> <%= link_to "Manage API keys", api_keys_path, class: "button" %> <%= link_to "Manage users", user_manager_index_path, class: "button" %> <% end %> + +