css sprites (still ongoing)

git-svn-id: http://piwigo.org/svn/trunk@8076 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
rvelices
2010-12-11 13:42:19 +00:00
parent c710b81255
commit e859fe07e4
14 changed files with 145 additions and 82 deletions
+4 -2
View File
@@ -31,9 +31,11 @@
<td style="text-align:center;">
<a href="{$group.U_PERM}">
<img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/permissions.png" class="button" style="border:none" alt="{'Permissions'|@translate}" title="{'Permissions'|@translate}"></a>
<a href="{$group.U_DELETE}" onclick="return confirm('{'delete'|@translate|@escape:'javascript'}' + '\n\n' + '{'Are you sure?'|@translate|@escape:'javascript'}');">
<a href="{$group.U_DELETE}" onclick="return confirm('{'delete'|@translate|@escape:'javascript'}'
+ '\n\n' + '{'Are you sure?'|@translate|@escape:'javascript'}');">
<img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/delete.png" class="button" style="border:none" alt="{'Delete'|@translate}" title="{'Delete'|@translate}" {$TAG_INPUT_ENABLED}></a>
<a href="{$group.U_ISDEFAULT}" onclick="return confirm('{'Toggle \'default group\' property'|@translate|@escape:'javascript'}' +'\n\n' + '{'Are you sure?'|@translate|@escape:'javascript'}');">
<a href="{$group.U_ISDEFAULT}" onclick="return confirm('{'Toggle \'default group\' property'|@translate|@escape:'javascript'}'
+'\n\n' + '{'Are you sure?'|@translate|@escape:'javascript'}');">
<img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/toggle_is_default_group.png" class="button" style="border:none" alt="{'Toggle \'default group\' property'|@translate}" title="{'Toggle \'default group\' property'|@translate}" {$TAG_INPUT_ENABLED}></a>
</td>
</tr>
@@ -3,10 +3,10 @@
{combine_script id='jquery.ui.datepicker' load='footer' require='jquery.ui' path='themes/default/js/ui/packed/ui.datepicker.packed.js'}
{combine_script id='datepicker.js' load='footer' require='jquery.ui.datepicker' path='themes/default/js/datepicker.js'}
{assign var="datepicker_language" value="themes/default/js/ui/i18n/ui.datepicker-"|@cat:$lang_info.code|@cat:".js"}
{assign var="datepicker_language" value="themes/default/js/ui/i18n/ui.datepicker-`$lang_info.code`.js"}
{if "PHPWG_ROOT_PATH"|@constant|@cat:$datepicker_language|@file_exists}
{combine_script id="jquery.ui.datepicker-$lang_info.code" path=$datepicker_language}
{combine_script id="jquery.ui.datepicker-$lang_info.code" load='footer' path=$datepicker_language}
{/if}
{html_head}
+20 -13
View File
@@ -1,6 +1,8 @@
.pwg-icon {
display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
width: 26px; height: 26px; background-image: url(sprite.png);
display: block; /*IE6*/
display: inline-block; /*IE6 does not get it*/
text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
width: 26px; height: 26px; background-image: url(sprite.png);
}
.pwg-button-text { display:none; }
@@ -16,22 +18,24 @@ a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
.pwg-button {
display: inline-block;
vertical-align: middle;
}
.pwg-icon-home {background-position: -26px 0}
.pwg-icon-camera {background-position: -52px 0}
.pwg-icon-calendar {background-position: -78px 0}
.pwg-icon-save {background-position: -104px 0}
.pwg-icon-cloud {background-position: -130px 0}
.pwg-icon-letters {background-position: -156px 0}
.pwg-icon-arrow-n {background-position: 0 -26px}
.pwg-icon-arrow-e {background-position: -26px -26px}
.pwg-icon-arrow-s {background-position: -52px -26px}
.pwg-icon-arrow-w {background-position: -78px -26px}
.pwg-icon-arrowstop-n {background-position: 0 -52px}
.pwg-icon-arrowstop-e {background-position: -26px -52px}
.pwg-icon-arrowstop-s {background-position: -52px -52px}
.pwg-icon-arrowstop-w {background-position: -78px -52px}
.pwg-icon-arrowstop-n {background-position: -104px -26px}
.pwg-icon-arrowstop-e {background-position: -130px -26px}
.pwg-icon-arrowstop-s {background-position: -156px -26px}
.pwg-icon-arrowstop-w {background-position: -182px -26px}
.pwg-icon-caddie {background-position: 0 -78px}
.pwg-icon-caddie-add {background-position: -26px -78px}
@@ -41,18 +45,21 @@ a.pwg-state-default, a.pwg-state-default:visited, a.pwg-state-default:hover {
.pwg-icon-favorite-del {background-position: -130px -78px}
.pwg-icon-camera-info {background-position: 0 -104px}
.pwg-icon-camera-representative {background-position: -26px -104px}
.pwg-icon-edit {background-position: -52px -104px}
.pwg-icon-register {background-position: -78px -104px}
.pwg-icon-lost-password {background-position: -104px -104px}
.pwg-icon-slideshow {background-position: 0 -130px}
.pwg-icon-play {background-position: -26px -130px}
.pwg-icon-pause {background-position: -52px -130px}
.pwg-icon-stop {background-position: -78px -130px}
.pwg-icon-clock-plus {background-position: -104px -130px}
.pwg-icon-clock-minus {background-position: -130px -130px}
.pwg-icon-repeat-play {background-position: -156px -130px}
.pwg-icon-repeat-stop {background-position: -182px -130px}
/*
.pwg-icon-representative
.pwg-icon-edit
.pwg-icon-register
.pwg-icon-lost-password
.pwg-icon-cloud
.pwg-icon-letters
.pwg-icon-camera-calendar
flat
normal
Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

+3 -5
View File
@@ -1,11 +1,9 @@
<div id="content" class="content">
<div class="titrePage">
<ul class="categoryActions">
<li>
<a href="{$U_HOME}" title="{'return to homepage'|@translate}">
<img src="{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}">
</a>
</li>
<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
</a></li>
</ul>
<h2>{'About'|@translate}</h2>
</div>
+8 -6
View File
@@ -1,11 +1,13 @@
<div id="content" class="content">
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
</ul>
<h2>{'User comments'|@translate}</h2>
</div>
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
</a></li>
</ul>
<h2>{'User comments'|@translate}</h2>
</div>
<form class="filter" action="{$F_ACTION}" method="get">
+16 -10
View File
@@ -1,11 +1,13 @@
<div id="content" class="content">
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Go through the gallery as a visitor'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
</ul>
<h2>{'Identification'|@translate}</h2>
</div>
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
</a></li>
</ul>
<h2>{'Identification'|@translate}</h2>
</div>
{if isset($errors) }
<div class="errors">
@@ -53,10 +55,14 @@
</p>
<p>
{if isset($U_REGISTER) }
<a href="{$U_REGISTER}" title="{'Register'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/register.png" class="button" alt="{'Register'|@translate}"> {'Register'|@translate}</a>
{/if}
<a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/lost_password.png" class="button" alt="{'Forgot your password?'|@translate}"> {'Forgot your password?'|@translate}</a>
{if isset($U_REGISTER)}
<a href="{$U_REGISTER}" title="{'Register'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-register">&nbsp;</span><span>{'Register'|@translate}</span>
</a>
{/if}
<a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-lost-password">&nbsp;</span><span>{'Forgot your password?'|@translate}</span>
</a>
</p>
</form>
@@ -50,11 +50,15 @@
<div>
<input type="hidden" name="redirect" value="{$smarty.server.REQUEST_URI|@urlencode}">
<input class="submit" type="submit" name="login" value="{'Submit'|@translate}">
<ul class="actions">
<li><a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/lost_password.png" class="button" alt="{'Forgot your password?'|@translate}"></a></li>
{if isset($U_REGISTER)}
<li><a href="{$U_REGISTER}" title="{'Create a new account'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/register.png" class="button" alt="{'Register'|@translate}"></a></li>
{/if}
<ul class="categoryActions">
{if isset($U_REGISTER)}
<li><a href="{$U_REGISTER}" title="{'Create a new account'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-register">&nbsp;</span>
</a></li>
{/if}
<li><a href="{$U_LOST_PASSWORD}" title="{'Forgot your password?'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-lost-password">&nbsp;</span>
</a></li>
</ul>
</div>
+3 -1
View File
@@ -6,7 +6,9 @@
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
</a></li>
</ul>
<h2>{'Notification'|@translate}</h2>
</div>
@@ -56,6 +56,37 @@ y.callService(
<div class="navigationButtons" style="float:right">
{if $DISPLAY_NAV_BUTTONS or isset($slideshow)}
{if isset($slideshow)}
{if isset($slideshow.U_INC_PERIOD)}
<a href="{$slideshow.U_INC_PERIOD}" title="{'Accelerate diaporama speed'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-clock-minus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
</a>
{else}
<span class="pwg-state-disabled pwg-button">
<span class="pwg-icon pwg-icon-clock-minus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
</span>
{/if}
{if isset($slideshow.U_DEC_PERIOD)}
<a href="{$slideshow.U_DEC_PERIOD}" title="{'Accelerate diaporama speed'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-clock-plus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
</a>
{else}
<span class="pwg-state-disabled pwg-button">
<span class="pwg-icon pwg-icon-clock-plus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
</span>
{/if}
{/if}
{if isset($slideshow.U_START_REPEAT)}
<a href="{$slideshow.U_START_REPEAT}" title="{'Repeat the slideshow'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-repeat-play">&nbsp;</span><span class="pwg-button-text">{'Repeat the slideshow'|@translate}</span>
</a>
{/if}
{if isset($slideshow.U_STOP_REPEAT)}
<a href="{$slideshow.U_STOP_REPEAT}" title="{'Not repeat the slideshow'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-repeat-stop">&nbsp;</span><span class="pwg-button-text">{'Not repeat the slideshow'|@translate}</span>
</a>
{/if}
{if isset($first)}
<a href="{$first.U_IMG}" title="{'First'|@translate} : {$first.TITLE}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
+8 -6
View File
@@ -10,12 +10,14 @@
</div>
{/if}
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
</ul>
<h2>{'Profile'|@translate}</h2>
</div>
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
</a></li>
</ul>
<h2>{'Profile'|@translate}</h2>
</div>
{$PROFILE_CONTENT}
</div> <!-- content -->
+8 -6
View File
@@ -2,12 +2,14 @@
<div id="content" class="content">
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
</ul>
<h2>{'Registration'|@translate}</h2>
</div>
<div class="titrePage">
<ul class="categoryActions">
<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
</a></li>
</ul>
<h2>{'Registration'|@translate}</h2>
</div>
{if isset($errors)}
<div class="errors">
+15 -12
View File
@@ -1,11 +1,10 @@
{* Example of resizeable *}
{*
{include file='include/resize.inc.tpl'}
*}
{* Example of datepicker *}
{*
{include file='include/datepicker.inc.tpl'}
{footer_script}{literal}
@@ -13,18 +12,22 @@
pwg_initialization_datepicker("#end_day", "#end_month", "#end_year", "#end_linked_date", null, "#start_linked_date", null);
jQuery().ready(function(){ $(".date_today").hide(); });
{/literal}{/footer_script}
*}
<div id="content" class="content">
<div class="titrePage">
<ul class="categoryActions">
<div class="titrePage">
<ul class="categoryActions">
{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
<li><a href="{$U_HELP}" onclick="popuphelp(this.href); return false;" title="{'Help'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/help.png" class="button" alt="(?)"></a></li>
<li><a href="{$U_HOME}" title="{'Home'|@translate}" rel="Home"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
</ul>
<h2>{'Search'|@translate}</h2>
</div>
<li><a href="{$U_HELP}" onclick="popuphelp(this.href); return false;" title="{'Help'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-help">&nbsp;</span><span class="pwg-button-text">{'Help'|@translate}</span>
</a></li>
<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
</a></li>
</ul>
<h2>{'Search'|@translate}</h2>
</div>
{if isset($errors) }
<div class="errors">
+18 -14
View File
@@ -1,19 +1,23 @@
<div id="content" class="content">
<div class="titrePage">
<ul class="categoryActions">
{if $display_mode == 'letters'}
<li><a href="{$U_CLOUD}" title="{'show tag cloud'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/tag_cloud.png" class="button" alt="{'cloud'|@translate}"></a></li>
{/if}
{if $display_mode == 'cloud'}
<li><a href="{$U_LETTERS}" title="{'group by letters'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/tag_letters.png" class="button" alt="{'letters'|@translate}"></a></li>
{/if}
<li><a href="{$U_HOME}" title="{'Home'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/home.png" class="button" alt="{'Home'|@translate}"></a></li>
</ul>
<h2>{'Tags'|@translate}</h2>
</div>
<div class="titrePage">
<ul class="categoryActions">
{if $display_mode == 'letters'}
<li><a href="{$U_CLOUD}" title="{'show tag cloud'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-cloud">&nbsp;</span><span class="pwg-button-text">{'cloud'|@translate}</span>
</a></li>
{/if}
{if $display_mode == 'cloud'}
<li><a href="{$U_LETTERS}" title="{'group by letters'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-letters">&nbsp;</span><span class="pwg-button-text">{'letters'|@translate}</span>
</a></li>
{/if}
<li><a href="{$U_HOME}" title="{'Home'|@translate}" class="pwg-state-default pwg-button">
<span class="pwg-icon pwg-icon-home">&nbsp;</span><span class="pwg-button-text">{'Home'|@translate}</span>
</a></li>
</ul>
<h2>{'Tags'|@translate}</h2>
</div>
{if isset($tags)}
{if $display_mode == 'cloud'}