Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-07-01 22:46:13 +00:00
Code Issues Actions Projects Releases Wiki Activity

flex table (row) design

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-25 20:40:05 +02:00
parent ce9070e641
commit 2f27674e05
2 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@ -68,7 +68,11 @@ div#header-accompanying_course-details {
padding-bottom: 1em; padding-bottom: 1em;
} }
/*
* FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/
/// 1. bloc appearance
div.flex-bloc { div.flex-bloc {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -77,16 +81,22 @@ div.flex-bloc {
align-content: stretch; align-content: stretch;
&.right { &.right {
justify-content: flex-end; justify-content: flex-end;
div.item-bloc {
margin-left: 1em;
margin-right: 0;
}
} }
div.item-bloc { div.item-bloc {
border: 1px solid #000; border: 1px solid #000;
margin: 0 1em 1em 0; margin-bottom: 1em;
margin-right: 1em;
margin-left: 0;
padding: 1em; padding: 1em;
padding-bottom: 0; padding-bottom: 0;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: 30%; flex-basis: 30%;
background-color: #e6e6e6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
h5 { h5 {
@ -114,5 +124,61 @@ div.flex-bloc {
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
flex-direction: column; flex-direction: column;
div.item-bloc {
margin-right: 0;
}
&.right div.item-bloc {
margin-left: 0;
}
}
}
/// 2. table appearance
div.flex-table {
display: flex;
flex-direction: column;
align-items: stretch;
align-content: stretch;
div.item-bloc {
border: 1px solid #000;
border-top: 0;
&:first-child {
border-top: 1px solid #000;
}
&:nth-child(even) {
background-color: #e6e6e6;
}
padding: 1em;
display: flex;
flex-direction: row;
& > 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;
}
}
& > ul.record_actions {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
margin-top: auto;
margin-bottom: 0;
}
}
@media only screen and (max-width: 768px) {
div.item-bloc {
flex-direction: column;
}
} }
} }

8
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
View File

@ -19,7 +19,7 @@
{% endif %} {% endif %}
<h2>{{ 'Associated peoples'|trans }}</h2> <h2>{{ 'Associated peoples'|trans }}</h2>
<div class="flex-bloc right"> <div class="flex-table">
{% for p in accompanyingCourse.participations %} {% for p in accompanyingCourse.participations %}
{% if p.enddate is null %} {% if p.enddate is null %}
<div class="item-bloc"> <div class="item-bloc">
@ -126,15 +126,15 @@
</h5> </h5>
<dl class="content-bloc"> <dl class="content-bloc">
<dd>
<i class="fa fa-fw fa-phone"></i>{{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }}
</dd>
<dd> <dd>
<i class="fa fa-fw fa-envelope-o"></i> <i class="fa fa-fw fa-envelope-o"></i>
<a href="{{ 'mailto:' ~ r.thirdParty.email }}"> <a href="{{ 'mailto:' ~ r.thirdParty.email }}">
{{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }} {{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }}
</a> </a>
</dd> </dd>
<dd>
<i class="fa fa-fw fa-phone"></i>{{ r.thirdParty.telephone|chill_print_or_message("thirdparty.No_phonenumber") }}
</dd>
<dd> <dd>
{% if r.thirdParty.address == null %} {% if r.thirdParty.address == null %}
<i class="fa fa-fw fa-map-marker"></i><span class="chill-no-data-statement">{{ 'No address given'|trans }}</span> <i class="fa fa-fw fa-map-marker"></i><span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>