1
0

Add Media Category Filter Buttons

This commit is contained in:
onli
2013-06-01 15:21:13 +02:00
parent cff869e33c
commit e1d403057b
6 changed files with 46 additions and 8 deletions

View File

@ -41,7 +41,7 @@
{if $file.authorid != 0}<span class="author block_level">{$file.authorname}</span>{/if}
</header>
<div class="clearfix equal_heights serendipity_ImageWrapper"">
<div class="clearfix equal_heights image_wrapper"">
<div class="media_file_preview">
{if $file.is_image AND $file.full_thumb}
{if $file.url}
@ -70,7 +70,7 @@
{/if}
</div>
<footer class="serendipity_ImageCaption">
<footer class="image_caption">
<ul class="media_file_meta plainList">
{if $file.hotlink}
<li>{$file.nice_hotlink}</li>

View File

@ -135,6 +135,17 @@
<div class="form_buttons">
<input name="go" type="submit" value="{$CONST.GO}">
</div>
<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>
</form>
{if $media.nr_files < 1}
<span class="msg_notice"><span class="icon-info-circle"></span> {$CONST.NO_IMAGES_FOUND}</span>

View File

@ -1414,7 +1414,7 @@ form > .button_link:first-of-type { margin-top: 0; }
.media_pane .pagination { margin: 0; }
.serendipity_ImageWrapper:hover > .serendipity_ImageCaption {
.image_wrapper:hover > .image_caption {
display: block;
-webkit-animation: fade-in 0.4s 1;
-moz-animation: fade-in 0.4s 1;
@ -1422,14 +1422,12 @@ form > .button_link:first-of-type { margin-top: 0; }
opacity: 1;
}
.serendipity_ImageCaption {
.image_caption {
display: none;
position: absolute;
color: white;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
}
@-webkit-keyframes fade-in {
@ -1446,6 +1444,25 @@ form > .button_link:first-of-type { margin-top: 0; }
100% { opacity: 1; }
}
input[name="serendipity[filter][fileCategory]"] {
display: none;
}
label.media_selector {
cursor: pointer;
}
input:checked + label.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;
}
/* SMALL SCREEN (e.g. smartphones)
----------------------------------------------------------------- */