diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss index f931db1e7..b91aadb42 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss @@ -71,75 +71,102 @@ div#header-accompanying_course-details { /* * FLEX RESPONSIVE TABLE/BLOCK PRESENTATION */ +div.flex-bloc, +div.flex-table { + h2, h3, h4, dl, p { + margin: 0; + } + h2, h3, h4 { + color: var(--chill-blue); + } +} -/// 1. bloc appearance +/* +* Bloc appearance +*/ div.flex-bloc { + box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: stretch; - &.right { - justify-content: flex-end; - div.item-bloc { - margin-left: 1em; - margin-right: 0; - } - } + div.item-bloc { + flex-grow: 0; flex-shrink: 1; flex-basis: 50%; + + margin: 0; border: 1px solid #000; - margin-bottom: 1em; - margin-right: 1em; - margin-left: 0; padding: 1em; - padding-bottom: 0; - flex-grow: 0; - flex-shrink: 0; - flex-basis: 30%; - background-color: #e6e6e6; + + border-top: 0; + &:nth-child(1), &:nth-child(2) { + border-top: 1px solid #000; + } + border-left: 0; + &:nth-child(odd) { + border-left: 1px solid #000; + } + + //background-color: #e6e6e6; display: flex; flex-direction: column; - h5 { - margin-top: 0; - margin-bottom: 0.3em; - } - .content-bloc { - margin: 0; - font-size: 80%; - } - dd { - margin: 0.67em auto; - } - ul.record_actions { - margin-top: auto; - margin-bottom: 0; + + div.item-row { + flex-grow: 1; flex-shrink: 1; flex-basis: auto; + display: flex; + flex-direction: column; + + div.item-col { + &:first-child { + flex-grow: 0; flex-shrink: 0; flex-basis: auto; + } + &:last-child { + flex-grow: 1; flex-shrink: 1; flex-basis: auto; + display: flex; + + .list-content { // ul, dl, or div + } + ul.record_actions { + margin: 0; + align-self: flex-end; + flex-grow: 1; flex-shrink: 0; flex-basis: auto; + li { + margin-right: 5px; + } + } + } + } } } - @media only screen and (max-width: 1024px) { - div.item-bloc { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 45%; - } - } - @media only screen and (max-width: 768px) { + @media only screen and (max-width: 945px) { margin: auto -0.2em; } + @media only screen and (max-width: 935px) { margin: auto -0.5em; } + @media only screen and (max-width: 920px) { margin: auto -0.9em; } + @media only screen and (max-width: 900px) { flex-direction: column; + margin: auto 0; div.item-bloc { - margin-right: 0; - } - &.right div.item-bloc { - margin-left: 0; + border-left: 1px solid #000; + &:nth-child(2) { + border-top: 0; + } } } } -/// 2. table appearance +/* +* Table appearance +*/ div.flex-table { display: flex; flex-direction: column; align-items: stretch; align-content: stretch; + div.item-bloc { + display: flex; + flex-direction: column; + padding: 1em; border: 1px solid #000; border-top: 0; &:first-child { @@ -148,37 +175,51 @@ div.flex-table { &:nth-child(even) { background-color: #e6e6e6; } - padding: 1em; - display: flex; - flex-direction: row; - & > h4, & > h5 { - margin-top: 0; - margin-bottom: 0.3em; - flex-grow: 0; - flex-shrink: 0; - flex-basis: 33%; - } - & > .content-bloc { - margin: 0; - font-size: 80%; - flex-grow: 1; - flex-shrink: 0; - flex-basis: 50%; - dd { - margin: 0.67em auto; + + div.item-row { + display: flex; + flex-direction: row; + &:not(:first-child) { + margin-top: 0.5em; + border-top: 1px dotted #0000004f; + padding-top: 0.5em; + flex-direction: column; } - } - & > ul.record_actions { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 0; - margin-top: auto; - margin-bottom: 0; + + div.item-col { + &:first-child { + flex-grow: 0; flex-shrink: 0; flex-basis: 33%; + } + &:last-child { + flex-grow: 1; flex-shrink: 1; flex-basis: auto; + display: flex; + justify-content: flex-end; + + .list-content { // ul, dl, or div + } + ul.record_actions { + margin: 0; + align-self: flex-start; + flex-grow: 1; flex-shrink: 0; flex-basis: auto; + li { + margin-right: 5px; + } + } + } + } + @media only screen and (max-width: 900px) { + flex-direction: column; + div.item-col { + &:last-child { + ul.record_actions { + align-self: flex-end; + } + } + } + } + + // neutralize + div.chill_address div.chill_address_address p { text-indent: 0; } } } - @media only screen and (max-width: 768px) { - div.item-bloc { - flex-direction: column; - } - } -} +} diff --git a/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss b/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss index 2f0e5de55..6f52d2cae 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss @@ -1,63 +1,46 @@ /// complete and overwrite flex-table in chillmain.scss -div.list-with-period { // .flex-table - - div.item-bloc { - margin-bottom: 0; - - &:nth-last-of-type { - padding-bottom: 1em; +div.list-with-period { + div.person { + ul.record_actions { + li { + margin-right: 0 !important; + } } - - flex-direction: column; // !! - & > div { - display: flex; - flex-direction: row; - - &.person { - div.box-person { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 33%; - } - div.box-where { - flex-grow: 1; - flex-shrink: 0; - flex-basis: 40%; - } - ul.record_actions { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 25%; - li { - margin-right: 0; - } - } - @media only screen and (max-width: 768px) { - flex-direction: column; + } + div.periods { + div.header, + div.list-content { + width: calc(100% - 40px); + margin-left: 40px; + } + div.header { + position: relative; + a.sc-button { + position: absolute; + width: 30px; + height: 30px; + top: 10px; + left: -40px; + padding: 0; + i { + padding: 5px; } } - - &.periods { - list-style-type: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - div.header { - abbr.referrer { - font-size: 70%; - } - span.user {} - } - span.more { - font-style: italic; - } + abbr.referrer { + font-size: 70%; + } + span.user { + margin-left: 1em; + } + } + div.list-content { + span.more { + font-style: italic; } } } } - .chill-entity__person { .chill-entity__person__first-name, .chill-entity__person__last-name { diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig index 9ef00e360..f5f1fc067 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig @@ -8,20 +8,58 @@
- {{ accompanyingCourse.id }} - {{ accompanyingCourse.openingDate|format_date('short') }} - {{ accompanyingCourse.closingDate|format_date('short') }} - {{ accompanyingCourse.closingMotive|chill_entity_render_box }} - {{ accompanyingCourse.remark|raw }} - {{ accompanyingCourse.user }} - usagers: - {% for p in accompanyingCourse.participations %} - {{ p.person.id }} | {{ p.person.fullnamecanonical }} | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }} - {% endfor %} -+ {# start test flex-table #} +
+ + {{ 'Née le ' ~ p.person.birthdate|format_date('short') }} +
++ {% set born = (p.person.gender == 'woman') ? 'née': 'né' %} + {% set gender = (p.person.gender == 'woman') ? 'fa-venus' : + (p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %} + {% set genderTitle = (p.person.gender == 'woman') ? 'femme' : + (p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %} + {{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }} +
++ {% set born = (r.person.gender == 'woman') ? 'née': 'né' %} + {% set gender = (r.person.gender == 'woman') ? 'fa-venus' : + (r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %} + {% set genderTitle = (r.person.gender == 'woman') ? 'femme' : + (r.person.gender == 'homme') ? 'fa-mars' : 'neutre' %} + {{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }} +
+