improve mobile ui, add pagination

5 files changed, 61 insertions, 22 deletions

diff --git a/src/geddit.js b/src/geddit.js
index 93477e7..902d859 100644
--- a/src/geddit.js
+++ b/src/geddit.js
@@ -218,8 +218,6 @@ class Geddit {
             include_over_18: true
         }
 
-        console.log(this.host + "/search.json?" + new URLSearchParams(Object.assign(params, options)));
-
         return await fetch(this.host + "/search.json?" + new URLSearchParams(Object.assign(params, options)))
             .then(res => res.json())
             .then(json => json.data)
diff --git a/src/mixins/post.pug b/src/mixins/post.pug
index fc765ab..6dbebec 100644
--- a/src/mixins/post.pug
+++ b/src/mixins/post.pug
@@ -20,10 +20,10 @@ mixin post(p)
             if p.gallery_data.items
               - var item = p.gallery_data.items[0]
               - var url = `https://i.redd.it/${item.media_id}.jpg`
-              img(src=url width='100px' height='100px' onclick=`toggleDetails('${p.id}')`) 
+              img(src=url onclick=`toggleDetails('${p.id}')`) 
         else if p.post_hint == "image" || p.post_hint == "link"
           if p.thumbnail && p.thumbnail != "self" || p.thumbnail != "default"
-            img(src=p.thumbnail width='100px' height='100px' onclick=`toggleDetails('${p.id}')`) 
+            img(src=p.thumbnail onclick=`toggleDetails('${p.id}')`) 
         else if p.post_hint == "hosted:video"
           - var url = p.secure_media.reddit_video.dash_url
           video(src=url data-dashjs-player width='100px' height='100px' onclick=`toggleDetails('${p.id}')`)
diff --git a/src/public/styles.css b/src/public/styles.css
index 0d0998d..9616ac8 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -16,34 +16,43 @@ main {
   flex-direction: row;
 }
 
+.footer {
+  display: flex;
+  flex-direction: row;
+}
+
+.footer-item {
+  margin-left: auto;
+}
+
 nav {
   display: flex;
   align-items: stretch;
 }
 
-.post, .comments-container, .hero, .header {
+.post, .comments-container, .hero, .header, .footer {
   padding: 0.3rem;
-  flex: 1 1 100%;
-  font-size: 1rem;
+  flex: 1 1 95%;
+  font-size: 0.8rem;
   width: 100%;
 }
 
 .info-container, .comment-info-container {
   color: #777;
-  font-size: 0.7rem;
+  font-size: 0.6rem;
   display: flex;
 }
 
 .domain {
   color: #777;
-  font-size: 0.7rem;
+  font-size: 0.6rem;
 }
 
-.info-item, .header-item {
+.info-item, .header-item, .footer-item {
   margin-right: 14px;
 }
 
-.header-item {
+.header-item, .footer-item {
   position: relative; /* Needed for positioning the pseudo-element */
 }
 
@@ -57,23 +66,47 @@ nav {
   font-size: 20px; /* Adjust size of the separator */
 }
 
+.media-preview img {
+  object-fit: cover;
+  width: 3rem;
+  height: 3rem;
+}
+
 @media (min-width: 768px) {
-  .post, .comments-container, .hero, .header {
-    flex: 1 1 65%;
-    width: 75%;
+  .post, .comments-container, .hero, .header, .footer {
+    flex: 1 1 90%;
+    width: 90%;
+    font-size: 1rem;
   }
   .info-container, .comment-info-container {
-    font-size: 0.8rem;
+    font-size: 0.9rem;
+  }
+  .domain {
+    font-size: 0.9rem;
+  }
+  .media-preview img {
+    object-fit: cover;
+    width: 7rem;
+    height: 7rem;
   }
 }
 
 @media (min-width: 1080px) {
-  .post, .comments-container, .hero, .header {
+  .post, .comments-container, .hero, .header, .footer {
     flex: 1 1 50%;
     width: 50%;
+    font-size: 1rem;
   }
   .info-container, .comment-info-container {
-    font-size: 0.8rem;
+    font-size: 0.9rem;
+  }
+  .domain {
+    font-size: 0.9rem;
+  }
+  .media-preview img {
+    object-fit: cover;
+    width: 7rem;
+    height: 7rem;
   }
 }
 
@@ -121,8 +154,9 @@ nav {
   margin-left: auto;
 }
 
-.media-preview img {
-  object-fit: cover;
+.bottom-links-container {
+  display: flex;
+  flex-direction: row;
 }
 
 .post-media {
@@ -183,3 +217,7 @@ p {
 summary {
   display: none;
 }
+
+.footer {
+  padding-bottom: 40px;
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index 867a223..5f43764 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -17,11 +17,12 @@ router.get('/r/:subreddit/:sort?', async (req, res) => {
   var sort = req.params.sort ? req.params.sort : 'hot';
   var options = req.query;
 
-  // var postsReq = G.getSubmissions(sort, `r/${subreddit}`, options);
   var postsReq = G.getSubmissions(sort, `${subreddit}`, options);
   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/index.pug b/src/views/index.pug
index 9ac34a4..3df82f7 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -4,6 +4,7 @@ include ../mixins/sub
 doctype html
 html
   head
+    meta(name="viewport" content="width=device-width, initial-scale=1.0")
     meta(charset='UTF-8')
     title reddit
     link(rel='stylesheet', href='/styles.css')
@@ -56,5 +57,6 @@ html
       if posts
         each child in posts.posts
           +post(child.data)
-
-    script(src='https://unpkg.com/[email protected]')
+        div.footer
+          div.footer-item
+            a(href=`/r/${subreddit}?after=${posts.after}`) next