fix: compatible mobile

SolidZORO · Jul 2, 2020 · 2f9c8bf · 2f9c8bf
1 parent a39c982
commit 2f9c8bf
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -22,13 +22,9 @@ View the `README.md` of each sub-directory in `packages`. You may need to look a
 
 ### Dashboard ([demo](https://leaa-dashboard.now.sh))
 
-##### dashboard-login
+##### dashboard UI
 
-![dashboard-login](https://raw.githubusercontent.com/SolidZORO/leaa/master/designs/ui/dashboard-login.png)
-
-##### dashboard-user-edit
-
-![dashboard-user-edit](https://raw.githubusercontent.com/SolidZORO/leaa/master/designs/ui/dashboard-user-edit.png)
+![dashboard-UI]![new ui](./packages/leaa-dashboard/docs/images/leaa-dashboard-new-ui.png)
 
 ## **Legacy**
 

diff --git a/packages/leaa-dashboard/README.md b/packages/leaa-dashboard/README.md
@@ -60,3 +60,13 @@ server {
     }
 }
 ```
+
+### V3 UI and New UI
+
+#### New
+
+![new ui](./docs/images/leaa-dashboard-new-ui.png)
+
+#### v3
+
+![v3 ui](./docs/images/leaa-dashboard-v3-ui.png)
diff --git a/packages/leaa-dashboard/docs/images/leaa-dashboard-new-ui.png b/packages/leaa-dashboard/docs/images/leaa-dashboard-new-ui.png
diff --git a/packages/leaa-dashboard/docs/images/leaa-dashboard-v3-ui.png b/packages/leaa-dashboard/docs/images/leaa-dashboard-v3-ui.png
diff --git a/packages/leaa-dashboard/src/components/PageCard/style.module.less b/packages/leaa-dashboard/src/components/PageCard/style.module.less
@@ -19,6 +19,11 @@
       vertical-align: 5px;
       padding: 0 8px;
       font-size: 110%;
+      display: none;
+
+      @media (min-width: @screen-md) {
+        display: inline-block;
+      }
     }
 
     &:hover {
@@ -51,23 +56,30 @@
 .header {
   background: transparent;
   //margin: 12px 0;
-  display: flex;
+  //display: flex;
+  display: block;
   justify-content: space-between;
+  //justify-content: flex-start;
   align-items: center;
-  width: 100%;
+  //width: 100%;
   margin-bottom: 14px;
   min-height: 32px;
 
   @media (min-width: @screen-md) {
-    justify-content: space-between;
+    //justify-content: space-between;
     display: flex;
-    margin-bottom: 28px;
+    //margin-bottom: 28px;
   }
 
   .title {
     margin: 0;
     padding: 0 0 0 2px;
     color: #26254b;
+    //width: 100%;
+    //
+    //@media (min-width: @screen-md) {
+    //  width: auto;
+    //}
 
     :global {
       span {
@@ -80,8 +92,6 @@
 
   .page-card-create-link {
     margin-left: 20px;
-    //background-color: #ff0;
-    //border: 1px solid @primary-color;
   }
 
   .page-card-create-button {
@@ -91,9 +101,17 @@
   .extra {
     //font-size: 140%;
     margin: 0;
+    margin-top: 10px;
     padding: 0 0 0 3px;
     display: flex;
-    justify-content: flex-end;
+    //justify-content: flex-start;
+    justify-content: space-between;
+
+    //@media (min-width: @screen-md) {
+    //  justify-content: space-between;
+    //  display: flex;
+    //  margin-bottom: 28px;
+    //}
 
     :global {
       .g-page-card-extra-filter-bar-wrapper {
@@ -116,6 +134,10 @@
 
 .title-wrapper {
   margin-left: 40px;
+
+  @media (min-width: @screen-md) {
+    margin-left: 0;
+  }
 }
 
 .page-card-wrapper--complex {

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
@@ -205,7 +205,7 @@ ul.menu-wrapper {
   z-index: 2;
   position: absolute;
   top: 17px;
-  left: 0px;
+  left: 0;
 
   @media (min-width: @screen-md) {
     display: none;

diff --git a/packages/leaa-dashboard/src/pages/Article/ArticleList/ArticleList.tsx b/packages/leaa-dashboard/src/pages/Article/ArticleList/ArticleList.tsx
@@ -64,6 +64,8 @@ export default (props: IPage) => {
       route={props.route}
       title="@LIST"
       complexExtra
+      className={style['wapper']}
+      loading={listLoading}
       extra={
         <div className="g-page-card-extra-filter-bar-wrapper">
           <FilterIcon
@@ -107,8 +109,6 @@ export default (props: IPage) => {
           />
         </div>
       }
-      className={style['wapper']}
-      loading={listLoading}
     >
       <HtmlMeta title={t(`${props.route?.namei18n}`)} />
 

diff --git a/packages/leaa-dashboard/src/pages/User/_components/UploadUserAvatar/style.module.less b/packages/leaa-dashboard/src/pages/User/_components/UploadUserAvatar/style.module.less
@@ -4,7 +4,7 @@
 .user-avatar-wrapper {
   display: flex;
   justify-content: center;
-  margin: 50px auto;
+  margin: 20px auto;
 }
 
 .form-row {