浏览代码

Some mobile view fixes.

Thanks to xet7 !
Lauri Ojansivu 4 天之前
父节点
当前提交
c4af4d03ac
共有 3 个文件被更改,包括 36 次插入12 次删除
  1. 24 0
      client/components/boards/boardsList.css
  2. 8 8
      client/components/lists/list.css
  3. 4 4
      client/components/lists/listHeader.jade

+ 24 - 0
client/components/boards/boardsList.css

@@ -361,6 +361,18 @@
   min-height: 100vh; /* Force content to be tall enough to scroll */
 }
 
+/* Hide archive and clone board buttons in mobile view */
+.board-list.mobile-view .js-archive-board,
+.board-list.mobile-view .js-clone-board {
+  display: none !important;
+}
+
+/* Change board drag handle to up-down arrow in mobile view */
+.board-list.mobile-view .board-handle.fa-arrows::before {
+  content: "↕️" !important;
+  font-family: inherit !important;
+}
+
 .board-list.mobile-view::after {
   content: '';
   display: block;
@@ -824,5 +836,17 @@
   #content {
     overflow: hidden;
   }
+
+  /* Hide archive and clone board buttons in mobile view */
+  .board-list .js-archive-board,
+  .board-list .js-clone-board {
+    display: none !important;
+  }
+
+  /* Change board drag handle to up-down arrow in mobile view */
+  .board-list .board-handle.fa-arrows::before {
+    content: "↕️" !important;
+    font-family: inherit !important;
+  }
 }
 

+ 8 - 8
client/components/lists/list.css

@@ -646,7 +646,7 @@ body.list-resizing-active * {
   height: auto;
   width: 100%;
   min-width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
 }
 .list.mobile-view {
@@ -654,7 +654,7 @@ body.list-resizing-active * {
   flex-basis: auto;
   width: 100%;
   min-width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
 }
 .list.mobile-view:first-child {
   margin-left: 0px;
@@ -663,7 +663,7 @@ body.list-resizing-active * {
   flex: 0 0 60px;
   height: 60px;
   width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
 }
 .list.mobile-view.ui-sortable-helper .list-header.ui-sortable-handle {
@@ -673,7 +673,7 @@ body.list-resizing-active * {
   flex: 0 0 60px;
   height: 60px;
   width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
 }
 .list.mobile-view .list-body {
@@ -771,7 +771,7 @@ body.list-resizing-active * {
     height: auto;
     width: 100%;
     min-width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
   }
   .list {
@@ -779,7 +779,7 @@ body.list-resizing-active * {
     flex-basis: auto;
     width: 100%;
     min-width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
   }
   .list:first-child {
     margin-left: 0px;
@@ -788,7 +788,7 @@ body.list-resizing-active * {
     flex: 0 0 60px;
     height: 60px;
     width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
   }
   .list.ui-sortable-helper .list-header.ui-sortable-handle {
@@ -798,7 +798,7 @@ body.list-resizing-active * {
     flex: 0 0 60px;
     height: 60px;
     width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
   }
   .list-body {

+ 4 - 4
client/components/lists/listHeader.jade

@@ -51,11 +51,11 @@ template(name="listHeader")
           div.list-header-menu
             unless currentUser.isCommentOnly
               if canSeeAddCard
-                a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") | 
-              a.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") | 
+                a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}") ➕
+              a.js-open-list-menu(title="{{_ 'listActionPopup-title'}}") ☰
         else
-          a.list-header-menu-icon.js-select-list | ▶️
-          a.list-header-handle.handle.js-list-handle | ↔
+          a.list-header-menu-icon.js-select-list ▶️
+          a.list-header-handle.handle.js-list-handle 
       else if currentUser.isBoardMember
         if isWatching
           i.list-header-watch-icon | 👁️