jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

media assets: fix paginator positioning on mobile.

Browse Source 
On the media assets show page, fix the styling and positioning of the paginator on mobile.
This commit is contained in:
evazion
2022-12-09 22:43:32 -06:00
parent 16c9e906b2
commit f0bd57af98
4 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/components/media_asset_component/media_asset_component.scss
View File

@@ -8,30 +8,49 @@
} }
.media-asset-component { .media-asset-component {
&:not(.media-asset-component-fit-height) .paginator { &:not(.media-asset-component-fit-height) .media-asset-paginator {
position: sticky; position: sticky;
top: calc((100vh + var(--header-visible-height) - var(--paginator-size)) / 2);
} }
&:hover { &:hover {
.paginator-prev, .paginator-next { .media-asset-paginator-prev, .media-asset-paginator-next {
opacity: 0.8; opacity: 0.4;
} }
} }
.paginator-prev, .paginator-next { .media-asset-paginator {
top: calc((100% - var(--paginator-size)) / 2);
height: 0;
--paginator-size: 32px;
font-size: var(--text-lg);
@media screen and (min-width: 660px) {
--paginator-size: 48px;
font-size: var(--text-xl);
}
}
.media-asset-paginator-prev, .media-asset-paginator-next {
opacity: 0; opacity: 0;
width: 48px; width: var(--paginator-size);
height: 96px; height: var(--paginator-size);
top: calc((100vh - var(--header-visible-height) - 96px) / 2); border-radius: var(--paginator-size);
transition: opacity 0.125s, background-color 0.125s; transition: opacity 0.125s, background-color 0.125s;
color: var(--asset-paginator-link-color); color: var(--asset-paginator-link-color);
background-color: var(--asset-paginator-background-color); background-color: var(--asset-paginator-background-color);
&:hover { &:hover {
opacity: 1;
color: var(--asset-paginator-link-hover-color); color: var(--asset-paginator-link-hover-color);
background-color: var(--asset-paginator-background-hover-color); background-color: var(--asset-paginator-background-hover-color);
} }
&:focus {
outline: none;
}
} }
.media-asset-image { .media-asset-image {

2
app/javascript/src/styles/base/040_colors.scss
View File

@@ -296,7 +296,7 @@ html, body[data-current-user-theme="light"] {
--asset-paginator-link-color: var(--link-color); --asset-paginator-link-color: var(--link-color);
--asset-paginator-link-hover-color: var(--link-color); --asset-paginator-link-hover-color: var(--link-color);
--asset-paginator-background-color: var(--white); --asset-paginator-background-color: var(--white);
--asset-paginator-background-hover-color: var(--blue-0); --asset-paginator-background-hover-color: var(--white);
--artist-tag-color: var(--red-6); --artist-tag-color: var(--red-6);
--artist-tag-hover-color: var(--red-5); --artist-tag-hover-color: var(--red-5);

2
app/javascript/src/styles/common/utilities.scss
View File

@@ -109,7 +109,9 @@ $spacer: 0.25rem; /* 4px */
.mx-auto { margin-left: auto; margin-right: auto; } .mx-auto { margin-left: auto; margin-right: auto; }
.mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; } .mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; }
.mx-1 { margin-left: 1 * $spacer; margin-right: 1 * $spacer; }
.mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; } .mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
.mx-4 { margin-left: 4 * $spacer; margin-right: 4 * $spacer; }
.mt-1 { margin-top: 1 * $spacer; } .mt-1 { margin-top: 1 * $spacer; }
.mt-2 { margin-top: 2 * $spacer; } .mt-2 { margin-top: 2 * $spacer; }

6
app/views/media_assets/show.html.erb
View File

@@ -4,9 +4,9 @@
<div class="flex-1 w-full min-w-0"> <div class="flex-1 w-full min-w-0">
<%= render MediaAssetComponent.new(media_asset: @media_asset, current_user: CurrentUser.user, outer_classes: "sticky h-full relative top-0", inner_classes: "mx-auto", dynamic_height: true, scroll_on_zoom: true) do |component| %> <%= render MediaAssetComponent.new(media_asset: @media_asset, current_user: CurrentUser.user, outer_classes: "sticky h-full relative top-0", inner_classes: "mx-auto", dynamic_height: true, scroll_on_zoom: true) do |component| %>
<% component.with_header do %> <% component.with_header do %>
<div class="paginator top-0 w-full z-10"> <div class="media-asset-paginator absolute flex justify-between top-0 w-full z-10">
<%= link_to chevron_left_icon, media_assets_path(search: { id: ">#{@media_asset.id}", order: "id_asc" }, limit: 1, redirect: true), class: "paginator-prev flex items-center justify-center text-xl absolute left-0 z-10", "data-shortcut": "a left" %> <%= link_to chevron_left_icon, media_assets_path(search: { id: ">#{@media_asset.id}", order: "id_asc" }, limit: 1, redirect: true), class: "media-asset-paginator-prev flex items-center justify-center z-10 mx-1", "data-shortcut": "a left" %>
<%= link_to chevron_right_icon, media_assets_path(search: { id: "<#{@media_asset.id}", order: "id_desc" }, limit: 1, redirect: true), class: "paginator-next flex items-center justify-center text-xl absolute right-0 z-10", "data-shortcut": "d right" %> <%= link_to chevron_right_icon, media_assets_path(search: { id: "<#{@media_asset.id}", order: "id_desc" }, limit: 1, redirect: true), class: "media-asset-paginator-next flex items-center justify-center z-10 mx-1", "data-shortcut": "d right" %>
</div> </div>
<% end %> <% end %>