From a48d7f5e9475ddbf065ae01ceb104b70c1a5aee7 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Sat, 31 Jul 2021 10:34:20 +0200 Subject: [PATCH] move styles from bootstrap custom to chill entrypoint. split chillmain with imports sheets. clean styles --- .../Resources/public/chill/chillmain.scss | 305 +++++++++++++++++- .../Resources/public/chill/css/chillmain.css | 25 -- .../Resources/public/chill/index.js | 3 +- .../_buttons.scss => chill/scss/buttons.scss} | 0 .../Resources/public/chill/scss/forms.scss | 39 +++ .../Resources/public/chill/scss/mixins.scss | 14 + .../scss/record_actions.scss} | 51 +-- .../public/module/bootstrap/_custom.scss | 280 +--------------- .../bootstrap/{shared.scss => _shared.scss} | 0 .../views/SingleTask/_list.html.twig | 38 +-- .../public/chill/chillthirdparty.scss | 57 ---- 11 files changed, 395 insertions(+), 417 deletions(-) delete mode 100644 src/Bundle/ChillMainBundle/Resources/public/chill/css/chillmain.css rename src/Bundle/ChillMainBundle/Resources/public/{module/bootstrap/custom/_buttons.scss => chill/scss/buttons.scss} (100%) create mode 100644 src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss rename src/Bundle/ChillMainBundle/Resources/public/{module/bootstrap/custom/_record_actions.scss => chill/scss/record_actions.scss} (71%) rename src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/{shared.scss => _shared.scss} (100%) diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss index 97c5e3cc9..c1aa19213 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss @@ -4,23 +4,153 @@ // Chill mixins @import './scss/mixins'; +// Chill buttons +@import './scss/buttons'; + +// Chill forms +@import './scss/forms'; + +// Chill record_actions +@import './scss/record_actions'; + // Chill entity render box system @import './scss/render_box'; // Chill flex responsive table/block presentation @import './scss/flex_table'; + /* - * Specific rules + * BASE LAYOUT POSITION */ -.custom_field_no_data, -.chill-no-data-statement { - font-style: italic; +body { + display: flex; + flex-direction: column; + min-height: 100vh; + footer { + margin-top: auto; + } +} + +header { + nav.navbar { + padding: 0; + a.navbar-brand img { + height: 50px; + margin: 8px 0; + } + div.navbar-collapse { + 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; + } + } + } + } + div.dropdown-menu { + margin: 0; + padding: 0; + border-radius: 0; + a.dropdown-item { + width: 120%; + border: 0; + border-bottom: 1px solid $gray-200; + font-size: smaller; + i { + float: right; } + &:hover { + color: $gray-500 !important; } + } + } + + // fullwidth menu when navbar is collapsed + @media (max-width: 767px) { + & { + position: relative; + } + button.navbar-toggler { + float: right; + } + div.navbar-collapse { + float: none; + position: absolute; + top: 4em; + left: 0; + right: 0; + z-index: 2; + padding: 1em; + border-top: 1px solid shade-color($primary, 25%); + ul.navbar-nav { + display: grid; + grid-template-areas: + "sear sear sear" + "sect user lang"; + li.nav-item { + flex-direction: column; + border: 0; + a.nav-link {} + &.navigation-search { + grid-area: sear; + margin-bottom: 1em; + form { + width: 100%; + input.form-control {} + button.btn {} + } + } + &.nav-section { grid-area: sect; } + &.nav-user { grid-area: user; } + &.nav-language { grid-area: lang; } + } + li.dropdown { + &, & > * { + background-color: transparent !important; + } + a.dropdown-toggle {} + div.dropdown-menu { + display: block; + border: 0; + a.dropdown-item { + width: 100%; + border: 0; + border-top: 1px dotted $gray-200; + background-color: transparent !important; + } + } + } + } + } + } + + } } -// styles communs pour tous les bandeaux div.banner { + a { + text-decoration: none; + &.phone, + &.email { + color: white; + } + } .id-number { font-weight: lighter; font-size: 50%; @@ -28,17 +158,166 @@ div.banner { &:before { content: '(n°'; } &:after { content: ')'; } } - a.phone, - a.email { - color: white; - } - ul.list-content { - //margin: 0 auto; - } span.age { margin-left: 0.5em; &:before { content: '('; } &:after { content: ')'; } } - +} + +div.vertical-menu { + border-radius: 0; + margin-top: 0.5rem; + a.list-group-item { + background-color: $chill-yellow; + border: 0; + margin-bottom: 0.25rem; + &:hover { + background-color: tint-color($chill-yellow, 20%) + } + } +} + +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; + } + } +} + + +/* + * SPECIFIC RULES + */ + +/// titles +h1, h2, +.h1, .h2 { + font-weight: $headings-font-weight + 200; +} + +/// typography +.open_sansbold { + font-weight: bold; +} + +/// no borders on head table +table.table-bordered { + thead, thead * { + border: 0 !important; + text-align: center; + } +} + +/// chill elements of design +.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; + } +} + +.custom_field_no_data, +.chill-no-data-statement { + font-style: italic; +} + +//// still used ? +// move from chillmain.css, converted to sass + +div#usefulbar { + background-color: #fbba3a; + z-index: 1000; + padding-right: 15px; + + form { + margin: 0; + } + i.menu { + font-size: 2em; + } + ul { + display: flex; + justify-content: flex-end; + margin: 0; + padding-top: 5px; + padding-right: 10px; + } + li { + color: white; + margin-left: 10px; + a { + color: white; + text-shadow: 0px 0px 1px #555; + } + i.icon-user-add { + &:before { + vertical-align: -5px; + } + } + &#search_element { + text-align: right; + } + &#search_element div#search_form { + margin: 0; + padding: 0; + button { + color: white; + border: none; + bottom: -2px; + height: 35px; + } + } + &#search_element div#search_form { + div, .field { + margin: 0; + } + } + } +} + +div#flashMessages { + margin-top: 20px; + .flash-notice { + margin-top: 10px; + margin-bottom: 10px; + } +} + +.personName { + font-variant: small-caps; + text-transform: capitalize; +} + +input.belgian_national_number_inversed_date { + width: 7em; + margin-right: 1em; +} +input.belgian_national_number_daily_counter { + width: 4em; + margin-right: 1em; +} +input.belgian_national_number_control_digit { + width: 3em; } diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/css/chillmain.css b/src/Bundle/ChillMainBundle/Resources/public/chill/css/chillmain.css deleted file mode 100644 index 85c247173..000000000 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/css/chillmain.css +++ /dev/null @@ -1,25 +0,0 @@ -div#usefulbar { background-color: #fbba3a; z-index: 1000; padding-right: 15px; } -div#usefulbar form { margin: 0; } -div#usefulbar i.menu { font-size: 2em; } -div#usefulbar ul { display: flex; justify-content: flex-end; margin: 0; padding-top: 5px; padding-right: 10px; } -div#usefulbar li { color: white; margin-left: 10px; } -div#usefulbar li a { color: white; text-shadow: 0px 0px 1px #555; } -div#usefulbar li i.icon-user-add:before { vertical-align: -5px; } -div#usefulbar li#search_element { text-align: right; } -div#usefulbar li#search_element div#search_form { margin: 0; padding: 0; } -div#usefulbar li#search_element div#search_form div { margin: 0; } -div#usefulbar li#search_element div#search_form .field { margin: 0; } -div#usefulbar li#search_element div#search_form button { color: white; border: none; bottom: -2px; height: 35px; } - -div#flashMessages { margin-top: 20px; } -div#flashMessages .flash-notice { margin-top: 10px; margin-bottom: 10px; } - -.personName { font-variant: small-caps; text-transform: capitalize; } - -.personName { text-transform: capitalize; } - -input.belgian_national_number_inversed_date { width: 7em; margin-right: 1em; } - -input.belgian_national_number_daily_counter { width: 4em; margin-right: 1em; } - -input.belgian_national_number_control_digit { width: 3em; } \ No newline at end of file diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/index.js b/src/Bundle/ChillMainBundle/Resources/public/chill/index.js index cf7365631..84f11fa43 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/index.js +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/index.js @@ -14,12 +14,12 @@ global.select2 = select2; require('select2/dist/css/select2.css'); require('select2-bootstrap-theme/dist/select2-bootstrap.css'); + /* * Load Chill themes assets */ require('./chillmain.scss'); -require('./css/chillmain.css'); import { chill } from './js/chill.js'; global.chill = chill; @@ -34,6 +34,7 @@ require('./img/favicon.ico'); require('./img/logo-chill-sans-slogan_white.png'); require('./img/logo-chill-outil-accompagnement_white.png'); + /* * Load local libs * Some libs are only used in a few pages, they are loaded on a case by case basis diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_buttons.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss similarity index 100% rename from src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_buttons.scss rename to src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss new file mode 100644 index 000000000..078e43787 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/forms.scss @@ -0,0 +1,39 @@ +/// forms +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; + } + } + } + + fieldset { + margin-top: 1em; + & > legend { + @include title_in_form; + } + } + + label { + display: inline; + &.required:after { + content: " *"; + color: $red; + } + } +} + +.col-form-label { + padding-top: .5em; + padding-bottom: .5em; + font-weight: 700; + margin-bottom: .375em; +} diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss index 22e1d310e..ad7244af7 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss @@ -1,4 +1,18 @@ +// +// +// + +@mixin title_in_form { + font-size: 1.438em; + font-weight: 700; + width: 100%; + border-bottom: 3px solid $gray-200; + margin-bottom: 1em; + display: block; +} + + // We use box-shadow instead of border // to avoid to manage border double-width // Then we can simulate border-collapse: collapse (table) diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_record_actions.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss similarity index 71% rename from src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_record_actions.scss rename to src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss index 8ddc1b009..efedac51d 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_record_actions.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/record_actions.scss @@ -1,13 +1,22 @@ -ul.record_actions, -ul.record_actions_column { +ul.record_actions { display: flex; + flex-direction: row; + flex-wrap: wrap-reverse; justify-content: flex-end; + padding: 0.5em 0; - &.record_actions--left { + &.column { + flex-direction: column; + } + + &.left { justify-content: flex-start; } - padding: 0.5em 0; - flex-wrap: wrap-reverse; + + &.sticky-form-buttons { + padding-left: 1em; + padding-right: 1em; + } li { display: inline-block; @@ -18,37 +27,33 @@ ul.record_actions_column { &:last-child { margin-right: 0; } - } - li.cancel { - order: 1; - margin-right: auto; + &.cancel { + order: 1; + margin-right: auto; + } } } - -ul.record_actions { - flex-direction: row; -} - -ul.record_actions_column { - flex-direction: column; -} - -ul.record_actions.sticky-form-buttons { - padding-left: 1em; - padding-right: 1em; +.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; } +/// EXCEPTIONS // inside table exceptions table { - td ul.record_actions, ul.record_actions_small { li { margin-right: 0.2em; } } - ul.record_actions { margin: 0; padding: 0.5em; diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss index 17ca68d49..9d632026f 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss @@ -1,284 +1,6 @@ /* * These custom styles will override bootstrap enabled stylesheets + * in mod_bootstrap entrypoint */ -/// chill buttons -@import 'custom/_buttons'; -// chill record_actions -@import 'custom/_record_actions'; - -/// titles -h1, h2, .h1, .h2 { - font-weight: $headings-font-weight + 200; -} - -/// typography -.open_sansbold { - font-weight: bold; -} - -/// 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; -} - -.col-form-label { - padding-top: .5em; - padding-bottom: .5em; - font-weight: 700; - margin-bottom: .375em; -} - -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; - } - } - } - fieldset { - margin-top: 1em; - & > legend { - @include title_in_form; - } - } - label { - display: inline; - &.required:after { - content: " *"; - color: $red; - } - } -} - -/// table - -table.table-bordered { - thead, thead * { - border: 0 !important; - text-align: center; - } -} - -/// 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; -} - -.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: 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 positions - -body { - display: flex; - flex-direction: column; - min-height: 100vh; - footer { - margin-top: auto; - } -} - -header { - nav.navbar { - padding: 0; - a.navbar-brand img { - height: 50px; - margin: 8px 0; - } - div.navbar-collapse { - 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; - } - } - } - } - div.dropdown-menu { - margin: 0; - padding: 0; - border-radius: 0; - a.dropdown-item { - width: 120%; - border: 0; - border-bottom: 1px solid $gray-200; - font-size: smaller; - i { - float: right; } - &:hover { - color: $gray-500 !important; } - } - } - - // fullwidth menu when navbar is collapsed - @media (max-width: 767px) { - & { - position: relative; - } - button.navbar-toggler { - float: right; - } - div.navbar-collapse { - float: none; - position: absolute; - top: 4em; - left: 0; - right: 0; - z-index: 2; - padding: 1em; - border-top: 1px solid shade-color($primary, 25%); - ul.navbar-nav { - display: grid; - grid-template-areas: - "sear sear sear" - "sect user lang"; - li.nav-item { - flex-direction: column; - border: 0; - a.nav-link {} - &.navigation-search { - grid-area: sear; - margin-bottom: 1em; - form { - width: 100%; - input.form-control {} - button.btn {} - } - } - &.nav-section { grid-area: sect; } - &.nav-user { grid-area: user; } - &.nav-language { grid-area: lang; } - } - li.dropdown { - &, & > * { - background-color: transparent !important; - } - a.dropdown-toggle {} - div.dropdown-menu { - display: block; - border: 0; - a.dropdown-item { - width: 100%; - border: 0; - border-top: 1px dotted $gray-200; - background-color: transparent !important; - } - } - } - } - } - } - - } -} - -div.banner { - div.header-name, - div.header-details { - div.row > div:first-child { - @media (min-width: 576px) { - //margin-left: 1.5em; - } - } - } - a { - text-decoration: none; - } -} - -div.vertical-menu { - border-radius: 0; - margin-top: 0.5rem; - a.list-group-item { - background-color: $chill-yellow; - border: 0; - margin-bottom: 0.25rem; - &:hover { - background-color: tint-color($chill-yellow, 20%) - } - } -} - -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/module/bootstrap/shared.scss b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss similarity index 100% rename from src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/shared.scss rename to src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss diff --git a/src/Bundle/ChillTaskBundle/Resources/views/SingleTask/_list.html.twig b/src/Bundle/ChillTaskBundle/Resources/views/SingleTask/_list.html.twig index 026e354c5..a5a867dcc 100644 --- a/src/Bundle/ChillTaskBundle/Resources/views/SingleTask/_list.html.twig +++ b/src/Bundle/ChillTaskBundle/Resources/views/SingleTask/_list.html.twig @@ -10,17 +10,17 @@
{{ task.title }}
- + {% if person is null %}
{{ 'For person'|trans }} : {{ task.person}}
{% endif %} - +
{{ task_workflow_metadata(task, 'definition.name')|trans }}
- +
{% for place in workflow_marked_places(task) %} {{ place|trans }} @@ -29,10 +29,10 @@
{{ 'By'|trans }} : {{ task.assignee.username }}
{% endif %}
- + {% if task.startDate is not null or task.warningDate is not null or task.endDate is not null %}
-
{% endif %} - + {% endif %} {% else %} - + {% if false == app.request.query.boolean('hide_form', false) %}

