Make dashboard tools initital hidden for mobile

jet/dashboard/templates/jet.dashboard/dashboard_tools.html

@@ -1,5 +1,10 @@
 {% load i18n %}
 
+<div class="dashboard-tools-toggle-container">
+    <a href="#" class="dashboard-tools-toggle button">
+        <span class="dashboard-tools-toggle-icon icon-settings"></span>
+    </a>
+</div>
 <div class="dashboard-tools">
     <form action="{% url "jet-dashboard:add_user_dashboard_module" %}" method="POST" id="add-dashboard-module-form">
         {% csrf_token %}
@@ -15,10 +20,10 @@
                     <option value="{{ forloop.counter0 }}" data-type="children">{{ module.title }}</option>
                 {% endfor %}
             </optgroup>
-        </select><a href="#" class="button add-dashboard-link" title="{% trans "Add" %}"><span class="icon-add"></span><span class="add-dashboard-link-label">{% trans "Add" %}</span></a>
+        </select><a href="#" class="button add-dashboard-link" title="{% trans "Add" %}"><span class="add-dashboard-link-icon icon-add"></span><span class="add-dashboard-link-label">{% trans "Add" %}</span></a>
         <input type="hidden" name="app_label" value="{% if app_label %}{{ app_label }}{% endif %}">
         <input type="hidden" name="type" value="">
-        <a href="#" class="button transparent reset-dashboard-link" title="{% trans "Reset widgets" %}"><span class="icon-reset"></span><span class="reset-dashboard-link-label">{% trans "Reset widgets" %}</span></a>
+        <a href="#" class="button transparent reset-dashboard-link" title="{% trans "Reset widgets" %}"><span class="reset-dashboard-link-icon icon-reset"></span><span class="reset-dashboard-link-label">{% trans "Reset widgets" %}</span></a>
     </form>
     <form action="{% url "jet-dashboard:reset_dashboard" %}" method="POST" id="reset-dashboard-form">
         {% csrf_token %}

jet/static/jet/css/_dashboard.scss

@@ -101,17 +101,47 @@ ul.actionlist li {
     right: 20px + 175px + 20px;
 
     @include for-mobile {
+      display: none;
       position: static;
-      margin: 20px;
+      margin: 10px 20px 0 20px;
+      padding: 10px;
+      background: $content-background-color;
+      border-radius: 5px;
     }
 
     @include for-phone {
-      margin: 20px 10px;
+      margin: 10px 10px 0 10px;
     }
 
     .button {
       vertical-align: middle;
     }
+
+    &.visible {
+      @include for-mobile {
+        display: block;
+      }
+    }
+
+    &-toggle {
+      &-icon {
+        vertical-align: middle;
+      }
+
+      &-container {
+        display: none;
+        margin: 20px 20px 0 20px;
+        text-align: right;
+
+        @include for-mobile {
+          display: block;
+        }
+
+        @include for-phone {
+          margin: 10px 10px 0 10px;
+        }
+      }
+    }
   }
 
   &-column {
@@ -382,17 +412,24 @@ ul.actionlist li {
   + .select2 {
     background-color: transparent;
 
+    @include for-mobile {
+      min-width: 160px;
+      max-width: 160px;
+    }
+
     @include for-phone {
       width: 100% !important;
+      max-width: none;
       margin-bottom: 5px;
     }
 
     .select2-selection {
       border-radius: 4px 0 0 4px !important;
-      border: 0;
+      border-width: 0;
 
-      @include for-phone {
+      @include for-mobile {
         border-radius: 4px !important;
+        border-width: 1px;
       }
     }
   }
@@ -401,30 +438,43 @@ ul.actionlist li {
     border-radius: 0 4px 4px 0 !important;
     padding: 0 10px !important;
 
-    @include for-phone {
+    @include for-mobile {
+      margin-left: 6px;
       border-radius: 4px !important;
       margin-right: 5px;
     }
 
+    @include for-phone {
+      margin-left: 0;
+    }
+
+    &-icon {
+      vertical-align: middle;
+    }
+
     &-label {
       display: none;
       vertical-align: middle;
       margin-left: 4px;
-
-      @include for-phone {
-        display: inline;
-      }
     }
   }
 }
 
 .reset-dashboard-link {
+  @include for-mobile {
+    float: right;
+  }
+
+  @include for-phone {
+    float: none;
+  }
+
   &-label {
     display: none;
     vertical-align: middle;
     margin-left: 6px;
 
-    @include for-phone {
+    @include for-mobile {
       display: inline;
     }
   }

jet/static/jet/js/src/features/dashboard.js

@@ -135,6 +135,10 @@ var initDashboard = function() {
         });
     });
 
+    $('.dashboard-tools-toggle').on('click', function() {
+        $('.dashboard-tools').toggleClass('visible');
+    });
+
     var $form = $('#add-dashboard-module-form');
 
     $form.find('.add-dashboard-link').on('click', function (e) {