feat: optimize kaifain responsive styles

kaifain_v2/assets/styles/buefy.scss

@@ -4,6 +4,8 @@
 $fullhd: 1200px+(2 * $gap);
 $primary-invert: findColorInvert($primary);
 
+$dropdown-mobile-breakpoint: $tablet - 1;
+
 @import "~bulma";
 @import "~buefy/src/scss/buefy";
 

kaifain_v2/assets/styles/main.scss

@@ -65,12 +65,27 @@
       width: 100%;
     }
   }
+
+  @media screen and (max-width: 767px) {
+    .container {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+
+    .columns {
+      margin: 0;
+    }
+
+    .solution-cell {
+      margin-left: -16px;
+      margin-right: -16px;
+    }
+  }
 }
 
 .scoped-view.kaifain {
-  padding-top: 80px;
-
-  #proginn-header {
+  #proginn-header,
+  .wx-header {
     display: none !important;
   }
 
@@ -80,44 +95,15 @@
     }
   }
 
+  .topArea {
+    padding-top: 80px;
+  }
+
   .navbar {
     &,
     &>.container,
     & .navbar-brand {
       min-height: auto !important;
     }
-
-    .navbar-brand {
-      margin-left: -12px;
-    }
-
-    .navbar-menu {
-      margin-right: -12px;
-    }
-
-    .navbar-item,
-    .navbar-link {
-      padding: 8px 12px;
-    }
-
-    .navbar-item.has-dropdown {
-      padding: 0;
-    }
-
-    .navbar-dropdown {
-      padding-top: 8px;
-      padding-bottom: 8px;
-
-      > a.navbar-item {
-        padding-right: 44px;
-      }
-    }
-  }
-
-  .input,
-  .button {
-    &.is-small {
-      font-size: 12px;
-    }
   }
 }

kaifain_v2/components/CategoryNav.vue

@@ -167,5 +167,17 @@ export default Vue.extend({
     margin: 0.125rem 0 0.5rem;
   }
 }
+
+.kaifain-view {
+  @media screen and (max-width: 767px) {
+    .category-nav {
+      padding: 0.75rem 0 1.5rem;
+
+      .column.label {
+        padding: 0.25rem 0.75rem 0.125rem;
+      }
+    }
+  }
+}
 </style>
 

kaifain_v2/components/Pagination.vue

