From 10f772bd19930a148866e290d003a1fe9767ba35 Mon Sep 17 00:00:00 2001 From: Ambroise Maupate Date: Tue, 12 Sep 2023 16:46:11 +0200 Subject: [PATCH] style: Fixed drawer nav using flexbox --- .../less/widgets/children_nodes_widget.less | 2 - .../app/less/widgets/drawer_widget.less | 32 +- .../app/less/widgets/geotag_widget.less | 60 ++-- .../app/widgets/LeafletGeotagField.js | 19 +- .../app/widgets/MultiLeafletGeotagField.js | 12 +- .../src/Resources/views/forms.html.twig | 12 +- .../views/partials/css-inject.html.twig | 2 +- .../views/partials/js-inject.html.twig | 4 +- .../views/partials/simple-js-inject.html.twig | 2 +- .../Resources/views/widgets/drawer.html.twig | 37 ++- .../static/css/app.52aa5b7a45890ac8c622.css | 30 ++ .../css/app.52aa5b7a45890ac8c622.css.map | 1 + .../src/static/js/app.bef642fdf27e97764a84.js | 22 ++ .../static/js/simple.bef642fdf27e97764a84.js | 14 + .../static/js/vendor.bef642fdf27e97764a84.js | 280 ++++++++++++++++++ 15 files changed, 445 insertions(+), 84 deletions(-) create mode 100644 lib/Rozier/src/static/css/app.52aa5b7a45890ac8c622.css create mode 100644 lib/Rozier/src/static/css/app.52aa5b7a45890ac8c622.css.map create mode 100644 lib/Rozier/src/static/js/app.bef642fdf27e97764a84.js create mode 100644 lib/Rozier/src/static/js/simple.bef642fdf27e97764a84.js create mode 100644 lib/Rozier/src/static/js/vendor.bef642fdf27e97764a84.js diff --git a/lib/Rozier/src/Resources/app/less/widgets/children_nodes_widget.less b/lib/Rozier/src/Resources/app/less/widgets/children_nodes_widget.less index 16243bed..192f06de 100644 --- a/lib/Rozier/src/Resources/app/less/widgets/children_nodes_widget.less +++ b/lib/Rozier/src/Resources/app/less/widgets/children_nodes_widget.less @@ -131,8 +131,6 @@ border-bottom: 1px dashed @children-nodes-btn-border;; } } - - margin: 10px; } } diff --git a/lib/Rozier/src/Resources/app/less/widgets/drawer_widget.less b/lib/Rozier/src/Resources/app/less/widgets/drawer_widget.less index e550e4d9..655c6f3c 100644 --- a/lib/Rozier/src/Resources/app/less/widgets/drawer_widget.less +++ b/lib/Rozier/src/Resources/app/less/widgets/drawer_widget.less @@ -82,44 +82,46 @@ .drawer-widget-nav { display: flex; + padding: 8px 0; align-items: center; - justify-content: space-between; border-bottom:1px dashed @documents-widget-border; - &::before, - &::after { - content: none; - } - - .uk-navbar-nav { - float: none; + &__head { display: flex; align-items: center; flex-wrap: wrap; + padding: 0 8px; } - .uk-navbar-brand { + &__title { .widgetNavBarBrand(); - height: auto; .uk-text-muted { margin: 0 0 0 1em; font-size: 11px; } - } - .uk-icon-rz-documents{ - font-size:28px; + [class*=uk-icon-] { + font-size: 22px; + } + [class*=uk-icon-rz-] { + font-size: 28px; + } + + .uk-icon-flag { + font-size: 14px; + } } .documents-widget-quick-creation{ margin:0; } - .uk-navbar-content { - padding: 11px 10px; + &__content { + padding: 0 10px; height: auto; + margin-left: auto; } .uk-button{ diff --git a/lib/Rozier/src/Resources/app/less/widgets/geotag_widget.less b/lib/Rozier/src/Resources/app/less/widgets/geotag_widget.less index e3a3670c..c6fd6b66 100644 --- a/lib/Rozier/src/Resources/app/less/widgets/geotag_widget.less +++ b/lib/Rozier/src/Resources/app/less/widgets/geotag_widget.less @@ -11,7 +11,6 @@ /* -------- STYLES -------- */ - .geotag-widget{ position: relative; } @@ -27,29 +26,50 @@ } .geotag-widget-nav{ + display: flex; + align-items: center; + flex-wrap: wrap; + padding: 8px 0; position: relative; - height:55px; - border:1px solid @geotag-widget-border; + border: 1px solid @geotag-widget-border; border-bottom:1px dashed @geotag-widget-border; - .uk-navbar-brand{ + @media (min-width: @screen-sm-min) { + flex-wrap: nowrap; + padding: 0; + } + + &__title { .widgetNavBarBrand(); } .uk-icon-rz-map-marker, .uk-icon-rz-map-multi-marker{ font-size: 28px; - line-height:55px; } .geotag-widget-quick-creation{ - margin:11px 0; + margin: 8px 0; } .uk-navbar-content { padding: 0 10px; } + &__head { + display: flex; + align-items: center; + margin: 0; + padding: 0 8px; + } + + &__content { + padding: 0 8px; + + @media (min-width: @screen-sm-min) { + margin-left: auto; + } + } } .rz-geotag-meta{ @@ -66,17 +86,20 @@ } .multi-geotag-group { - position: relative; + display: grid; + height: 400px; + grid-template-columns: 40% 60%; - &:after { - .clearfloat(); + @media (min-width: @screen-sm-min) { + grid-template-columns: 30% 70%; + } + + @media (min-width: @screen-xl-min) { + grid-template-columns: 20% 80%; } .rz-geotag-canvas { - width: 80%; - height: 400px; - float: left; box-sizing: border-box; } } @@ -86,16 +109,11 @@ overflow: hidden; overflow-y: auto; - width: 20%; - height: 400px; - float: left; - margin: 0px; - + margin: 0; box-sizing: border-box; border-left:1px solid @geotag-widget-border; border-bottom:1px solid @geotag-widget-border; - - padding: 0px; + padding: 0; li { list-style: none; @@ -115,10 +133,6 @@ color: darken(@geotag-widget-border, 50%); } } - - &:after { - .clearfloat(); - } } } diff --git a/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js b/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js index 78e479d5..ab942c44 100644 --- a/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js +++ b/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js @@ -58,12 +58,12 @@ export default class LeafletGeotagField { // Geocode input text let metaDOM = [ - '