Merge pull request #2140 from chessbr/fix-admin-modal

Admin: render the filters button on small devices
shuup · Feb 24, 2020 · d52afdb · d52afdb
2 parents b0a290c + 59f44b8
commit d52afdb
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 List all changes after the last release here (newer on top). Each change on a separate bullet point line.
 
+### Changed
+
+- Improve the admin modals to use flexbox and work better on small devices
+
+### Fixed
+
+- Picotable: render the filters button on small devices,
+even when there is no data, to allow resetting filters
+
 ## [1.10.4] - 2020-02-22
 
 ### Changed

diff --git a/shuup/admin/locale/en/LC_MESSAGES/django.po b/shuup/admin/locale/en/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2020-02-14 18:02+0000\n"
+"POT-Creation-Date: 2020-02-24 14:35+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: en <LL@li.org>\n"
@@ -1645,6 +1645,9 @@ msgstr ""
 msgid "Login as User"
 msgstr ""
 
+msgid "Login as Staff User"
+msgstr ""
+
 #, python-format
 msgid "User bound to contact %(contact)s."
 msgstr ""

diff --git a/shuup/admin/modules/products/static_src/product-variation-variable-editor.js b/shuup/admin/modules/products/static_src/product-variation-variable-editor.js
@@ -199,7 +199,7 @@ window.VariationVariableEditor = (function(m, _) {
         var variablesDiv = null;
         var newVariationTemplate = m("button.btn.btn-success", {   onclick: (event) => {
                 event.preventDefault();
-                document.getElementById("step-item-wrapper").style.display = "block";
+                document.getElementById("step-item-wrapper").style.display = "flex";
                 var nameField = document.getElementById("id_variables-template_name")
                 nameField.required = true;
                 document.getElementById("template-cancel-btn").onclick = function () {

diff --git a/shuup/admin/static_src/base/scss/shuup/custom-forms.scss b/shuup/admin/static_src/base/scss/shuup/custom-forms.scss
@@ -284,19 +284,16 @@ fieldset[disabled] .form-control {
     box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
     animation: fadeInAnim 0.6s;
     position: relative;
-    top: 30%;
+    flex: 1;
+    max-width: 400px;
+    max-height: 400px;
+    margin: 0 auto;
 
     @include media-breakpoint-down(sm) {
         border-radius: 4px;
-        margin: 15px auto;
-        height: 40%;
     }
 
-    @include media-breakpoint-up(md) {
-        overflow: auto;
-        margin-top: 70px;
-        width: 30%;
-        margin: auto;
+    @include media-breakpoint-up(sm) {
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
     }
@@ -305,19 +302,7 @@ fieldset[disabled] .form-control {
 .template-modal-header {
     @include clearfix;
     padding: 15px;
-    border-bottom: 1px solid $border-color;
     background: $gray-bg;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-
-    @include media-breakpoint-up(md) {
-        padding: 15px 30px;
-        z-index: 10;
-        width: 30%;
-        margin: auto;
-        position: fixed;
-        height: 70px;
-    }
 
     .btn + .btn {
         margin-right: 5px;
@@ -327,10 +312,10 @@ fieldset[disabled] .form-control {
         margin-right: 5px;
     }
     h2 {
+        margin: 0;
         @include media-breakpoint-down(md) {
             font-size: 1.5rem;
         }
-
     }
     h4 {
         line-height: 38px;
@@ -343,10 +328,7 @@ fieldset[disabled] .form-control {
     }
 }
 .template-form-wrapper {
-    @include media-breakpoint-up(md) {
-        padding-top:60px;
-    }
-    padding-left: 25px;
+    padding: 25px;
 }
 
 #save_template_name {

diff --git a/shuup/admin/static_src/base/scss/shuup/custom-modals.scss b/shuup/admin/static_src/base/scss/shuup/custom-modals.scss
@@ -1,4 +1,5 @@
 .shuup-modal-bg {
+    overflow: hidden;
     background: rgba(0,0,0,0.5);
     position: fixed;
     top: 0;
@@ -7,9 +8,9 @@
     bottom: 0;
     z-index: 2000;
     animation: fadeInAnim 0.3s;
+    padding: 15px;
 
     @include media-breakpoint-down(sm) {
-        padding: 0px 15px;
         overflow: auto;
     }
 }
@@ -18,15 +19,16 @@
     background: #fff;
     box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
     animation: fadeInAnim 0.6s;
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     @include media-breakpoint-down(sm) {
         border-radius: 4px;
-        margin: 15px auto;
-        height: 80%;
     }
 
     @include media-breakpoint-up(md) {
-        overflow: auto;
         position: absolute;
         top: 30px;
         bottom: 30px;

diff --git a/shuup/admin/static_src/picotable/picotable.js b/shuup/admin/static_src/picotable/picotable.js
@@ -491,6 +491,8 @@ const Picotable = (function (m, storage) {
         var data = ctrl.vm.data();
         if (data === null) {  // Not loaded, don't return anything
             return;
+        } else if (data.items.length === 0) {
+            return;
         }
 
         // Set default filter values
@@ -605,7 +607,7 @@ const Picotable = (function (m, storage) {
                         onclick: function () {
                             ctrl.vm.showMobileFilterSettings(false);
                         }
-                    }, "Done"),
+                    }, gettext("Done")),
                 ]),
                 m("div.mobile-filters-content", filters)
             ])
@@ -940,15 +942,16 @@ const Picotable = (function (m, storage) {
         const data = ctrl.vm.data();
         if (data === null) return;
 
-        const showEmptyState = (ctrl) => {
+        const showEmptyState = (ictrl) => {
+            const content = [
+                (ictrl.vm.renderMode() === "mobile" ? renderMobileTable(ictrl) : renderTable(ictrl)),
+            ];
             if (data.items.length > 0) {
-                return [
-                    (ctrl.vm.renderMode() === "mobile" ? renderMobileTable(ctrl) : renderTable(ctrl)),
-                    renderFooter(ctrl)
-                ];
+                content.push(renderFooter(ictrl));
             } else {
-                return renderEmptyState(ctrl);
+                content.push(renderEmptyState(ictrl));
             }
+            return content;
         };
 
         return m("div.table-view", [

diff --git a/shuup/notify/static_src/script-editor.js b/shuup/notify/static_src/script-editor.js
@@ -80,7 +80,7 @@ function Controller() {
     };
     ctrl.setStepItemEditorState = function(state) {
         if (state) {
-            document.getElementById("step-item-wrapper").style.display = "block";
+            document.getElementById("step-item-wrapper").style.display = "flex";
         } else {
             document.getElementById("step-item-wrapper").style.display = "none";
             document.getElementById("step-item-frame").src = "about:blank";

diff --git a/shuup/xtheme/static_src/editor/custom-modals.less b/shuup/xtheme/static_src/editor/custom-modals.less
@@ -18,6 +18,7 @@
     background: #fff;
     box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
     animation: fadeInAnim 0.6s;
+
     @media (max-width: @screen-sm-max) {
         border-radius: 4px;
         margin: 15px auto;