@@ -124,8 +124,19 @@ export default Vue.extend({
     justify-content: center;
     padding: 3rem 0;
 
+    .pagination-previous {
+      flex-grow: unset;
+      order: 1;
+    }
+
     .pagination-list {
       flex-grow: unset;
+      order: 2;
+    }
+
+    .pagination-next {
+      flex-grow: unset;
+      order: 3;
     }
 
     .progico-arrow {

kaifain_v2/components/SearchBox.vue

@@ -140,4 +140,31 @@ export default Vue.extend({
     }
   }
 }
+
+.kaifain-view {
+  @media screen and (max-width: 767px) {
+    .search-section {
+      padding: 44px 0 12px;
+
+      .level-right.action {
+        display: none;
+      }
+
+      .search-box {
+        .input,
+        .button {
+          height: 2.75rem;
+        }
+
+        .button {
+          width: 72px;
+        }
+      }
+
+      .extension {
+        padding: 1rem 0;
+      }
+    }
+  }
+}
 </style>

kaifain_v2/components/Toolbar.vue

@@ -1,10 +1,13 @@
 <template lang="pug">
   .toolbar
     .container.is-content
-      .level
+      .level.is-mobile
         .level-left
           .level-item
-            b-dropdown(:triggers="['hover']")
+            b-dropdown(
+              :triggers="[isMobile ? 'click' : 'hover']"
+              :append-to-body="isMobile"
+              )
               .field.trigger(slot="trigger")
                 span {{sortType === 1 ? '最新发布' : '综合排序'}}
                 i.progico.progico-arrow
@@ -18,10 +21,12 @@
                 ) 最新发布
 
           .level-item
-            b-dropdown(
-              :triggers="['hover']"
-              custom
+            b-dropdown.city-dropdown(
+              ref="city-dropdown"
+              :triggers="[isMobile ? 'click' : 'hover']"
               :class="{'is-force-hide': forceHideCityMenu}"
+              :append-to-body="isMobile"
+              custom
               )
               .field.trigger(
                 slot="trigger"
@@ -87,7 +92,9 @@ export default Vue.extend({
   data() {
     return {
       isChoiceCache: false,
-      forceHideCityMenu: false
+      forceHideCityMenu: false,
+      // @ts-ignore
+      isMobile: this.$deviceType.isMobile()
     }
   },
 
@@ -118,6 +125,11 @@ export default Vue.extend({
         this.$emit('update:cityId', id)
       }
 
+      if (this.isMobile) {
+        // @ts-ignore
+        this.$refs['city-dropdown'].toggle()
+      }
+
       this.forceHideCityMenu = true
     },
 
@@ -135,82 +147,106 @@ export default Vue.extend({
 </script>
 
 <style lang="scss">
-.kaifain-view .toolbar {
-  background: #f6f6f7;
-  height: 36px;
+.kaifain-view {
+  .toolbar {
+    background: #f6f6f7;
+    height: 36px;
 
-  .level {
-    margin: 0 -0.75rem;
-  }
+    .level {
+      margin: 0 -0.75rem;
+    }
+
+    .level-item {
+      font-size: 0.75rem;
+      color: #777;
+      user-select: none;
+
+      .field {
+        height: 36px;
+        min-width: 86px;
+        padding: 0 0.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.trigger:hover {
+          background: #fbfbfc;
+          color: #555;
+        }
+      }
 
-  .level-item {
-    font-size: 0.75rem;
-    color: #777;
-    user-select: none;
-
-    .field {
-      height: 36px;
-      min-width: 86px;
-      padding: 0 0.75rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &.trigger:hover {
-        background: #fbfbfc;
-        color: #555;
+      .progico-arrow {
+        transform: rotate(90deg);
+        font-size: 10px;
+        margin: 2px 0 0 4px;
+        opacity: 0.86;
       }
     }
 
-    .progico-arrow {
-      transform: rotate(90deg);
-      font-size: 10px;
-      margin: 2px 0 0 4px;
-      opacity: 0.86;
+    .dropdown-menu {
+      padding: 0;
+      margin-top: -4px;
     }
-  }
 
-  .dropdown-menu {
-    padding: 0;
-    margin-top: -4px;
-  }
+    .dropdown-content {
+      box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
+      border-radius: 0;
+    }
 
-  .dropdown-content {
-    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1);
-    border-radius: 0;
-  }
+    .dropdown-item {
+      font-size: 0.75rem;
+    }
 
-  .dropdown-item {
-    font-size: 0.75rem;
-  }
+    @media screen and (max-width: 767px) {
+      .level {
+        margin: 0;
+      }
 
-  .city-menu {
-    width: 392px;
-    padding: 0.5rem 0 0.5rem 1rem;
+      .level-left {
+        flex: 1;
+      }
 
-    .split {
-      height: 1px;
-      background: #eee;
-      margin: 0.75rem 1rem 0.75rem 0;
+      .level-right {
+        display: none;
+      }
     }
+  }
+
+  .city-dropdown {
+    .city-menu {
+      width: 392px;
+      padding: 0.5rem 0 0.5rem 1rem;
 
-    .tag {
-      min-width: 68px;
-      background: transparent;
-      cursor: pointer;
+      .split {
+        height: 1px;
+        background: #eee;
+        margin: 0.75rem 1rem 0.75rem 0;
+      }
+
+      .tag {
+        min-width: 68px;
+        background: transparent;
+        cursor: pointer;
+
+        &:not(.is-primary):hover {
+          background: #f2f3f3;
+        }
+      }
 
-      &:not(.is-primary):hover {
-        background: #f2f3f3;
+      .tags > .tag {
+        margin: 0 0.25rem 0.3125rem 0;
       }
     }
 
-    .tags > .tag {
-      margin: 0 0.25rem 0.3125rem 0;
+    &.is-mobile-modal {
+      .city-menu {
+        width: auto;
+      }
     }
   }
-}
 
-.kaifain-view .dropdown.is-hoverable.is-force-hide .dropdown-menu {
-  display: none;
+  .dropdown.is-hoverable.is-force-hide .dropdown-menu {
+    display: none;
+  }
 }
 </style>

kaifain_v2/components/Topnav.vue

@@ -2,6 +2,8 @@
   b-navbar.topnav(
     :fixed-top="fixed"
     :transparent="true"
+    :active.sync="isActive"
+    :class="{'is-active': isActive}"
     wrapper-class="container"
     )
     template(slot="brand")
@@ -35,6 +37,7 @@
         :hoverable="true"
         :arrowless="true"
         :boxed="true"
+        :collapsible="isMobile"
         )
         b-navbar-item(:href="`https://${MAIN_HOST}/${tail}`") 客栈首页
         b-navbar-item(:href="`https://${MAIN_HOST}/cat/${tail}`" v-show="fixed") 程序员
@@ -77,7 +80,10 @@ export default Vue.extend({
       MAIN_HOST: MAIN_HOST,
       tail: '?from=kaifain',
       qSync: this.q,
-      loginUrl: '#'
+      loginUrl: '#',
+      isActive: false,
+      // @ts-ignore
+      isMobile: this.$deviceType.isMobile()
     }
   },
 
@@ -197,8 +203,12 @@ $theme-color: #20242d;
     }
   }
 
+  &.is-active,
   &.is-fixed-top {
     background: $theme-color;
+  }
+
+  &.is-fixed-top {
     padding: 0;
     height: 54px;
 
@@ -243,5 +253,23 @@ $theme-color: #20242d;
       }
     }
   }
+
+  @media screen and (max-width: 767px) {
+    .navbar {
+      &:not(.is-fixed-top) .navbar-burger {
+        margin-right: -16px;
+      }
+
+      .progico-plus-o {
+        display: none;
+      }
+
+      .navbar-menu {
+        &.is-active {
+          margin: 0 -16px;
+        }
+      }
+    }
+  }
 }
 </style>

kaifain_v2/pages/index.vue

@@ -24,7 +24,7 @@
         :is-choice.sync="isChoice"
         )
         .result-msg(
-          v-if="catName || topCatName"
+          v-if="!isMobile && (catName || topCatName)"
           slot="right"
           )
           h1 {{(catName || topCatName).replace(/方案$/, '')}}解决方案
@@ -92,6 +92,8 @@ export default SolutionListMixin.extend({
       connectPopupVisible: false,
       topCatName: '',
       catName: '',
+      // @ts-ignore
+      isMobile: this.$deviceType.isMobile()
     }
   },
 

layouts/kaifain_v2.vue

@@ -9,13 +9,12 @@ const MOB_HOST = process.env.NODE_ENV === 'development' ? 'kaifain-m.test.progin
 const REM_RESET_STYLE = `font-size:16px !important;`
 
 const resetRem = () => {
-  document.documentElement.style = REM_RESET_STYLE
-  document.body.style = REM_RESET_STYLE
-
   const _rem_mark = document.querySelector('#rootsize')
 
   if (_rem_mark) {
     _rem_mark.innerHTML = `html{${REM_RESET_STYLE}}`
+    document.documentElement.style = REM_RESET_STYLE
+    document.body.style = REM_RESET_STYLE
   }
 }