feature:2577

Add mobile theme git-svn-id: http://piwigo.org/svn/trunk@13182 68402e56-0260-453c-a942-63ccdbb3a9ee
Piwigo · Feb 16, 2012 · a7f7052 · a7f7052
1 parent 4f2ae7c
commit a7f7052
Show file tree

Hide file tree

Showing 30 changed files with 2,912 additions and 0 deletions.
diff --git a/themes/smartpocket/images/ajax-loader.png b/themes/smartpocket/images/ajax-loader.png
diff --git a/themes/smartpocket/images/error.gif b/themes/smartpocket/images/error.gif
diff --git a/themes/smartpocket/images/icons-18-black.png b/themes/smartpocket/images/icons-18-black.png
diff --git a/themes/smartpocket/images/icons-18-white.png b/themes/smartpocket/images/icons-18-white.png
diff --git a/themes/smartpocket/images/icons-36-black.png b/themes/smartpocket/images/icons-36-black.png
diff --git a/themes/smartpocket/images/icons-36-white.png b/themes/smartpocket/images/icons-36-white.png
diff --git a/themes/smartpocket/images/icons.png b/themes/smartpocket/images/icons.png
diff --git a/themes/smartpocket/images/icons@2x.png b/themes/smartpocket/images/icons@2x.png
diff --git a/themes/smartpocket/images/loader.gif b/themes/smartpocket/images/loader.gif
diff --git a/themes/smartpocket/jquery.mobile.css b/themes/smartpocket/jquery.mobile.css
diff --git a/themes/smartpocket/js/code.photoswipe.jquery.min.js b/themes/smartpocket/js/code.photoswipe.jquery.min.js
diff --git a/themes/smartpocket/js/code.photoswipe.min.js b/themes/smartpocket/js/code.photoswipe.min.js
diff --git a/themes/smartpocket/js/config.js b/themes/smartpocket/js/config.js
diff --git a/themes/smartpocket/js/jquery-1.6.4.min.js b/themes/smartpocket/js/jquery-1.6.4.min.js
diff --git a/themes/smartpocket/js/jquery.mobile.min.js b/themes/smartpocket/js/jquery.mobile.min.js
diff --git a/themes/smartpocket/js/klass.min.js b/themes/smartpocket/js/klass.min.js
diff --git a/themes/smartpocket/photoswipe.css b/themes/smartpocket/photoswipe.css
@@ -0,0 +1,176 @@
+/*
+ * photoswipe.css
+ * Copyright (c) %%year%% by Code Computerlove (http://www.codecomputerlove.com)
+ * Licensed under the MIT license
+ *
+ * Default styles for PhotoSwipe
+ * Avoid any position or dimension based styles
+ * where possible, unless specified already here.
+ * The gallery automatically works out gallery item
+ * positions etc.
+ */
+
+
+body.ps-active, body.ps-building, div.ps-active, div.ps-building
+{
+	background: #000;
+	overflow: hidden;
+}
+body.ps-active *, div.ps-active *
+{ 
+	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
+	display: none;
+}
+body.ps-active *:focus, div.ps-active *:focus 
+{ 
+	outline: 0; 
+}
+
+
+/* Document overlay */
+div.ps-document-overlay 
+{
+	background: #000;
+}
+
+
+/* UILayer */
+div.ps-uilayer { 
+
+	background: #000;
+	cursor: pointer;
+
+}
+
+
+/* Zoom/pan/rotate layer */
+div.ps-zoom-pan-rotate{
+	background: #000;
+}
+div.ps-zoom-pan-rotate *  { display: block; }
+
+
+/* Carousel */
+div.ps-carousel-item-loading 
+{ 
+	background: url(images/loader.gif) no-repeat center center; 
+}
+
+div.ps-carousel-item-error 
+{ 
+	background: url(images/error.gif) no-repeat center center; 
+}
+
+
+/* Caption */
+div.ps-caption
+{ 
+	background: #000000;
+	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
+	border-bottom: 1px solid #42403f;
+	color: #ffffff;
+	font-size: 13px;
+	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
+	text-align: center;
+}
+div.ps-caption *  { display: inline; }
+
+div.ps-caption-bottom
+{ 
+	border-top: 1px solid #42403f;
+	border-bottom: none;
+	min-height: 44px;
+}
+
+div.ps-caption-content
+{
+	padding: 13px;
+	display: block;
+}
+
+
+/* Toolbar */
+div.ps-toolbar
+{ 
+	background: #000000;
+	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
+	border-top: 1px solid #42403f;
+	color: #ffffff;
+	font-size: 13px;
+	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
+	text-align: center;
+	height: 44px;
+	display: table;
+	table-layout: fixed;
+}
+div.ps-toolbar * { 
+	display: block;
+}
+
+div.ps-toolbar-top 
+{
+	border-bottom: 1px solid #42403f;
+	border-top: none;
+}
+
+div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
+{
+	cursor: pointer;
+	display: table-cell;
+}
+
+div.ps-toolbar div div.ps-toolbar-content
+{
+	width: 44px;
+	height: 44px;
+	margin: 0 auto 0;
+	background-image: url(images/icons.png);
+	background-repeat: no-repeat;
+}
+
+div.ps-toolbar-close div.ps-toolbar-content
+{
+	background-position: 0 0;
+}
+
+div.ps-toolbar-previous div.ps-toolbar-content
+{
+	background-position: -44px 0;
+}
+
+div.ps-toolbar-previous-disabled div.ps-toolbar-content
+{
+	background-position: -44px -44px;
+}
+
+div.ps-toolbar-next div.ps-toolbar-content
+{
+	background-position: -132px 0;
+}
+
+div.ps-toolbar-next-disabled div.ps-toolbar-content
+{
+	background-position: -132px -44px;
+}
+
+div.ps-toolbar-play div.ps-toolbar-content
+{
+	background-position: -88px 0;
+}
+
+/* Hi-res display */
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+       only screen and (min--moz-device-pixel-ratio: 1.5),
+       only screen and (min-resolution: 240dpi)
+{
+	div.ps-toolbar div div.ps-toolbar-content
+	{
+		-moz-background-size: 176px 88px;
+		-o-background-size: 176px 88px;
+		-webkit-background-size: 176px 88px;
+		background-size: 176px 88px;
+		background-image: url(images/icons@2x.png);
+	}
+}
diff --git a/themes/smartpocket/template/footer.tpl b/themes/smartpocket/template/footer.tpl
@@ -0,0 +1,6 @@
+
+{get_combined_scripts load='footer'}
+</div><!-- /page -->
+
+</body>
+</html>
diff --git a/themes/smartpocket/template/header.tpl b/themes/smartpocket/template/header.tpl
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="{$lang_info.code}" dir="{$lang_info.direction}">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset={$CONTENT_ENCODING}">
+<meta name="generator" content="Piwigo (aka PWG), see piwigo.org">
+{if isset($meta_ref) } 
+{if isset($INFO_AUTHOR)}
+<meta name="author" content="{$INFO_AUTHOR|@strip_tags:false|@replace:'"':' '}">
+{/if}
+{if isset($related_tags)}
+<meta name="keywords" content="{foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}{$tag.name}{/foreach}">
+{/if}
+{if isset($COMMENT_IMG)}
+<meta name="description" content="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{if isset($INFO_FILE)} - {$INFO_FILE}{/if}">
+{else}
+<meta name="description" content="{$PAGE_TITLE}{if isset($INFO_FILE)} - {$INFO_FILE}{/if}">
+{/if}
+{/if}
+<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+
+{if (isset($REVERSE) and $REVERSE and $PAGE_TITLE == l10n('Home'))}
+<title>{$GALLERY_TITLE} | {$PAGE_TITLE}</title>{else}
+<title>{$PAGE_TITLE} | {$GALLERY_TITLE}</title>{/if}
+<link rel="shortcut icon" type="image/x-icon" href="{$ROOT_URL}{$themeconf.icon_dir}/favicon.ico">
+<link rel="start" title="{'Home'|@translate}" href="{$U_HOME}" >
+
+{get_combined_css}
+{foreach from=$themes item=theme}
+{if $theme.load_css}
+{combine_css path="themes/`$theme.id`/theme.css" order=-10}
+{/if}
+{if !empty($theme.local_head)}{include file=$theme.local_head load_css=$theme.load_css}{/if}
+{/foreach}
+
+{if isset($U_CANONICAL)}<link rel="canonical" href="{$U_CANONICAL}">{/if}
+
+{if not empty($page_refresh)    }<meta http-equiv="refresh" content="{$page_refresh.TIME};url={$page_refresh.U_REFRESH}">{/if}
+
+{get_combined_scripts load='header'}
+
+{combine_script id='jquery' path='themes/smartpocket/js/jquery-1.6.4.min.js'}
+{combine_script id='config' path='themes/smartpocket/js/config.js' require='jquery'}
+{combine_script id='jquery.mobile' path='themes/smartpocket/js/jquery.mobile.min.js' require='jquery,config'}
+
+</head>
+
+<body>
+<div data-role="page">
+
+<div data-role="header" data-theme="c">
+  <div class="title">
+    <a href="{$U_HOME}" class="home_button" data-icon="home" data-iconpos="notext" data-role="button"></a>
+    {$GALLERY_TITLE}
+    <span class="menubar">{$MENUBAR}</span>
+  </div>
+</div>
+
diff --git a/themes/smartpocket/template/identification.tpl b/themes/smartpocket/template/identification.tpl
@@ -0,0 +1,41 @@
+{include file='infos_errors.tpl'}
+<div data-role="content">
+<h3>{'Identification'|@translate}</h3>
+<form action="{$F_LOGIN_ACTION}" method="post" name="login_form" class="properties">
+
+  <div data-role="fieldcontain">
+  <label for="username">{'Username'|@translate}</label>
+  <input type="text" name="username" id="username">
+  </div>
+
+
+  <div data-role="fieldcontain">
+  <label for="password">{'Password'|@translate}</label>
+  <input type="password" name="password" id="password" value="">
+  </div>
+
+  {if $authorize_remembering }
+  <div data-role="fieldcontain">
+  <label for="remember_me">{'Auto login'|@translate}</label>
+  <input type="checkbox" name="remember_me" id="remember_me" value="1">
+  </div>
+  {/if}
+
+  <div data-role="fieldcontain">
+    <input type="hidden" name="redirect" value="{$U_REDIRECT|@urlencode}">
+    <input type="submit" name="login" value="{'Submit'|@translate}">
+  </div>
+
+</form>
+
+	<div data-role="fieldcontain">
+{if isset($U_REGISTER)}
+		<a href="{$U_REGISTER}" data-role="button">{'Register'|@translate}</a>
+{/if}
+{*
+{if isset($U_LOST_PASSWORD)}
+		<a href="{$U_LOST_PASSWORD}" data-role="button">{'Forgot your password?'|@translate}</a>
+{/if}
+*}
+	</div>
+</div>
diff --git a/themes/smartpocket/template/index.tpl b/themes/smartpocket/template/index.tpl
@@ -0,0 +1,5 @@
+<div data-role="content">
+{if !empty($CATEGORIES)}{$CATEGORIES}{/if}
+{if !empty($THUMBNAILS)}{$THUMBNAILS}{/if}
+</div>
+
diff --git a/themes/smartpocket/template/infos_errors.tpl b/themes/smartpocket/template/infos_errors.tpl
@@ -0,0 +1,19 @@
+{if isset($errors) }
+<div class="errors">
+  <ul>
+    {foreach from=$errors item=error}
+    <li>{$error}</li>
+    {/foreach}
+  </ul>
+</div>
+{/if}
+
+{if not empty($infos)}
+<div class="infos">
+  <ul>
+    {foreach from=$infos item=info}
+    <li>{$info}</li>
+    {/foreach}
+  </ul>
+</div>
+{/if}
diff --git a/themes/smartpocket/template/mainpage_categories.tpl b/themes/smartpocket/template/mainpage_categories.tpl
@@ -0,0 +1,20 @@
+{define_derivative name='derivative_params' width=80 height=80 crop=true}
+
+<ul data-role="listview" data-inset="true">
+{foreach from=$category_thumbnails item=cat}
+	<li>
+		<a href="{$cat.URL}">
+		<img src="{$pwg->derivative_url($derivative_params, $cat.representative.src_image)}">
+    <h3>{$cat.NAME}</h3>
+    {if isset($cat.INFO_DATES) }
+		<p class="dates">{$cat.INFO_DATES}</p>
+		{/if}
+		<p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p>
+		{if not empty($cat.DESCRIPTION)}
+		<p>{$cat.DESCRIPTION}</p>
+		{/if}
+		</a>
+  </li>
+{/foreach}
+</ul>
+
diff --git a/themes/smartpocket/template/menubar.tpl b/themes/smartpocket/template/menubar.tpl
@@ -0,0 +1,29 @@
+<select name="identification" id="identification" data-icon="grid" data-iconpos="notext" data-native-menu="false">
+
+  <option value="" data-placeholder="true">{'Identification'|@translate}</option>
+
+	{if isset($U_REGISTER)}
+	<option value="{$U_REGISTER}">{'Register'|@translate}</option>
+	{/if}
+	{if isset($U_LOGIN)}
+	<option value="{$U_LOGIN}">{'Login'|@translate}</option>
+	{/if}
+	{if isset($U_LOGOUT)}
+	<option value="{$U_LOGOUT}">{'Logout'|@translate}</option>
+	{/if}
+	{if isset($U_PROFILE)}
+	<option value="{$U_PROFILE}">{'Customize'|@translate}</option>
+	{/if}
+	{if isset($U_ADMIN)}
+	<option value="{$U_ADMIN}">{'Administration'|@translate}</option>
+	{/if}
+
+</select>
+
+{footer_script}{literal}
+$(document).ready(function() {
+  $('#identification').change(function() {
+    window.location = this.value;
+  });
+});
+{/literal}{/footer_script}
diff --git a/themes/smartpocket/template/profile.tpl b/themes/smartpocket/template/profile.tpl
@@ -0,0 +1,4 @@
+<div data-role="content">
+{include file='infos_errors.tpl'}
+{$PROFILE_CONTENT}
+</div>