ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/posts: respect right side margin in original and height fit modes

Browse source 
Still not perfect for comment section and edit mode, but we should
really replace image resizing logic with css.
This commit is contained in:
Eva 2023-05-24 09:40:46 +02:00
parent 81416b6024
commit e2bdb5feab
2 changed files with 39 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
client/css/post-main-view.styl
View file

@ -15,38 +15,53 @@
border: 0 border: 0
outline: 0 outline: 0
nav.buttons >.sidebar>nav.buttons, >.content nav.buttons
margin-top: 0 margin-top: 0
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
article article
flex: 1 0 33% flex: 1 0 33%
a a
display: inline-block display: inline-block
width: 100% width: 100%
padding: 0.3em 0 padding: 0.3em 0
text-align: center
vertical-align: middle
transition: background 0.2s linear, box-shadow 0.2s linear
&:not(.inactive):hover
background: lighten($main-color, 90%)
i
font-size: 140%
text-align: center text-align: center
@media (max-width: 800px) vertical-align: middle
margin-top: 2em transition: background 0.2s linear, box-shadow 0.2s linear
&:not(.inactive):hover
background: lighten($main-color, 90%)
i
font-size: 140%
text-align: center
@media (max-width: 800px)
margin-top: 0.6em
margin-bottom: 0.6em
>.content >.content
width: 100% width: 100%
&[data-fit=fit-original] .after-mobile-controls, &[data-fit=fit-height] .after-mobile-controls
width: auto
margin-right: 1.5em
@media (max-width: 1000px)
margin-right: 1em
.post-container .post-container
margin-bottom: 2em margin-bottom: 0.6em
.post-content .post-content
margin: 0 margin: 0
background-size: cover
background-repeat: no-repeat
background-origin: content-box
padding-right: 1.5em
@media (max-width: 1000px)
padding-right: 1em
.after-mobile-controls
width: 100%
.darktheme .post-view .darktheme .post-view
>.sidebar >.sidebar, >.content
nav.buttons nav.buttons
article article
a:not(.inactive):hover a:not(.inactive):hover
@ -56,6 +71,8 @@
@media (max-width: 800px) @media (max-width: 800px)
.post-view .post-view
flex-wrap: wrap flex-wrap: wrap
>.after-mobile-controls
order: 3
>.sidebar >.sidebar
order: 2 order: 2
min-width: 100% min-width: 100%
@ -113,7 +130,6 @@
h1 h1
margin-bottom: 0.5em margin-bottom: 0.5em
.thumbnail .thumbnail
background-position: 50% 30%
width: 4em width: 4em
height: 3em height: 3em
li li

1
client/js/controls/post_readonly_sidebar_control.js
View file

@ -175,6 +175,7 @@ class PostReadonlySidebarControl extends events.EventTarget {
oldNode.classList.remove("active"); oldNode.classList.remove("active");
} }
newNode.classList.add("active"); newNode.classList.add("active");
document.querySelector(".content").dataset.fit = className;
} }
_evtAddToFavoritesClick(e) { _evtAddToFavoritesClick(e) {