- replaced calendar views select with a drop down box (as sort order and photo sizes)

- some css compaction

git-svn-id: http://piwigo.org/svn/trunk@20982 68402e56-0260-453c-a942-63ccdbb3a9ee

4 files changed, 22 insertions, 10 deletions

diff --git a/themes/Sylvia/theme.css b/themes/Sylvia/theme.css
index 3111bc643..b2a7dd485 100644
--- a/themes/Sylvia/theme.css
+++ b/themes/Sylvia/theme.css
@@ -159,7 +159,6 @@
 }
 
 .content h2 { 
-	margin:0; 
 	padding:0px 10px 15px 15px; 
 	border:0;
 }
diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl
index c24f4e364..3ed52498c 100644
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@@ -118,11 +118,26 @@ jQuery("#derivativeSwitchBox").on("mouseleave", function() {
 
 {if isset($chronology_views)}
 <div class="calendarViews">{'View'|@translate}:
-	<select onchange="document.location = this.options[this.selectedIndex].value;">
-		{foreach from=$chronology_views item=view}
-		<option value="{$view.VALUE}"{if $view.SELECTED} selected="selected"{/if}>{$view.CONTENT}</option>
+	<a id="calendarViewSwitchLink" href="javascript:toggleCalendarViewsBox()">
+	{foreach from=$chronology_views item=view}{if $view.SELECTED}{$view.CONTENT}{/if}{/foreach}
+	</a> 
+	<div id="calendarViewSwitchBox" class="switchBox">
+		{foreach from=$chronology_views item=view name=loop}{if !$smarty.foreach.loop.first}<br>{/if}
+		<span{if !$view.SELECTED} style="visibility:hidden"{/if}>&#x2714; </span><a href="{$view.VALUE}">{$view.CONTENT}</a>
 		{/foreach}
-	</select>
+	</div>
+	{footer_script require='jquery'}{literal}
+function toggleCalendarViewsBox() {
+	var elt = jQuery("#calendarViewSwitchBox")
+		, ePos = jQuery("#calendarViewSwitchLink");
+	elt.css("left", Math.min( ePos.offset().left, jQuery(window).width() - elt.outerWidth(true) - 5))
+		.css("top", ePos.offset().top + ePos.outerHeight(true))
+		.toggle();
+};
+jQuery("#calendarViewSwitchBox").on("mouseleave", function() {
+	jQuery(this).hide();
+});
+	{/literal}{/footer_script}
 </div>
 {/if}
 
diff --git a/themes/default/theme.css b/themes/default/theme.css
index 267b35fd1..25444db30 100644
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -91,8 +91,6 @@
 	margin-left: 20em;  /* = #menubar width + 2em */
 }
 
-.content H2 { margin-bottom: 3px;} /*<- for IE otherwise calendar select is displaced to middle of page*/
-
 .content .navigationBar, .content .additional_info, .content .calendarBar {
 	margin: 8px 4px;
 	text-align: center;
@@ -116,7 +114,7 @@
 }
 
 /* category and tag results paragraphs on a quick search */
-.content .category_search_results, .content .tag_search_results {
+.category_search_results, .tag_search_results {
   font-size: 16px;
   margin: 10px 16px;
 }
@@ -140,7 +138,7 @@
 .calendarViews {
 	display: block;
 	float: right;
-	margin: 2px 0 0;
+	margin: 5px 5px 0 0;
 }
 
 .calItem, .calItemEmpty {
diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css
index aa9845902..a4f13380e 100644
--- a/themes/elegant/theme.css
+++ b/themes/elegant/theme.css
@@ -79,7 +79,7 @@ a:hover 		{ border-bottom: none;}
 #content,.content 			{ margin-bottom: 4px; padding-bottom: 4px;}
 #thePicturePage #content 	{ padding-bottom: 0;}
 .content .titrePage 			{ padding:0; margin-bottom:4px;}
-.content .titrePage H2 		{ line-height: 20px; margin: 0; padding: 8px 0 0 2px;}
+.content .titrePage H2 		{ line-height: 20px; padding: 8px 0 0 2px;}
 
 
 /* menubar */