Implement initial adaptive layout

jet/dashboard/templates/admin/app_index.html

@@ -17,12 +17,12 @@
     {% endfor %}
 {% endblock %}
 
-{% block coltype %}colMS{% endblock %}
+{% block bodyclass %}{{ block.super }} dashboard jet app-{{ app_label }}{% endblock %}
 
-{% block bodyclass %}{{ block.super }} app-{{ app_label }}{% endblock %}
+{% block sidebar %}{% endblock %}
 
-{% if not is_popup %}
-    {% block breadcrumbs %}
+{% block breadcrumbs %}
+    {% if not is_popup %}
         <div class="breadcrumbs">
             <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
             &rsaquo;
@@ -30,15 +30,12 @@
                 {% if app.name != app.app_label|capfirst|escape %}{{ app.name }}{% else %}{% trans app.app_label as app_label %}{{ app_label|capfirst|escape }}{% endif %}
             {% endfor %}
         </div>
-    {% endblock %}
-{% endif %}
-
-{% block sidebar %}{% endblock %}
+    {% else %}
+        {{ block.super }}
+    {% endif %}
 
-{% block usertools %}
     {% get_dashboard 'app_index' as dashboard %}
     {{ dashboard.render_tools }}
-    {{ block.super }}
 {% endblock %}
 
 {% block content %}

jet/dashboard/templates/admin/index.html

@@ -17,14 +17,14 @@
     {% endfor %}
 {% endblock %}
 
-{% block coltype %}colMS{% endblock %}
+{% block bodyclass %}{{ block.super }} dashboard jet{% endblock %}
 
 {% block sidebar %}{% endblock %}
 
-{% block usertools %}
+{% block breadcrumbs %}
+    {{ block.super }}
     {% get_dashboard 'index' as dashboard %}
     {{ dashboard.render_tools }}
-    {{ block.super }}
 {% endblock %}
 
 {% block content %}

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

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="dashboard columns_{{ columns|length }} cf">
+<div class="dashboard-container columns_{{ columns|length }} cf">
     {% for i in columns %}
         <div class="dashboard-column-wrapper">
             <div class="dashboard-column{% if forloop.first %} first{% endif %}">

jet/static/jet/css/_base.scss

@@ -15,6 +15,7 @@ body {
   color: $text-color;
   font-family: $font;
   font-size: $font-size;
+  -webkit-text-size-adjust: 100%;
 
   &.non-scrollable {
     overflow: hidden;
@@ -27,6 +28,10 @@ body {
   padding: 0 0 0 $sidebar-width;
   min-height: 100%;
 
+  @include for-mobile {
+    padding-left: 0;
+  }
+
   .popup & {
     padding-left: 0;
   }
@@ -35,18 +40,22 @@ body {
 #content {
   padding: 20px;
 
+  @include for-phone {
+    padding: 10px;
+  }
+
   & > h1 {
     display: none;
   }
 }
 
-.dashboard #content {
-    width: 600px;
-}
-
 #content-main {
   float: left;
   width: 100%;
+
+  @include for-mobile {
+    float: none;
+  }
 }
 
 #content-related {
@@ -54,11 +63,22 @@ body {
   width: 260px;
   position: relative;
   margin-right: -300px;
+
+  @include for-mobile {
+    float: none;
+    width: 100%;
+    margin-left: 0;
+    position: static;
+  }
 }
 
 #footer {
   clear: both;
   padding: 10px;
+
+  &:empty {
+    display: none;
+  }
 }
 
 .sidebar {
@@ -76,28 +96,44 @@ body {
 
 /* COLUMN TYPES */
 
-//.colMS {
-//    margin-right: 300px;
-//}
-//
-//.colSM {
-//    margin-left: 300px;
-//}
-//
-//.colSM #content-related {
-//    float: left;
-//    margin-right: 0;
-//    margin-left: -300px;
-//}
-//
-//.colSM #content-main {
-//    float: right;
-//}
-//
-//.popup .colM {
-//    width: auto;
-//}
-//
+.colMS {
+  margin-right: 300px;
+
+  @include for-mobile {
+    margin-right: 0;
+  }
+}
+
+.colSM {
+  margin-left: 300px;
+
+  @include for-mobile {
+    margin-left: 0;
+  }
+}
+
+.colSM #content-related {
+  float: left;
+  margin-right: 0;
+  margin-left: -300px;
+
+  @include for-mobile {
+    float: none;
+    margin-left: 0;
+  }
+}
+
+.colSM #content-main {
+  float: right;
+
+  @include for-mobile {
+    float: none;
+  }
+}
+
+.popup .colM {
+  width: auto;
+}
 
 /* SIDEBAR */
 