{{ 'Tasks'|trans }}

{% endif %} - + {% if person is not null and is_granted('CHILL_TASK_TASK_CREATE', person) %} {% endif %} - + {% if single_task_ended_tasks is defined %} {{ helper.date_status('Tasks with expired deadline', single_task_ended_tasks, single_task_ended_count, single_task_ended_paginator, 'ended', isSingleStatus, person) }} {% endif %} diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss index 4ce6956c3..7651cd382 100644 --- a/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss +++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/chill/chillthirdparty.scss @@ -1,4 +1,3 @@ - /// render_box section.chill-entity { .entity-thirdparty { @@ -6,59 +5,3 @@ section.chill-entity { } } -/* AVANT - border: 1px solid black; - background-color: rgba(255, 255, 255, 0.65); - padding: 1em; - margin: 1em 0; - max-width: 500px; - - div.name { - font-variant: small-caps; - } - - div.category { - margin: 0.5em 0; - font-size: 85%; - - span.category { - font-style: italic; - } - span::before { - margin-left: 0.5em; - margin-right: 0.5em; - font-family: 'ForkAwesome'; - content: '\f02e'; - font-style: normal; - } - } - - div.comment { - font-size: 85%; - font-style: italic; - } - - div.chill_address { - div.chill_address_address::before { - margin-left: 0.5em; - margin-right: 0.5em; - font-family: 'ForkAwesome'; - content: '\f015'; - } - } - - div.contact { - font-variant: small-caps; - span::before { - margin-left: 0.5em; - margin-right: 0.5em; - font-family: 'ForkAwesome'; - } - span.email::before { - content: '\f1fa'; - } - span.telephone::before { - content: '\f095'; - } - } - */