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

Still not perfect for comment section and edit mode, but we should really replace image resizing logic with css.
rr- · Mar 21, 2024 · e2bdb5f · e2bdb5f
1 parent 81416b6
commit e2bdb5f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl
@@ -15,38 +15,53 @@
             border: 0
             outline: 0
 
-        nav.buttons
-            margin-top: 0
-            display: flex
-            flex-wrap: wrap
-            article
-                flex: 1 0 33%
-                a
-                    display: inline-block
-                    width: 100%
-                    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%
+    >.sidebar>nav.buttons, >.content nav.buttons
+        margin-top: 0
+        display: flex
+        flex-wrap: wrap
+        article
+            flex: 1 0 33%
+            a
+                display: inline-block
+                width: 100%
+                padding: 0.3em 0
                 text-align: center
-            @media (max-width: 800px)
-                margin-top: 2em
+                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
+        @media (max-width: 800px)
+            margin-top: 0.6em
+            margin-bottom: 0.6em
 
     >.content
         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
-        margin-bottom: 2em
+        margin-bottom: 0.6em
 
         .post-content
             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
-    >.sidebar
+    >.sidebar, >.content
         nav.buttons
             article
                 a:not(.inactive):hover
@@ -56,6 +71,8 @@
 @media (max-width: 800px)
     .post-view
         flex-wrap: wrap
+        >.after-mobile-controls
+            order: 3
         >.sidebar
             order: 2
             min-width: 100%
@@ -113,7 +130,6 @@
         h1
             margin-bottom: 0.5em
         .thumbnail
-            background-position: 50% 30%
             width: 4em
             height: 3em
         li

diff --git a/client/js/controls/post_readonly_sidebar_control.js b/client/js/controls/post_readonly_sidebar_control.js
@@ -175,6 +175,7 @@ class PostReadonlySidebarControl extends events.EventTarget {
             oldNode.classList.remove("active");
         }
         newNode.classList.add("active");
+        document.querySelector(".content").dataset.fit = className;
     }
 
     _evtAddToFavoritesClick(e) {