Customer portal : Improvements on form sticky buttons

SVN:trunk[4081]
This commit is contained in:
Guillaume Lajarige
2016-05-13 14:03:36 +00:00
parent 760f3a788e
commit d0d761236b
2 changed files with 19 additions and 18 deletions

View File

@@ -30,8 +30,8 @@
{% endif %} {% endif %}
<div class="form_btn_regular"> <div class="form_btn_regular">
{% if form.editable_fields_count is defined and form.editable_fields_count > 0 %} {% if form.editable_fields_count is defined and form.editable_fields_count > 0 %}
<input class="btn btn-default form_btn_cancel" type="button" value="{{ 'Portal:Button:Cancel'|dict_s }}" data-dismiss="modal"> <button class="btn btn-default form_btn_cancel" type="button" value="cancel" title="{{ 'Portal:Button:Cancel'|dict_s }}" data-dismiss="modal">{{ 'Portal:Button:Cancel'|dict_s }}</button>
<input class="btn btn-primary form_btn_submit" type="submit" value="{{ 'Portal:Button:Submit'|dict_s }}"> <button class="btn btn-primary form_btn_submit" type="submit" value="submit" title="{{ 'Portal:Button:Submit'|dict_s }}">{{ 'Portal:Button:Submit'|dict_s }}</button>
{% else %} {% else %}
{% if tIsModal %} {% if tIsModal %}
<input class="btn btn-default form_btn_cancel" type="button" value="{{ 'Portal:Button:Close'|dict_s }}" data-dismiss="modal"> <input class="btn btn-default form_btn_cancel" type="button" value="{{ 'Portal:Button:Close'|dict_s }}" data-dismiss="modal">
@@ -66,6 +66,8 @@
var oStickyRegularButtons_{{ sFormIdSanitized }} = oNormalRegularButtons_{{ sFormIdSanitized }}.clone(true, true); var oStickyRegularButtons_{{ sFormIdSanitized }} = oNormalRegularButtons_{{ sFormIdSanitized }}.clone(true, true);
oStickyRegularButtons_{{ sFormIdSanitized }}.addClass('sticky'); oStickyRegularButtons_{{ sFormIdSanitized }}.addClass('sticky');
{% if tIsModal == true %} {% if tIsModal == true %}
oStickyRegularButtons_{{ sFormIdSanitized }}.find('.form_btn_submit').html('<span class="glyphicon glyphicon-ok"></span>');
oStickyRegularButtons_{{ sFormIdSanitized }}.find('.form_btn_cancel').html('<span class="glyphicon glyphicon-remove"></span>');
$('#{{ sFormId }}').closest('.modal').append(oStickyRegularButtons_{{ sFormIdSanitized }}); $('#{{ sFormId }}').closest('.modal').append(oStickyRegularButtons_{{ sFormIdSanitized }});
{% else %} {% else %}
$('#{{ sFormId }}').closest('#main-content').append(oStickyRegularButtons_{{ sFormIdSanitized }}); $('#{{ sFormId }}').closest('#main-content').append(oStickyRegularButtons_{{ sFormIdSanitized }});

View File

@@ -72,6 +72,9 @@ footer{
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
#sidebar .logo img{
max-width: 100%;
}
/* Overlays*/ /* Overlays*/
.global_overlay{ .global_overlay{
@@ -746,35 +749,31 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
.form_btn_regular.sticky{ .form_btn_regular.sticky{
display: block; display: block;
position: fixed; position: fixed;
bottom: 0px;
padding: 15px; padding: 15px;
background-color: #FFF; /* TODO : SASS this to panel bg */ background-color: #FFF; /* TODO : SASS this to panel bg */
border: 1px solid #DDD; /* TODO : SASS this to panel border */ border: 1px solid #DDD; /* TODO : SASS this to panel border */
border-radius: 4px; /* TODO : SASS this to panel border */ border-radius: 4px; /* TODO : SASS this to panel border */
transition: bottom 0.3s;
}
.form_btn_regular.sticky.closed{
bottom: -80px;
} }
/* - For regular layout */ /* - For regular layout */
#main-content .form_btn_regular.sticky{ #main-content .form_btn_regular.sticky{
bottom: 0px;
right: 15px; /* TODO : SASS this to col-xs-12 padding */ right: 15px; /* TODO : SASS this to col-xs-12 padding */
transition: bottom 0.3s;
}
#main-content .form_btn_regular.sticky.closed{
bottom: -80px;
} }
/* - For modal layout */ /* - For modal layout */
.modal.in .form_btn_regular.sticky{ .modal.in .form_btn_regular.sticky{
margin-left: 61%; bottom: 5em;
right: 15px; /* TODO : SASS this to col-xs-12 padding */
transition: right 0.3s;
} }
} .modal.in .form_btn_regular.sticky.closed{
@media (min-width: 992px) { right: -60px;
/* - For modal layout */
.modal.in .form_btn_regular.sticky{
margin-left: 70%;
} }
} .modal.in .form_btn_regular.sticky button{
@media (min-width: 1200px) { display: block;
/* - For modal layout */
.modal.in .form_btn_regular.sticky{
margin-left: 73%;
} }
} }