jet/static/jet/css/_breadcrumbs.scss

@@ -11,6 +11,16 @@ div.breadcrumbs {
   padding: 20px 175px + 20px + 20px 20px 20px;
   visibility: hidden;
 
+  @include for-mobile {
+    padding: 20px 20px 10px 20px;
+    white-space: nowrap;
+    overflow: auto;
+  }
+
+  @include for-phone {
+    padding: 10px;
+  }
+
   &.initialized {
     visibility: inherit;
   }

jet/static/jet/css/_changeform.scss

@@ -80,6 +80,14 @@ form {
     width: 160px;
     word-wrap: break-word;
     line-height: 1;
+
+    @include for-mobile {
+      display: block;
+      padding: 0 0 0 2px;
+      margin-bottom: 8px;
+      float: none;
+      width: auto;
+    }
   }
 
   label + p {
@@ -87,6 +95,10 @@ form {
     margin-top: 0;
     margin-bottom: 0;
     margin-left: 170px;
+
+    @include for-mobile {
+      margin-left: 0;
+    }
   }
 
   ul label {
@@ -116,6 +128,11 @@ form .aligned {
   ul {
     margin-left: 160px;
     padding-left: 10px;
+
+    @include for-mobile {
+      margin-left: 0;
+      padding-left: 0;
+    }
   }
 
   ul.radiolist {
@@ -129,6 +146,11 @@ form .aligned {
     margin-top: 0;
     margin-left: 160px;
     padding-left: 10px;
+
+    @include for-mobile {
+      margin-left: 0;
+      padding-left: 0;
+    }
   }
 
   label + p.help {
@@ -146,6 +168,11 @@ form .aligned {
   select + p.help {
     margin-left: 160px;
     padding-left: 10px;
+
+    @include for-mobile {
+      margin-left: 0;
+      padding-left: 0;
+    }
   }
 
   ul li {
@@ -160,10 +187,18 @@ form .aligned {
 
 .colMS .aligned .vLargeTextField, .colMS .aligned .vXMLLargeTextField {
   width: 350px;
+
+  @include for-mobile {
+    width: 100%;
+  }
 }
 
 .colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField {
   width: 610px;
+
+  @include for-mobile {
+    width: 100%;
+  }
 }
 
 .checkbox-row p.help {
@@ -192,14 +227,26 @@ fieldset {
 
 form .wide p, form .wide input + p.help {
   margin-left: 200px;
+
+  @include for-mobile {
+    margin-left: 0;
+  }
 }
 
 form .wide p.help {
   padding-left: 38px;
+
+  @include for-mobile {
+    padding-left: 0;
+  }
 }
 
 .colM fieldset.wide .vLargeTextField, .colM fieldset.wide .vXMLLargeTextField {
   width: 450px;
+
+  @include for-mobile {
+    width: 100%;
+  }
 }
 
 /* COLLAPSED FIELDSETS */
@@ -242,19 +289,34 @@ fieldset.monospace textarea {
 /* SUBMIT ROW */
 
 .submit-row {
-  margin: 0 0 20px;
+  margin: 20px 0;
   overflow: hidden;
-  padding: 20px 0;
+
+  @include for-mobile {
+    margin-bottom: 10px;
+  }
 
   input {
     &, &:visited, &:hover {
-      margin: 0 5px 0 0;
+      margin: 0 5px 5px 0;
       padding: 0 20px;
       font-size: 12px;
+
+      @include for-phone {
+        display: block;
+        width: 100%;
+        margin: 0 0 8px 0;
+      }
     }
 
     &.default {
-      margin: 0 8px 0 0;
+      margin: 0 8px 5px 0;
+
+      @include for-phone {
+        display: block;
+        width: 100%;
+        margin: 0 0 20px 0;
+      }
     }
   }
 
@@ -263,9 +325,16 @@ fieldset.monospace textarea {
   }
 
   p.deletelink-box {
+    display: block;
     float: right;
     padding: 0;
-    margin: 0;
+    margin: 0 5px 5px 0;
+
+    @include for-phone {
+      float: none;
+      display: block;
+      margin: 0 0 8px 0;
+    }
   }
 
   a.deletelink {
@@ -283,7 +352,13 @@ fieldset.monospace textarea {
       text-align: center;
       padding: 0 20px;
       text-transform: uppercase;
+      box-sizing: border-box;
       @include transition(background $transitions-duration, box-shadow $transitions-duration, border $transitions-duration);
+
+      @include for-phone {
+        display: block;
+        width: 100%;
+      }
     }
 
     &:hover, &:focus {
@@ -359,6 +434,10 @@ body.popup .submit-row {
 
 .vLargeTextField, .vXMLLargeTextField {
   width: 48em;
+
+  @include for-mobile {
+    width: 100%;
+  }
 }
 
 .flatpages-flatpage #id_content {
@@ -371,6 +450,10 @@ body.popup .submit-row {
 
 .vTextField {
   width: 20em;
+
+  @include for-phone {
+    width: 100%;
+  }
 }
 
 .vIntegerField {
@@ -412,6 +495,11 @@ body.popup .submit-row {
     color: $text-color;
     padding: 20px 30px 0 30px;
 
+    @include for-mobile {
+      padding: 20px 20px 0 20px;
+      line-height: 2;
+    }
+
     .inline_label {
       margin-left: 10px;
       background: $content-contrast2-background-color;
@@ -421,6 +509,11 @@ body.popup .submit-row {
       font-size: 10px;
       font-weight: normal;
 
+      @include for-mobile {
+        margin-right: 10px;
+        line-height: normal;
+      }
+
       ~ .inlinechangelink, ~ .inlineviewlink {
         font-size: 18px;
         margin-left: 10px;
@@ -444,6 +537,12 @@ body.popup .submit-row {
       font-weight: normal;
       vertical-align: middle;
 
+      @include for-mobile {
+        float: none;
+        margin-left: 0;
+        line-height: normal;
+      }
+
       label {
         font-size: 10px;
         vertical-align: middle;
@@ -580,6 +679,11 @@ form .related-widget-wrapper ul {
   float: left;
   margin-bottom: 20px;
 
+  @include for-mobile {
+    margin-bottom: 5px;
+    margin-right: 10px;
+  }
+
   &-button {
     font-weight: bold;
     vertical-align: middle;
@@ -644,12 +748,15 @@ form .related-widget-wrapper ul {
 
 .changeform-tabs {
   margin: 0;
-  padding: 0;
+  padding: 0 0 0 16px;
   border-bottom: 2px solid $background-color;
-  padding-left: 16px !important;
   background-color: $content-background-color;
   border-radius: 4px 4px 0 0;
 
+  @include for-mobile {
+    padding: 10px 10px 5px 10px;
+  }
+
   &-item {
     display: inline-block;
     padding: 0;
@@ -658,7 +765,7 @@ form .related-widget-wrapper ul {
     a, a:hover, a:visited {
       display: inline-block;
       padding: 12px 4px;
-      margin: 0 4px;
+      margin: 0 8px 0 0;
       border-bottom: 2px solid transparent;
       position: relative;
       top: 2px;
@@ -666,23 +773,49 @@ form .related-widget-wrapper ul {
       font-weight: bold;
       font-size: 11px;
       text-transform: uppercase;
-      @include transition(color $fast-transitions-duration, border-color $transitions-duration);
+
+      @include transition(
+        background-color $fast-transitions-duration,
+        color $fast-transitions-duration,
+        border-color $transitions-duration
+      );
+
+      @include for-mobile {
+        margin: 0 5px 5px 0;
+        padding: 8px 12px;
+        top: auto;
+        border: 0;
+        border-radius: 5px;
+        font-weight: normal;
+        background: $button-background-color;
+        color: $button-text-color;
+      }
     }
 
     a:hover {
       color: $text-color;
     }
 
-    &.selected {
+    &.errors {
       & a, & a:hover, & a:visited {
-        color: $text-color;
-        border-color: $tab-selected-border-color;
+        border-color: $tab-error-border-color;
+
+        @include for-mobile {
+          background: $danger-button-background-color;
+          color: $danger-button-text-color;
+        }
       }
     }
 
-    &.errors {
+    &.selected {
       & a, & a:hover, & a:visited {
-        border-color: $tab-error-border-color;
+        color: $text-color;
+        border-color: $tab-selected-border-color;
+
+        @include for-mobile {
+          background: $button-hover-background-color;
+          color: $button-hover-text-color;
+        }
       }
     }
   }

jet/static/jet/css/_changelist.scss

@@ -12,6 +12,10 @@
 
   .results {
     overflow-x: auto;
+
+    @include for-mobile {
+      margin-bottom: 0 !important;
+    }
   }
 
   .toplinks {
@@ -20,6 +24,14 @@
 
   .paginator {
     text-align: right;
+
+    @include for-mobile {
+      text-align: left;
+    }
+
+    @include for-phone {
+      text-align: center;
+    }
   }
 }
 
@@ -66,6 +78,11 @@
   float: left;
   margin-bottom: 20px;
 
+  @include for-mobile {
+    float: none;
+    margin-bottom: 10px;
+  }
+
   form {
     label[for="searchbar"] {
       display: none;
@@ -206,6 +223,14 @@
 
   .pages-wrapper {
     margin-left: 10px;
+
+    @include for-mobile {
+      margin-left: 0;
+    }
+  }
+
+  .label  {
+    padding: 8px 0;
   }
 
   input[type="submit"] {
@@ -238,16 +263,50 @@
     float: left;
     display: none;
 
+    @include for-mobile {
+      float: none;
+      margin-bottom: 20px;
+    }
+
     &.initialized {
-      display: inherit;
+      display: inline-block;
+
+      @include for-mobile {
+        display: block;
+      }
+    }
+
+    label {
+      @include for-mobile {
+        margin-bottom: 5px;
+        display: inline-block;
+      }
+
+      @include for-phone {
+        display: block;
+      }
+    }
+
+    .select2 {
+      @include for-phone {
+        width: 100% !important;
+      }
+    }
+
+    .labels {
+      padding: 8px 0;
+
+      @include for-phone {
+        text-align: center;
+      }
     }
 
     span.all, span.action-counter, span.clear, span.question {
       display: none;
     }
 
-    &:last-child {
-      border-bottom: none;
+    span.clear {
+      margin-left: 5px;
     }
 
     .button {
@@ -267,6 +326,14 @@
         text-transform: uppercase;
         margin: 0 8px 0 0;
         @include transition(background $transitions-duration);
+
+        @include for-mobile {
+          margin-bottom: 5px;
+        }
+
+        @include for-phone {
+          width: 100%;
+        }
       }
 
       &:hover, &:focus {
@@ -296,6 +363,14 @@
     right: 20px;
     bottom: 0;
     border-top: 2px solid $content-border2-color;
+
+    @include for-mobile {
+      position: static;
+      left: auto;
+      right: auto;
+      bottom: auto;
+      border-top: 0;
+    }
   }
 
   &.popup {

jet/static/jet/css/_dashboard.scss

@@ -2,23 +2,37 @@
 
 /* DASHBOARD */
 
-.dashboard .module {
-  margin-bottom: 10px;
+.dashboard {
+  .module {
+    margin-bottom: 10px;
 
-  table {
-    th {
-      width: 100%;
-    }
+    table {
+      th {
+        width: 100%;
+      }
 
-    td {
-      white-space: nowrap;
+      td {
+        white-space: nowrap;
 
-      a {
-        display: block;
-        padding-right: .6em;
+        a {
+          display: block;
+          padding-right: .6em;
+        }
       }
     }
   }
+
+  #content {
+    max-width: 600px;
+
+    @include for-mobile {
+      max-width: none;
+    }
+  }
+
+  &.jet #content {
+    max-width: none;
+  }
 }
 
 /* RECENT ACTIONS MODULE */
@@ -59,11 +73,17 @@ ul.actionlist li {
 /* JET DASHBOARD */
 
 .dashboard {
-  min-height: 100%;
+  &-container {
+    min-height: 100%;
+  }
 
   @for $i from 1 through 5 {
-    &.columns_#{$i} &-column-wrapper {
+    &-container.columns_#{$i} &-column-wrapper {
       width: (100% / $i);
+
+      @include for-mobile {
+        width: 100%;
+      }
     }
   }
 
@@ -71,6 +91,19 @@ ul.actionlist li {
     position: absolute;
     top: 20px;
     right: 20px + 175px + 20px;
+
+    @include for-mobile {
+      position: static;
+      margin: 20px 20px 0 20px;
+    }
+
+    @include for-phone {
+      margin: 10px 10px 0 10px;
+    }
+
+    .button {
+      vertical-align: middle;
+    }
   }
 
   &-column {
@@ -79,6 +112,11 @@ ul.actionlist li {
     min-height: 100px;
     border-radius: 4px;
 
+    @include for-mobile {
+      margin-left: 0;
+      min-height: 0;
+    }
+
     &-wrapper {
       float: left;
       min-width: 200px;
@@ -101,8 +139,16 @@ ul.actionlist li {
     margin-bottom: 20px;
     @include transition(background $transitions-duration);
 
+    @include for-mobile {
+      margin-bottom: 10px;
+    }
+
     &:last-child {
       margin-bottom: 0;
+
+      @include for-mobile {
+        margin-bottom: 10px;
+      }
     }
 
     &.collapsed {
@@ -130,6 +176,10 @@ ul.actionlist li {
       &-drag {
         float: right;
         line-height: 30px !important;
+
+        @include for-mobile {
+          display: none;
+        }
       }
 
       &-collapse-button {
@@ -143,6 +193,10 @@ ul.actionlist li {
         font-size: 13px;
         vertical-align: middle;
         visibility: hidden;
+
+        @include for-mobile {
+          visibility: visible;
+        }
       }
 
       &:hover &-buttons {

jet/static/jet/css/_delete-confirmation.scss

@@ -57,6 +57,12 @@
       font-weight: lighter;
       padding: 0 20px;
       text-transform: uppercase;
+      margin-bottom: 5px;
+
+      @include for-mobile {
+        display: block;
+        width: 100%;
+      }
 
       &:hover, &:focus {
         background-color: $button-hover-background-color;
@@ -72,6 +78,14 @@
     .button {
       vertical-align: middle;
       margin-left: 10px;
+      margin-bottom: 5px;
+      box-sizing: border-box;
+
+      @include for-mobile {
+        margin-left: 0;
+        display: block;
+        width: 100%;
+      }
     }
   }
 }

jet/static/jet/css/_forms.scss

@@ -16,6 +16,13 @@
     font-weight: normal;
     text-align: center;
     padding: 0 10px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     @include transition(background $transitions-duration);
   }
 
@@ -59,6 +66,9 @@ input[type="text"], input[type="email"], input[type="password"], input[type="url
   color: $input-text-color;
   border: 1px solid $input-border-color;
   padding: 0 12px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
   @include transition(background $transitions-duration, box-shadow $transitions-duration, border $transitions-duration);
 
   @include placeholder {

jet/static/jet/css/_header.scss

@@ -55,6 +55,10 @@
 
   &.initialized {
     display: block;
+
+    @include for-mobile {
+      display: none;
+    }
   }
 }
 

jet/static/jet/css/_helpers.scss

@@ -47,6 +47,24 @@
   width: 100% !important;
 }
 
+@mixin for-width($width) {
+  @media only screen and (max-width: $width) {
+    @content;
+  }
+}
+
+@mixin for-mobile {
+  @include for-width($mobile-max-width) {
+    @content;
+  }
+}
+
+@mixin for-phone {
+  @include for-width($phone-max-width) {
+    @content;
+  }
+}
+
 @mixin placeholder {
   &::-webkit-input-placeholder {@content}
   &:-moz-placeholder           {@content}

jet/static/jet/css/_login.scss

@@ -6,6 +6,10 @@ body.login {
   background: $login-background-color;
   padding: 100px 30px 30px 30px;
 
+  @include for-phone {
+    padding: 30px 10px 10px 10px;
+  }
+
   #container {
     background: $login-content-background-color;
     border-radius: 4px;
@@ -14,6 +18,10 @@ body.login {
     margin-left: auto;
     margin-right: auto;
     width: 400px;
+
+    @include for-phone {
+      width: 100%;
+    }
   }
 
   #header {
@@ -42,8 +50,7 @@ body.login {
   }
 
   .form-row {
-    overflow: visible;
-    padding: 4px 0;
+    padding: 4px;
     float: left;
     width: 100%;
 

jet/static/jet/css/_modules.scss

@@ -7,6 +7,10 @@ fieldset.module {
   border-radius: 4px;
   padding: 20px;
   border: 0;
+
+  @include for-mobile {
+    padding: 10px;
+  }
 }
 
 .module p, .module ul, .module h3, .module h4, .module dl, .module pre {

jet/static/jet/css/_object-tools.scss

@@ -5,8 +5,13 @@
 .object-tools {
   display: block;
   text-align: right;
+  padding: 0;
   margin: 0 0 20px 0;
-  overflow: hidden;
+
+  @include for-mobile {
+    text-align: left;
+    margin-bottom: 10px;
+  }
 
   .form-row & {
     margin-top: 5px;
@@ -19,6 +24,12 @@
   li {
     display: inline-block;
     margin-left: 5px;
+    margin-bottom: 5px;
+
+    @include for-mobile {
+      margin-left: 0;
+      margin-right: 5px;
+    }
   }
 
   a.addlink {

jet/static/jet/css/_relatedpopup.scss

@@ -18,6 +18,10 @@
   background: $background-color;
   background-clip: content-box;
 
+  @include for-mobile {
+    padding-left: 0;
+  }
+
   &-container {
     display: none;
     background-color: transparentize($sidebar-popup-overlay-color, 0.5);
@@ -58,17 +62,38 @@
       text-transform: uppercase;
       border-radius: 6px 0 0 6px;
       @include transition(background-color $transitions-duration, color $transitions-duration);
+
+      @include for-mobile {
+        margin-left: 0;
+        top: auto;
+        bottom: 10px;
+        left: 10px;
+        width: auto;
+        padding: 10px;
+        border-radius: 6px;
+      }
     }
 
     &:hover, &:focus {
       background: $background-color;
       color: $text-color;
+
+      @include for-mobile {
+        background: $button-hover-background-color;
+        color: $button-hover-text-color;
+      }
     }
 
-    span {
+    &-icon {
       vertical-align: middle;
       font-weight: bold;
       font-size: 18px;
     }
+
+    &-label {
+      @include for-mobile {
+        display: none;
+      }
+    }
   }
 }

jet/static/jet/css/_sidebar.scss

@@ -4,6 +4,10 @@
   background-color: $sidebar-background-color;
   @include transition(background-color $transitions-duration);
 
+  @include for-mobile {
+    display: none;
+  }
+
   &-menu {
     @extend .clear-list;
     margin-bottom: 32px !important;

jet/static/jet/css/_tables.scss

@@ -21,6 +21,10 @@ table {
     border-radius: 0;
     box-shadow: none;
 
+    @include for-mobile {
+      display: none !important;
+    }
+
     thead {
       th {
         border-radius: 0 !important;

jet/static/jet/css/_variables.scss

@@ -21,6 +21,9 @@ $font-size: 14px !default;
 $transitions-duration: 0.3s !default;
 $fast-transitions-duration: 0.1s !default;
 
+$mobile-max-width: 960px;
+$phone-max-width: 480px;
+
 /*
  * Sidebar
  */

jet/static/jet/js/src/layout-updaters/actions.js

@@ -18,9 +18,13 @@ ActionsUpdater.prototype = {
             $label.remove();
         }
     },
+    wrapLabels: function($actions) {
+        var $wrapper = $('<div>').addClass('labels');
+        $actions.find('span.all, span.action-counter, span.clear, span.question')
+                .wrapAll($wrapper);
+    },
     moveActions: function($actions) {
         $actions.remove();
-        //$actions.insertAfter(this.$changelist.find('.results'));
 
         var $paginator = this.$changelist.find('.paginator');
         var $wrapper = $('<div>').addClass('changelist-footer');
@@ -38,6 +42,7 @@ ActionsUpdater.prototype = {
 
         try {
             this.removeLabel($actions);
+            this.wrapLabels($actions);
             this.moveActions($actions);
         } catch (e) {
             console.error(e);

jet/static/jet/js/src/layout-updaters/paginator.js

@@ -52,7 +52,7 @@ PaginatorUpdater.prototype = {
 
         this.$paginator.prepend($('<span>').addClass('pages-wrapper').append($pageNodes));
     },
-    moveTextNodes: function() {
+    wrapTextNodes: function() {
         var foundPage = false;
         var $nodes = $([]);
 
@@ -69,13 +69,16 @@ PaginatorUpdater.prototype = {
             }
         });
 
-        this.$paginator.prepend($nodes);
+        $('<div>')
+            .addClass('label')
+            .append($nodes)
+            .appendTo(this.$paginator);
     },
     run: function() {
         try {
             this.removeSpacesBetweenPages();
             this.wrapPages();
-            this.moveTextNodes();
+            this.wrapTextNodes();
         } catch (e) {
             console.error(e);
         }

jet/templates/admin/base.html

@@ -19,6 +19,7 @@
         var DATETIME_FORMAT = "{% get_datetime_format %}";
     </script>
     <script src="{% static "jet/js/build/bundle.min.js" %}"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
 {% endblock %}
 
 {% block footer %}
@@ -46,7 +47,7 @@
     {% get_side_menu_compact as SIDE_MENU_COMPACT %}
     {% if not is_popup %}
         <div class="related-popup-container">
-            <a href="#" class="related-popup-back"><span class="icon-arrow-left"></span> {% trans "back" %}</a>
+            <a href="#" class="related-popup-back"><span class="related-popup-back-icon icon-arrow-left"></span> <span class="related-popup-back-label">{% trans "back" %}</span></a>
             <span class="icon-refresh loading-indicator"></span>
         </div>
         <div class="sidebar">