Mobile improvements

1 files changed, 29 insertions, 0 deletions

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 405ba0fa837..8d6b6405309 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -140,10 +140,19 @@
 }
 
 .board-title {
+  position: relative;
   margin: 0;
   padding: $gl-padding;
   font-size: 1em;
   border-bottom: 1px solid $border-color;
+
+  .board-mobile-handle {
+    position: relative;
+    left: 0;
+    top: 1px;
+    margin-top: 0;
+    margin-right: 5px;
+  }
 }
 
 .board-search-container {
@@ -241,6 +250,7 @@
 }
 
 .card {
+  position: relative;
   width: 100%;
   padding: 10px $gl-padding;
   background: #fff;
@@ -248,6 +258,14 @@
   box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
   list-style: none;
 
+  &.user-can-drag {
+    padding-left: ($gl-padding * 2);
+
+    @media (min-width: $screen-sm-min) {
+      padding-left: $gl-padding;
+    }
+  }
+
   &:not(:last-child) {
     margin-bottom: 5px;
   }
@@ -262,6 +280,17 @@
   }
 }
 
+.board-mobile-handle {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  margin-top: (-15px / 2);
+
+  @media (min-width: $screen-sm-min) {
+    display: none;
+  }
+}
+
 .card-title {
   margin: 0;
   font-size: 1em;