photos theme vk

webasyst · Dec 26, 2014 · fec2ad4 · fec2ad4
1 parent e92024b
commit fec2ad4
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 16 deletions.
diff --git a/wa-apps/photos/themes/vk/album.html b/wa-apps/photos/themes/vk/album.html
@@ -9,10 +9,31 @@ <h1 class="album-name">
 {if $album.description}
     <p class="album-description">{$album.description}</p>
 {/if}
+
+<!-- subalbums -->
 {if $childcrumbs}
-    <div class="sub-albums">
-        {foreach $childcrumbs as $child}<a href="{$child.full_url}">{$child.name}</a> {/foreach}
-    </div>
+    <ul class="albums subalbums">
+        {foreach $childcrumbs as $a}
+            <li>
+                <a href="{$a.full_url}">
+                    <div class="cover">
+                        {if $a.count > 1}
+                            <div class="sublayer layer1"></div>
+                            <div class="sublayer layer2"></div>
+                        {/if}
+                        {if $a.key_photo}
+                            <img src="{$a.key_photo.thumb.url}{if $a.key_photo.edit_datetime}?{strtotime($a.key_photo.edit_datetime)}{/if}" alt="{$a.name}">
+                        {else}
+                            <img src="{$wa_app_static_url}img/album-dummy.png" alt="{$a.name}">
+                        {/if}                            
+
+                        <strong{if $a.status <= 0} class="gray" title="[`Private album`]"{/if}>{$a.name|default:'[`(no name)`]'}{if $a.status <= 0} <i class="icon10 lock-bw"></i>{/if}</strong>
+                        <span class="count">{sprintf( _w('%d photo','%d photos',$a.count), $a.count)}</span>
+                    </div>
+                </a>
+            </li>
+        {/foreach}
+    </ul>
 {/if}
 
 {* @event frontend_collection.%plugin_id%.content *}

diff --git a/wa-apps/photos/themes/vk/content.html b/wa-apps/photos/themes/vk/content.html
@@ -20,7 +20,7 @@
     {if isset($breadcrumbs) && $action != 'page'}
         <div class="breadcrumbs">
             {foreach $breadcrumbs as $breadcrumb}
-                <a href="{$breadcrumb.full_url}">{$breadcrumb.name|escape}</a> <span class="rarr">&rarr;</span>
+                <a href="{$breadcrumb.url}">{$breadcrumb.name|escape}</a> <span class="rarr">&rarr;</span>
             {/foreach}
         </div>
     {/if}

diff --git a/wa-apps/photos/themes/vk/head.html b/wa-apps/photos/themes/vk/head.html
@@ -5,10 +5,10 @@
     <!-- js -->
     <script type="text/javascript" src="{$wa_url}wa-content/js/jquery-wa/wa.core.js?v{$wa->version(true)}"></script>
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
-    <script type="text/javascript" src="{$wa_active_theme_url}lazyloading.js?v{$wa->version(true)}"></script>
+    <script type="text/javascript" src="{$wa_active_theme_url}vk.photos.js?v{$wa->version(true)}"></script>
     {if $wa->photos->config('enable_2x')}
     <script type="text/javascript" src="{$wa_url}wa-content/js/jquery-plugins/jquery.retina.min.js?v{$wa->version(true)}"></script>
-    <script type="text/javascript">$(window).load(function(){ $('#photo-list img,.photo img').retina()});</script>
+    <script type="text/javascript">$(window).load(function(){ $('#photo-list img,.photo img,.albums img').retina()});</script>
     {/if}
     {if $nofollow}
         <!-- "nofollow" for duplicate photo pages (context dependent) -->
@@ -24,5 +24,4 @@
     VK.addCallback('onScrollTop', function(scroll){
         VK.callMethod("resizeWindow", $("body").outerWidth(), $("body").outerHeight());
     });
-
 </script>
diff --git a/wa-apps/photos/themes/vk/home.html b/wa-apps/photos/themes/vk/home.html
@@ -1,8 +1,40 @@
 {* homepage template *}
 
-{if !empty($photos)}
+{$albums = $wa->photos->childAlbums()}
 
-    {include file='view-thumbs.html'}
+{if !empty($photos) || !empty($albums)}
+
+    <!-- albums -->
+    {if !empty($albums)}
+        <ul class="albums">
+            {foreach $albums as $a}
+                <li>
+                    <a href="{$a.full_url}">
+                        <div class="cover">
+                            {if $a.count > 1}
+                                <div class="sublayer layer1"></div>
+                                <div class="sublayer layer2"></div>
+                            {/if}
+                            {if $a.key_photo}
+                                <img src="{$a.key_photo.thumb.url}{if $a.key_photo.edit_datetime}?{strtotime($a.key_photo.edit_datetime)}{/if}" alt="{$a.name}">
+                            {else}
+                                <img src="{$wa_app_static_url}img/album-dummy.png" alt="{$a.name}">
+                            {/if}                            
+
+                            <strong{if $a.status <= 0} class="gray" title="[`Private album`]"{/if}>{$a.name|default:'[`(no name)`]'}{if $a.status <= 0} <i class="icon10 lock-bw"></i>{/if}</strong>
+                            <span class="count">{sprintf( _w('%d photo','%d photos',$a.count), $a.count)}</span>
+                        </div>
+                    </a>
+                </li>
+            {/foreach}
+        </ul>
+    {/if}
+
+    <h1 class="search-criteria">[`Photostream`]</h1>
+
+    {if !empty($photos)}
+        {include file='view-thumbs.html'}
+    {/if}
 
 {else}
 

