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

media assets: refactor media asset component.

Browse Source
This commit is contained in:
evazion
2022-12-09 15:17:45 -06:00
parent f3a1b42d10
commit aefa7586fd
5 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/media_asset_component/media_asset_component.html.erb
View File

@@ -1,7 +1,7 @@
<div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
<div class="media-asset-component media-asset-component-fit-height media-asset-component-fit-width flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
<%= header %>
<div class="media-asset-component relative max-h-inherit overflow-hidden <%= inner_classes %>">
<div class="media-asset-container relative max-h-inherit overflow-hidden <%= inner_classes %>">
<div class="media-asset-zoom-level hidden absolute top-0.5 left-0.5 p-1 m-0.5 leading-none rounded text-xs font-arial font-bold pointer-events-none transition-opacity">
100%
</div>

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

@@ -1,4 +1,4 @@
.media-asset-component:not(:hover) .media-asset-zoom-level {
.media-asset-container:not(:hover) .media-asset-zoom-level {
opacity: 0;
}
@@ -7,8 +7,8 @@
background: var(--preview-icon-background);
}
.media-asset-container {
&:not(.media-asset-container-fit-height) .paginator {
.media-asset-component {
&:not(.media-asset-component-fit-height) .paginator {
position: sticky;
}
@@ -37,19 +37,24 @@
.media-asset-image {
user-select: none;
width: auto;
height: auto;
max-width: 100%;
max-height: inherit;
}
&.media-asset-container-fit-height {
&.media-asset-component-fit-height {
max-height: calc(100vh - var(--header-visible-height));
justify-content: center;
.media-asset-component {
.media-asset-container {
aspect-ratio: var(--media-asset-width) / var(--media-asset-height);
height: max-content;
height: intrinsic; // XXX Safari-only hack to make images correct height on upload page. I have no idea how this works.
}
}
&.media-asset-component-fit-width {
.media-asset-image {
height: auto;
max-width: 100%;
}
}
}