Migrate dashboard to relayout

jet/dashboard/templates/admin/app_index.html

@@ -1,11 +1,6 @@
 {% extends "admin/base_site.html" %}
 {% load i18n static jet_dashboard_tags %}
 
-{% block html %}
-    {% get_dashboard 'app_index' as dashboard %}
-    {{ block.super }}
-{% endblock %}
-
 {% block extrastyle %}
     {{ block.super }}
     <link rel="stylesheet" type="text/css" href="{% static "admin/css/dashboard.css" %}" />
@@ -40,10 +35,13 @@
 
 {% block sidebar %}{% endblock %}
 
-{% block top-right %}
+{% block usertools %}
+    {% get_dashboard 'app_index' as dashboard %}
     {{ dashboard.render_tools }}
+    {{ block.super }}
 {% endblock %}
 
 {% block content %}
+    {% get_dashboard 'app_index' as dashboard %}
     {{ dashboard.render }}
-{% endblock %}
+{% endblock %}

jet/dashboard/templates/admin/index.html

@@ -1,11 +1,6 @@
 {% extends "admin/base_site.html" %}
 {% load i18n admin_static jet_dashboard_tags static %}
 
-{% block html %}
-    {% get_dashboard 'index' as dashboard %}
-    {{ block.super }}
-{% endblock %}
-
 {% block extrastyle %}
     {{ block.super }}
     <link rel="stylesheet" type="text/css" href="{% static "admin/css/dashboard.css" %}" />
@@ -26,10 +21,13 @@
 
 {% block sidebar %}{% endblock %}
 
-{% block top-right %}
+{% block usertools %}
+    {% get_dashboard 'index' as dashboard %}
     {{ dashboard.render_tools }}
+    {{ block.super }}
 {% endblock %}
 
 {% block content %}
+    {% get_dashboard 'index' as dashboard %}
     {{ dashboard.render }}
 {% endblock %}

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

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="background-form">
+<div class="dashboard-tools">
     <form action="{% url "jet-dashboard:add_user_dashboard_module" %}" method="POST" id="add-dashboard-module-form">
         {% csrf_token %}
         <select class="add-dashboard" name="module">
@@ -15,10 +15,10 @@
                     <option value="{{ forloop.counter0 }}" data-type="children">{{ module.title }}</option>
                 {% endfor %}
             </optgroup>
-        </select><a href="#" class="button button-secondary add-dashboard-link" title="{% trans "Add" %}"><span class="icon-add"></span></a>
+        </select><a href="#" class="button add-dashboard-link" title="{% trans "Add" %}"><span class="icon-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 button-transparent reset-dashboard-link" title="{% trans "Reset widgets" %}"><span class="icon-reset"></span></a>
+        <a href="#" class="button transparent reset-dashboard-link" title="{% trans "Reset widgets" %}"><span class="icon-reset"></span></a>
     </form>
     <form action="{% url "jet-dashboard:reset_dashboard" %}" method="POST" id="reset-dashboard-form">
         {% csrf_token %}

jet/dashboard/templates/jet.dashboard/modules/app_list.html

@@ -15,13 +15,13 @@
             <li>
                 <span class="float-right">
                     {% if model.add_url %}
-                        <a href="{{ model.add_url }}" class="addlink" title="{% trans 'Add' %}"><span class="icon-add3"></span></a>
+                        <a href="{{ model.add_url }}" class="addlink" title="{% trans 'Add' %}"></a>
                     {% else %}
                         &nbsp;
                     {% endif %}
 
                     {% if model.admin_url %}
-                        <a href="{{ model.admin_url }}" class="changelink" title="{% trans 'Change' %}"><span class="icon-edit"></span></a>
+                        <a href="{{ model.admin_url }}" class="changelink" title="{% trans 'Change' %}"></a>
                     {% else %}
                         &nbsp;
                     {% endif %}

jet/dashboard/templates/jet.dashboard/modules/model_list.html

@@ -5,13 +5,13 @@
         <li>
             <span class="float-right">
                 {% if model.add_url %}
