feat: update comment and friends mobile mode style

virtualansh · Aug 18, 2023 · 79e242c · 79e242c
1 parent c4b962f
commit 79e242c
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 16 deletions.
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
@@ -2,7 +2,11 @@
   <div
     class="bg-ob-deep-800 p-4 mt-8 lg:px-14 lg:py-10 rounded-2xl shadow-xl mb-8 lg:mb-0"
   >
-    <Title :title="'titles.comment'" paddings="pb-2 pt-0" />
+    <Title
+      :title="'titles.comment'"
+      paddings="pb-2 pt-0"
+      text-size="text-2xl md:text-3xl"
+    />
     <div id="gitalk-container"></div>
     <div id="vcomments"></div>
     <div id="tcomment"></div>
@@ -445,6 +449,8 @@ export default defineComponent({
   --waline-bgcolor-light: var(--background-secondary);
   --waline-badge-color: var(--text-accent);
   --waline-disabled-bgcolor: var(--text-dim);
+  --waline-avatar-size: 2.25rem;
+  --waline-m-avatar-size: 1.25rem;
   .wl-editor {
     @apply p-2 box-border bg-ob-deep-800 mx-1 my-0 opacity-50;
     transition: 0.3s opacity linear;
@@ -454,15 +460,19 @@ export default defineComponent({
   }
 
   .wl-login-nick {
-    @apply text-2xl pt-2;
+    @apply text-lg lg:text-2xl pt-0 lg:pt-2;
     color: var(--text-sub-accent);
     img {
-      @apply h-9 w-9 mt-1.5;
+      @apply h-6 w-6 lg:h-9 lg:w-9 mt-1.5;
     }
   }
 
+  .wl-text-number {
+    @apply hidden lg:block;
+  }
+
   .wl-avatar {
-    @apply mb-2;
+    @apply h-6 w-6 lg:h-9 lg:w-9 mb-3 lg:mb-5 mr-3;
   }
 
   .wl-header {
@@ -489,18 +499,21 @@ export default defineComponent({
   }
 
   .wl-nick {
-    @apply text-2xl;
+    @apply text-xl lg:text-2xl;
     color: var(--text-sub-accent);
   }
 
   .wl-cards {
     @apply flex flex-col gap-2 pb-4;
 
     .wl-user {
-      @apply flex justify-center pr-4 bg-ob-deep-900;
+      @apply flex justify-center pr-2 lg:pr-4 bg-ob-deep-900;
       margin-inline-end: 0;
+      .verified-icon {
+        @apply left-4 top-6 lg:left-6 lg:top-8;
+      }
       img {
-        @apply h-9 w-9 mt-1.5;
+        @apply h-6 w-6 lg:h-9 lg:w-9 mt-1.5;
       }
       svg {
         position: absolute;
@@ -526,14 +539,14 @@ export default defineComponent({
   }
 
   .wl-card-item {
-    @apply bg-ob-deep-900 p-4 rounded-lg;
+    @apply bg-ob-deep-900 p-2 lg:p-4 rounded-lg;
     .wl-card-item {
       @apply shadow-ob mb-2;
     }
   }
 
   .wl-card {
-    @apply pt-2 pb-0 border-b-0;
+    @apply pt-1 lg:pt-2 pb-0 border-b-0;
   }
 
   .wl-num {
@@ -561,6 +574,23 @@ export default defineComponent({
     .wl-edit {
       color: var(--text-dim);
     }
+
+    .wl-edit,
+    .wl-delete,
+    .wl-like {
+      @apply hidden lg:inline-flex;
+    }
+
+    .wl-badge {
+      @apply text-[0.55rem] text-xs px-1 py-0.5 me-0 mr-2 box-border border-none bg-ob-accent-55 text-ob;
+      &:first-of-type {
+        @apply text-white;
+        background: var(--main-gradient);
+      }
+      &:nth-of-type(2) {
+        @apply hidden lg:inline-flex;
+      }
+    }
   }
 
   .wl-sort {
@@ -579,7 +609,7 @@ export default defineComponent({
   .wl-meta {
     @apply mb-2;
     span {
-      @apply rounded-md py-0.5 px-1.5 me-1;
+      @apply rounded-md py-0.5 px-1.5 me-1 text-[0.55rem] lg:text-xs;
     }
   }
 

diff --git a/src/components/Link/LinkBox.vue b/src/components/Link/LinkBox.vue
@@ -1,19 +1,21 @@
 <template>
   <div
-    class="flex h-[25rem] w-full rounded-2xl relative shadow-xl mb-8"
+    class="h-[25rem] w-full rounded-2xl relative shadow-xl mb-8 flex"
     :style="gradientBackground"
   >
     <div
       class="ob-gradient-plate absolute bg-ob-deep-900 rounded-xl opacity-90 flex justify-center items-center shadow-lg hover:shadow-2xl duration-300 overflow-hidden"
     >
       <div class="flex w-full relative overflow-hidden">
         <div class="top-6 left-6 absolute flex flex-col">
-          <div class="text-ob-dim text-sm">{{ t('settings.links') }}</div>
+          <div class="hidden md:flex text-ob-dim text-sm">
+            {{ t('settings.links') }}
+          </div>
           <Title
             title="settings.links-slogan"
             icon="friends"
             text-size="text-3xl"
-            paddings="pb-2"
+            paddings="hidden md:flex pb-2"
             margins="mb-0 mt-0"
           />
         </div>

diff --git a/src/components/Link/LinkCategoryList.vue b/src/components/Link/LinkCategoryList.vue
@@ -9,7 +9,9 @@
       <span class="text-ob-dim mb-8 text-lg">
         {{ t(`${convertToLocale(category)}-desc`) }}
       </span>
-      <ul class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-8">
+      <ul
+        class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-8"
+      >
         <template v-for="link of links[category]">
           <LinkCard
             :nick="link.nick"

diff --git a/src/styles/components/article.scss b/src/styles/components/article.scss
@@ -44,7 +44,7 @@
       b {
         @apply text-ob text-xs uppercase;
         &.article-tag {
-          @apply relative py-0.5 px-1.5 text-ob-bright mr-2;
+          @apply relative py-0.5 px-1.5 text-white mr-2;
           span {
             @apply relative z-10 text-xs;
             position: relative;
@@ -117,7 +117,7 @@
     b {
       @apply text-ob uppercase;
       &.article-tag {
-        @apply relative py-0.5 px-1.5 text-ob-bright mr-3;
+        @apply relative py-0.5 px-1.5 text-white mr-3;
 
         span {
           @apply relative z-10 text-xs;