PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-27 13:47:58 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix dropdown

Browse source
This commit is contained in:
Luna D. 2024-05-20 23:57:10 +02:00
parent 9d04f2b43e
commit ab30673208
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
5 changed files with 85 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/css/common/mixins.css
View file

@ -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;
}

9
assets/css/elements/base.css
View file

@ -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);
}

19
assets/css/elements/dropdown.css
View file

@ -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);
}

10
assets/css/views/header.css
View file

@ -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);
}

121
lib/philomena_web/templates/layout/_header.html.slime
View file

@ -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