-                    <a href="{{ model.add_url }}" class="addlink" title="{% trans 'Add' %}"><span class="icon-add3"></span></a>
+                    <a href="{{ model.add_url }}" class="addlink" title="{% trans 'Add' %}"></a>
                 {% else %}
                     &nbsp;
                 {% endif %}
 
                 {% if model.admin_url %}
-                    <a href="{{ model.admin_url }}" class="changelink" title="{% trans 'Change' %}"><span class="icon-edit"></span></a>
+                    <a href="{{ model.admin_url }}" class="changelink" title="{% trans 'Change' %}"></a>
                 {% else %}
                     &nbsp;
                 {% endif %}

jet/dashboard/templates/jet.dashboard/modules/recent_actions.html

@@ -24,9 +24,9 @@
                 {% endif %}
 
                 {% if entry.content_type %}
-                    <span class="mini quiet">{% filter capfirst %}{{ entry.content_type }}{% endfilter %}</span>
+                    <span>{% filter capfirst %}{{ entry.content_type }}{% endfilter %}</span>
                 {% else %}
-                    <span class="mini quiet">{% trans 'Unknown content' %}</span>
+                    <span>{% trans 'Unknown content' %}</span>
                 {% endif %}
 
                 {% if entry.is_deletion or not entry.get_admin_url %}

jet/static/jet/css/_content.scss

@@ -217,6 +217,8 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
 /* ACTION ICONS */
 
 .addlink {
+  vertical-align: middle;
+
   &:before {
     @include font-icon;
     content: $icon-add3;
@@ -226,6 +228,8 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
 }
 
 .changelink, .inlinechangelink {
+  vertical-align: middle;
+
   &:before {
     @include font-icon;
     content: $icon-edit;
@@ -235,6 +239,8 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
 }
 
 .deletelink {
+  vertical-align: middle;
+
   &:before {
     @include font-icon;
     content: $icon-cross;
@@ -244,6 +250,8 @@ p img, h1 img, h2 img, h3 img, h4 img, td img {
 }
 
 .inlineviewlink {
+  vertical-align: middle;
+
   &:before {
     @include font-icon;
     content: $icon-open-external;

jet/static/jet/css/_dashboard.scss

@@ -67,6 +67,12 @@ ul.actionlist li {
     }
   }
 
+  &-tools {
+    position: absolute;
+    top: 20px;
+    right: 20px + 175px + 20px;
+  }
+
   &-column {
     margin-left: 10px;
     border: 2px dashed transparent;
@@ -310,9 +316,13 @@ ul.actionlist li {
 }
 
 .add-dashboard {
-  & + .select2 {
-    border-radius: 4px 0 0 4px !important;
-    background-color: $input-background-color;
+  + .select2 {
+    background-color: transparent;
+
+    .select2-selection {
+      border-radius: 4px 0 0 4px !important;
+      border: 0;
+    }
   }
 
   &-link {

jet/static/jet/css/_forms.scss

@@ -12,15 +12,14 @@
     height: 32px;
     line-height: 32px;
     outline: 0;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: normal;
     text-align: center;
-    padding: 0 8px;
+    padding: 0 10px;
     @include transition(background $transitions-duration);
   }
 
   &.default {
-    font-size: 12px;
     font-weight: lighter;
     background-color: $primary-button-background-color;
     color: $primary-button-text-color;
@@ -29,6 +28,10 @@
     padding: 0 20px;
   }
 
+  &.transparent {
+    background-color: transparent;
+  }
+
   &:hover, &:focus {
     background-color: $button-hover-background-color;
     color: $button-hover-text-color;

jet/static/jet/css/select2/_layout.scss

@@ -14,19 +14,10 @@ $input-height: 32px;
     outline: 0;
     height: $input-height;
 
-    .background-form & {
-      background-color: $background-input-background-color;
-      border-color: $background-input-border-color;
-    }
-
     .select2-selection__rendered {
       color: $input-text-color;
       line-height: $input-height;
       font-size: 13px;
-
-      .background-form & {
-        color: $background-input-text-color;
-      }
     }
 
     .select2-selection__placeholder {