diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss index fde222a23..ebcb04f11 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/buttons.scss @@ -17,8 +17,8 @@ $chill-theme-buttons: ( "update": $chill-orange, "show": $chill-blue, "view": $chill-blue, - "misc": $chill-light-gray, - "cancel": $chill-light-gray, + "misc": $gray-300, + "cancel": $gray-300, ); @each $button, $color in $chill-theme-buttons { @@ -74,17 +74,17 @@ $chill-theme-buttons: ( } &[class*='btn-']:empty { &::before { - margin-right: 0; + margin-right: 0; } } } .btn { &.btn-new::before, - &.btn-create::before { content: "\f067"; } // fa-plus - &.btn-edit::before, + &.btn-create::before { content: "\f067"; } // fa-plus + &.btn-edit::before, &.btn-update::before { content: "\f040"; } // fa-pencil - &.btn-show::before, + &.btn-show::before, &.btn-view::before { content: "\f06e"; } // fa-eye &.btn-save::before { content: "\f0c7"; } // fa-floppy-o &.btn-duplicate::before { content: "\f24d"; } // fa-clone // f0c5 fa-files-o diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss index f0ed84771..cc9dc363d 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss @@ -59,11 +59,6 @@ div.flex-bloc { flex-direction: column; div.item-col { - &.separator { - margin-top: 0.5em; - border-top: 1px dotted $gray-900; - padding-top: 0.5em; - } &:first-child { flex-grow: 0; flex-shrink: 0; flex-basis: auto; @@ -71,15 +66,10 @@ div.flex-bloc { &:last-child { flex-grow: 1; flex-shrink: 1; flex-basis: auto; + @include separator; ul.record_actions { align-self: flex-end; - flex-grow: 1; flex-shrink: 0; flex-basis: auto; - margin: 0; - - li { - margin-right: 5px; - } } } } @@ -108,17 +98,6 @@ div.flex-table { div.item-row { flex-direction: row; - &:first-child { - align-items: baseline; // - } - - &.separator { - margin-top: 0.5em; - border-top: 1px dotted $gray-900; - padding-top: 0.5em; - //flex-direction: column; - } - div.item-col { &:first-child { flex-grow: 0; flex-shrink: 0; flex-basis: auto; @@ -128,8 +107,11 @@ div.flex-table { flex-grow: 1; flex-shrink: 1; flex-basis: auto; justify-content: flex-end; + @include media-breakpoint-down(md) { + @include separator; + } + ul.record_actions { - flex-grow: 1; flex-shrink: 0; flex-basis: auto; align-self: flex-start; } } @@ -150,11 +132,11 @@ div.flex-table { } /* -* __WRAP-LIST-INLINE_________ +* __WRAP_LIST_INLINE_________ * FLEX RESPONSIVE INLINE DEFINITION LIST */ -div.wraplist { +div.wrap-list { padding: 0; width: 100%; @@ -166,6 +148,7 @@ div.wraplist { div.wl-col.title { width: auto; + flex-shrink: 0; @include media-breakpoint-up(md) { margin-left: 1.5em; @@ -205,12 +188,13 @@ div.wraplist { } + /* * __WRAP_HEADER_BLOC________ * HEADER ROW FOR FLEX-TABLE ELEMENTS */ -div.wrapheader { +div.wrap-header { width: 100%; div.wh-row { @@ -233,6 +217,44 @@ div.wrapheader { justify-content: flex-end; } } + } + &.debug { + border: 1px solid $black; + div.wh-row { + &:first-child div.wh-col { + &:first-child { background-color: $yellow; } + &:last-child { background-color: $beige; } + } + &:last-child div.wh-col { + &:first-child { background-color: $orange; } + &:last-child { background-color: $pink; } + } + } + } +} + +/* +* COMMON +*/ + +div.flex-bloc, +div.flex-table, +div.wrap-list, +div.wrap-header { + + div.separator { + @include separator; + } + + ul.record_actions { + flex-grow: 1; + flex-shrink: 0; + flex-basis: auto; + margin: 0; + + li { + margin-right: 5px; + } } } diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss index cccb01502..9b4650087 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss @@ -26,3 +26,10 @@ 0 1px 0 0 var(--bs-dark) inset; } +// Dotted line to separate rows + +@mixin separator { + margin-top: 0.5em; + border-top: 1px dotted $gray-900; + padding-top: 0.5em; +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss index 29e653b5d..9d9f6dfbc 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss @@ -115,6 +115,12 @@ div.banner { } } +abbr.referrer { + font-size: 70%; + padding-right: 0.4em; + align-self: center; // in flex context +} + /* * HOUSEHOLD CONTEXT * Header custom for Household diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss index b2ab06c2c..55aacca88 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/person_with_period.scss @@ -1,8 +1,50 @@ -/// -div.list-with-period, div.list-household-members { +/// Search Page (list_with_period.html.twig) +div.list-with-period { - div.periods { + // override wrap-list + div.wrap-list.periods-list { + div.wl-row { + flex-wrap: nowrap; + div.wl-col { + &.title { + width: 36%; + @include media-breakpoint-up(md) { + margin-left: 0; + } + } + &.list { + display: flex; + flex-wrap: wrap; // + margin: unset; + } + } + @include media-breakpoint-down(sm) { + flex-wrap: wrap; + div.wl-col { + &.title, &.list { + width: 100%; + } + &.title { + text-align: left; + div { + display: inline-block; + } + } + } + } + } + } + div.periods-list { + div.title { + text-align: right; + div.date {} + div.user {} + } + } + + + /* div.header, div.list-content { width: calc(100% - 40px); @@ -21,9 +63,6 @@ div.list-with-period, div.list-household-members { padding: 5px; } } - abbr.referrer { - font-size: 70%; - } span.user { margin-left: 1em; } @@ -33,8 +72,24 @@ div.list-with-period, div.list-household-members { font-style: italic; } } + */ +} + +/// TODO + +/// dans householdmembereditor/Concerned.vue +div.positions { + div.list-household-members { + div.participation-details {} } } +/// dans householdmembereditor/Concerned.vue et dans household/summary +div.list-household-members { + div.move_to { + p.move_hint {} + } + div.comment {} +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss index 657129644..146fc735b 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss @@ -1,8 +1,18 @@ -section.chill-entity { +/// CHILL ENTITY RENDER BOX +.chill-entity { + + /// PERSON &.entity-person { span.firstname, span.lastname, span.altname {} } + + /// SOCIAL-ISSUE + &.entity-social-issue { + margin-right: 0.3em; + } } + + diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue index bde9be461..e7254c8c6 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue @@ -40,7 +40,7 @@ -
+