bitPickups/friendica_2019-12_sharedHosting_hotFix
1
1
Fork 0
Code Pull requests Activity

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

Browse source 
Introduce range percent template
This commit is contained in:
Michael Vogel 2020-10-04 06:27:25 +02:00 committed by GitHub
commit 50a0927e7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 30 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
view/templates/field/range_percent.tpl Normal file
View 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>

4
view/theme/frio/scheme/black.css
View file

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

4
view/theme/frio/scheme/dark.css
View file

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

22
view/theme/frio/templates/theme_settings.tpl
View file

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

45
view/theme/quattro/dark/style.css
View file

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

44
view/theme/quattro/green/style.css
View file

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

44
view/theme/quattro/lilac/style.css
View file

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

45
view/theme/quattro/quattro.less
View file

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