Skip to content

Commit

Permalink
style: Fixed drawer nav using flexbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@ambroisemaupate
ambroisemaupate committed Sep 12, 2023
1 parent 9b6b27d commit 10f772b
Show file tree
Hide file tree
Showing 15 changed files with 445 additions and 84 deletions.
2 changes: 0 additions & 2 deletions lib/Rozier/src/Resources/app/less/widgets/children_nodes_widget.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,8 +131,6 @@
border-bottom: 1px dashed @children-nodes-btn-border;;
}
}

margin: 10px;
}
}

Expand Down
32 changes: 17 additions & 15 deletions lib/Rozier/src/Resources/app/less/widgets/drawer_widget.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down
60 changes: 37 additions & 23 deletions lib/Rozier/src/Resources/app/less/widgets/geotag_widget.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@


/* -------- STYLES -------- */

.geotag-widget{
position: relative;
}
Expand All @@ -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{
Expand All @@ -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;
}
}
Expand All @@ -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;
Expand All @@ -115,10 +133,6 @@
color: darken(@geotag-widget-border, 50%);
}
}

&:after {
.clearfloat();
}
}
}

19 changes: 11 additions & 8 deletions lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,12 @@ export default class LeafletGeotagField {

// Geocode input text
let metaDOM = [
'<nav class="geotag-widget-nav uk-navbar rz-geotag-meta">',
'<ul class="uk-navbar-nav">',
'<li class="uk-navbar-brand"><i class="uk-icon-rz-map-marker"></i>',
'<li class="uk-navbar-brand label">' + labelText + '</li>',
'</ul>',
'<div class="uk-navbar-content uk-navbar-flip">',
'<nav class="geotag-widget-nav rz-geotag-meta">',
'<div class="geotag-widget-nav__head">',
'<div class="geotag-widget-nav__title"><i class="uk-icon-rz-map-marker"></i></div>',
'<div class="geotag-widget-nav__title label">' + labelText + '</div>',
'</div>',
'<div class="geotag-widget-nav__content">',
'<div class="geotag-widget-quick-creation uk-button-group">',
'<input autocomplete="off" class="rz-geotag-address" id="' + fieldAddressId + '" type="text" value="" />',
'<button type="button" id="' +
Expand Down Expand Up @@ -122,7 +122,7 @@ export default class LeafletGeotagField {
}
}

map.on('click', $.proxy(this.setMarkerEvent, this, null, element, $geocodeReset, map))
map.on('click', $.proxy(this.setMarkerEvent, this, marker, element, $geocodeReset, map))
$geocodeInput.addEventListener(
'keypress',
$.proxy(this.requestGeocode, this, marker, element, $geocodeReset, map)
Expand Down Expand Up @@ -159,7 +159,7 @@ export default class LeafletGeotagField {
}

/**
* @param {Marker} marker
* @param {Marker|null} marker
* @param {HTMLInputElement} $input
* @param {HTMLElement} $geocodeReset
* @param {Map} map
Expand Down Expand Up @@ -190,6 +190,9 @@ export default class LeafletGeotagField {
const marker = this.createMarker(latlng, map)
marker.on('dragend', $.proxy(this.setMarkerEvent, this, marker, $input, $geocodeReset, map))
$geocodeReset.addEventListener('click', $.proxy(this.resetMarker, this, marker, $input, $geocodeReset, map))
// reset existing click event
map.off('click')
map.on('click', $.proxy(this.setMarkerEvent, this, marker, $input, $geocodeReset, map))
return marker
}

Expand Down
12 changes: 6 additions & 6 deletions lib/Rozier/src/Resources/app/widgets/MultiLeafletGeotagField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@ export default class MultiLeafletGeotagField extends LeafletGeotagField {

// Geocode input text
let metaDOM = [
'<nav class="geotag-widget-nav uk-navbar rz-geotag-meta">',
'<ul class="uk-navbar-nav">',
'<li class="uk-navbar-brand"><i class="uk-icon-rz-map-multi-marker"></i>',
'<li class="uk-navbar-brand label">' + labelText + '</li>',
'</ul>',
'<div class="uk-navbar-content uk-navbar-flip">',
'<nav class="geotag-widget-nav rz-geotag-meta">',
'<div class="geotag-widget-nav__head">',
'<div class="geotag-widget-nav__title"><i class="uk-icon-rz-map-multi-marker"></i></div>',
'<div class="geotag-widget-nav__title label">' + labelText + '</div>',
'</div>',
'<div class="geotag-widget-nav__content">',
'<div class="geotag-widget-quick-creation uk-button-group">',
'<input autocomplete="off" class="rz-geotag-address" id="' + fieldAddressId + '" type="text" value="" />',
'<button type="button" id="' +
Expand Down
12 changes: 6 additions & 6 deletions lib/Rozier/src/Resources/views/forms.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,12 +365,12 @@
{% if label is empty -%}
{% set label = name|humanize %}
{%- endif -%}
<nav class="drawer-widget-nav children-nodes-nav uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-navbar-brand"><i class="uk-icon-rz-node-tree"></i></li>
<li class="uk-navbar-brand label">{{ label|trans }}</li>
</ul>
<div class="uk-navbar-flip">
<nav class="drawer-widget-nav children-nodes-nav">
<div class="drawer-widget-nav__head">
<div class="drawer-widget-nav__title"><i class="uk-icon-rz-node-tree"></i></div>
<div class="drawer-widget-nav__title label">{{ label|trans }}</div>
</div>
<div class="drawer-widget-nav__content">
<ul class="uk-navbar-nav">
<li class="children-nodes-quick-creation"
data-uk-dropdown="{mode:'click'}">
Expand Down
2 changes: 1 addition & 1 deletion lib/Rozier/src/Resources/views/partials/css-inject.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

<link href="{{ asset('css/vendor.00b2be12b114cc414b2c.css', 'Rozier') }}" rel="stylesheet">

<link href="{{ asset('css/app.5b5b64bd3bc26c8fe87e.css', 'Rozier') }}" rel="stylesheet">
<link href="{{ asset('css/app.52aa5b7a45890ac8c622.css', 'Rozier') }}" rel="stylesheet">



Expand Down
4 changes: 2 additions & 2 deletions lib/Rozier/src/Resources/views/partials/js-inject.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

<script src="{{ asset('js/vendor.eb9f55bc148f20edd4a5.js', 'Rozier') }}" defer type="text/javascript"></script>
<script src="{{ asset('js/vendor.bef642fdf27e97764a84.js', 'Rozier') }}" defer type="text/javascript"></script>

<script src="{{ asset('js/app.eb9f55bc148f20edd4a5.js', 'Rozier') }}" defer type="text/javascript"></script>
<script src="{{ asset('js/app.bef642fdf27e97764a84.js', 'Rozier') }}" defer type="text/javascript"></script>

2 changes: 1 addition & 1 deletion lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@

<script src="{{ asset('js/simple.eb9f55bc148f20edd4a5.js', 'Rozier') }}" defer type="text/javascript"></script>
<script src="{{ asset('js/simple.bef642fdf27e97764a84.js', 'Rozier') }}" defer type="text/javascript"></script>

37 changes: 17 additions & 20 deletions lib/Rozier/src/Resources/views/widgets/drawer.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,36 +43,33 @@
{% set label = name|humanize %}
{%- endif -%}

<nav class="drawer-widget-nav uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-navbar-brand">
<i class="{{ icon }}"></i>
</li>
<li class="uk-navbar-brand label">
<nav class="drawer-widget-nav">
<div class="drawer-widget-nav__head">
<div class="drawer-widget-nav__title"><i class="{{ icon }}"></i></div>
<div class="drawer-widget-nav__title label">
{{ label|trans }}
{% if isSortable == 'false' %}
<span class="uk-text-muted">
{% trans %}drawer.sortable-not-enable{% endtrans %}
</span>
<span class="uk-text-muted">{% trans %}drawer.sortable-not-enable{% endtrans %}</span>
{% endif %}
<span
class="uk-text-muted"
:class="{ 'uk-text-danger': items.length < this.drawer.minLength }">
<template v-if="this.drawer.maxLength < 9999">
${ items.length } / ${ this.drawer.maxLength }
</template>
<template v-if="this.drawer.minLength > 0">
({% trans %}min{% endtrans %}: ${ this.drawer.minLength })
</template>
</span>
:class="{ 'uk-text-danger': items.length < this.drawer.minLength }"
>
<template v-if="this.drawer.maxLength < 9999">
${ items.length } / ${ this.drawer.maxLength }
</template>
<template v-if="this.drawer.minLength > 0">
({% trans %}min{% endtrans %}: ${ this.drawer.minLength })
</template>
</span>
{% if attr['data-universal'] %}
<i data-uk-tooltip="{animation:true}"
title="{% trans %}universal{% endtrans %}"
class="uk-icon uk-icon-flag universal-indicator"></i>
{% endif %}
</li>
</ul>
<div class="uk-navbar-content uk-navbar-flip">
</div>
</div>
<div class="drawer-widget-nav__content">
<div class="drawer-widget-quick-creation uk-button-group">
<rz-button :is-active="drawer.isActive"
:callback="onExplorerButtonClick">
Expand Down
30 changes: 30 additions & 0 deletions lib/Rozier/src/static/css/app.52aa5b7a45890ac8c622.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions lib/Rozier/src/static/css/app.52aa5b7a45890ac8c622.css.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 10f772b

Please sign in to comment.