Browse Source

Some mobile view fixes.

Thanks to xet7 !
Lauri Ojansivu 4 days ago
parent
commit
c4af4d03ac

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

@@ -361,6 +361,18 @@
   min-height: 100vh; /* Force content to be tall enough to scroll */
   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 {
 .board-list.mobile-view::after {
   content: '';
   content: '';
   display: block;
   display: block;
@@ -824,5 +836,17 @@
   #content {
   #content {
     overflow: hidden;
     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;
   height: auto;
   width: 100%;
   width: 100%;
   min-width: 100%;
   min-width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
 }
 }
 .list.mobile-view {
 .list.mobile-view {
@@ -654,7 +654,7 @@ body.list-resizing-active * {
   flex-basis: auto;
   flex-basis: auto;
   width: 100%;
   width: 100%;
   min-width: 100%;
   min-width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
 }
 }
 .list.mobile-view:first-child {
 .list.mobile-view:first-child {
   margin-left: 0px;
   margin-left: 0px;
@@ -663,7 +663,7 @@ body.list-resizing-active * {
   flex: 0 0 60px;
   flex: 0 0 60px;
   height: 60px;
   height: 60px;
   width: 100%;
   width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
 }
 }
 .list.mobile-view.ui-sortable-helper .list-header.ui-sortable-handle {
 .list.mobile-view.ui-sortable-helper .list-header.ui-sortable-handle {
@@ -673,7 +673,7 @@ body.list-resizing-active * {
   flex: 0 0 60px;
   flex: 0 0 60px;
   height: 60px;
   height: 60px;
   width: 100%;
   width: 100%;
-  border-left: 0px;
+  border-left: 0px !important;
   border-bottom: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
 }
 }
 .list.mobile-view .list-body {
 .list.mobile-view .list-body {
@@ -771,7 +771,7 @@ body.list-resizing-active * {
     height: auto;
     height: auto;
     width: 100%;
     width: 100%;
     min-width: 100%;
     min-width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
   }
   }
   .list {
   .list {
@@ -779,7 +779,7 @@ body.list-resizing-active * {
     flex-basis: auto;
     flex-basis: auto;
     width: 100%;
     width: 100%;
     min-width: 100%;
     min-width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
   }
   }
   .list:first-child {
   .list:first-child {
     margin-left: 0px;
     margin-left: 0px;
@@ -788,7 +788,7 @@ body.list-resizing-active * {
     flex: 0 0 60px;
     flex: 0 0 60px;
     height: 60px;
     height: 60px;
     width: 100%;
     width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
   }
   }
   .list.ui-sortable-helper .list-header.ui-sortable-handle {
   .list.ui-sortable-helper .list-header.ui-sortable-handle {
@@ -798,7 +798,7 @@ body.list-resizing-active * {
     flex: 0 0 60px;
     flex: 0 0 60px;
     height: 60px;
     height: 60px;
     width: 100%;
     width: 100%;
-    border-left: 0px;
+    border-left: 0px !important;
     border-bottom: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
   }
   }
   .list-body {
   .list-body {

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

@@ -51,11 +51,11 @@ template(name="listHeader")
           div.list-header-menu
           div.list-header-menu
             unless currentUser.isCommentOnly
             unless currentUser.isCommentOnly
               if canSeeAddCard
               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
         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
       else if currentUser.isBoardMember
         if isWatching
         if isWatching
           i.list-header-watch-icon | 👁️
           i.list-header-watch-icon | 👁️