From 33e7359d601a423ec9fd3de083a24a3d558abcc3 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Wed, 21 Sep 2022 17:07:45 +0200
Subject: Fix responsive

---
 assets/sass/_models.sass |  4 ++++
 assets/sass/main.sass    |  4 ++++
 pages/index.vue          |  4 ++--
 pages/models/_id.vue     | 12 ++++++------
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/assets/sass/_models.sass b/assets/sass/_models.sass
index 40ce314..1d7688b 100644
--- a/assets/sass/_models.sass
+++ b/assets/sass/_models.sass
@@ -1,4 +1,8 @@
 #modelpage
+  @media (max-width: 768px)
+    .images
+      height: auto !important
+
   .images
     height: 30rem
 
diff --git a/assets/sass/main.sass b/assets/sass/main.sass
index be81a19..fc8c6bf 100644
--- a/assets/sass/main.sass
+++ b/assets/sass/main.sass
@@ -3,3 +3,7 @@
 
 body
   background-color: #f3f4f6
+
+@media (max-width: 768px)
+  .w-90p
+    max-width: 90%
diff --git a/pages/index.vue b/pages/index.vue
index cecc169..956e4f1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
-  .mx-auto.max-w-7xl.py-6(class="sm:px-6 lg:px-8")
+  .mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl")
     model-loading(v-if="isLoading")
     section(v-else)
-      .grid.grid-cols-4.gap-4
+      .grid.grid-cols-1.gap-4(class="md:grid-cols-4")
         model-box-card(
           v-for="model in models"
           :key="model.id"
diff --git a/pages/models/_id.vue b/pages/models/_id.vue
index 0c42cbb..d6add98 100644
--- a/pages/models/_id.vue
+++ b/pages/models/_id.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  .mx-auto.max-w-7xl.py-6#modelpage(class="sm:px-6 lg:px-8")
+  .mx-auto.w-90p.py-6#modelpage(class="sm:px-6 lg:px-8 md:max-w-7xl")
     section.mb-5
       .flow-root
         .float-left
-          h1.text-3xl.font-bold.border-green-500.border-b-2.pb-3.w-max {{ model.name }}
+          h1.text-3xl.font-bold.border-green-500.border-b-2.pb-3.w-full.mb-2(class="md:w-max md:mb-0") {{ model.name }}
         .float-right(v-if="model.author")
           .flex
             .mr-3.float-left
@@ -34,12 +34,12 @@
               :src="baseAPI + '' + model.uploads[selectedUpload].filepath"
               :backgroundColor="'#111827'"
             )
-        .w-full.mt-8(class="md:w-1/5 md:mt-0" v-if="model")
+        .w-full.mt-8.h-auto(class="md:w-1/5 md:mt-0" v-if="model")
           .grid.grid-cols-3.gap-4.h-full.overflow-y-auto.grid-mini(class="md:grid-cols-2")
-            .border-2.border-gray-300.bg-gray-300.w-24.h-24.rounded-xl.grid.items-center.justify-items-center.overflow-hidden.cursor-pointer(
+            .border-2.border-gray-300.bg-gray-300.w-20.h-20.rounded-xl.grid.items-center.justify-items-center.overflow-hidden.cursor-pointer(
               v-for="upload, i in model.uploads"
               :key="upload.id"
-              :class="{'border-green-700 drop-md': selectedUpload == i}"
+              :class="{'border-green-700 drop-md md:w-24 md:h-24': selectedUpload == i}"
               @click="selectedUpload = i"
             )
               img(
@@ -60,7 +60,7 @@
               )
 
     section.mt-5
-      .grid.grid-cols-6.gap-5.mb-5
+      .grid.grid-cols-2.gap-5.mb-5(class="md:grid-cols-6")
         .card.shadow-sm.rounded-lg.bg-white.p-4.w-full
           h3.font-bold Created: 
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-- 
cgit v1.2.3-18-g5258