From 8e8cdfce0af04f9d70e88ede6aed28550b714e54 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Fri, 2 Jul 2021 13:00:56 +0200 Subject: [PATCH] bootstrap5, main layout settings --- .../public/modules/bootstrap/_custom.scss | 253 ++++++++++-------- .../modules/bootstrap/custom/_variables.scss | 2 +- .../public/modules/bootstrap/index.js | 3 - .../Resources/public/scss/chillmain.scss | 6 - .../Resources/views/Layout/_footer.html.twig | 9 +- .../Resources/views/Layout/_header.html.twig | 105 ++++++++ .../Resources/views/Menu/section.html.twig | 70 ++--- .../Resources/views/layout.html.twig | 240 ++++++----------- .../views/layoutWithVerticalMenu.html.twig | 53 ++-- .../views/AccompanyingCourse/banner.html.twig | 2 +- .../views/Household/banner.html.twig | 2 +- .../Resources/views/layout.html.twig | 194 +++++++------- 12 files changed, 491 insertions(+), 448 deletions(-) create mode 100644 src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss index c0f2cb840..c70a0a86d 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss @@ -2,143 +2,178 @@ * These custom styles will override bootstrap enabled stylesheets */ +/// titles h1, h2, .h1, .h2 { - font-weight: $headings-font-weight + 200; + font-weight: $headings-font-weight + 200; } +/// buttons +.btn-success, +.btn-success:hover, +.btn-warning, +.btn-warning:hover { + color: $gray-100; +} + +/// typography .open_sansbold { - font-weight: bold; + font-weight: bold; } -.chill-user-quote { - border-left: 10px solid $yellow; - margin: 1.5em 10px; - padding: .5em 15px; - quotes: "\201C" "\201D" "\2018" "\2019"; - background-color: $gray-200; - blockquote { - border-left: 0.4em solid $gray-400; - padding-left: 0.9em; - margin-left: 0.9em; - font-style: italic; - } -} +/// forms @mixin title_in_form { - font-size: 1.438em; - font-weight: 700; - width: 100%; - border-bottom: 3px solid $gray-200; - margin-bottom: 1em; - display: block; + font-size: 1.438em; + font-weight: 700; + width: 100%; + border-bottom: 3px solid $gray-200; + margin-bottom: 1em; + display: block; } form { - fieldset { - margin-top: 1em; - & > legend { - @include title_in_form; - } - } - /* avoid useless html in first level of the custom fields row loop in forms + fieldset { + margin-top: 1em; + & > legend { + @include title_in_form; + } + } + /* avoid useless html in first level of the custom fields row loop in forms * (better should to improve the loop) */ - & > div.container-fluid { - & > div.row > .parent { - padding: 0; - & div.cf-fields span.cf-title { - margin: 1em -15px 0; - width: calc(100% + 30px); - @include title_in_form; + & > div.container-fluid { + & > div.row > .parent { + padding: 0; + & div.cf-fields span.cf-title { + margin: 1em -15px 0; + width: calc(100% + 30px); + @include title_in_form; + } } - } - } - label.required:after { - content: " *"; - color: $red; - } + } + label.required:after { + content: " *"; + color: $red; + } } +/// chill elements of design + .sticky-form-buttons { - margin-top: 4em; - background-color: $beige; - position: sticky; - bottom: 0.3em; - text-align: center; - display: flex; - padding: 0.8em 1.6em; - border-radius: 0; + margin-top: 4em; + background-color: $beige; + position: sticky; + bottom: 0.3em; + text-align: center; + display: flex; + padding: 0.8em 1.6em; + border-radius: 0; +} + +.chill-user-quote { + border-left: 10px solid $yellow; + margin: 1.5em 10px; + padding: 0.5em 15px; + quotes: "\201C" "\201D" "\2018" "\2019"; + background-color: $gray-200; + blockquote { + border-left: 0.4em solid $gray-400; + padding-left: 0.9em; + margin-left: 0.9em; + font-style: italic; + } } div.chill_address { - div.chill_address_address { - margin: .7em 0; - font-size: 98%; - font-variant: small-caps; - p { - display: inline-block; - margin: 0 0 0 1.5em; - text-indent: -1.5em; - } - } + div.chill_address_address { + margin: 0.7em 0; + font-size: 98%; + font-variant: small-caps; + p { + display: inline-block; + margin: 0 0 0 1.5em; + text-indent: -1.5em; + } + } } +/// base layout - -html, body { - min-height: 100%; - height: 100%; +body { + display: flex; + flex-direction: column; + min-height: 100vh; + footer { + margin-top: auto; + } } nav.navbar { - .navbar-brand { - img { + padding: 0; + .navbar-brand img { height: 50px; - margin: -0.3125rem 0; - } - } - .navbar-toggler, - .navbar-collapse { - float: right; - } - .navbar-nav { - display: flex; - align-items: center; - } - .nav-item a { - } - .dropdown-menu { - .dropdown-item { - width: 120%; - i { - float: right; + margin: 8px 0; + } + .navbar-collapse, + .navbar-toggler { + float: right; + } + ul.navbar-nav { + display: flex; + align-items: stretch; + li.nav-item { + display: flex; + &.btn { + padding-top: 0; + padding-bottom: 0; + } + & > a { + align-self: center; + } + form.form-inline { + align-self: center; + display: flex; + input.form-control { + align-self: center; + height: 32px; + } + } } - } - } + } + .dropdown-menu { + .dropdown-item { + width: 120%; + i { + float: right; + } + } + } +} +div.header-name, +div.header-details { + div.row > div:first-child { + margin-left: 1.5em; + } } -#content_conainter { - position: relative; - min-height: calc(100% - 195px); -} -.footer { - background: $dark; - padding-top: 10px; - padding-bottom: 10px; - width: 100%; - p { - font-family: Open Sans; - font-weight: 300; - clear: both; - color: $white; - font-size: .9em; - line-height: 1.5em; - margin: auto; - max-width: 35em; - text-align: center; - a, a:hover { - text-decoration: underline; - } - } -} \ No newline at end of file +footer.footer { + background: $dark; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + p { + font-family: Open Sans; + font-weight: 300; + clear: both; + color: $white; + font-size: 0.9em; + line-height: 1.5em; + margin: auto; + max-width: 35em; + text-align: center; + a, a:hover { + text-decoration: underline; + } + } +} diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss index dda9cfbf3..e6e6e25ad 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss @@ -23,7 +23,7 @@ $black: #111 !default; // scss-docs-start gray-colors-map $grays: ( "100": $gray-100, - "200": $gray-200, /* = $chill-llight-gray, $chill-gray */ + "200": $gray-200, /* = $chill-light-gray, $chill-gray */ "300": $gray-300, "400": $gray-400, "500": $gray-500, /* = $chill-light-gray */ diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/index.js b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/index.js index e10e87960..daff13a55 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/index.js +++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/index.js @@ -4,10 +4,7 @@ // Or compile bootstrap only enabled assets require('./bootstrap.scss'); - // You can specify which plugins you need import Dropdown from 'bootstrap/js/src/dropdown'; - -//import { Tooltip, Toast, Popover } from 'bootstrap'; import Modal from 'bootstrap/js/dist/modal'; import Collapse from 'bootstrap/js/src/collapse'; diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss index 41a15522f..4c65e9af0 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss @@ -11,12 +11,6 @@ @import 'alert-with-actions'; -/* [hack] /!\ Contourne le positionnement problématique du div#content_conainter suivant, - * car sa position: relative le place au-dessus du bandeau et les liens sont incliquables */ -div.subheader { - height: 130px; -} - /* * Specific rules */ diff --git a/src/Bundle/ChillMainBundle/Resources/views/Layout/_footer.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Layout/_footer.html.twig index 2a1ed91d1..dbec69008 100644 --- a/src/Bundle/ChillMainBundle/Resources/views/Layout/_footer.html.twig +++ b/src/Bundle/ChillMainBundle/Resources/views/Layout/_footer.html.twig @@ -1,4 +1,9 @@ diff --git a/src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig new file mode 100644 index 000000000..898a31beb --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig @@ -0,0 +1,105 @@ +{# + * Copyright (C) 2014-2021, Champs Libres Cooperative SCRLFS, + * / + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . +#} +
+ +
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig index e6d65be3f..cb06ad704 100644 --- a/src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig +++ b/src/Bundle/ChillMainBundle/Resources/views/Menu/section.html.twig @@ -15,56 +15,30 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . #} -{# - -
  • -
    - Sections -
    -
      - {% for menu in menus %} -
    • -
      - -
      {% apply spaceless %} - {% if menu.extras.icons is defined %} - {% for icon in menu.extras.icons %} - - {% endfor %} - {% endif %} - {% endapply %}
      -
      -
      • - {% endfor %} -
    -
    • -#}
  • - -
    - {% for menu in menus %} - {{ menu.label }} - {% apply spaceless %} - {% if menu.extras.icons is defined %} - {% for icon in menu.extras.icons %} - - {% endfor %} - {% endif %} - {% endapply %} - {% endfor %} +
    + {% for menu in menus %} + + {{ menu.label }} + {% apply spaceless %} + {% if menu.extras.icons is defined %} + {% for icon in menu.extras.icons %} + + {% endfor %} + {% endif %} + {% endapply %} + {% endfor %}
    • diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig index 9732b70a5..cd3c39ea6 100644 --- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig +++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig @@ -1,19 +1,19 @@ {# - * Copyright (C) 2014-2015, Champs Libres Cooperative SCRLFS, - / - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . + * Copyright (C) 2014-2021, Champs Libres Cooperative SCRLFS, + / + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License +* along with this program. If not, see . #} {# @@ -26,159 +26,93 @@ + {{ installation.name }} - {% block title %}{% endblock %} - {# - - #} - - {% if active_bootstrap == 1 %} - {{ encore_entry_link_tags('bootstrap') }} - {% endif %} - {% if active_forkawesome == 1 %} - {{ encore_entry_link_tags('forkawesome') }} - {% endif %} - {% if active_ckeditor == 1 %} - {{ encore_entry_link_tags('ckeditor5') }} - {% endif %} + + {{ encore_entry_link_tags('bootstrap') }} + {{ encore_entry_link_tags('forkawesome') }} + {{ encore_entry_link_tags('ckeditor5') }} + {{ encore_entry_link_tags('chill') }} {% block css%}{% endblock %} -
    - -
    + {% endfor %} - {% block top_banner %}{# To use if you want to add a banner below the header (ie the menu) #}{% endblock %} - -
    - {% block sublayout_containter %} -
    -
    - {# Flash messages ! #} - {% for flashMessage in app.session.flashbag.get('success') %} -
    - - {{ flashMessage|raw }} - -
    - {% endfor %} - - {% for flashMessage in app.session.flashbag.get('error') %} -
    - - {{ flashMessage|raw }} - -
    - {% endfor %} - - {% for flashMessage in app.session.flashbag.get('notice') %} -
    - - {{ flashMessage|raw }} - -
    - {% endfor %} - - {% block content %} -
    -

    {{ 'Search'|trans }}

    - -
    - -
    - -
    -
    -
    - - {{ chill_widget('homepage', {} ) }} - {% endblock %} + {% for flashMessage in app.session.flashbag.get('error') %} +
    + + {{ flashMessage|raw }} +
    + {% endfor %} + + {% for flashMessage in app.session.flashbag.get('notice') %} +
    + + {{ flashMessage|raw }} + +
    + {% endfor %} + + {% block content %} +
    +

    {{ 'Search'|trans }}

    + +
    + +
    + +
    +
    +
    + + {{ chill_widget('homepage', {} ) }} + {% endblock %}
    - {% endblock %} +
    + {% endblock %}
    {{ include('@ChillMain/Layout/_footer.html.twig') }} - {{ encore_entry_script_tags('scratch') }} + {{ encore_entry_script_tags('bootstrap') }} + {{ encore_entry_script_tags('forkawesome') }} + {{ encore_entry_script_tags('ckeditor5') }} {{ encore_entry_script_tags('chill') }} - {% if active_bootstrap == 1 %} - {{ encore_entry_script_tags('bootstrap') }} - {% endif %} - {% if active_forkawesome == 1 %} - {{ encore_entry_script_tags('forkawesome') }} - {% endif %} - {% if active_ckeditor == 1 %} - {{ encore_entry_script_tags('ckeditor5') }} - {% endif %} + - {% block js%}{% endblock %} - - + + + {% block js%}{% endblock %} + + diff --git a/src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig index 9a5f27803..fca3723aa 100644 --- a/src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig +++ b/src/Bundle/ChillMainBundle/Resources/views/layoutWithVerticalMenu.html.twig @@ -1,19 +1,19 @@ {# - * Copyright (C) 2014-2015, Champs Libres Cooperative SCRLFS, - / - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . + * Copyright (C) 2014-2021, Champs Libres Cooperative SCRLFS, + / + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . #} {# @@ -23,34 +23,29 @@ {% extends "@ChillMain/layout.html.twig" %} -{% block sublayout_containter %} -
    +{% block sublayout_content %} +
    -
    +
    + {# Flash messages ! #} -
    +
    {% for flashMessage in app.session.flashbag.get('success') %}
    - - {{ flashMessage|raw }} - + {{ flashMessage|raw }}
    {% endfor %} {% for flashMessage in app.session.flashbag.get('error') %}
    - - {{ flashMessage|raw }} - + {{ flashMessage|raw }}
    {% endfor %} {% for flashMessage in app.session.flashbag.get('notice') %}
    - - {{ flashMessage|raw }} - + {{ flashMessage|raw }}
    {% endfor %}
    @@ -65,4 +60,4 @@
    -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig index c80dbb4db..95a246a8c 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig @@ -1,4 +1,4 @@ -