even better galleries, fix font sizes everywhere

9 files changed, 104 insertions, 49 deletions

diff --git a/src/geddit.js b/src/geddit.js
index 902d859..64e1564 100644
--- a/src/geddit.js
+++ b/src/geddit.js
@@ -14,7 +14,7 @@ class Geddit {
 
     async getSubmissions(sort = null, subreddit = null, options = {}) {
         let params = {
-            limit: 50,
+            limit: 20,
             include_over_18: true,
         }
 
diff --git a/src/mixins/comment.pug b/src/mixins/comment.pug
index 545ee59..8d341c9 100644
--- a/src/mixins/comment.pug
+++ b/src/mixins/comment.pug
@@ -8,8 +8,8 @@ mixin comment(com, isfirst)
   else
     div(class=`comment ${isfirst?'first':''}`)
       div.comment-info-container
-        div.info-item u/#{data.author}
-        div.info-item ↑ #{fmtnum(data.ups)}
+        div.info-item #{fmtnum(data.ups)} ↑ 
+        div.info-item u/#{data.author} #{data.is_submitter?'(OP)':''}
         if data.collapsed_reason_code == "DELETED"
           div.info-item 
             a(href=`https://undelete.pullpush.io${data.permalink}`) search on undelete
diff --git a/src/mixins/header.pug b/src/mixins/header.pug
new file mode 100644
index 0000000..e3b3870
--- /dev/null
+++ b/src/mixins/header.pug
@@ -0,0 +1,9 @@
+mixin header()
+  div.header
+    div.header-item
+      a(href=`/`) home
+    div.header-item
+      a(href=`/subs`) subscriptions
+    div.header-item
+      a(href=`/r/popular`) popular
+
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index 8a66d53..20ec7c8 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -9,9 +9,9 @@ mixin post(p)
           span.domain   (#{p.domain})
         div.info-container 
           p
-            | ↑ #{fmtnum(p.ups)} 
+            | #{fmtnum(p.ups)} ↑ 
             |  · 
-            a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} replies
+            a(href=`/comments/${p.id}`) #{fmtnum (p.num_comments)} ↩
             |  · 
             a(href=`/r/${p.subreddit}`) r/#{p.subreddit}
             span.post-author
@@ -36,12 +36,14 @@ mixin post(p)
         if p.gallery_data.items
           details(id=`${p.id}`)
             summary expand gallery
-            each item in p.gallery_data.items
-              - var url = `https://i.redd.it/${item.media_id}.jpg`
-              a(href=`/media/${url}`)
-                  img(src=url).post-media
+            div.gallery
+              each item in p.gallery_data.items
+                - var url = `https://i.redd.it/${item.media_id}.jpg`
+                div.gallery-item
+                  a(href=`/media/${url}`)
+                      img(src=url)
             button(onclick=`toggleDetails('${p.id}')`) close
-    if (p.post_hint == "image" || p.post_hint == "link") && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
+    if p.post_hint == "image" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
       details(id=`${p.id}`)
         summary expand image
         a(href=`/media/${p.url}`)
@@ -53,4 +55,10 @@ mixin post(p)
         - var url = p.secure_media.reddit_video.dash_url
         video(src=url controls data-dashjs-player).post-media
         button(onclick=`toggleDetails('${p.id}')`) close
-
+    else if p.post_hint == "link" && p.thumbnail && p.thumbnail != "self" && p.thumbnail != "default"
+      details(id=`${p.id}`)
+        summary expand link
+        a(href=`${p.url}`)
+          | #{p.url}
+        br
+        button(onclick=`toggleDetails('${p.id}')`) close
diff --git a/src/public/styles.css b/src/public/styles.css
index 7a27e82..aa2fff1 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -2,6 +2,7 @@
 
 body {
   font-family: 'Inter', sans-serif;
+  overflow-x: hidden;
 }
 
 main {
@@ -14,6 +15,7 @@ main {
 .header {
   display: flex;
   flex-direction: row;
+  justify-content: center;
 }
 
 .footer {
@@ -33,10 +35,17 @@ nav {
 .post, .comments-container, .hero, .header, .footer {
   padding: 0.3rem;
   flex: 1 1 95%;
-  font-size: 1rem;
   width: 100%;
 }
 
+.post {
+  font-size: 1rem;
+}
+
+.comments-container {
+  font-size: 0.8rem;
+}
+
 .info-container, .comment-info-container, .more {
   color: #777;
   font-size: 0.8rem;
@@ -45,26 +54,13 @@ nav {
 
 .domain {
   color: #777;
-  font-size: 0.6rem;
+  font-size: 0.8rem;
 }
 
 .info-item, .header-item, .footer-item {
   margin-right: 14px;
 }
 
-.header-item, .footer-item {
-  position: relative; /* Needed for positioning the pseudo-element */
-}
-
-.header-item:not(:last-child)::after {
-  content: "·"; /* Middle dot as the separator */
-  position: absolute;
-  right: -10px; /* Adjust position as needed */
-  top: 50%;
-  transform: translateY(-50%); /* Center vertically */
-  color: #888; /* Separator color */
-  font-size: 20px; /* Adjust size of the separator */
-}
 
 .media-preview img {
   object-fit: cover;
@@ -84,13 +80,18 @@ nav {
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 90%;
     width: 90%;
-    font-size: 1rem;
+  }
+  .post {
+    font-size: 1.3rem;
+  }
+  .comments-container {
+    font-size: 1.1rem;
   }
   .info-container, .comment-info-container, .more {
-    font-size: 0.9rem;
+    font-size: 1rem;
   }
   .domain {
-    font-size: 0.9rem;
+    font-size: 1rem;
   }
   .media-preview img,
   .media-preview video 
@@ -107,13 +108,18 @@ nav {
   .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 50%;
     width: 50%;
-    font-size: 1rem;
+  }
+  .post {
+    font-size: 1.3rem;
+  }
+  .comments-container {
+    font-size: 1.1rem;
   }
   .info-container, .comment-info-container, .more {
-    font-size: 0.9rem;
+    font-size: 1rem;
   }
   .domain {
-    font-size: 0.9rem;
+    font-size: 1rem;
   }
   .media-preview img,
   .media-preview video 
@@ -154,14 +160,16 @@ nav {
 }
 
 .post-container {
-  align-self: stretch;
   display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .post-text {
+  display: flex;
   flex-direction: column;      
   align-items: stretch;        
-  justify-content: space-between;
+  justify-content: space-evenly;
 }
 
 .media-preview {
@@ -178,6 +186,7 @@ nav {
   display: block;
   margin: 0 auto;
   max-width: 85%;
+  padding: 5px;
 }
 
 .title-container,.info-container, .comment-info-container {
@@ -211,7 +220,7 @@ pre, code {
 }
 
 pre {
-  padding: 10px;
+  padding: 10px 0px 10px 10px;
   width: 100%;
   overflow: auto;
 }
@@ -242,3 +251,20 @@ a {
   overflow-wrap: break-word;
 }
 
+.gallery {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  padding: 5px;
+}
+
+.gallery-item {
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+    margin-right: 10px;
+}
+
+.gallery img {
+    width: auto;
+    height: 300px;
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index 5f43764..cef05da 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -21,8 +21,6 @@ router.get('/r/:subreddit/:sort?', async (req, res) => {
   var aboutReq = G.getSubreddit(`${subreddit}`);
 
   var [posts, about] = await Promise.all([postsReq, aboutReq]);
-  console.log(`posts for ${subreddit}`);
-  console.log(posts.posts.length);
 
   res.render('index', { subreddit, posts, about });
 });
diff --git a/src/views/comments.pug b/src/views/comments.pug
index e335cae..d7a8ab4 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -1,4 +1,5 @@
 include ../mixins/comment
+include ../mixins/header
 
 doctype html
 html
@@ -10,8 +11,11 @@ html
     script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
   body
     main#content
+      +header()
       div.hero
-        h4 r/#{post.subreddit}
+        h3
+          a(href=`/r/${post.subreddit}`) r/#{post.subreddit}
+
         h2 #{post.title}
 
         if post.is_gallery && post.is_gallery == true
@@ -28,6 +32,12 @@ html
 
         if post.selftext_html
           p.self-text !{post.selftext_html}
+        div.info-container 
+          p
+            | #{fmtnum(post.ups)} ↑ 
+            |  ·  by u/#{post.author} 
+
+        hr
 
       div.comments-container
         each child in comments
diff --git a/src/views/index.pug b/src/views/index.pug
index 3df82f7..3f284f3 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -1,5 +1,6 @@
 include ../mixins/post
 include ../mixins/sub
+include ../mixins/header
 - var subs = []
 doctype html
 html
@@ -38,13 +39,7 @@ html
     document.addEventListener('DOMContentLoaded', ()=>updateButton("#{subreddit}"));
   body
     main#content
-      div.header
-        div.header-item
-          a(href=`/`) home
-        div.header-item
-          a(href=`/subs`) subscriptions
-        div.header-item
-          a(href=`/r/popular`) popular
+      +header()
 
       div.hero
         a(href=`/r/${subreddit}`)
@@ -52,11 +47,17 @@ html
         if about
           p #{about.public_description}
         div#button-container
-        a(href=`/r/${subreddit}`)
+        ul
+          li
+            a(href=`/r/${subreddit}/hot`) hot
+          li
+            a(href=`/r/${subreddit}/top`) top
+          li
+            a(href=`/r/${subreddit}/top?t=all`) top all
 
       if posts
         each child in posts.posts
           +post(child.data)
         div.footer
           div.footer-item
-            a(href=`/r/${subreddit}?after=${posts.after}`) next
+            a(href=`/r/${subreddit}?after=${posts.after}`) next →
diff --git a/src/views/subs.pug b/src/views/subs.pug
index a6bbb7b..2d2ee4f 100644
--- a/src/views/subs.pug
+++ b/src/views/subs.pug
@@ -1,4 +1,5 @@
 include ../mixins/sub
+include ../mixins/header
 
 doctype html
 html
@@ -29,5 +30,7 @@ html
     document.addEventListener('DOMContentLoaded', buildSubList);
   body
     main#content
-      h1 subscriptions
-      div#subList
+      +header()
+      div.hero
+        h1 subscriptions
+        div#subList