calendar improvement: month calendar view a la flickr

fix: html 4.01 compliant in rating.tpl

fix: issue with IE from version 1052 (redirect on access denied)

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

6 files changed, 191 insertions, 84 deletions

diff --git a/template/yoga/admin/rating.tpl b/template/yoga/admin/rating.tpl
index 7bc688deb..37cf6e1c4 100644
--- a/template/yoga/admin/rating.tpl
+++ b/template/yoga/admin/rating.tpl
@@ -1,76 +1,74 @@
-<h2>{lang:Rating} [{NB_ELEMENTS} {lang:elements}]</h2>

-

-<form action="" method="GET" id="update">

-<input type="hidden" name="page" value="rating" />

-<fieldset>

-

-<ul>

-

-<li><label>{lang:elements per page}: <input type="text" name="display" size="2" value="{DISPLAY}"></label></li>

-

-<li>

-<label>{lang:Sort by}:

-<select name="order_by">

-<!-- BEGIN order_by -->

-<option value="{order_by.VALUE}" {order_by.SELECTED}>{order_by.CONTENT}</option>

-<!-- END order_by -->

-</select>

-</label></li>

-

-<li>{lang:Filter}:

-<label>

- <input type="radio" class="radio" name="display_filter" {DISPLAY_FILTER_ALL_CHECKED} value="all"/>

- {lang:users} & {lang:guest}

-</label>

-<label>

- <input type="radio" class="radio" name="display_filter" {DISPLAY_FILTER_USER_CHECKED} value="user"/>

- {lang:users}

-</label>

-<label>

- <input type="radio" class="radio" name="display_filter" {DISPLAY_FILTER_GUEST_CHECKED} value="guest"/>

- {lang:guest}

-</label>

-</li>

-

-</ul>

-

-</fieldset>

-<p class="bottomButtons">

-<input type="submit" value="{lang:Submit}" />

-</p>

-</form>

-

-<div class="navigationBar">{NAVBAR}</div>

-

-<table width="100%">

-<tr class="throw">

-  <td>{lang:File}</td>

-  <td>{lang:Number of rates}</td>

-  <td>{lang:Average rate}</td>

-  <td>{lang:Controversy}</td>

-  <td>{lang:Sum of rates}</td>

-  <td>{lang:Rate}</td>

-  <td>{lang:Username}</td>

-  <td>{lang:Rate date}</td>

-  <td></td>

-</tr>

-<!-- BEGIN image -->

-<tr valign="bottom">

-  <td rowspan="{image.NB_RATES_PLUS1}"><a href="{image.U_URL}"><img src="{image.U_THUMB}" alt="{image.FILE}" title="{image.FILE}"></a></td>

-  <td rowspan="{image.NB_RATES_PLUS1}"><strong>{image.NB_RATES}/{image.NB_RATES_TOTAL}</strong></td>

-  <td rowspan="{image.NB_RATES_PLUS1}"><strong>{image.AVG_RATE}</strong></td>

-  <td rowspan="{image.NB_RATES_PLUS1}"><strong>{image.STD_RATE}</strong></td>

-  <td rowspan="{image.NB_RATES_PLUS1}" style="border-right: 1px solid;" ><strong>{image.SUM_RATE}</strong></td>

-</tr>

-<!-- BEGIN rate -->

-<tr>

-    <td>{image.rate.RATE}</td>

-    <td><b>{image.rate.USER}</b></td>

-    <td><span class="date">{image.rate.DATE}</span></td>

-    <td><a href="{image.rate.U_DELETE}"><img src="{themeconf:icon_dir}/delete.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{lang:delete}]"/></a></td>

-</tr>

-<!-- END rate -->

-<!-- END image -->

-</table>

-

-<div class="navigationBar">{NAVBAR}</div>

