ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added custom checkboxes and radioboxes

Browse source
This commit is contained in:
Marcin Kurczewski 2014-08-09 22:09:50 +02:00
parent f93b6cf94b
commit c117e0d2a6
6 changed files with 55 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
public_html/media/css/core.css
View file

@ -240,6 +240,16 @@ a:hover i[class*='icon-'] {
.form-row {
margin: 0 0 0.5em 0;
clear: left;
}
.input-wrapper {
overflow: hidden;
display: block;
line-height: 30px;
text-overflow: ellipsis;
}
.form-row>label {
display: inline-block;
text-align: right;
@ -267,17 +277,6 @@ select {
font-family: inherit;
font-size: 11pt;
}
input[type=file] {
padding: 5px 0;
}
input[type=radio],
input[type=checkbox] {
width: auto;
max-width: auto;
margin: auto 10px auto 0;
padding: 0;
vertical-align: baseline;
}
button {
font-size: 12pt;
@ -293,16 +292,36 @@ button:hover {
cursor: pointer;
}
.form-row {
margin: 0 0 0.5em 0;
clear: left;
input[type=file] {
padding: 5px 0;
}
.input-wrapper {
overflow: hidden;
display: block;
line-height: 30px;
text-overflow: ellipsis;
input[type=radio],
input[type=checkbox] {
width: auto;
max-width: auto;
margin: auto 10px auto 0;
padding: 0;
vertical-align: baseline;
}
.radiobox-wrapper input[type=radio],
.checkbox-wrapper input[type=checkbox] {
display: none;
}
.radiobox-wrapper input[type=radio]+span,
.checkbox-wrapper input[type=checkbox]+span {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 0.5em;
background-image: url('../img/icons.png');
background-repeat: none;
vertical-align: text-bottom;
content: '';
}
.radiobox-wrapper input[type=radio]+span { background-position: -126px -21px; }
.radiobox-wrapper input[type=radio]:checked+span { background-position: -105px -21px; }
.checkbox-wrapper input[type=checkbox]+span { background-position: -84px -21px; }
.checkbox-wrapper input[type=checkbox]:checked+span { background-position: -63px -21px; }
ul.tagit,
select,

BIN
public_html/media/img/icons.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

6
src/Views/auth-login.phtml
View file

@ -32,7 +32,11 @@ $this->assets->addStylesheet('auth.css');
<button class="submit" type="submit">Log in</button>
&nbsp;
<input type="hidden" name="remember" value="0"/>
<label><input type="checkbox" name="remember" value="1"/> Remember me</label>
<label class="checkbox-wrapper">
<input type="checkbox" name="remember" value="1"/>
<span></span>
Remember me
</label>
</div>
</div>

3
src/Views/input/input-checkboxes.phtml
View file

@ -24,7 +24,7 @@ $inputClass = isset($this->context->inputClass) ? $this->context->inputClass : '
name="<?= $optionNames[$key] ?>"
value="<?= $optionValuesDisabled[$key] ?>"/>
<label>
<label class="checkbox-wrapper">
<input type="checkbox"
name="<?= $optionNames[$key] ?>"
<?php if (count($keys) == 1): ?>
@ -34,6 +34,7 @@ $inputClass = isset($this->context->inputClass) ? $this->context->inputClass : '
checked="checked"
<?php endif ?>
value="<?= $optionValuesEnabled[$key] ?>"/>
<span></span>
<?= $optionLabels[$key] ?>
</label>

3
src/Views/input/input-radioboxes.phtml
View file

@ -16,7 +16,7 @@ $inputClass = isset($this->context->inputClass) ? $this->context->inputClass : '
<div class="input-wrapper">
<?php foreach ($keys as $key): ?>
<label>
<label class="radiobox-wrapper">
<input type="radio"
name="<?= $name ?>"
<?php if ($inputClass): ?>
@ -29,6 +29,7 @@ $inputClass = isset($this->context->inputClass) ? $this->context->inputClass : '
checked="checked"
<?php endif ?>
value="<?= $optionValues[$key] ?>"/>
<span></span>
<?= $optionLabels[$key] ?>
</label>

10
src/Views/post/post-upload.phtml
View file

@ -40,7 +40,10 @@ $this->assets->addScript('../lib/tagit/jquery.tagit.js');
<thead>
<tr>
<th class="checkbox">
<input type="checkbox" name="select-all"/>
<label class="checkbox-wrapper">
<input type="checkbox" name="select-all"/>
<span></span>
</label>
</th>
<th class="thumbnail"></th>
<th class="tags">Tags</th>
@ -54,7 +57,10 @@ $this->assets->addScript('../lib/tagit/jquery.tagit.js');
<tfoot>
<tr class="template">
<td class="checkbox">
<input type="checkbox"/>
<label class="checkbox-wrapper">
<input type="checkbox"/>
<span></span>
</label>
</td>
<td class="thumbnail">
<img src="<?= \Chibi\Util\Url::makeAbsolute('/media/img/pixel.gif') ?>" alt="Thumbnail"/>