chore: server 페이지 반응형 디자인 수정

NGuard-Security · Jan 17, 2024 · a9a2828 · a9a2828
1 parent 402ce5f
commit a9a2828
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 7 deletions.
diff --git a/assets/styles/pages/servers.scss b/assets/styles/pages/servers.scss
@@ -1,13 +1,16 @@
 .servers-wrap {
   @media (max-width: 767px) {
-    padding-top: calc(2rem + 100px);
+    padding-top: 3rem;
+    padding-left: 1.8rem;
+    padding-right: 1.8rem;
+
   }
 
-  @media (max-width: 1028px) {
+  @media (max-width: 1280px) {
     display: block;
   }
 
-  padding-top: calc(3rem + 100px);
+  padding-top: 10rem;
   padding-bottom: 3rem;
 
   h1 {
@@ -16,7 +19,7 @@
 }
 
 .servers {
-  @media (max-width: 1028px) {
+  @media (max-width: 1280px) {
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     width: 100%;
     margin-bottom: 0;
@@ -28,7 +31,7 @@
 
   position: relative;
 
-  grid-template-columns: repeat(3, minmax(260px, 1fr));
+  grid-template-columns: repeat(4, minmax(260px, 1fr));
 
   .server {
     background: $color-navbar;

diff --git a/composables/useAPI.ts b/composables/useAPI.ts
@@ -188,6 +188,76 @@ export default () => {
               now: false,
               isInvited: false,
             },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
+            {
+              id: '3',
+              icon: 'tesst',
+              name: 'test3',
+              now: false,
+              isInvited: false,
+            },
           ])
         })
       }

diff --git a/pages/index.vue b/pages/index.vue
@@ -4,4 +4,6 @@ definePageMeta({
 })
 </script>
 
-<template></template>
+<template>
+  <div></div>
+</template>
diff --git a/pages/servers.vue b/pages/servers.vue
@@ -36,7 +36,7 @@ onMounted(async () => {
           {{ $t('servers.selectServer') }}
         </h1>
 
-        <div class="servers relative w-full flex justify-center mb-20 min-h-[100px]">
+        <div class="servers relative w-full grid gap-3 justify-center mb-20 min-h-[100px]">
           <div
             v-for="(server, index) in serverData"
             v-bind:key="index"