+<h2>{lang:Rating} [{NB_ELEMENTS} {lang:elements}]</h2>
+
+<form action="" method="GET" id="update">
+<fieldset>
+<legend></legend>
+<input type="hidden" name="page" value="rating" />
+<ul>
+
+<li><label>{lang:elements per page}: <input type="text" name="display" size="2" value="{DISPLAY}"></label></li>
+
+<li>
+<label>{lang:Sort by}:
+<select name="order_by">
+<!-- BEGIN order_by -->
+<option value="{order_by.VALUE}" {order_by.SELECTED}>{order_by.CONTENT}</option>
+<!-- END order_by -->
+</select>
+</label></li>
+
+<li>{lang:Filter}:
+<label>
+ <input type="radio" class="radio" name="display_filter" {DISPLAY_FILTER_ALL_CHECKED} value="all"/>
+ {lang:users} & {lang:guest}
+</label>
+<label>
+ <input type="radio" class="radio" name="display_filter" {DISPLAY_FILTER_USER_CHECKED} value="user"/>
+ {lang:users}
+</label>
+<label>
+ <input type="radio" class="radio" name="display_filter" {DISPLAY_FILTER_GUEST_CHECKED} value="guest"/>
+ {lang:guest}
+</label>
+</li>
+
+</ul>
+
+</fieldset>
+<p class="bottomButtons">
+<input type="submit" value="{lang:Submit}" />
+</p>
+</form>
+<div class="navigationBar">{NAVBAR}</div>
+<table width="100%">
+<tr class="throw">
+  <td>{lang:File}</td>
+  <td>{lang:Number of rates}</td>
+  <td>{lang:Average rate}</td>
+  <td>{lang:Controversy}</td>
+  <td>{lang:Sum of rates}</td>
+  <td>{lang:Rate}</td>
+  <td>{lang:Username}</td>
+  <td>{lang:Rate date}</td>
+  <td></td>
+</tr>
+<!-- BEGIN image -->
+<tr valign="bottom">
+  <td rowspan="{image.NB_RATES_PLUS1}"><a href="{image.U_URL}"><img src="{image.U_THUMB}" alt="{image.FILE}" title="{image.FILE}"></a></td>
+  <td rowspan="{image.NB_RATES_PLUS1}"><strong>{image.NB_RATES}/{image.NB_RATES_TOTAL}</strong></td>
+  <td rowspan="{image.NB_RATES_PLUS1}"><strong>{image.AVG_RATE}</strong></td>
+  <td rowspan="{image.NB_RATES_PLUS1}"><strong>{image.STD_RATE}</strong></td>
+  <td rowspan="{image.NB_RATES_PLUS1}" style="border-right: 1px solid;" ><strong>{image.SUM_RATE}</strong></td>
+</tr>
+<!-- BEGIN rate -->
+<tr>
+    <td>{image.rate.RATE}</td>
+    <td><b>{image.rate.USER}</b></td>
+    <td><span class="date">{image.rate.DATE}</span></td>
+    <td><a href="{image.rate.U_DELETE}"><img src="{themeconf:icon_dir}/delete.png" class="button" style="border:none;vertical-align:middle; margin-left:5px;" alt="[{lang:delete}]"/></a></td>
+</tr>
+<!-- END rate -->
+<!-- END image -->
+</table>
+
+<div class="navigationBar">{NAVBAR}</div>
diff --git a/template/yoga/category.tpl b/template/yoga/category.tpl
index 12b2e56f9..379004e73 100644
--- a/template/yoga/category.tpl
+++ b/template/yoga/category.tpl
@@ -168,6 +168,8 @@
 <!-- END calbar -->
 <!-- END calendar -->
 
+{MONTH_CALENDAR}
+
 <!-- BEGIN thumbnails -->
 <ul class="thumbnails">
   <!-- BEGIN line -->
diff --git a/template/yoga/content.css b/template/yoga/content.css
index a426b64e1..6f3c440c4 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -179,6 +179,7 @@ SPAN.filename:after {
 }
 
 
+/* begin chronology/calendar elements*/
 #content DIV.calendarViews {
   display: block;
   text-align: left;
@@ -199,14 +200,12 @@ SPAN.calItemSel {
   font-weight: bold;
   margin: 0 2px;
   border: 1px solid gray;
-  color: dark-gray;
 }
 
 SPAN.calItemEmpty {
   font-weight: bold;
   margin: 0 2px;
   border: 1px solid gray;
-  color: lightgray;
 }
 
 #content DIV.calendarCalBar {
@@ -224,3 +223,46 @@ SPAN.calCal {
   margin: 0 2px;
 }
 
