Built Portfolio page out, added javascript interactions for showing/h…

…iding project slideshows.
cwoodley · May 2, 2012 · 2bc9386 · 2bc9386
1 parent 0eb1c88
commit 2bc9386
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 2 deletions.
diff --git a/wp-content/themes/cobalt343/media/stylesheets/compiled/style.css b/wp-content/themes/cobalt343/media/stylesheets/compiled/style.css
@@ -142,9 +142,30 @@ body.home .flex-control-nav a {
     background-position: 0 -8px; }
 
 body.page-template-portfolio-php article.portfolio-item {
+  margin-bottom: 20px;
   width: 100%; }
+  body.page-template-portfolio-php article.portfolio-item a {
+    color: #27bad5;
+    text-decoration: none; }
+    body.page-template-portfolio-php article.portfolio-item a:hover {
+      text-decoration: underline; }
+  body.page-template-portfolio-php article.portfolio-item h2 {
+    line-height: 20px;
+    margin-bottom: 0; }
   body.page-template-portfolio-php article.portfolio-item header.meta .five {
+    line-height: 18px;
     text-align: right; }
+  body.page-template-portfolio-php article.portfolio-item div.banner img {
+    border: 3px solid #cbcbcb;
+    display: block; }
+  body.page-template-portfolio-php article.portfolio-item footer {
+    clear: both;
+    display: block;
+    text-align: center;
+    width: 100%; }
+  body.page-template-portfolio-php article.portfolio-item div.flexslider {
+    display: none;
+    margin-bottom: 20px; }
 
 /* #Media Queries
 ================================================== */

diff --git a/wp-content/themes/cobalt343/media/stylesheets/sass/style.scss b/wp-content/themes/cobalt343/media/stylesheets/sass/style.scss
@@ -34,6 +34,8 @@ html, body {height: 100%;}
 .alignright {display:inline;float:right;}
 @mixin alignright {display:inline;float:right;}
 
+$highlight:#27bad5;
+
 img.alignright, .alignright img {margin: 0 0 20px 20px;}
 img.alignleft, .alignleft img {margin: 0 20px 20px 0;}
 
@@ -173,14 +175,48 @@ body.home {
 body.page-template-portfolio-php {
 
   article.portfolio-item {
+    margin-bottom: 20px;
     width: 100%;
 
+    a {
+      color: $highlight;
+      text-decoration:none;
+
+      &:hover {text-decoration:underline;}
+    }
+
+    h2 {
+      line-height:20px;
+      margin-bottom:0;
+    }
+
     header.meta {
 
       .five {
+        line-height:18px;
         text-align:right;
       }
     }
+
+    div.banner {
+      img {
+        border:3px solid #cbcbcb;
+        display: block;
+      }
+    }
+
+    footer {
+      clear:both;
+      display: block;
+      text-align:center;
+      width: 100%;
+    }
+
+    div.flexslider {
+      display: none;
+      margin-bottom:20px;
+    }
+
   }
 }
 

diff --git a/wp-content/themes/cobalt343/portfolio.php b/wp-content/themes/cobalt343/portfolio.php
@@ -28,8 +28,11 @@
         Studio: <?php echo get('info_studio'); ?>
       </div>
     </header>
-    <div class="slideshow">
-      <div class="flexslider">
+    <div class="slideshow thirteen columns alpha omega">
+      <div class="banner">
+        <?php echo get_image('info_banner'); ?>
+      </div>
+      <div class="flexslider post_<?php the_ID(); ?>">
         <ul class="slides nostyle">
           <?php 
             $slides = getFieldOrder('slideshow_image');
@@ -42,6 +45,9 @@
         </ul>
       </div>
     </div>
+    <footer class="clearfix">
+      <a href="#" class="post_<?php the_ID(); ?>">Show</a>
+    </footer>
   </article>
   <?php endwhile; ?>
 <?php endif; wp_reset_query(); ?>
@@ -58,6 +64,22 @@
       slideshowSpeed: "3000"
     });
   });
+
+
+  jQuery(document).ready(function($) {
+    $('footer.clearfix a').click(function(event) {
+      var linkID = $(this).attr('class');
+      var parentArticle = $('article#'+linkID);
+
+      $('article#'+linkID+' div.banner').slideToggle('slow');
+      $('div.'+linkID).slideToggle('slow');
+
+      var text = $(this).text();
+      $(this).text(
+        text == "Show" ? "Hide" : "Show");
+    });
+  });
+
 </script>
 
 <?php get_footer(); ?>