Merge pull request #9356 from MrPetovan/task/9328-add-range-percent-template
Introduce range percent template
This commit is contained in:
Michael Vogel
GitHub
commit
50a0927e7e
8 changed files with 30 additions and 198 deletions
20
view/templates/field/range_percent.tpl
Normal file
20
view/templates/field/range_percent.tpl
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div id="id_{{$field.0}}_wrapper" class="form-group field range">
|
||||
{{if !isset($label) || $label != false }}
|
||||
<label for="{{$field.0}}_range" id="label_{{$field.0}}">{{$field.1 nofilter}}{{if $field.4}}<span class="required"> {{$field.4}}</span>{{/if}}</label>
|
||||
{{/if}}
|
||||
<div class="row">
|
||||
<div class="col-xs-9">
|
||||
<input type="range" class="form-control" id="{{$field.0}}_range" min="0" max="100" step="1" value="{{$field.2}}" onchange="{{$field.0}}.value = this.value" oninput="{{$field.0}}.value = this.value">
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control input-sm" name="{{$field.0}}" id="{{$field.0}}" value="{{$field.2}}" onchange="{{$field.0}}_range.value = this.value" oninput="{{$field.0}}_range.value = this.value" aria-describedby="{{$field.0}}_tip">
|
||||
<span class="input-group-addon image-select">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{if $field.3}}
|
||||
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3 nofilter}}</span>
|
||||
{{/if}}
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
|
@ -70,6 +70,10 @@ textarea,
|
|||
box-shadow: 0 0 3px #dadada;
|
||||
-webkit-box-shadow: 0 0 3px #dadada;
|
||||
}
|
||||
input[type=range] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
background-color: $background_color;
|
||||
color: $font_color_darker;
|
||||
|
|
|
|||
|
|
@ -69,6 +69,10 @@ textarea,
|
|||
box-shadow: 0 0 3px #dadada;
|
||||
-webkit-box-shadow: 0 0 3px #dadada;
|
||||
}
|
||||
input[type=range] {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
.ieldset[disabled] .form-control {
|
||||
|
|
|
|||
|
|
@ -56,27 +56,7 @@
|
|||
|
||||
{{if $background_color}}{{include file="field_colorinput.tpl" field=$background_color}}{{/if}}
|
||||
|
||||
{{* The slider for the content opacity - We use no template for this since it is only used at this page *}}
|
||||
{{if $contentbg_transp}}
|
||||
<div class="form-group field input color">
|
||||
<label for="id_{{$contentbg_transp.0}}" id="label_{{$contentbg_transp.0}}">{{$contentbg_transp.1}}</label>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-9">
|
||||
<input type="range" class="form-control" id="{{$contentbg_transp.0}}_range" min="0" max="100" step="1" value="{{$contentbg_transp.2}}" onchange="{{$contentbg_transp.0}}.value = this.value" oninput="{{$contentbg_transp.0}}.value = this.value">
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control input-sm" name="{{$contentbg_transp.0}}" id="{{$contentbg_transp.0}}" value="{{$contentbg_transp.2}}" onchange="{{$contentbg_transp.0}}_range.value = this.value" oninput="{{$contentbg_transp.0}}_range.value = this.value" aria-describedby="{{$contentbg_transp.0}}_tip">
|
||||
<span class="input-group-addon image-select">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span id="{{$contentbg_transp.0}}_tip" class="help-block" role="tooltip">{{$contentbg_transp.3}}</span>
|
||||
<div id="end_{{$contentbg_transp.0}}" class="field_end"></div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{if $contentbg_transp}}{{include file="field/range_percent.tpl" field=$contentbg_transp}}{{/if}}
|
||||
|
||||
{{if $background_image}}{{include file="field_fileinput.tpl" field=$background_image}}{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -2500,50 +2500,7 @@ footer {
|
|||
.videobb:hover {
|
||||
background-position: -112px -16px;
|
||||
}
|
||||
/** range input css **/
|
||||
/* slider root element */
|
||||
.slider {
|
||||
height: 2px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 1px solid #333;
|
||||
width: 200px;
|
||||
margin: 10px 0 10px 0;
|
||||
float: left;
|
||||
}
|
||||
/* progress bar (enabled with progress: true) */
|
||||
.progress {
|
||||
height: 9px;
|
||||
background-color: #C5FF00;
|
||||
display: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
/* drag handle */
|
||||
.handle {
|
||||
background-color: #ccc;
|
||||
height: 16px;
|
||||
width: 8px;
|
||||
top: -8px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
border: 1px solid #000;
|
||||
cursor: move;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
/* the input field */
|
||||
.range {
|
||||
width: 20px!important;
|
||||
font-size: 8pt;
|
||||
margin-left: 10px;
|
||||
border: 0;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* buttons for the event view */
|
||||
.plink-event-link {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -2500,50 +2500,6 @@ footer {
|
|||
.videobb:hover {
|
||||
background-position: -112px -16px;
|
||||
}
|
||||
/** range input css **/
|
||||
/* slider root element */
|
||||
.slider {
|
||||
height: 2px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 1px solid #333;
|
||||
width: 200px;
|
||||
margin: 10px 0 10px 0;
|
||||
float: left;
|
||||
}
|
||||
/* progress bar (enabled with progress: true) */
|
||||
.progress {
|
||||
height: 9px;
|
||||
background-color: #C5FF00;
|
||||
display: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
/* drag handle */
|
||||
.handle {
|
||||
background-color: #ccc;
|
||||
height: 16px;
|
||||
width: 8px;
|
||||
top: -8px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
border: 1px solid #000;
|
||||
cursor: move;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
/* the input field */
|
||||
.range {
|
||||
width: 20px!important;
|
||||
font-size: 8pt;
|
||||
margin-left: 10px;
|
||||
border: 0;
|
||||
color: #999999;
|
||||
}
|
||||
/* buttons for the event view */
|
||||
.plink-event-link {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -2500,50 +2500,6 @@ footer {
|
|||
.videobb:hover {
|
||||
background-position: -112px -16px;
|
||||
}
|
||||
/** range input css **/
|
||||
/* slider root element */
|
||||
.slider {
|
||||
height: 2px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 1px solid #333;
|
||||
width: 200px;
|
||||
margin: 10px 0 10px 0;
|
||||
float: left;
|
||||
}
|
||||
/* progress bar (enabled with progress: true) */
|
||||
.progress {
|
||||
height: 9px;
|
||||
background-color: #C5FF00;
|
||||
display: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
/* drag handle */
|
||||
.handle {
|
||||
background-color: #ccc;
|
||||
height: 16px;
|
||||
width: 8px;
|
||||
top: -8px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
border: 1px solid #000;
|
||||
cursor: move;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
/* the input field */
|
||||
.range {
|
||||
width: 20px!important;
|
||||
font-size: 8pt;
|
||||
margin-left: 10px;
|
||||
border: 0;
|
||||
color: #999999;
|
||||
}
|
||||
/* buttons for the event view */
|
||||
.plink-event-link {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -1668,51 +1668,6 @@ footer { height: 100px; display: table-row; }
|
|||
.videobb { background-position: -112px 0; }
|
||||
.videobb:hover { background-position: -112px -16px; }
|
||||
|
||||
|
||||
/** range input css **/
|
||||
/* slider root element */
|
||||
.slider {
|
||||
height:2px;
|
||||
position:relative;
|
||||
cursor:pointer;
|
||||
border:1px solid #333;
|
||||
width:200px;
|
||||
margin:10px 0 10px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* progress bar (enabled with progress: true) */
|
||||
.progress {
|
||||
height:9px;
|
||||
background-color:#C5FF00;
|
||||
display:none;
|
||||
opacity:0.6;
|
||||
}
|
||||
|
||||
/* drag handle */
|
||||
.handle {
|
||||
background-color:#ccc;
|
||||
height:16px;
|
||||
width:8px;
|
||||
top:-8px;
|
||||
position:absolute;
|
||||
display:block;
|
||||
margin-top:1px;
|
||||
border:1px solid #000;
|
||||
cursor:move;
|
||||
.roundbottom();
|
||||
.shadow();
|
||||
}
|
||||
|
||||
/* the input field */
|
||||
.range {
|
||||
width: 20px!important;
|
||||
font-size: 8pt;
|
||||
margin-left: 10px;
|
||||
border: 0;
|
||||
color: @FieldHelpColor;
|
||||
}
|
||||
|
||||
/* buttons for the event view */
|
||||
.plink-event-link {
|
||||
float: left;
|
||||
|
|
|
|||
Loading…
Reference in a new issue