From 6dbbd2b70d0cdbec15546855f81dd5b23ad7741e Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Mon, 13 Jun 2022 15:41:29 +0200
Subject: [PATCH] A bit of styling

---
 components/ProjectModal.tsx    |  2 +-
 styles/ProjectModal.module.css | 30 +++++++++++++++++++++---------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/components/ProjectModal.tsx b/components/ProjectModal.tsx
index 8b27049..4d1061b 100644
--- a/components/ProjectModal.tsx
+++ b/components/ProjectModal.tsx
@@ -53,7 +53,7 @@ const ProjectModal: NextPage = () => {
             </select>
         );
 
-        return <div className={styles.pageSelector}>{prev}{currentPage > 0 ? <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> : null}{select}{currentPage < currentContent.entries.length ? <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> : null}{next}</div>;
+        return <div className={styles.pageSelector}>{prev}<span style={{visibility: currentPage > 0 ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>{select}<span style={{visibility: currentPage < currentContent.entries.length ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>{next}</div>;
     })();
 
     return <div className={styles.modal}>
diff --git a/styles/ProjectModal.module.css b/styles/ProjectModal.module.css
index 338eeed..124caa9 100644
--- a/styles/ProjectModal.module.css
+++ b/styles/ProjectModal.module.css
@@ -41,7 +41,7 @@
     z-index: 100;
 }
 
-/* Mobile possitioning */
+/* Non-mobile positioning */
 @media all and (min-width: 1050px) {
     .modalClose {
         position: relative;
@@ -96,8 +96,8 @@
 }
 
 .pageSelector {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 1fr max-content max-content max-content 1fr;
     font-family: sans-serif;
 }
 
@@ -120,14 +120,26 @@
     text-decoration: underline;
 }
 
-.leftSelectSpace, .rightSelectSpace {
-    flex-grow: 2;
-}
-
 .leftSelectSpace {
-    text-align: right;
+    justify-self: right;
 }
 
 .rightSelectSpace {
-    text-align: left;
+    justify-self: left;
 }
+
+
+/* On mobile we only want to show the html select */
+@media all and (max-width: 500px) {
+    .leftSelectSpace, .rightSelectSpace, .pageSelector span {
+        display: none;
+    }
+    .pageSelector select {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+    }
+    .pageSelector {
+        display: block;
+    }
+}
\ No newline at end of file