Bootstrap styled masonry tag list

Philio · Mar 28, 2015 · eeb84a7 · eeb84a7
1 parent a512bef
commit eeb84a7
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 77 deletions.
diff --git a/js/theme.js b/js/theme.js
@@ -50,7 +50,7 @@ $(document).ready(function() {
     var sidebar = $("#sidebar");
     var theImage = $('#theImage')
     if (sidebar.length && theImage.length) {
-        sidebar.css('top', theImage.offset().top + 'px');
+        sidebar.css('top', (theImage.offset().top + 20) + 'px');
         $('#info-link').click(function () {
             var sidebar = $('#sidebar');
             if (parseInt(sidebar.css('right')) < 0) {

diff --git a/less/theme.less b/less/theme.less
@@ -239,47 +239,46 @@ body {
   margin-bottom: 25px;
 }
 
-// TODO Tag cloud styles taken from default theme, needs reviewing later
-#fullTagCloud {
+#tagCloud {
   font-size: 120%;
   text-align: center;
   span {
     margin: 5px;
   }
+  .tagLevel5 {
+    font-size: 150% !important;
+  }
+  .tagLevel4 {
+    font-size: 140% !important;
+  }
+  .tagLevel3 {
+    font-size: 120% !important;
+  }
+  .tagLevel2 {
+    font-size: 100% !important;
+  }
+  .tagLevel1 {
+    font-size: 90% !important;
+  }
 }
 
-.tagLevel5 { font-size: 150% !important; }
-.tagLevel4 { font-size: 140% !important; }
-.tagLevel3 { font-size: 120% !important; }
-.tagLevel2 { font-size: 100% !important; }
-.tagLevel1 { font-size: 90%  !important; }
-
-// TODO Tag list styles taken from default theme, needs reviewing later
-table.tagLetterContent {
-  width: 100%;
-  font-size: 80%;
-  border-collapse: collapse;
-}
-
-td.nbEntries {
-  text-align: right;
-  font-style: italic;
-  font-size: 90%;
-}
-
-fieldset.tagLetter {
-  border: 1px solid #d3d3d3;
-  width: 245px;
-  margin: 0.5em;
-  padding: 10px;
-}
+#tagLetters {
+  padding-left: 2px;
+  padding-right: 2px;
+  *, *:before, *:after {box-sizing:  border-box !important;}
+  .row {
+    -moz-column-width: 17em;
+    -webkit-column-width: 17em;
+    -moz-column-gap: -1em;
+    -webkit-column-gap: -1em;
 
-legend.tagLetterLegend {
-  border: 1px solid #d3d3d3;
-  font-size:120%;
-  font-weight: bold;
-  padding: 0 5px;
-  font-style: normal;
+  }
+  .menu-category {
+    display: inline-block;
+    margin:  0.26rem;
+    padding:  1rem;
+    width:  100%;
+  }
 }
 
 @media (min-width: @screen-sm-min) {

diff --git a/template/tags.tpl b/template/tags.tpl
@@ -28,7 +28,7 @@
 
 {if $display_mode == 'cloud' and isset($tags)}
 <div class="container">
-    <div id="fullTagCloud">
+    <div id="tagCloud">
 {foreach from=$tags item=tag}
         <span><a href="{$tag.URL}" class="tagLevel{$tag.level}" title="{$tag.counter|@translate_dec:'%d photo':'%d photos'}">{$tag.name}</a></span>
 {/foreach}
@@ -38,22 +38,17 @@
 
 {if $display_mode == 'letters' and isset($letters)}
 <div class="container">
-    <div class="row">
+    <div id="tagLetters">
+        <div class="menu row">
 {foreach from=$letters item=letter}
-        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
-            <fieldset class="tagLetter">
-                <legend class="tagLetterLegend">{$letter.TITLE}</legend>
-                <table class="tagLetterContent">
-{foreach from=$letter.tags item=tag}
-                    <tr class="tagLine">
-                        <td><a href="{$tag.URL}" title="{$tag.name}">{$tag.name}</a></td>
-                        <td class="nbEntries">{$tag.counter|@translate_dec:'%d photo':'%d photos'}</td>
-                    </tr>
+            <div class="menu-category">
+                <div class="menu-category-name list-group-item active">{$letter.TITLE}</div>
+    {foreach from=$letter.tags item=tag}
+                <a href="{$tag.URL}" class="menu-item list-group-item" title="{$tag.name}">{$tag.name}<span class="badge">{$tag.counter|@translate_dec:'%d photo':'%d photos'}</span></a>
+    {/foreach}
+            </div>
 {/foreach}
-                </table>
-            </fieldset>
         </div>
-{/foreach}
     </div>
 </div>
 {/if}

diff --git a/theme.css b/theme.css
@@ -819,50 +819,48 @@ body {
   margin-top: 25px;
   margin-bottom: 25px;
 }
-#fullTagCloud {
+#tagCloud {
   font-size: 120%;
   text-align: center;
 }
-#fullTagCloud span {
+#tagCloud span {
   margin: 5px;
 }
-.tagLevel5 {
+#tagCloud .tagLevel5 {
   font-size: 150% !important;
 }
-.tagLevel4 {
+#tagCloud .tagLevel4 {
   font-size: 140% !important;
 }
-.tagLevel3 {
+#tagCloud .tagLevel3 {
   font-size: 120% !important;
 }
-.tagLevel2 {
+#tagCloud .tagLevel2 {
   font-size: 100% !important;
 }
-.tagLevel1 {
-  font-size: 90%  !important;
+#tagCloud .tagLevel1 {
+  font-size: 90% !important;
 }
-table.tagLetterContent {
-  width: 100%;
-  font-size: 80%;
-  border-collapse: collapse;
-}
-td.nbEntries {
-  text-align: right;
-  font-style: italic;
-  font-size: 90%;
-}
-fieldset.tagLetter {
-  border: 1px solid #d3d3d3;
-  width: 245px;
-  margin: 0.5em;
-  padding: 10px;
+#tagLetters {
+  padding-left: 2px;
+  padding-right: 2px;
 }
-legend.tagLetterLegend {
-  border: 1px solid #d3d3d3;
-  font-size: 120%;
-  font-weight: bold;
-  padding: 0 5px;
-  font-style: normal;
+#tagLetters *,
+#tagLetters *:before,
+#tagLetters *:after {
+  box-sizing: border-box !important;
+}
+#tagLetters .row {
+  -moz-column-width: 17em;
+  -webkit-column-width: 17em;
+  -moz-column-gap: -1em;
+  -webkit-column-gap: -1em;
+}
+#tagLetters .menu-category {
+  display: inline-block;
+  margin: 0.26rem;
+  padding: 1rem;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .navbar-collapse {