make the sidebar fill the screen and add touch support text

skamansam · Aug 21, 2023 · 77e9ffa · 77e9ffa
1 parent ebb252e
commit 77e9ffa
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
@@ -24,15 +24,17 @@
 	const isActive = ({ link }: NavLink) => {
 		return link === $page.url.pathname;
 	};
+  let supportsTouch = false;
 
   if (browser) {
+    supportsTouch = !!('ontouchstart' in window || navigator.maxTouchPoints);
+
     let xDown : number | null = null;
-    // let yDown : number | null = null;
 
     function handleTouchStart(evt:TouchEvent) {
         const firstTouch = evt.touches[0];
         xDown = firstTouch.clientX;
-        yDown = firstTouch.clientY;
+        // yDown = firstTouch.clientY;
     };
 
     function handleTouchMove(evt:TouchEvent) {
@@ -69,6 +71,9 @@
 			</li>
 		{/each}
 	</ul>
+  {#if supportsTouch}
+    <div class="open-text">Slide right to open menu. --&gt;</div>
+  {/if}
 </nav>
 
 <style>

diff --git a/src/styles/default.css b/src/styles/default.css
@@ -189,14 +189,22 @@ code {
 }
 
 .card {
+
+}
+
+.card-markers {
+  margin-top: -30px;
+  margin-bottom: -5px;
+  margin-left: -30px;
+  float: left;
 }
 
 .card-badges {
-  margin-top: -22px;
+  margin-top: -30px;
   margin-bottom: -5px;
   float: right;
 }
-.card-badges .badge {
+.card-badges .badge, .card-markers .badge {
   @apply ml-2 rounded px-1 font-bold py-0.5 text-xs;
 }
 .card .card-metadata a {

diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css
@@ -102,26 +102,36 @@ header.site-head {}
 @media only screen and (max-width: 700px) {
   .sidebar {
     height: var(--sidebar-height);
-    @apply p-2;
+    @apply p-2 flex items-center items-stretch text-center ;
   }
-  .sidebar .navMenu {
+  .sidebar .open-text {
+    animation: blinker .5s linear 3;
+    @apply self-center;
+  }
+  @keyframes blinker {
+    50% {
+      opacity: .5;
+      @apply text-yellow-300
+    }
+  }
+.sidebar .navMenu {
     transform: translateX(-100%);
-    display: block;
     position: absolute;
     background: var(--color-primaryBg);
     margin: 0px;
     width: 90%;
-    margin-top: -22px;
+    height: calc(100% - 100px);
+    margin-top: -12px;
     /* top: 0px; */
     left: 0px;
-    @apply border-2 rounded p-2 text-onPrimaryBg
+    @apply flex-col border-2 rounded p-2 text-onPrimaryBg justify-evenly font-bold text-xl;
+  }
+  .sidebar .navMenu li{
+    @apply flex-col;
   }
   .sidebar .navMenu li a{
     @apply text-onPrimaryBg w-fit
   }
-  .sidebar .navMenu li{
-    display: block;
-  }
   .sidebar .menuButton {
     @apply block !important;
     z-index: 3;
@@ -164,7 +174,7 @@ header.site-head {}
 }
 
 .sidebar.nav-open .navMenu {
-  transform: translateX(0);
+  transform: translateX(5%);
 }
 
 /* Change this stuff below */