Merge pull request #10 from innocuous-symmetry/media-queries

Media queries

src/App.css

@@ -19,7 +19,7 @@
 .App {
   display: flex;
   flex-direction: column;
-  background-color: #FFE9F3;
+  background-color: #d1aabc;
   align-items: center;
   margin: 0;
   padding: 0;
@@ -31,6 +31,10 @@
   height: 100vh;
 }
 
+.mobile-title {
+  display: none;
+}
+
 /* Navbar */
 
 .navbar {
@@ -73,6 +77,7 @@
 .sidebar-button {
   border: transparent;
   background-color: orchid;
+  box-shadow: 1px 1px rgb(111, 30, 151);
   text-align: center;
   height: 3.5rem;
   border-radius: 15px;
@@ -114,6 +119,7 @@
   top: 5rem;
   padding: 1.5rem;
   transition: right 0.6s ease-out;
+  z-index: 9;
 }
 
 /* Feed */
@@ -132,12 +138,6 @@
   width: 90vw;
 }
 
-.about-the-app {
-  display: hidden;
-  flex-direction: column;
-  align-items: center;
-}
-
 .page-handling {
   display: inline-flex;
   flex-direction: row;
@@ -176,4 +176,99 @@
   margin-top: 5rem;
   position: relative;
   bottom: 6rem;
+}
+
+/* Media queries (tablet) */
+
+@media only screen and (max-width: 1050px) {
+  /* Navbar */
+
+  .navbar {
+    height: 4rem;
+  }
+
+  .nav-title {
+    font-size: 1rem;
+  }
+
+  .nav-searchbar {
+    width: 25rem;
+    right: 2rem;
+  }
+
+  /* Sidebar */
+
+  .sidebar-button {
+    height: 2.6rem;
+    width: 5rem;
+  }
+
+  .sidebar {
+    top: 4rem;
+  }
+
+  .sidebar-hidden {
+    top: 4rem;
+  }
+
+  /* Feed */
+
+  .content-container {
+    top: 4rem;
+  }
+
+  .page-handling {
+    height: 3rem;
+    padding: 0.5rem;
+  }
+
+  .page-handling button {
+    height: 2rem;
+    width: 2rem;
+    margin: 0 0.4rem;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .navbar {
+    position: static;
+  }
+
+  .desktop-title {
+    display: none;
+  }
+
+  .mobile-title {
+    display: inline-flex;
+  }
+
+  .nav-searchbar {
+    width: 12rem;
+    right: 12rem;
+  }
+
+  .sidebar-button {
+    position: fixed;
+    right: 0;
+    top: 0.6rem;
+    width: 4.5rem;
+  }
+
+  .content-container {
+    top: 0;
+  }
+
+  .feed {
+    width: 95vw;
+  }
+
+  .page-handling {
+    width: 15rem;
+    height: 2rem;
+  }
+
+  .page-handling button {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }

src/features/navbar/Navbar.js

@@ -12,7 +12,8 @@ export default function Navbar() {
     return (
         <>
         <div className="navbar">
-            <h1 className="nav-title">Reddit, but it's all cats</h1>
+            <h1 className="nav-title desktop-title">Reddit, but it's all cats</h1>
+            <h1 className="nav-title mobile-title">Cat Reddit</h1>
             <SearchBar />
             <button className="sidebar-button" onClick={handleCollapse}>Sidebar</button>
         </div>

src/features/posts/Feed.js

@@ -161,7 +161,7 @@ export default function Feed() {
 
         <div className="page-handling" id="top-page-handling">
             <button className="decrement" onClick={handleDecrement}>-</button>
-            <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
+            <p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
             <button className="increment" onClick={handleIncrement}>+</button>
         </div>
 
@@ -172,7 +172,7 @@ export default function Feed() {
 
         <div className="page-handling" id="bottom-page-handling">
             <button className="decrement" onClick={handleDecrement}>-</button>
-            <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
+            <p>Page {currentPage + 1} of {feedPages.length ? (feedPages.length + 1) : 'unknown'}</p>
             <button className="increment" onClick={handleIncrement}>+</button>
         </div>
 

src/features/posts/Post.css

@@ -6,8 +6,10 @@
     width: 75%;
     padding: 1rem 2rem;
     border-radius: 10px;
-    background-color: #bbd8d3;
+    background-color: #bfbbd8;
+    border: 1px solid rgb(250, 206, 248);
     margin: 3rem 0;
+    z-index: 5;
 }
 
 /* Title */
@@ -43,6 +45,7 @@ img, video {
 }
 
 .post-metadata * {
+    display: inline-flex;
     background-color:rgb(250, 206, 248);
     border-color: transparent;
     text-decoration: none;
@@ -84,4 +87,28 @@ img, video {
 
 .comments-hidden {
     display: none;
+}
+
+/* Queries */
+
+@media only screen and (max-width: 1050px) {        /* for tablets */
+    img, video {
+        max-height: 25rem;
+    }
+    .title {
+        font-size: 1.5rem;
+    }
+    .post-metadata {
+        font-size: 0.8rem;
+        text-align: center;
+        text-overflow: ellipsis;
+    }
+
+    .post-metadata * {
+        max-width: 30%;
+    }
+
+    .hide-mobile {
+        display: none;
+    }
 }

src/features/posts/Post.js

@@ -113,8 +113,8 @@ export default function Post({data, key}) {
                 <a className="post-subreddit" href={`https://www.reddit.com/r/${subreddit}`}>
                     {subreddit ? 'r/' + subreddit  : ''}
                 </a>
-                {ups ? <p>{ups} upvotes</p> : null}
+                {ups ? <p className="hide-mobile">{ups} upvotes</p> : null}
-                <p className="time-posted">posted at {time ? (localTime + ' on ' + localDate) : '...?'}</p>
+                <p className="time-posted hide-mobile">posted at {time ? (localTime + ' on ' + localDate) : '...?'}</p>
                 <button className="num-comments" onClick={handleClick}>
                     {comments ? visible + comments + ' comments' : 'no comments'}
                 </button>