diff --git a/wa-apps/photos/themes/vk/theme.xml b/wa-apps/photos/themes/vk/theme.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE theme PUBLIC "wa-app-theme" "http://www.webasyst.com/wa-content/xml/wa-app-theme.dtd">
-<theme id="vk" system="0" vendor="webasyst" author="Webasyst" app="photos" parent_theme_id="site:vk" version="1.1.3">
+<theme id="vk" system="0" vendor="webasyst" author="Webasyst" app="photos" parent_theme_id="site:vk" version="1.1.4">
     <name locale="en_US">VK</name>
     <name locale="ru_RU">Вконтакте</name>
     <description locale="ru_RU">Ваш сайт во «Вконтакте» в виде iframe-приложения.</description>
@@ -21,7 +21,7 @@
         </file>
         <file path="head.html" custom="0">
             <description locale="en_US">Photos app's &lt;head&gt; instructions</description>
-            <description locale="en_US">Блок &lt;head&gt; приложения «Фото»</description>
+            <description locale="ru_RU">Блок &lt;head&gt; приложения «Фото»</description>
         </file>
         <file path="view-thumbs.html" custom="0">
             <description locale="en_US">Photo list thumbnails view</description>

diff --git a/wa-apps/photos/themes/vk/view-thumbs.html b/wa-apps/photos/themes/vk/view-thumbs.html
@@ -1,5 +1,3 @@
-{if !empty($title)}{$title}{/if}
-
 {if !empty($bigger_thumbs)}
     {$size = '259x185'}
 {else}

diff --git a/wa-apps/photos/themes/vk/vk.photos.css b/wa-apps/photos/themes/vk/vk.photos.css
@@ -27,6 +27,28 @@ h1.search-criteria { margin-bottom: 1em; text-align: center; }
 .sub-albums { margin-bottom: 25px; margin-top: 10px; line-height: 1.3em; }
 .sub-albums a { padding: 0 1em 0 0; }
 
+/* albums */
+
+ul.albums { padding: 0; margin: 0 0 20px; text-align: center; }
+ul.albums li { width: 250px; list-style: none; display: inline-block; text-align: center; margin-top: 30px; margin-bottom: 20px; vertical-align: top; }
+ul.albums li .cover { width: 208px; min-height: 208px; margin: 0 auto 10px; position: relative; line-height: 1.2em; }
+ul.albums li .cover .sublayer { position: absolute; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.2); left: 2px; right: -2px; bottom: 5px;top:-2px; width: 192px; height: 192px; }
+ul.albums li .cover .sublayer.layer1 { z-index: 9; border-color: #aaa; -moz-transform: rotate(-3deg); -moz-transition: all 0.2s ease-in-out; -webkit-transform: rotate(-3deg); -webkit-transition: all 0.2s ease-in-out; transform: rotate(-3deg); transition: all 0.2s ease-in-out; }
+ul.albums li .cover .sublayer.layer2 { z-index: 8; -moz-transform: rotate(3deg); -moz-transition: all 0.2s ease-in-out; -webkit-transform: rotate(3deg); -webkit-transition: all 0.2s ease-in-out; transform: rotate(3deg); transition: all 0.2s ease-in-out; }
+ul.albums li .cover img { border: 7px solid white; box-shadow: 0 1px 5px rgba(0,0,0,0.3); -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 192px; height: 192px; position: relative; z-index: 11; margin-bottom: 7px; }
+
+ul.albums li .count { display: block; color: #aaa; font-size: 0.9em; margin-top: 5px; }
+
+ul.albums li:hover .cover img { border-color: #ffd; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
+
+ul.albums.subalbums { margin-left: -20px; text-align: left; }
+ul.albums.subalbums li { width: 150px; }
+ul.albums.subalbums li .cover,
+ul.albums.subalbums li .cover .sublayer,
+ul.albums.subalbums li .cover img { width: 104px; height: 104px; }
+ul.albums.subalbums li .cover img { border-width: 5px; }
+ul.albums.subalbums li:hover .cover img { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
+
 /* photostream */
 
 ul.photostream { padding: 0; margin: 0; list-style: none; position: relative; }
@@ -82,10 +104,10 @@ ul.photostream li.stream-nav.ff i { background: url('img/photostream-ff.png') no
 
 ul.view-thumbs { padding: 0; margin: 0; list-style: none; text-align: center; }
 ul.view-thumbs li a { text-decoration: none; }
-ul.view-thumbs li { display: inline-block; position: relative; vertical-align: top; width: 131px; margin-right: 10px; margin-bottom: 14px; }
+ul.view-thumbs li { display: inline-block; position: relative; vertical-align: top; width: 131px; margin-right: 10px; margin-bottom: 14px; display: block\9; float: left\9; }
 ul.view-thumbs li img.shadowed { -moz-box-shadow: 0 1px 3px #aaa; -webkit-box-shadow: 0 1px 3px #aaa; box-shadow: 0 1px 3px #aaa; margin-bottom: 5px; }
 ul.view-thumbs.album-float-left-view { margin-top: 10px; float: left; }
-ul.view-thumbs.album-float-left-view li { display: block; margin-right: 10px; float: left; }
+ul.view-thumbs.album-float-left-view li { margin-right: 10px; }
 
 ul.view-thumbs.bigger-thumbs li { width: 268px; }
 

diff --git a/wa-apps/photos/themes/vk/vk.photos.js b/wa-apps/photos/themes/vk/vk.photos.js
@@ -63,7 +63,7 @@ $(function() {
                     tmp.remove();
 
                     photo_list.trigger('append_photo_list');
-
+                    VK && VK.callMethod("resizeWindow", $("body").outerWidth(), $("body").outerHeight());
                 });
             }
         });