From d4d5011d6f7655fa4fcbe1f6dcaf8da0f884fecf Mon Sep 17 00:00:00 2001 From: Christian Hess Date: Mon, 24 Feb 2020 11:32:53 -0300 Subject: [PATCH 1/2] Admin: render the filters button on small devices - Render the filters button on small devices, even when there is no data, to allow resetting filters - Improve the admin modals to use flexbox and work better on small devices Refs MYS-243 --- CHANGELOG.md | 9 ++++++ .../product-variation-variable-editor.js | 2 +- .../base/scss/shuup/custom-forms.scss | 32 ++++--------------- .../base/scss/shuup/custom-modals.scss | 10 +++--- shuup/admin/static_src/picotable/picotable.js | 17 ++++++---- shuup/notify/static_src/script-editor.js | 2 +- .../static_src/editor/custom-modals.less | 1 + 7 files changed, 35 insertions(+), 38 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c18a12f516..7b162466bb 100644 --- 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/modules/products/static_src/product-variation-variable-editor.js b/shuup/admin/modules/products/static_src/product-variation-variable-editor.js index ccad342645..275c15ea9d 100644 --- 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 index d4c426cac1..fe40d18e62 100644 --- 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 index 8d312cd90c..49336dedd4 100644 --- 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 index 0b96b498d1..65137a0f68 100644 --- 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 index 6fa06d7d17..c6c720f969 100644 --- 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 index 2c689d7ea4..5af1f9ad46 100644 --- 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; From 59f44b8ee92589ed70c5ab2542f43026ac0dacda Mon Sep 17 00:00:00 2001 From: Christian Hess Date: Mon, 24 Feb 2020 11:35:53 -0300 Subject: [PATCH 2/2] Update translation strings --- shuup/admin/locale/en/LC_MESSAGES/django.po | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/shuup/admin/locale/en/LC_MESSAGES/django.po b/shuup/admin/locale/en/LC_MESSAGES/django.po index 84f798b50e..daa93b1f66 100644 --- 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 \n" "Language-Team: en \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 ""