www/ adjust display on mobile

Senryoku · Jun 8, 2024 · 7a0ed86 · 7a0ed86
1 parent eaa11fd
commit 7a0ed86
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/www/src/App.vue b/www/src/App.vue
@@ -27,7 +27,7 @@ import { RouterLink, RouterView } from 'vue-router'
 
 <style scoped>
 .app {
-  margin-bottom: 5rem;
+  padding-bottom: 5rem;
 }
 
 nav {
@@ -62,6 +62,12 @@ header {
   padding: 0 2em;
 }
 
+@media (orientation: portrait) {
+  .content {
+    padding: 0 0.75em;
+  }
+}
+
 .icon {
   height: 1.5em;
   max-width: 2.5em;

diff --git a/www/src/assets/main.css b/www/src/assets/main.css
@@ -4,7 +4,7 @@
   max-width: 1280px;
   min-height: 100vh;
   margin: 0 auto;
-  padding: 1rem 0;
+  padding: 0;
 
   font-weight: normal;
 

diff --git a/www/src/components/BenchmarkResults.vue b/www/src/components/BenchmarkResults.vue
@@ -2,19 +2,19 @@
   <div>
     <div>
       <h3>Compression Time</h3>
-      <div>
+      <div class="chart-container">
         <Bar :options="chartOptions" :data="chartDataCompression!" />
       </div>
     </div>
     <div>
       <h3>Decompression Time</h3>
-      <div>
+      <div class="chart-container">
         <Bar :options="chartOptions" :data="chartDataDecompression!" />
       </div>
     </div>
     <div>
       <h3>Compressed Size</h3>
-      <div>
+      <div class="chart-container">
         <Bar :options="chartSizeOptions" :data="chartDataSize!" />
       </div>
     </div>
@@ -52,7 +52,7 @@ const props = defineProps<{
 
 const chartOptions = {
   responsive: true,
-  maintainAspectRatio: true,
+  maintainAspectRatio: false,
   plugins: {
     colors: {
       forceOverride: true
@@ -125,4 +125,10 @@ const chartDataSize = computed(() => {
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+}
+</style>
diff --git a/www/src/views/HomeView.vue b/www/src/views/HomeView.vue
@@ -173,9 +173,17 @@ const ChromeBenchmarkResults = {
 <style scoped>
 p {
   margin-left: 1em;
+  margin-right: 1em;
   margin-bottom: 1em;
 }
 
+@media (orientation: portrait) {
+  p {
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+  }
+}
+
 code {
   font-family: monospace;
 }