diff --git a/assets/css/common/mixins.css b/assets/css/common/mixins.css index e71f3d65..880dcccd 100644 --- a/assets/css/common/mixins.css +++ b/assets/css/common/mixins.css @@ -58,9 +58,3 @@ color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease; } - -@define-mixin subgrid { - display: grid; - grid-template-columns: 1 / -1; - grid-gap: inherit; -} diff --git a/assets/css/elements/base.css b/assets/css/elements/base.css index 45bcc288..445a0a32 100644 --- a/assets/css/elements/base.css +++ b/assets/css/elements/base.css @@ -74,3 +74,12 @@ p, padding-right: var(--padding-normal); } } + +/* Apparently this is necessary for dropdowns because + we can't have subgrids yet, and subgrids aren't really + polyfillable for any pre-late-2023 browsers. Ugh! */ + +.icon--fixed { + width: 1em; + padding: var(--padding-small); +} diff --git a/assets/css/elements/dropdown.css b/assets/css/elements/dropdown.css index 1600753a..c7cb8f6a 100644 --- a/assets/css/elements/dropdown.css +++ b/assets/css/elements/dropdown.css @@ -6,6 +6,7 @@ .dropdown__content { background: var(--primary-muted-color); border: 1px solid var(--primary-border-color); + border-radius: var(--border-radius-inner); position: absolute; display: none; top: 100%; @@ -13,13 +14,13 @@ } .dropdown:hover .dropdown__content { - display: block; + display: grid; min-width: 100%; z-index: 999; + overflow: hidden; } .dropdown__content > :not(.hidden) { - display: block; white-space: nowrap; } @@ -31,7 +32,7 @@ .dropdown__item { display: grid; grid-template-columns: auto 1fr; - color: var(--text-color); + color: var(--text-color) !important; } .dropdown__text { @@ -41,18 +42,22 @@ } .dropdown__item:hover .dropdown__text { - background: var(--primary-dark-color); + background: var(--primary-color); } .dropdown__icon { padding: 0 var(--padding-small); background: var(--primary-dark-color); - border-right: 1px solid var(--primary-muted-color); +} + +.dropdown__item:hover .dropdown__icon { + background: var(--primary-color); } .dropdown__separator { margin: 0; - border-color: var(--primary-border-color); + border: 1px solid var(--primary-border-color); + border-top: 0; } .dropdown__link { @@ -61,5 +66,5 @@ } .dropdown__link:hover { - background: var(--primary-dark-color); + background: var(--primary-color); } diff --git a/assets/css/views/header.css b/assets/css/views/header.css index ea11c4d5..b681c4f2 100644 --- a/assets/css/views/header.css +++ b/assets/css/views/header.css @@ -8,9 +8,15 @@ header { } .header__link { + @mixin animated-transition; color: var(--text-color) !important; } +.header__link:hover { + @mixin animated-transition; + color: var(--primary-link-color) !important; +} + .header__link--user { display: flex; align-items: center; @@ -80,6 +86,10 @@ nav.header__secondary .header__link { color: var(--text-light-color) !important; } +nav.header__secondary .header__link:hover { + color: var(--primary-link-color) !important; +} + nav.dropdown__content { line-height: var(--navbar-secondary-size); } diff --git a/lib/philomena_web/templates/layout/_header.html.slime b/lib/philomena_web/templates/layout/_header.html.slime index b001cad6..b88d7295 100644 --- a/lib/philomena_web/templates/layout/_header.html.slime +++ b/lib/philomena_web/templates/layout/_header.html.slime @@ -56,75 +56,62 @@ header = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @current_user}, class: "avatar--navbar" i.fa.fa-chevron-down nav.dropdown__content.dropdown__content--right.hidden--mobile.js-burger-links - a href=Routes.profile_path(@conn, :show, @current_user) - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-user - .dropdown__text - = @current_user.name + a.dropdown__item href=Routes.profile_path(@conn, :show, @current_user) + .dropdown__icon + i.fa.icon--fixed.fa-user + .dropdown__text + = @current_user.name hr.dropdown__separator - a href="/search?q=my:watched" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-eye - .dropdown__text Watched - a href="/search?q=my:faves" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-star - .dropdown__text Faves - a href="/search?q=my:upvotes" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-arrow-up - .dropdown__text Upvotes - a href=Routes.gallery_path(@conn, :index, gallery: [creator: @current_user.name]) - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-image - .dropdown__text Galleries - a href="/search?q=my:uploads" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-upload - .dropdown__text Uploads - a href="/comments?cq=my:comments" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-comments - .dropdown__text Comments - a href="/posts?pq=my:posts" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-pen-square - .dropdown__text Posts - a href=Routes.profile_artist_link_path(@conn, :index, @current_user) - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-link - .dropdown__text Links - a href="/conversations" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-envelope - .dropdown__text Messages + a.dropdown__item href="/search?q=my:watched" + .dropdown__icon + i.fa.icon--fixed.fa-eye + .dropdown__text Watched + a.dropdown__item href="/search?q=my:faves" + .dropdown__icon + i.fa.icon--fixed.fa-star + .dropdown__text Faves + a.dropdown__item href="/search?q=my:upvotes" + .dropdown__icon + i.fa.icon--fixed.fa-arrow-up + .dropdown__text Upvotes + a.dropdown__item href=Routes.gallery_path(@conn, :index, gallery: [creator: @current_user.name]) + .dropdown__icon + i.fa.icon--fixed.fa-image + .dropdown__text Galleries + a.dropdown__item href="/search?q=my:uploads" + .dropdown__icon + i.fa.icon--fixed.fa-upload + .dropdown__text Uploads + a.dropdown__item href="/comments?cq=my:comments" + .dropdown__icon + i.fa.icon--fixed.fa-comments + .dropdown__text Comments + a.dropdown__item href="/posts?pq=my:posts" + .dropdown__icon + i.fa.icon--fixed.fa-pen-square + .dropdown__text Posts + a.dropdown__item href=Routes.profile_artist_link_path(@conn, :index, @current_user) + .dropdown__icon + i.fa.icon--fixed.fa-link + .dropdown__text Links + a.dropdown__item href="/conversations" + .dropdown__icon + i.fa.icon--fixed.fa-envelope + .dropdown__text Messages hr.dropdown__separator - a href="/settings/edit" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-cogs - .dropdown__text Settings - a href=Routes.registration_path(@conn, :edit) - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-user - .dropdown__text Account + a.dropdown__item href="/settings/edit" + .dropdown__icon + i.fa.icon--fixed.fa-cogs + .dropdown__text Settings + a.dropdown__item href=Routes.registration_path(@conn, :edit) + .dropdown__icon + i.fa.icon--fixed.fa-user + .dropdown__text Account hr.dropdown__separator - a href=Routes.session_path(@conn, :delete) data-method="delete" - .dropdown__item - .dropdown__icon - i.fa.icon--padded.small.fa-sign-out-alt - .dropdown__text Logout + a.dropdown__item href=Routes.session_path(@conn, :delete) data-method="delete" + .dropdown__icon + i.fa.icon--fixed.fa-sign-out-alt + .dropdown__text Logout - else a.header__link.hidden--mobile href="/filters" | Filters ( @@ -132,7 +119,7 @@ header | ) span.js-burger-links.hidden--mobile a.header__link href="/settings/edit" - i.fa.icon--padded.small.fa-cogs.hidden--desktop> + i.fa.icon--fixed.fa-cogs.hidden--desktop> | Settings a.header__link href=Routes.registration_path(@conn, :new) | Register