Split `post-container` class

Fixes `flex-*` issues in consolidated views.

2 files changed, 84 insertions, 78 deletions

diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index 30310a8..4ec7614 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -6,80 +6,84 @@ mixin post(p, currentUrl)
   - var sortQuery = query && query.sort ? query.sort + (query.t ? '&t=' + query.t : '') : 'hot'
   article(class=`post`)
     div.post-container(class=`${query.view} ${p.stickied?"sticky":""}`)
-      div.post-text(class=`${query.view}`)
-        div.title-container(class=`${query.view}`)
-          a(class=`${query.view}`, href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`)
-            != p.title
-          span.domain   (#{p.domain})
-        div.info-container 
-          p
-            | #{fmtnum(p.ups)} ↑ 
-            if p.gilded > 0
+      div.post-info
+        div.post-text(class=`${query.view}`)
+          div.title-container(class=`${query.view}`)
+            a(class=`${query.view}`, href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`)
+              != p.title
+            span.domain   (#{p.domain})
+          div.info-container 
+            p
+              | #{fmtnum(p.ups)} ↑ 
+              if p.gilded > 0
+                |  · 
+                span.gilded
+                  | #{p.gilded} ☆
+              span.post-author
+                |  · 
+                | u/#{p.author} 
               |  · 
-              span.gilded
-                | #{p.gilded} ☆
-            span.post-author
+              | #{timeDifference(Date.now(), p.created * 1000)}
               |  · 
-              | u/#{p.author} 
-            |  · 
-            | #{timeDifference(Date.now(), p.created * 1000)}
-            |  · 
-            a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
-            |  · 
-            a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩
-        if (query.view == "card" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html)
-          div.self-text-overflow.card
-            if p.spoiler || p.over_18
-              div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
-                h2
-                  != p.over_18 ? 'nsfw' : 'spoiler'
-            div.self-text.card
-              != convertInlineImageLinks(p.selftext_html)
-      if query.view != "card"
-        div.media-preview
-          - var onclick = `toggleDetails('${p.id}')`
+              a(href=`/r/${p.subreddit}?sort=${sortQuery}&view=${viewQuery}`) r/#{p.subreddit}
+              |  · 
+              a(href=`/comments/${p.id}?from=${from}&sort=${sortQuery}&view=${viewQuery}`) #{fmtnum (p.num_comments)} ↩
+          if (query.view == "card" && !isPostGallery(p) && !isPostImage(p) && !isPostVideo(p) && p.selftext_html)
+            div.self-text-overflow.card
+              if p.spoiler || p.over_18
+                div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`)
+                  h2
+                    != p.over_18 ? 'nsfw' : 'spoiler'
+              div.self-text.card
+                != convertInlineImageLinks(p.selftext_html)
+        if query.view != "card"
+          div.media-preview
+            - var onclick = `toggleDetails('${p.id}')`
+            if isPostGallery(p)
+              - var item = (p.over_18 ? `/nsfw.svg` : p.spoiler ? `/spoiler.svg` : postGalleryItems(p)[0].url)
+              img(src=item onclick=onclick) 
+            else if isPostImage(p)
+              - var url = postThumbnail(p)
+              img(src=url onclick=onclick)
+            else if isPostVideo(p)
+              - var decodedVideos = decodePostVideoUrls(p)
+              video(autoplay="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` poster=decodedVideos[4] width="100px" height="100px")
+                // Scrubber
+                source(src=decodedVideos[3])
+            else if isPostLink(p)
+              a(href=p.url)
+                | ↗
+
+      details(id=`${p.id}` open=(query.view == "card") class=`${query.view}`)
+        summary.expand-post expand media
+        div.image-viewer
+          if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
+            div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) 
+              h2
+                != p.over_18 ? 'nsfw' : 'spoiler'
           if isPostGallery(p)
-            - var item = (p.over_18 ? `/nsfw.svg` : p.spoiler ? `/spoiler.svg` : postGalleryItems(p)[0].url)
-            img(src=item onclick=onclick) 
+            div.gallery
+              each item in postGalleryItems(p)
+                div.gallery-item
+                  a(href=`/media/${item.url}`)
+                    img(src=item.url loading="lazy")
+                  div.gallery-item-idx
+                    | #{`${item.idx}/${item.total}`}
           else if isPostImage(p)
-            - var url = postThumbnail(p)
-            img(src=url onclick=onclick)
+            a(href=`/media/${p.url}`)
+              img(src=p.url loading="lazy")
           else if isPostVideo(p)
             - var decodedVideos = decodePostVideoUrls(p)
-            video(autoplay="" muted="" data-dashjs-player="" onclick=`toggleDetails('${p.id}')` poster=decodedVideos[4] width="100px" height="100px")
-              // Scrubber
-              source(src=decodedVideos[3])
+            video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy")
+                // HLS
+                source(src=decodedVideos[0])
+                // Dash
+                source(src=decodedVideos[1])
+                // Fallback
+                source(src=decodedVideos[2])
           else if isPostLink(p)
             a(href=p.url)
-              | ↗
-
-    details(id=`${p.id}` open=(query.view == "card" && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))))
-      summary.expand-post expand media
-      div.image-viewer
-        if query.view == "card" && (p.spoiler || p.over_18) && (isPostGallery(p) || isPostImage(p) || isPostVideo(p))
-          div.spoiler(id=`spoiler_${p.id}`, onclick=`javascript:document.getElementById('spoiler_${p.id}').style.display = 'none';`) 
-            h2
-              != p.over_18 ? 'nsfw' : 'spoiler'
-        if isPostGallery(p)
-          div.gallery
-            each item in postGalleryItems(p)
-              div.gallery-item
-                a(href=`/media/${item.url}`)
-                  img(src=item.url loading="lazy")
-                div.gallery-item-idx
-                  | #{`${item.idx}/${item.total}`}
-        else if isPostImage(p)
-          a(href=`/media/${p.url}`)
-            img(src=p.url loading="lazy")
-        else if isPostVideo(p)
-          - var decodedVideos = decodePostVideoUrls(p)
-          video(controls="" muted="" data-dashjs-player="" preload="metadata" playsinline="" poster=decodedVideos[4] objectfit="contain" loading="lazy")
-              // HLS
-              source(src=decodedVideos[0])
-              // Dash
-              source(src=decodedVideos[1])
-              // Fallback
-              source(src=decodedVideos[2])
-      if (query.view == "compact")
-        button(onclick=`toggleDetails('${p.id}')`)
-            | close
+              | #{p.domain} ↗
+        if (query.view == "compact")
+          button(onclick=`toggleDetails('${p.id}')`)
+              | close
diff --git a/src/public/styles.css b/src/public/styles.css
index 8bfdc72..bc0e1ec 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -302,19 +302,14 @@ summary::before {
   object-fit: fill;
 }
 
-.image-viewer a {
-  font-size: 1.5rem;
-  padding: unset;
-  padding-left: 1rem;
-}
-
 .image-viewer a:has(img) {
   font-size: 0rem;
   padding: unset;
 }
 
-.media-preview a {
-  font-size: 2rem;
+.media-preview a,
+.image-viewer a {
+  font-size: 1.5rem;
   text-decoration: none;
   padding: 1rem;
 }
@@ -479,7 +474,7 @@ form {
   margin-top: 10px;
 }
 
-.post-container {
+.post-info {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -618,6 +613,13 @@ details:not([open]) summary::before {
   padding-right: 10px;
 }
 
+details.compact {
+  /*
+  display: flex;
+  flex-basis: 100%;
+  */
+}
+
 .footer {
   padding-bottom: 40px;
 }