work in progress for switching view to test on live gallery

Philio · Sep 5, 2014 · 17f86f1 · 17f86f1
1 parent e6021e3
commit 17f86f1
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 4 deletions.
diff --git a/js/theme.js b/js/theme.js
@@ -2,9 +2,15 @@ $(document).ready(function(){
     $('#btn-grid').click(function() {
         $('#btn-grid').addClass('active');
         $('#btn-list').removeClass('active');
+        $('#content').find('.col-outer').removeClass('col-lg-12').addClass('col-lg-3 col-md-4 col-sm-6 col-xs-12');
+        $('#content').removeClass('content-list').addClass('content-grid');
+        $('#content .col-inner').equalHeights();
     });
     $('#btn-list').click(function() {
         $('#btn-list').addClass('active');
         $('#btn-grid').removeClass('active');
+        $('#content').find('.col-outer').removeClass('col-lg-3 col-md-4 col-sm-6 col-xs-12').addClass('col-lg-12');
+        $('#content').removeClass('content-grid').addClass('content-list').equalHeights();
+        $('#content .col-inner').equalHeights();
     });
 });
diff --git a/less/theme.less b/less/theme.less
@@ -16,6 +16,31 @@
   margin-bottom: 0px;
 }
 
+// Grid and list view styles
+.content-grid {
+  .col-inner {
+    margin-bottom: 0px;
+    a {
+      float: none;
+    }
+    .caption {
+      float: none;
+      padding-left: 0px;
+    }
+  }
+}
+.content-list {
+  .col-inner {
+    a {
+      float: left;
+    }
+    .caption {
+      float: left;
+      padding-left: 20px;
+    }
+  }
+}
+
 // Pad out the copyright
 .copyright {
   padding: 30px;

diff --git a/template/index.tpl b/template/index.tpl
@@ -38,11 +38,11 @@
 {include file='infos_errors.tpl'}
 
 <div class="container">
-    <div id="content" class="row">
+    <div id="content" class="row content-grid">
 {if !empty($CATEGORIES)}
             <!-- Start of categories -->
 {$CATEGORIES}
-{footer_script}{literal}$(document).ready(function(){$('#content .last').load(function(){$('#content .thumbnail').equalHeights()})});{/literal}{/footer_script}
+{footer_script}{literal}$(document).ready(function(){$('#content .last').load(function(){$('#content .col-inner').equalHeights()})});{/literal}{/footer_script}
             <!-- End of categories -->
 {/if}
     </div>

diff --git a/template/mainpage_categories.tpl b/template/mainpage_categories.tpl
@@ -1,8 +1,8 @@
 {define_derivative name='derivative_params' width=260 height=180 crop=true}
 {foreach from=$category_thumbnails item=cat name=cat_loop}
 {assign var=derivative value=$pwg->derivative($derivative_params, $cat.representative.src_image)}
-<div class="col-lg-3">
-    <div class="thumbnail">
+<div class="col-outer col-lg-3 col-md-4 col-sm-6 col-xs-12">
+    <div class="col-inner">
         <a href="{$cat.URL}">
             <img {if $smarty.foreach.cat_loop.last}class="last" {/if}{if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.icon_dir}/img_small.png" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}">
         </a>

diff --git a/theme.css b/theme.css
@@ -7,6 +7,23 @@
 .navbar:first-of-type {
   margin-bottom: 0px;
 }
+.content-grid .col-inner {
+  margin-bottom: 0px;
+}
+.content-grid .col-inner a {
+  float: none;
+}
+.content-grid .col-inner .caption {
+  float: none;
+  padding-left: 0px;
+}
+.content-list .col-inner a {
+  float: left;
+}
+.content-list .col-inner .caption {
+  float: left;
+  padding-left: 20px;
+}
 .copyright {
   padding: 30px;
 }