aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHaakon Meland Eriksen <haakon.eriksen@far.no>2017-10-22 19:52:08 +0200
committerHaakon Meland Eriksen <haakon.eriksen@far.no>2017-10-22 19:52:08 +0200
commitf648809856b852d3819a8c1a0d624fd725ed8a34 (patch)
tree27714a265ae15ec708624777702bb88629000803
parentc80f4feb6234ff195171a92704d7ebe24aff4336 (diff)
downloadvolse-hubzilla-f648809856b852d3819a8c1a0d624fd725ed8a34.tar.gz
volse-hubzilla-f648809856b852d3819a8c1a0d624fd725ed8a34.tar.bz2
volse-hubzilla-f648809856b852d3819a8c1a0d624fd725ed8a34.zip
Portfolio widget - CSS update
-rwxr-xr-xview/tpl/photo_album_portfolio.tpl40
-rw-r--r--view/tpl/photo_portfolio_card.tpl6
-rw-r--r--view/tpl/photo_portfolio_orbit.tpl5
3 files changed, 50 insertions, 1 deletions
diff --git a/view/tpl/photo_album_portfolio.tpl b/view/tpl/photo_album_portfolio.tpl
index 7aadbc7e0..1635e0ae1 100755
--- a/view/tpl/photo_album_portfolio.tpl
+++ b/view/tpl/photo_album_portfolio.tpl
@@ -1,3 +1,39 @@
+{{if isset($mode) && $mode == 'orbit'}}
+<div class="row">
+ <div class="orbit small-12 medium-9 large-9 columns" id="photo-album-contents-{{$album_id}}" role="region" aria-label="portfolioOrbit-{{$album_id}}" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
+
+ <ul class="orbit-container">
+ <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
+ <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
+ {{foreach $photos as $photo}}
+ {{include file="photo_portfolio_orbit.tpl"}}
+ {{/foreach}}
+ </ul>
+ <nav class="orbit-bullets">
+ <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+ <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+ <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+ <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+ </nav>
+ <div id="page-end"></div>
+ </div>
+<div class="photos-end"></div>
+<script>$(document).ready(function() { loadingPage = false; justifyPhotos('photo-album-contents-{{$album_id}}'); });</script>
+<div id="page-spinner"></div>
+</div>
+{{elseif isset($mode) && $mode =='card'}}
+<div class="row">
+ <div class="small-12 medium-9 large-9 columns" id="photo-album-contents-{{$album_id}}">
+ {{foreach $photos as $photo}}
+ {{include file="photo_portfolio_card.tpl"}}
+ {{/foreach}}
+ <div id="page-end"></div>
+ </div>
+<div class="photos-end"></div>
+<script>$(document).ready(function() { loadingPage = false; justifyPhotos('photo-album-contents-{{$album_id}}'); });</script>
+<div id="page-spinner"></div>
+</div>
+{{else}}
<div class="row column">
<div id="photo-album-contents-{{$album_id}}">
{{foreach $photos as $photo}}
@@ -8,4 +44,6 @@
<div class="photos-end"></div>
<script>$(document).ready(function() { loadingPage = false; justifyPhotos('photo-album-contents-{{$album_id}}'); });</script>
<div id="page-spinner"></div>
-</div> \ No newline at end of file
+</div>
+{{/if}}
+
diff --git a/view/tpl/photo_portfolio_card.tpl b/view/tpl/photo_portfolio_card.tpl
new file mode 100644
index 000000000..5fddd3d37
--- /dev/null
+++ b/view/tpl/photo_portfolio_card.tpl
@@ -0,0 +1,6 @@
+<div class="card" style="width: 300px;box-shadow: 0px 10px 6px -6px rgba(119,119,119,0.6);border-style: solid;border-width: 1px;border=color: rgba(230,230,230,0.6);margin:10px 5px 10px 5px;">
+ <img src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.desc}}" id="photo-top-photo-{{$photo.resource_id}}">
+ <div class="card-divider">
+ <h4>{{$photo.desc}}</h4>
+ </div>
+</div>
diff --git a/view/tpl/photo_portfolio_orbit.tpl b/view/tpl/photo_portfolio_orbit.tpl
new file mode 100644
index 000000000..b2883265c
--- /dev/null
+++ b/view/tpl/photo_portfolio_orbit.tpl
@@ -0,0 +1,5 @@
+
+ <li class="orbit-slide">
+ <img class="orbit-image" src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.desc}}" id="photo-top-photo-{{$photo.resource_id}}o">
+ <figcaption class="orbit-caption">{{$photo.desc}}</figcaption>
+ </li>