fix(dashboard): have cards be vertical on portrait displays

ravenclaw900 · Nov 23, 2021 · e0647b0 · e0647b0
1 parent 8ca673e
commit e0647b0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/frontend/.yarn/install-state.gz b/src/frontend/.yarn/install-state.gz
diff --git a/src/frontend/src/App.svelte b/src/frontend/src/App.svelte
@@ -246,7 +246,9 @@
  </div>
  {/if}
  <div
- class="bg-gray-900 dark:bg-black flex-grow{menu ? '' : ' shrink'}"
+ class="bg-gray-900 dark:bg-black flex-grow{menu
+ ? ''
+ : ' shrink'} w-1/6 2xl:w-10rem"
  id="sidebarMenu"
  >
  <div
@@ -367,7 +369,6 @@
  #sidebarMenu {
  min-width: 10rem;
  max-width: 16.666667%;
- width: 16.666667%;
  transition: width 1.5s, max-width 1.5s, min-width 1.5s;
  }
 

diff --git a/src/frontend/src/components/Card.svelte b/src/frontend/src/components/Card.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
- class="bg-white dark:bg-black p-2  rounded-lg border-t-4 border-gray-300 dark:border-gray-700 flex-1 font-sans shadow-md min-w-0"
+ class="bg-white dark:bg-black p-2 rounded-lg border-t-4 border-gray-300 dark:border-gray-700 flex-1 font-sans shadow-md min-w-0"
 >
  <h2
  class="border-b-2 border-gray-200 dark:border-gray-800 h-auto pb-2 mb-2"

diff --git a/src/frontend/src/pages/Home.svelte b/src/frontend/src/pages/Home.svelte
@@ -145,6 +145,8 @@
  },
  };
 
+ let portrait = window.innerHeight > window.innerWidth;
+
  let ramData, swapData, diskData;
 
  $: socketData.cpu != undefined &&
@@ -193,7 +195,11 @@
  });
 </script>
 
-<main class="flex gap-5 flex-wrap min-h-full flex-col md:flex-row flex-grow">
+<main
+ class="flex gap-5 flex-wrap min-h-full flex-col{portrait
+ ? ''
+ : ' md:flex-row'} flex-grow"
+>
  <Card header="System Diagnostics">
  <div id="chartWrapper">
  <canvas bind:this={canvas} />