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

improve layout of custom field on view page

Browse Source 
ref #12
This commit is contained in:
Julien Fastré 2016-11-13 20:27:20 +01:00
parent d90be4ec46
commit 4c265ef293
4 changed files with 110 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
Resources/public/css/person.css
View File

@ -1,85 +1,77 @@
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-blue {
.chill-blue, div.person-view div.custom-fields figure.person-details div.cf_title_box:nth-child(4n+4) h2 {
color: #334d5c; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-green {
.chill-green, div.person-view div.custom-fields figure.person-details div.cf_title_box:nth-child(4n+2) h2 {
color: #43b29d; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-green-dark {
color: #328474; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-yellow {
color: #eec84a; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-orange {
.chill-orange, div.person-view div.custom-fields figure.person-details div.cf_title_box:nth-child(4n+3) h2 {
color: #e2793d; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-red {
.chill-red, div.person-view div.custom-fields figure.person-details div.cf_title_box:nth-child(4n+1) h2 {
color: #df4949; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-gray {
color: #ececec; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-beige {
color: #cabb9f; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-pink {
color: #dd506d; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-dark-gray {
color: #333333; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/main\/Resources\/public\/sass\/custom\/config\/_colors\.scss}line{font-family:\0000319}}
.chill-light-gray {
color: #b2b2b2; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\000034}}
div#header-person-name {
background: none repeat scroll 0 0 #328474;
color: #FFF;
padding-top: 1em;
padding-bottom: 1em; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\0000311}}
div#header-person-details {
background: none repeat scroll 0 0 #43b29d;
color: #FFF;
padding-top: 1em;
padding-bottom: 1em; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\0000318}}
div#person_details_container {
padding-top: 20px;
padding-bottom: 20px; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\0000324}}
figure.person-details h2 {
div.person-view {
/* custom fields on the home page */ }
div.person-view figure.person-details h2 {
font-family: 'Open Sans';
font-weight: 600;
margin-bottom: 0.3em; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\0000330}}
figure.person-details dl {
margin-bottom: 0.3em;
font-variant: small-caps; }
div.person-view figure.person-details dl {
margin-top: 0.3em; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\0000334}}
figure.person-details dt {
div.person-view figure.person-details dt {
font-family: 'Open Sans';
font-weight: 600; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\0000339}}
figure.person-details dd {
div.person-view figure.person-details dd {
margin-left: 0; }
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/marcu\/Projects\/Chill\/Code\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\0000343}}
figure.person-details a.sc-button {
div.person-view figure.person-details a.sc-button {
background-color: #000;
padding-top: 0.2em;
padding-bottom: 0.2em; }
div.person-view div.custom-fields figure.person-details {
display: flex;
flex-flow: row wrap; }
div.person-view div.custom-fields figure.person-details div.cf_title_box:nth-child(2n+1) {
width: 50%;
margin-right: 40px; }
div.person-view div.custom-fields figure.person-details iv.cf_title_box:nth-child(2n+2) {
width: calc(50% - 40px); }
/*# sourceMappingURL=person.css.map */

2
Resources/public/css/person.css.map
View File

@ -1,6 +1,6 @@
{
"version": 3,
"mappings": ";AAkBE,WAA+B;EAC7B,KAAK,EAJI,OAAO;;;AAGlB,YAA+B;EAC7B,KAAK,EAJY,OAAO;;;AAG1B,iBAA+B;EAC7B,KAAK,EAJoB,OAAO;;;AAGlC,aAA+B;EAC7B,KAAK,EAJ4B,OAAO;;;AAG1C,aAA+B;EAC7B,KAAK,EAJoC,OAAO;;;AAGlD,UAA+B;EAC7B,KAAK,EAJ4C,OAAO;;;AAG1D,WAA+B;EAC7B,KAAK,EAJoD,OAAO;;;AAGlE,YAA+B;EAC7B,KAAK,EAJ4D,OAAO;;;AAG1E,WAA+B;EAC7B,KAAK,EAJoE,OAAO;;;AAGlF,gBAA+B;EAC7B,KAAK,EAJ4E,OAAO;;;AAG1F,iBAA+B;EAC7B,KAAK,EAJoF,OAAO;;;ACZpG,sBAAuB;EACnB,UAAU,EAAE,8BAAwC;EACpD,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;;;AAGvB,yBAA0B;EACtB,UAAU,EAAE,8BAAmC;EAC/C,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;;;AAGvB,4BAA6B;EAC5B,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,IAAI;;;AAIpB,wBAAG;EACI,WAAW,EAAE,WAAW;EACxB,WAAW,EAAE,GAAG;EACtB,aAAa,EAAE,KAAK;;AAGrB,wBAAG;EACF,UAAU,EAAE,KAAK;;AAGlB,wBAAG;EACI,WAAW,EAAE,WAAW;EACxB,WAAW,EAAE,GAAG;;AAGvB,wBAAG;EACF,WAAW,EAAE,CAAC;;AAGf,iCAAY;EACX,gBAAgB,EC1BY,IAAI;ED2BhC,WAAW,EAAE,KAAK;EAClB,cAAc,EAAE,KAAK",
"mappings": "AAkBE,wGAA+B;EAC7B,KAAK,EAJI,OAAO;;AAGlB,yGAA+B;EAC7B,KAAK,EAJY,OAAO;;AAG1B,iBAA+B;EAC7B,KAAK,EAJoB,OAAO;;AAGlC,aAA+B;EAC7B,KAAK,EAJ4B,OAAO;;AAG1C,0GAA+B;EAC7B,KAAK,EAJoC,OAAO;;AAGlD,uGAA+B;EAC7B,KAAK,EAJ4C,OAAO;;AAG1D,WAA+B;EAC7B,KAAK,EAJoD,OAAO;;AAGlE,YAA+B;EAC7B,KAAK,EAJ4D,OAAO;;AAG1E,WAA+B;EAC7B,KAAK,EAJoE,OAAO;;AAGlF,gBAA+B;EAC7B,KAAK,EAJ4E,OAAO;;AAG1F,iBAA+B;EAC7B,KAAK,EAJoF,OAAO;;ACZpG,sBAAuB;EACnB,UAAU,EAAE,8BAAwC;EACpD,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;;AAGvB,yBAA0B;EACtB,UAAU,EAAE,8BAAmC;EAC/C,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;;AAGvB,4BAA6B;EAC5B,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,IAAI;;AAGrB,eAAgB;EA6BZ,oCAAoC;EA3B5B,wCAAG;IACC,WAAW,EAAE,WAAW;IACxB,WAAW,EAAE,GAAG;IAChB,aAAa,EAAE,KAAK;IACpB,YAAY,EAAE,UAAU;EAG5B,wCAAG;IACK,UAAU,EAAE,KAAK;EAGzB,wCAAG;IACH,WAAW,EAAE,WAAW;IACxB,WAAW,EAAE,GAAG;EAGhB,wCAAG;IACK,WAAW,EAAE,CAAC;EAGtB,iDAAY;IACJ,gBAAgB,EC5BN,IAAI;ID6Bd,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,KAAK;EAMjC,uDAAsB;IAClB,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,QAAQ;IAkBnB,wFAAgC;MAC5B,KAAK,EAAE,GAAG;MACV,YAAY,EAAE,IAAI;IAGtB,uFAAgC;MAC5B,KAAK,EAAE,gBAAgB",
"sources": ["../../../../main/Resources/public/sass/custom/config/_colors.scss","../sass/person.scss","../../../../main/Resources/public/sass/config/_colors.scss"],
"names": [],
"file": "person.css"

42
Resources/public/sass/person.scss
View File

@ -20,11 +20,13 @@ div#person_details_container {
padding-bottom: 20px;
}
figure.person-details {
div.person-view {
figure.person-details {
h2 {
font-family: 'Open Sans';
font-weight: 600;
margin-bottom: 0.3em;
font-variant: small-caps;
}
dl {
@ -45,4 +47,42 @@ figure.person-details {
padding-top: 0.2em;
padding-bottom: 0.2em;
}
}
/* custom fields on the home page */
div.custom-fields {
figure.person-details {
display: flex;
flex-flow: row wrap;
div.cf_title_box:nth-child(4n+1) h2 {
@extend .chill-red;
}
div.cf_title_box:nth-child(4n+2) h2 {
@extend .chill-green;
}
div.cf_title_box:nth-child(4n+3) h2 {
@extend .chill-orange;
}
div.cf_title_box:nth-child(4n+4) h2 {
@extend .chill-blue;
}
div.cf_title_box:nth-child(2n+1){
width: 50%;
margin-right: 40px;
}
iv.cf_title_box:nth-child(2n+2) {
width: calc(50% - 40px);
}
}
}
}

23
Resources/views/Person/view.html.twig
View File

@ -38,13 +38,13 @@ This view should receive those arguments:
{% block personcontent %}
<div class="person-view">
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
{% if person.memo is not empty %}
<div class="grid-12">
<figure class="person-details">
<h2 class="chill-red">{{ 'Memo'|trans|upper }}</h2>
<h2 class="chill-red">{{ 'Memo'|trans }}</h2>
<p>
<blockquote>{{ person.memo|nl2br }}</blockquote>
@ -54,7 +54,7 @@ This view should receive those arguments:
{% endif %}
<div class="grid-6">
<figure class="person-details">
<h2 class="chill-red">{{ 'General information'|trans|upper }}</h2>
<h2 class="chill-red">{{ 'General information'|trans }}</h2>
<dl>
<dt>{{ 'First name'|trans }}&nbsp;:</dt>
@ -76,7 +76,7 @@ This view should receive those arguments:
<div class="grid-6">
<figure class="person-details">
<h2 class="chill-green"><i class="fa fa-birthday-cake"></i>&nbsp;{{ 'Birth information'|trans|upper }}</h2>
<h2 class="chill-green"><i class="fa fa-birthday-cake"></i>&nbsp;{{ 'Birth information'|trans }}</h2>
<dl>
<dt>{{ 'Date of birth'|trans }}&nbsp;:</dt>
@ -115,7 +115,7 @@ This view should receive those arguments:
{%- if chill_person.fields.nationality == 'visible' or chill_person.fields.spoken_languages == 'visible'-%}
<div class="grid-6">
<figure class="person-details">
<h2 class="chill-orange">{{ 'Administrative information'|trans|upper }}</h2>
<h2 class="chill-orange">{{ 'Administrative information'|trans }}</h2>
{%- if chill_person.fields.nationality == 'visible' -%}
<dl>
@ -165,7 +165,7 @@ This view should receive those arguments:
{%- if chill_person.fields.email == 'visible' or chill_person.fields.phonenumber == 'visible' -%}
<div class="grid-6">
<figure class="person-details">
<h2 class="chill-blue"><i class="fa fa-envelope-o"></i>&nbsp;{{ 'Contact information'|trans|upper }}</h2>
<h2 class="chill-blue"><i class="fa fa-envelope-o"></i>&nbsp;{{ 'Contact information'|trans }}</h2>
{%- if chill_person.fields.address == 'visible' -%}
<dl>
@ -213,16 +213,23 @@ This view should receive those arguments:
{% if cFGroup and (cFGroup.getActiveCustomFields|length > 0) %}
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<div class="grid-6">
<div class="grid-12 custom-fields">
<figure class="person-details">
{{ chill_custom_fields_group_widget(person.cFData, cFGroup) }}
</figure>
</div>
</div>
<div class="grid-10 push-1 grid-mobile-12 grid-tablet-12 push-mobile-0 push-tablet-0 parent">
<figure class="person-details">
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
{{ include(edit_tmp_name, edit_tmp_args) }}
{% endif %}
</figure>
</div>
</div>
{% endif %}
</div> <!-- end of div.person-view -->
{% endblock %}