From 566359a20f755b9588d0fba5239e971ee40bedce Mon Sep 17 00:00:00 2001
From: onli <onli89@googlemail.com>
Date: Tue, 4 Jun 2013 17:31:39 +0200
Subject: [PATCH] test: filecategory-buttons as header bar

---
 templates/2k11/admin/media_pane.tpl | 15 ++++++++-------
 templates/2k11/admin/style.css      | 10 ++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/templates/2k11/admin/media_pane.tpl b/templates/2k11/admin/media_pane.tpl
index 608df76b..04c31209 100644
--- a/templates/2k11/admin/media_pane.tpl
+++ b/templates/2k11/admin/media_pane.tpl
@@ -12,13 +12,6 @@
         {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><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>
-            </li>
         </ul>
 
         <fieldset id="media_pane_filter" class="additional_info">
@@ -142,6 +135,14 @@
                 <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}
diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css
index 838ebc00..7edbd798 100644
--- a/templates/2k11/admin/style.css
+++ b/templates/2k11/admin/style.css
@@ -1466,6 +1466,9 @@ input[name="serendipity[filter][fileCategory]"] {
 
 .media_selector {
     cursor: pointer;
+    display: inline-block;
+    padding: 0.6em;
+    border: 1px solid #aaa;
 }
 
 input:checked + .media_selector {
@@ -1480,6 +1483,13 @@ input:checked + .media_selector {
     border-color: #999 #bbb #ddd;
 }
 
+#media_selector_bar {
+    background: #eee;
+    padding: 0.3em;
+    margin: 0.5em 2% 0.2em 0;
+    border: 1px solid #aaa;
+}
+
 
 /* SMALL SCREEN (e.g. smartphones)
    ----------------------------------------------------------------- */