summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-09-21 17:07:45 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-09-21 17:07:45 +0200
commit33e7359d601a423ec9fd3de083a24a3d558abcc3 (patch)
treed1c972ed604e6eeeeae3a95e224739323265adfb
parentc0120c9e1d8b2fe2e3881eddfa10cc0ecf858805 (diff)
Fix responsive
-rw-r--r--assets/sass/_models.sass4
-rw-r--r--assets/sass/main.sass4
-rw-r--r--pages/index.vue4
-rw-r--r--pages/models/_id.vue12
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">