Merge pull request #9356 from MrPetovan/task/9328-add-range-percent-template

Introduce range percent template

view/templates/field/range_percent.tpl

@@ -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>

view/theme/frio/scheme/black.css

@@ -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;

view/theme/frio/scheme/dark.css

@@ -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 {

view/theme/frio/templates/theme_settings.tpl

@@ -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}}{{include file="field/range_percent.tpl" field=$contentbg_transp}}{{/if}}
-{{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 $background_image}}{{include file="field_fileinput.tpl" field=$background_image}}{{/if}}
 

view/theme/quattro/dark/style.css

@@ -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;

view/theme/quattro/green/style.css

@@ -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;

view/theme/quattro/lilac/style.css

@@ -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;

view/theme/quattro/quattro.less

@@ -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;