[enh] Implements nice checkboxes on backup info/create views.

This commit is contained in:
opi 2015-10-08 15:55:20 +02:00
parent 9cb5948b1a
commit c51f8dc0b3
4 changed files with 60 additions and 14 deletions

View file

@ -456,3 +456,45 @@ a.list-group-item-heading,
label .list-group-item-text { label .list-group-item-text {
font-weight:normal; font-weight:normal;
} }
/** Beautiful checkbox/radio **/
input[type='checkbox'].nice-checkbox,
input[type='radio'].nice-radio {
position: absolute;
left: -9999px;
& + label {cursor: pointer;}
& + label:before {
.fa;
content: @fa-var-square-o;
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
font-size: 1.5em;
text-align: left;
vertical-align: middle;
position: relative;
}
&:hover + label:before {
content: @fa-var-plus-square-o;
}
&:checked + label:before {
content: @fa-var-check-square-o;
}
&:checked:hover + label:before {
content: @fa-var-minus-square-o;
}
&[type='radio'] {
& + label:before {
content: @fa-var-circle-o;
}
&:checked + label:before {
content: @fa-var-check-circle-o;
}
}
}

File diff suppressed because one or more lines are too long

View file

@ -10,17 +10,19 @@
<form action="#/backup/{{storage.id}}" method="POST" class="form-horizontal"> <form action="#/backup/{{storage.id}}" method="POST" class="form-horizontal">
<div class="list-group"> <div class="list-group">
{{#each hooks}} {{#each hooks}}
<label for="{{@key}}" class="list-group-item"> <div class="list-group-item">
<input type="checkbox" id="{{@key}}" name="hooks" value="{{value}}" checked class="pull-right"> <input type="checkbox" id="{{@key}}" name="hooks" value="{{value}}" checked class="nice-checkbox">
<label for="{{@key}}" class="pull-right"><span class="sr-only">{{t 'check'}}</span></label>
<h2 class="list-group-item-heading">{{name}}</h2> <h2 class="list-group-item-heading">{{name}}</h2>
<p class="list-group-item-text">{{description}}</p> <p class="list-group-item-text">{{description}}</p>
</label> </div>
{{/each}} {{/each}}
{{#each apps}} {{#each apps}}
<label for="{{id}}" class="list-group-item"> <div class="list-group-item">
<input type="checkbox" id="{{id}}" name="apps" value="{{id}}" checked class="pull-right"> <input type="checkbox" id="{{id}}" name="apps" value="{{id}}" checked class="nice-checkbox">
<label for="{{id}}" class="pull-right"><span class="sr-only">{{t 'check'}}</span></label>
<h2 class="list-group-item-heading">{{name}} <small>{{id}}</small></h2> <h2 class="list-group-item-heading">{{name}} <small>{{id}}</small></h2>
</label> </div>
{{/each}} {{/each}}
</div> </div>
<div class="separator"></div> <div class="separator"></div>

View file

@ -30,17 +30,19 @@
{{#if items}} {{#if items}}
<div class="list-group"> <div class="list-group">
{{#each hooks}} {{#each hooks}}
<label for="{{@key}}" class="list-group-item"> <div class="list-group-item">
<input type="checkbox" id="{{@key}}" name="hooks" value="{{value}}" checked class="pull-right"> <input type="checkbox" id="{{@key}}" name="hooks" value="{{value}}" checked class="nice-checkbox">
<label for="{{@key}}" class="pull-right"><span class="sr-only">{{t 'check'}}</span></label>
<h2 class="list-group-item-heading">{{name}}</h2> <h2 class="list-group-item-heading">{{name}}</h2>
<p class="list-group-item-text">{{description}}</p> <p class="list-group-item-text">{{description}}</p>
</label> </div>
{{/each}} {{/each}}
{{#each apps}} {{#each apps}}
<label for="{{id}}" class="list-group-item"> <div class="list-group-item">
<input type="checkbox" id="{{id}}" name="apps" value="{{id}}" checked class="pull-right"> <input type="checkbox" id="{{id}}" name="apps" value="{{id}}" checked class="nice-checkbox">
<label for="{{id}}" class="pull-right"><span class="sr-only">{{t 'check'}}</span></label>
<h2 class="list-group-item-heading">{{name}} <small>{{id}}</small></h2> <h2 class="list-group-item-heading">{{name}} <small>{{id}}</small></h2>
</label> </div>
{{/each}} {{/each}}
<div class="list-group-item clearfix"> <div class="list-group-item clearfix">
<span class="pull-right "> <span class="pull-right ">