feat: mobile header add responsive design

SolidZORO · Jul 4, 2020 · d04e46e · d04e46e
1 parent 15845e1
commit d04e46e
Show file tree

Hide file tree

Showing 19 changed files with 109 additions and 120 deletions.
diff --git a/packages/leaa-dashboard/_env.js.example b/packages/leaa-dashboard/_env.js.example
@@ -6,7 +6,7 @@ const __ENV_DATA__ = {
   API_URL: 'http://localhost:5000',
   API_VERSION: 'v1',
 
-  // if using nginx to deploy to a sub dir, can modify, e.g. '/dash' [default: '']
+  // if using nginx to deploy to a sub dir, can modify, e.g. '/dash' [default: '']  ⚠️ NOT SET '/'
   ROUTER_BASENAME: '',
 
   // phone | email (Primary Display at UI)

diff --git a/packages/leaa-dashboard/src/components/ExportButton/ExportButton.tsx b/packages/leaa-dashboard/src/components/ExportButton/ExportButton.tsx
@@ -66,7 +66,7 @@ export const ExportButton = (props: IProps) => {
         icon={<RiDownload2Line />}
         onClick={onExport}
         loading={loading}
-        className={cx('g-extra-filter-bar--item', 'g-extra-filter-bar--export')}
+        className={cx('g-extra-filter-bar--item')}
       >
         {t('_lang:export')}
       </Button>

diff --git a/packages/leaa-dashboard/src/components/PageCard/style.module.less b/packages/leaa-dashboard/src/components/PageCard/style.module.less
@@ -3,29 +3,27 @@
 
 :global {
   .g-page-card-create-button {
-    @padding-x: 14px;
-    border-color: @btn-default-border;
-    color: darken(@btn-default-border, 8%);
+    @padding-x: 20px;
+    @pcolor: @primary-color;
+    border-color: @pcolor;
+    color: darken(@pcolor, 8%);
     background: #fff;
     padding-left: @padding-x;
     padding-right: @padding-x;
     width: auto;
+    height: 38px;
 
     @media (min-width: @screen-md) {
-      @padding-x: 20px;
-
-      @c: @primary-color;
-
-      border-color: @c;
-      color: @c;
-      background-color: transparent;
-      padding-left: @padding-x;
-      padding-right: @padding-x;
+      height: 40px;
     }
 
     svg {
       font-size: 22px;
-      vertical-align: -6px;
+      vertical-align: -5px;
+
+      @media (min-width: @screen-md) {
+        vertical-align: -6px;
+      }
     }
 
     span {
@@ -58,10 +56,6 @@
   }
 }
 
-//
-//
-//
-// local
 .page-card-wrapper {
   transition: all 0.3s;
 
@@ -81,24 +75,6 @@
     //
     //
 
-    .g-page-card-title-bar-extra {
-      display: flex !important;
-      align-items: center;
-      justify-content: flex-start;
-    }
-
-    .g-extra-filter-bar--item {
-      margin-left: 8px;
-      width: auto;
-    }
-
-    .g-extra-filter-bar--q {
-      width: 150px;
-    }
-
-    //
-    //
-
     .g-page-card-filter-bar-wrapper {
     }
   }
@@ -109,24 +85,22 @@
   }
 
   .title-bar {
-    //width: 100%;
     position: relative;
     background: transparent;
-    //display: block;
-    //background-color: #0ff;
-    display: flex;
     justify-content: space-between;
     align-items: center;
     place-items: center;
     justify-items: center;
     margin-bottom: @layout-padding-x / 2;
+    display: block;
 
     @media (min-width: @screen-md) {
+      display: flex;
       margin-bottom: @layout-padding-x;
     }
 
     .title-wrapper {
-      margin-left: 30px;
+      margin-left: 36px;
       display: flex;
       align-items: center;
       place-items: center;
@@ -142,7 +116,7 @@
       }
 
       a.page-card-create-link {
-        margin-left: 10px;
+        margin-left: 15px;
 
         @media (min-width: @screen-md) {
           margin-left: 20px;
@@ -178,11 +152,20 @@
 
     .fn-wrapper {
       display: flex;
+      margin-top: 5px;
+      margin-bottom: 10px;
+
+      @media (min-width: @screen-md) {
+        margin-top: 0;
+      }
 
       .extra {
         margin: 0;
-        padding: 0;
-        padding-left: @layout-padding-x / 2;
+        width: 100%;
+
+        @media (min-width: @screen-md) {
+          width: auto;
+        }
       }
 
       .filter-button {
@@ -192,6 +175,7 @@
         background-color: #fff;
         padding-left: @padding-x;
         padding-right: @padding-x;
+        margin-right: @layout-padding-x / 2;
 
         &:hover,
         &:active,

diff --git a/packages/leaa-dashboard/src/components/SearchInput/style.module.less b/packages/leaa-dashboard/src/components/SearchInput/style.module.less
@@ -2,15 +2,19 @@
 
 .search-input-wrapper {
   position: relative;
-  width: 120px;
 
-  @media (min-width: @screen-md) {
-    width: 170px;
+  .search-input-inner {
   }
-}
 
-.search-input-inner {
   :global {
+    .ant-input-affix-wrapper {
+      width: 100%;
+
+      @media (min-width: @screen-md) {
+        width: 160px;
+      }
+    }
+
     .ant-input-prefix {
       svg {
         font-size: 130%;
@@ -19,9 +23,3 @@
     }
   }
 }
-
-:global {
-  .ant-input-affix-wrapper > input.ant-input {
-    padding-left: 3px !important;
-  }
-}
diff --git a/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/style.module.less b/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/style.module.less
@@ -201,17 +201,5 @@ ul.menu-wrapper {
 
 // pc menu
 .target-button-wrapper {
-  transition: all 0.2s;
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  left: -7px;
-
-  @media (min-width: @screen-md) {
-    display: none;
-  }
-
-  button {
-    padding-top: @layout-padding-x + 3px;
-  }
+  display: block;
 }
diff --git a/...ges/leaa-dashboard/src/layouts/MasterLayout/_components/SidemenuTarget/SidemenuTarget.tsx b/...ges/leaa-dashboard/src/layouts/MasterLayout/_components/SidemenuTarget/SidemenuTarget.tsx
@@ -14,14 +14,14 @@ interface IProps {
 
 export const SidemenuTarget = (props: IProps): JSX.Element => {
   return (
-    <div
+    <Button
+      type="link"
+      onClick={props.onCallbackSidebarTarget}
       className={cx(style['sidebar-target-wrapper'], {
         [style['sidebar-target-wrapper--collapsed']]: props.collapsed,
       })}
     >
-      <Button type="link" onClick={props.onCallbackSidebarTarget}>
-        {props.collapsed ? <RiMenuLine /> : <RiMenu3Line />}
-      </Button>
-    </div>
+      {props.collapsed ? <RiMenuLine /> : <RiMenu3Line />}
+    </Button>
   );
 };
diff --git a/...ages/leaa-dashboard/src/layouts/MasterLayout/_components/SidemenuTarget/style.module.less b/...ages/leaa-dashboard/src/layouts/MasterLayout/_components/SidemenuTarget/style.module.less
@@ -1,25 +1,33 @@
 @import '~@leaa/dashboard/src/styles/variables.less';
 
 .sidebar-target-wrapper {
-  position: relative;
+  transition: all 0.2s;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 19px 8px;
+  height: auto;
+  width: auto;
 
-  button {
-    //color: lighten(@primary-color, 10%) !important;
-    color: #777 !important;
-    opacity: 0.7;
+  @media (min-width: @screen-md) {
+    display: none;
+  }
+
+  color: #777 !important;
+  opacity: 0.7;
+  display: inline-block;
 
-    svg {
-      font-size: 180%;
-    }
+  svg {
+    font-size: 180%;
+    display: block;
+  }
 
-    &:hover {
-      opacity: 1;
-    }
+  &:hover {
+    opacity: 1;
   }
 }
 
 .sidebar-target-wrapper--collapsed {
-  button {
-    color: #999 !important;
-  }
+  color: #999 !important;
 }
diff --git a/packages/leaa-dashboard/src/layouts/MasterLayout/style.module.less b/packages/leaa-dashboard/src/layouts/MasterLayout/style.module.less
@@ -21,6 +21,7 @@
 
 .full-layout-container {
   padding: 0 20px;
+  margin-bottom: 50px;
 }
 
 .full-layout-content {
@@ -30,9 +31,11 @@
   //padding: 10px;
   margin: 0;
   background-color: var(--layout-main-bg-color);
+  padding-bottom: 30px;
 
   @media (min-width: @screen-md) {
     padding: var(--page-card-padding-x);
+    padding-bottom: 50px;
     //border-radius: var(--page-border-radius) var(--page-border-radius) 0 0;
     border-radius: 24px 24px 0 0;
     margin: var(--layout-padding-x) var(--layout-padding-x) 0 0;

diff --git a/packages/leaa-dashboard/src/pages/Action/ActionList/ActionList.tsx b/packages/leaa-dashboard/src/pages/Action/ActionList/ActionList.tsx
@@ -63,7 +63,7 @@ export default (props: IPage) => {
       title="@LIST"
       extra={
         <SearchInput
-          className={cx('g-extra-filter-bar--item', 'g-extra-filter-bar--q')}
+          className={cx('g-page-card-extra-search-input')}
           value={crudQuery.q}
           onSearch={(s?: string) => {
             return setCrudQuery({

diff --git a/packages/leaa-dashboard/src/pages/Article/ArticleList/ArticleList.tsx b/packages/leaa-dashboard/src/pages/Article/ArticleList/ArticleList.tsx
@@ -60,7 +60,7 @@ export default (props: IPage) => {
       loading={listLoading}
       extra={
         <SearchInput
-          className={cx('g-search-input')}
+          className={cx('g-page-card-extra-search-input')}
           value={crudQuery.q}
           onSearch={(q?: string) => {
             return setCrudQuery({
@@ -80,7 +80,6 @@ export default (props: IPage) => {
           label: t('_lang:category'),
           content: (
             <SelectCategoryIdByTree
-              // className={cx('g-extra-filter-bar--item', 'g-extra-filter-bar--category')}
               componentProps={{ allowClear: true }}
               onChange={(cId?: string) => {
                 setCrudQuery({

diff --git a/packages/leaa-dashboard/src/pages/Attachment/AttachmentList/AttachmentList.tsx b/packages/leaa-dashboard/src/pages/Attachment/AttachmentList/AttachmentList.tsx
@@ -57,7 +57,7 @@ export default (props: IPage) => {
       title="@LIST"
       extra={
         <SearchInput
-          className={cx('g-extra-filter-bar--item', 'g-extra-filter-bar--q')}
+          className={cx('g-page-card-extra-search-input')}
           value={crudQuery.q}
           onSearch={(q?: string) => {
             return setCrudQuery({

diff --git a/packages/leaa-dashboard/src/pages/Ax/AxList/AxList.tsx b/packages/leaa-dashboard/src/pages/Ax/AxList/AxList.tsx
@@ -59,7 +59,7 @@ export default (props: IPage) => {
       title="@LIST"
       extra={
         <SearchInput
-          className={cx('g-extra-filter-bar--item', 'g-extra-filter-bar--q')}
+          className={cx('g-page-card-extra-search-input')}
           value={crudQuery.q}
           onSearch={(q?: string) => {
             return setCrudQuery({

diff --git a/packages/leaa-dashboard/src/pages/Permission/PermissionList/PermissionList.tsx b/packages/leaa-dashboard/src/pages/Permission/PermissionList/PermissionList.tsx
@@ -109,7 +109,7 @@ export default (props: IPage) => {
       title="@LIST"
       extra={
         <SearchInput
-          className={cx('g-extra-filter-bar--item', 'g-extra-filter-bar--q')}
+          className={cx('g-page-card-extra-search-input')}
           value={crudQuery.q}
           onSearch={(q?: string) => {
             return setCrudQuery({

diff --git a/packages/leaa-dashboard/src/pages/Role/RoleList/RoleList.tsx b/packages/leaa-dashboard/src/pages/Role/RoleList/RoleList.tsx
@@ -82,7 +82,7 @@ export default (props: IPage) => {
       title="@LIST"
       extra={
         <SearchInput
-          className={cx('g-extra-filter-bar--item', 'g-extra-filter-bar--q')}
+          className={cx('g-page-card-extra-search-input')}
           value={crudQuery.q}
           onSearch={(q?: string) => {
             return setCrudQuery({