mbirth/LuckyCoinkydink
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

Another attempt to style the type-based filters.

Browse Source
This commit is contained in:
Matthias Mees
2013-06-05 21:14:02 +02:00
parent 4d8eab61cb
commit a41b66ae8f
2 changed files with 21 additions and 26 deletions
templates/2k11/admin
media_pane.tplstyle.css

14
templates/2k11/admin/media_pane.tpl

@ -6,12 +6,16 @@
<form id="media_library_control" method="get" action="?">
{$media.token}
{$media.form_hidden}
<ul class="filters_toolbar plainList">
<ul class="filters_toolbar clearfix plainList">
<li><a class="button_link" href="#media_pane_filter" title="Show filters"><span class="icon-filter"></span><span class="visuallyhidden"> Show filters</span></a></li> {* i18n *}
<li><a class="button_link" href="#media_pane_sort" title="{$CONST.SORT_ORDER}"><span class="icon-sort"></span><span class="visuallyhidden"> {$CONST.SORT_ORDER}</span></a></li>
{if $media.show_upload}
<li><input type="button" value="{$CONST.ADD_MEDIA|@escape}" onclick="location.href='{$media.url}&amp;serendipity[adminAction]=addSelect&amp;serendipity[only_path]={$media.only_path|escape:url}'; return false"></li>
{/if}
<li id="media_selector_bar"><fieldset>
<input type="radio" id="serendipity[filter][fileCategory][All]" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == ""}checked{/if} value=""></input><label for="serendipity[filter][fileCategory][All]" class="media_selector button_link">All</label><input id="serendipity[filter][fileCategory][Image]" type="radio" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == "image"}checked{/if} value="image"></input><label for="serendipity[filter][fileCategory][Image]" class="media_selector button_link">{$CONST.IMAGE}</label><input id="serendipity[filter][fileCategory][Video]" type="radio" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == "video"}checked{/if} value="video"></input><label for="serendipity[filter][fileCategory][Video]" class="media_selector button_link">{$CONST.VIDEO}</label>
</fieldset>
</li>
</ul>
<fieldset id="media_pane_filter" class="additional_info">
@ -135,14 +139,6 @@
<input name="go" type="submit" value="{$CONST.GO}">
</div>
</fieldset>
<fieldset id="media_selector_bar">
<input type="radio" id="serendipity[filter][fileCategory][All]" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == ""}checked{/if} value=""></input>
<label for="serendipity[filter][fileCategory][All]" class="media_selector">All</label>
<input id="serendipity[filter][fileCategory][Image]" type="radio" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == "image"}checked{/if} value="image"></input>
<label for="serendipity[filter][fileCategory][Image]" class="media_selector">{$CONST.IMAGE}</label>
<input id="serendipity[filter][fileCategory][Video]" type="radio" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == "video"}checked{/if} value="video"></input>
<label for="serendipity[filter][fileCategory][Video]" class="media_selector">{$CONST.VIDEO}</label>
</fieldset>
</form>
</div>
{if $media.nr_files < 1}

33
templates/2k11/admin/style.css

@ -645,6 +645,7 @@ input[type="submit"].state_cancel:visited {
border-color: #b94a48 #893634 #582322;
}
input:checked + .media_selector,
.button_link:hover,
#template_options div > a:hover,
button:hover,
@ -1656,28 +1657,26 @@ input[name="serendipity[filter][fileCategory]"] {
.media_selector {
cursor: pointer;
display: inline-block;
padding: 0.6em;
border: 1px solid #aaa;
}
input:checked + .media_selector {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #ddd), color-stop(100%, #eee));
background-image: -webkit-linear-gradient(#fff, #ddd 1px, #eee);
background-image: -moz-linear-gradient(#fff, #ddd 1px, #eee);
background-image: -o-linear-gradient(#fff, #ddd 1px, #eee);
background-image: linear-gradient(#fff, #ddd 1px, #eee);
-webkit-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
-moz-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
border-color: #999 #bbb #ddd;
.media_selector {
border-radius: 0;
border-right: 0 none;
}
/* These need an IE8 fallback */
.media_selector:first-of-type {
border-radius: 4px 0 0 4px;
}
.media_selector:last-of-type {
border-radius: 0 4px 4px 0;
border-right: 1px solid #bbb;
}
#media_selector_bar {
background: #eee;
padding: 0.3em;
margin: 0.5em 2% 0.2em 0;
border: 1px solid #aaa;
float: right;
margin: 0 2% 1em 0;
}