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

improve layout of buttons, address, and record_actions

Browse Source
This commit is contained in:
Julien Fastré 2017-08-19 20:13:35 +02:00
parent f5b37f7e40
commit d7a34cf8be
8 changed files with 333 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
Resources/public/css/scratch.css
View File

@ -4198,7 +4198,7 @@ span.force-inline-label label {
.sc-button.white[disabled]:hover {
box-shadow: none; }
.sc-button.bt-submit, .sc-button.bt-create, .sc-button.bt-new {
.sc-button.bt-submit, .sc-button.bt-save, .sc-button.bt-create, .sc-button.bt-new {
color: #fff;
background: #43b29d;
border: medium none;
@ -4214,16 +4214,16 @@ span.force-inline-label label {
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.sc-button.bt-submit:hover, .sc-button.bt-submit:active, .sc-button.bt-create:hover, .sc-button.bt-create:active, .sc-button.bt-new:hover, .sc-button.bt-new:active {
.sc-button.bt-submit:hover, .sc-button.bt-submit:active, .sc-button.bt-save:hover, .sc-button.bt-save:active, .sc-button.bt-create:hover, .sc-button.bt-create:active, .sc-button.bt-new:hover, .sc-button.bt-new:active {
background: #3c9f8d;
color: #fff;
text-decoration: none; }
.sc-button.bt-submit:focus, .sc-button.bt-create:focus, .sc-button.bt-new:focus {
.sc-button.bt-submit:focus, .sc-button.bt-save:focus, .sc-button.bt-create:focus, .sc-button.bt-new:focus {
background: #3c9f8d; }
.sc-button.bt-submit[disabled], .sc-button.bt-create[disabled], .sc-button.bt-new[disabled] {
.sc-button.bt-submit[disabled], .sc-button.bt-save[disabled], .sc-button.bt-create[disabled], .sc-button.bt-new[disabled] {
background: rgba(67, 178, 157, 0.6);
color: #358d7c; }
.sc-button.bt-submit[disabled]:hover, .sc-button.bt-create[disabled]:hover, .sc-button.bt-new[disabled]:hover {
.sc-button.bt-submit[disabled]:hover, .sc-button.bt-save[disabled]:hover, .sc-button.bt-create[disabled]:hover, .sc-button.bt-new[disabled]:hover {
box-shadow: none; }
.sc-button.bt-reset, .sc-button.bt-delete {
color: #fff;
@ -4252,7 +4252,7 @@ span.force-inline-label label {
color: #d02525; }
.sc-button.bt-reset[disabled]:hover, .sc-button.bt-delete[disabled]:hover {
box-shadow: none; }
.sc-button.bt-action, .sc-button.bt-edit, .sc-button.bt-update, .sc-button.bt-show {
.sc-button.bt-action, .sc-button.bt-edit, .sc-button.bt-update {
color: #fff;
background: #e2793d;
border: medium none;
@ -4268,19 +4268,93 @@ span.force-inline-label label {
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.sc-button.bt-action:hover, .sc-button.bt-action:active, .sc-button.bt-edit:hover, .sc-button.bt-edit:active, .sc-button.bt-update:hover, .sc-button.bt-update:active, .sc-button.bt-show:hover, .sc-button.bt-show:active {
.sc-button.bt-action:hover, .sc-button.bt-action:active, .sc-button.bt-edit:hover, .sc-button.bt-edit:active, .sc-button.bt-update:hover, .sc-button.bt-update:active {
background: #df6a27;
color: #fff;
text-decoration: none; }
.sc-button.bt-action:focus, .sc-button.bt-edit:focus, .sc-button.bt-update:focus, .sc-button.bt-show:focus {
.sc-button.bt-action:focus, .sc-button.bt-edit:focus, .sc-button.bt-update:focus {
background: #df6a27; }
.sc-button.bt-action[disabled], .sc-button.bt-edit[disabled], .sc-button.bt-update[disabled], .sc-button.bt-show[disabled] {
.sc-button.bt-action[disabled], .sc-button.bt-edit[disabled], .sc-button.bt-update[disabled] {
background: rgba(226, 121, 61, 0.6);
color: #cd5e1f; }
.sc-button.bt-action[disabled]:hover, .sc-button.bt-edit[disabled]:hover, .sc-button.bt-update[disabled]:hover, .sc-button.bt-show[disabled]:hover {
.sc-button.bt-action[disabled]:hover, .sc-button.bt-edit[disabled]:hover, .sc-button.bt-update[disabled]:hover {
box-shadow: none; }
.sc-button.bt-show {
color: #fff;
background: #334d5c;
border: medium none;
box-shadow: none;
padding: 8px 12px;
text-decoration: none;
text-align: center;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
line-height: normal;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.sc-button.bt-show:hover, .sc-button.bt-show:active {
background: #2a3f4c;
color: #fff;
text-decoration: none; }
.sc-button.bt-show:focus {
background: #2a3f4c; }
.sc-button.bt-show[disabled] {
background: rgba(51, 77, 92, 0.6);
color: #21323b; }
.sc-button.bt-show[disabled]:hover {
box-shadow: none; }
.sc-button.bt-create::before, .sc-button.bt-save::before, .sc-button.bt-new::before, .sc-button.bt-delete::before, .sc-button.bt-update::before, .sc-button.bt-edit::before, .sc-button.bt-cancel::before, .sc-button.bt-show::before {
font: normal normal normal 14px/1 FontAwesome;
margin-right: 0.5em; }
.sc-button.bt-save::before {
content: ""; }
.sc-button.bt-create::before, .sc-button.bt-new::before {
content: ""; }
.sc-button.bt-delete::before {
content: ""; }
.sc-button.bt-edit::before, .sc-button.bt-update::before {
content: ""; }
.sc-button.bt-cancel::before {
content: ""; }
.sc-button.bt-show::before {
content: ""; }
.sc-button > i.fa {
margin-right: 0.5em; }
.sc-button.has-hidden > i.fa, .sc-button.no-content > i.fa {
margin-right: 0; }
.sc-button.has-hidden.bt-create::before, .sc-button.has-hidden.bt-save::before, .sc-button.has-hidden.bt-new::before, .sc-button.has-hidden.bt-delete::before, .sc-button.has-hidden.bt-update::before, .sc-button.has-hidden.bt-edit::before, .sc-button.has-hidden.bt-cancel::before, .sc-button.has-hidden.bt-show::before, .sc-button.no-content.bt-create::before, .sc-button.no-content.bt-save::before, .sc-button.no-content.bt-new::before, .sc-button.no-content.bt-delete::before, .sc-button.no-content.bt-update::before, .sc-button.no-content.bt-edit::before, .sc-button.no-content.bt-cancel::before, .sc-button.no-content.bt-show::before {
margin-right: 0; }
.sc-button.has-hidden > span.show-on-hover {
display: none; }
.sc-button.has-hidden:hover > span.show-on-hover {
display: inline-block; }
.sc-button.has-hidden:hover > i.fa {
margin-right: 0.5em; }
.sc-button.has-hidden:hover.bt-create::before, .sc-button.has-hidden:hover.bt-save::before, .sc-button.has-hidden:hover.bt-new::before, .sc-button.has-hidden:hover.bt-delete::before, .sc-button.has-hidden:hover.bt-update::before, .sc-button.has-hidden:hover.bt-edit::before, .sc-button.has-hidden:hover.bt-cancel::before, .sc-button.has-hidden:hover.bt-show::before {
margin-right: 0.5em; }
.sc-button.button-small {
font-size: 80%;
padding: 6px 8px; }
.sticky-form-buttons {
margin-top: 1em;
background-color: #cabb9f;
position: sticky;
bottom: 0.5em;
text-align: center;
padding: 0.5em;
border-radius: 0; }
.sticky-form-buttons .margin-5 {
margin-left: 5%;
margin-right: 5%; }
.sticky-form-buttons .margin-10 {
margin-left: 10%;
margin-right: 10%; }
/* Tabs */
.tab-nav {
@ -4435,6 +4509,45 @@ span.cf-subtitle {
border-bottom: 1px solid #cccccc;
margin-bottom: 1em; }
div.chill_address div.chill_address_address {
margin: 0.7em 0;
font-size: 98%;
font-variant: small-caps; }
div.chill_address div.chill_address_address p {
display: inline-block;
margin: 0 0 0 1.5em;
text-indent: -1.5em; }
/*ul.record_actions {
padding-left: 0;
}
ul.record_actions li {
display: inline-block;
}*/
ul.record_actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 0.5em 0; }
ul.record_actions li {
display: inline-block;
list-style-type: none;
margin-right: 1em;
order: 99; }
ul.record_actions li:last-child {
margin-right: 0; }
ul.record_actions li.cancel {
order: 1;
margin-right: auto; }
ul.record_actions.sticky-form-buttons {
padding-left: 1em;
padding-right: 1em; }
td ul.record_actions li,
ul.record_actions_small li {
margin-right: 0.2em; }
html, body {
min-height: 100%;
font-family: 'Open Sans'; }
@ -4485,23 +4598,6 @@ ul.submenu.width-15-em {
ul.custom_fields.choice li {
list-style: none; }
.sticky-form-buttons {
margin-top: 1em;
background-color: #e2793d;
position: sticky;
bottom: 0.5em;
text-align: center;
padding: 0.5em;
border-radius: 0; }
.sticky-form-buttons .margin-5 {
margin-left: 5%;
margin-right: 5%; }
.sticky-form-buttons .margin-10 {
margin-left: 10%;
margin-right: 10%; }
.errors {
color: #df4949; }
@ -4527,12 +4623,6 @@ ul.custom_fields.choice li {
font-family: 'Open Sans';
font-weight: bold; }
ul.record_actions {
padding-left: 0; }
ul.record_actions li {
display: inline-block; }
dd {
margin-left: 0; }

4
Resources/public/css/scratch.css.map
View File

File diff suppressed because one or more lines are too long

31
Resources/public/sass/_custom.scss
View File

@ -6,6 +6,9 @@
@import 'custom/person';
@import 'custom/pagination';
@import 'custom/custom-fields';
@import 'custom/address';
@import 'custom/record_actions';
html,body {
min-height:100%;
@ -66,27 +69,6 @@ ul.custom_fields.choice li {
list-style:none;
}
// Sticky form buttons
.sticky-form-buttons {
margin-top:1em;
background-color:$orange;//$grey-5;
position:sticky;
bottom:0.5em;
text-align:center;
padding:0.5em;
border-radius: $base-border-radius;
}
.sticky-form-buttons .margin-5 {
margin-left: 5%;
margin-right: 5%;
}
.sticky-form-buttons .margin-10 {
margin-left: 10%;
margin-right: 10%;
}
.errors {
color: $red;
}
@ -127,13 +109,6 @@ ul.custom_fields.choice li {
}
// Symfony records actions
ul.record_actions {
padding-left: 0;
}
ul.record_actions li {
display: inline-block;
}
dd {
margin-left: 0;

14
Resources/public/sass/custom/_address.scss Normal file
View File

@ -0,0 +1,14 @@
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;
}
}
}

45
Resources/public/sass/custom/_record_actions.scss Normal file
View File

@ -0,0 +1,45 @@
// Symfony records actions
/*ul.record_actions {
padding-left: 0;
}
ul.record_actions li {
display: inline-block;
}*/
ul.record_actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 0.5em 0;
li {
display: inline-block;
list-style-type: none;
margin-right: 1em;
order: 99;
&:last-child {
margin-right: 0;
}
}
li.cancel {
order: 1;
margin-right: auto;
}
}
ul.record_actions.sticky-form-buttons {
padding-left: 1em;
padding-right: 1em;
}
// inside table, little space between elements
td ul.record_actions,
ul.record_actions_small {
li {
margin-right: 0.2em;
}
}

147
Resources/public/sass/custom/modules/_buttons.scss
View File

@ -1,17 +1,138 @@
.sc-button {
&.bt-submit, &.bt-create, &.bt-new {
@include button($green, $white);
}
&.bt-submit, &.bt-save, &.bt-create, &.bt-new {
@include button($green, $white);
}
&.bt-reset, &.bt-delete {
@include button($red, $white);
}
&.bt-reset, &.bt-delete {
@include button($red, $white);
}
&.bt-action, &.bt-edit, &.bt-update, &.bt-show {
@include button($orange, $white);
}
> i.fa {
margin-right: 0.5em;
}
&.bt-action, &.bt-edit, &.bt-update {
@include button($orange, $white);
}
&.bt-show {
@include button($blue, $white);
}
&.bt-create::before,
&.bt-save::before,
&.bt-new::before,
&.bt-delete::before,
&.bt-update::before,
&.bt-edit::before,
&.bt-cancel::before,
&.bt-show::before {
font: normal normal normal 14px/1 FontAwesome;
margin-right: 0.5em;
}
&.bt-save::before {
// add a floppy
content: "";
}
&.bt-create::before, &.bt-new::before {
// add a plus
content: "";
}
&.bt-delete::before {
// add a trash
content: "";
}
&.bt-edit::before, &.bt-update::before {
// add a pencil
content: "";
}
&.bt-cancel::before {
// add an arrow left
content: "";
}
&.bt-show::before {
content: "";
}
> i.fa {
margin-right: 0.5em;
}
&.has-hidden,
&.no-content {
> i.fa {
margin-right: 0;
}
&.bt-create::before,
&.bt-save::before,
&.bt-new::before,
&.bt-delete::before,
&.bt-update::before,
&.bt-edit::before,
&.bt-cancel::before,
&.bt-show::before {
margin-right: 0;
}
}
&.has-hidden > span.show-on-hover {
display: none;
}
&.has-hidden:hover {
> span.show-on-hover {
display: inline-block;
}
> i.fa {
margin-right: 0.5em;
}
&.bt-create::before,
&.bt-save::before,
&.bt-new::before,
&.bt-delete::before,
&.bt-update::before,
&.bt-edit::before,
&.bt-cancel::before,
&.bt-show::before {
margin-right: 0.5em;
}
}
&.button-small {
font-size: 80%;
padding: 6px 8px;
}
}
// Sticky form buttons
.sticky-form-buttons {
margin-top:1em;
background-color:$chill-beige;
position:sticky;
bottom:0.5em;
text-align:center;
padding:0.5em;
border-radius: $base-border-radius;
}
.sticky-form-buttons .margin-5 {
margin-left: 5%;
margin-right: 5%;
}
.sticky-form-buttons .margin-10 {
margin-left: 10%;
margin-right: 10%;
}

18
Resources/views/Address/macro.html.twig
View File

@ -1,12 +1,16 @@
{%- macro _render(address, options) -%}
{% set options = { 'with_valid_from' : true }|merge(options|default({})) %}
{% if address.streetAddress1 is not empty %}<span class="street street1">{{ address.streetAddress1 }}</span><br/>{% endif %}
{% if address.streetAddress2 is not empty %}<span class="street street2">{{ address.streetAddress2 }}</span><br/>{% endif %}
{% if address.postCode is not empty %}
<span class="postalCode"><span class="code">{{ address.postCode.code }}</span> <span class="name">{{ address.postCode.name }}</span></span><br/>
<span class="country">{{ address.postCode.country.name|localize_translatable_string }}</span><br/>
{% endif %}
{%- set options = { 'with_valid_from' : true }|merge(options|default({})) -%}
<div class="chill_address">
<div class="chill_address_address">
{% if address.streetAddress1 is not empty %}<p class="street street1">{{ address.streetAddress1 }}</p>{% endif %}
{% if address.streetAddress2 is not empty %}<p class="street street2">{{ address.streetAddress2 }}</p>{% endif %}
{% if address.postCode is not empty %}
<p class="postalCode"><span class="code">{{ address.postCode.code }}</span> <span class="name">{{ address.postCode.name }}</span></p>
<p class="country">{{ address.postCode.country.name|localize_translatable_string }}</p>
{% endif %}
</div>
{%- if options['with_valid_from'] == true -%}
<span class="address_since">{{ 'Since %date%'|trans( { '%date%' : address.validFrom|localizeddate('long', 'none') } ) }}</span>
{%- endif -%}
</div>
{%- endmacro -%}

2
Resources/views/Util/confirmation_template.html.twig
View File

@ -9,7 +9,7 @@
{{ form_start(form) }}
<ul class="record_actions">
<li>
<li class="cancel">
<a href="{{ path(cancel_route, cancel_parameters|default( { } ) ) }}" class="sc-button bt-cancel">
{{ 'Cancel'|trans }}
</a>