+/* nice looking month calendar*/
+.calMonth { border: none; border-collapse: collapse; }
+
+TD.calDayCellFull, TD.calDayCellEmpty, TD.calDayCellBlank
+{
+  text-align:left;
+  vertical-align: top;
+  font: bold 18px Arial, Helvetica, sans-serif;
+}
+
+TD.calDayHead { font: bold 12px Arial, Helvetica, sans-serif; }
+
+DIV.calImg
+{
+  overflow: hidden;
+  vertical-align: bottom;
+  z-index: 1;
+  position: relative; /*<- this required by IE*/
+}
+
+.calImg img
+{
+  position: relative;
+  border: 0;
+}
+
+.calBackDate {
+  padding-left: 4px;
+  padding-top: 0px;
+  z-index: 2;
+  position: absolute;
+  text-align: left;
+  vertical-align: top;
+}
+
+.calForeDate {
+  padding-left: 5px;
+  padding-top: 1px;
+  z-index: 3;
+  position: absolute;
+  text-align: left;
+  vertical-align: top;
+}
diff --git a/template/yoga/month_calendar.tpl b/template/yoga/month_calendar.tpl
new file mode 100644
index 000000000..cd3586a23
--- /dev/null
+++ b/template/yoga/month_calendar.tpl
@@ -0,0 +1,47 @@
+<!-- BEGIN calendar -->
+<!-- BEGIN thumbnails -->
+<style type="text/css">
+<!--
+TD.calDayCellFull, TD.calDayCellEmpty, TD.calDayCellBlank
+{
+  width: {calendar.thumbnails.WIDTH}px;
+  height: {calendar.thumbnails.HEIGHT}px;
+}
+DIV.calImg
+{
+  width: {calendar.thumbnails.WIDTH}px;
+  height: {calendar.thumbnails.HEIGHT}px;
+}
+//--></style>
+<table class="calMonth" align="center" cellpadding="1">
+<!-- BEGIN head -->
+ <thead>
+ <!-- BEGIN col -->
+ <td class="calDayHead">{calendar.thumbnails.head.col.LABEL}</td>
+ <!-- END col -->
+ </thead>
+<!-- END head -->
+<!-- BEGIN row -->
+ <tr>
+ <!-- BEGIN col -->
+ <!-- BEGIN blank -->
+ <td class="calDayCellBlank">
+ <!-- END blank -->
+ <!-- BEGIN empty -->
+ <td class="calDayCellEmpty">{calendar.thumbnails.row.col.empty.LABEL}
+ <!-- END empty -->
+ <!-- BEGIN full -->
+ <td class="calDayCellFull"><div class="calBackDate">{calendar.thumbnails.row.col.full.LABEL}</div><div class="calForeDate">{calendar.thumbnails.row.col.full.LABEL}</div>
+	<div class="calImg"><a href="{calendar.thumbnails.row.col.full.U_IMG_LINK}">
+	  <img style="{calendar.thumbnails.row.col.full.STYLE}" {calendar.thumbnails.row.col.full.IMG_WIDTH} {calendar.thumbnails.row.col.full.IMG_HEIGHT}
+	       src="{calendar.thumbnails.row.col.full.IMAGE}" alt="{calendar.thumbnails.row.col.full.IMAGE_ALT}"
+	    title="{calendar.thumbnails.row.col.full.IMAGE_ALT}">
+	</a></div>
+ <!-- END full -->
+ </td>
+ <!-- END col -->
+ </tr>
+<!-- END row -->
+</table>
+<!-- END thumbnails -->
+<!-- END calendar -->
diff --git a/template/yoga/theme/clear/theme.css b/template/yoga/theme/clear/theme.css
index c4a7a5522..92216df92 100644
--- a/template/yoga/theme/clear/theme.css
+++ b/template/yoga/theme/clear/theme.css
@@ -77,3 +77,16 @@ A.navThumb, A.navThumb:hover {
     font-weight: bold;
 }
 
+/*calendar elements*/
+SPAN.calItemSel { color: dark-gray; }
+
+SPAN.calItemEmpty { color: lightgray; }
+
+
+/* nice looking month calendar*/
+TD.calDayCellEmpty, TD.calDayCellFull { border: 1px solid #7E7262;}
+
+TD.calDayCellEmpty { color: lightgray; }
+
+.calBackDate { color: #000; }
+.calForeDate { color: #fff; }
diff --git a/template/yoga/theme/dark/theme.css b/template/yoga/theme/dark/theme.css
index 6b28e3ce3..746e57bc3 100644
--- a/template/yoga/theme/dark/theme.css
+++ b/template/yoga/theme/dark/theme.css
@@ -114,10 +114,15 @@ A.navThumb, A.navThumb:hover {
   background:#3f3f3f;
 }
 
-SPAN.calItemSel {
-  color: #fff48e;
-}
+/*calendar elements*/
+SPAN.calItemSel { color: #fff48e; }
 
-SPAN.calItemEmpty {
-  color: darkgray;
-}
+SPAN.calItemEmpty { color: darkgray; }
+
+/* nice looking month calendar*/
+TD.calDayCellEmpty, TD.calDayCellFull { border: 1px solid gray;}
+
+TD.calDayCellEmpty { color: lightgray; }
+
+.calBackDate { color: #000; }
+.calForeDate { color: #fff; }