Adding some test elements to the prev/next navigation and implementin…

…g some basic transitions.
wanderingmatt · Apr 29, 2012 · fa73370 · fa73370
1 parent a367294
commit fa73370
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 30 deletions.
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
@@ -517,29 +517,63 @@ nav a:hover {
   }
 
   .fancybox-nav {
-    background: #4c489e;
+    height: 41px;
-    height: 36px;
+    margin-top: -33px;
-    margin-top: -18px;
     position: fixed;
     top: 50%;
+    min-width: 36px;
     width: 36px;
   }
-  .fancybox-nav span {
+  .fancybox-nav em {
-    display: block;
+    position: absolute;
-    height: auto;
+    width: 36px;
-    margin: 0;
+    height: 36px;
-    position: static;
+    background: red;
-    top: auto;
+  }
-    visibility: visible;
+  .fancybox-nav hgroup {
+    background: #4c489e;
+    opacity: 0;
+    padding: 15px 30px;
+    position: absolute;
+    -moz-transition: opacity 0.5s;
+    -webkit-transition: opacity 0.5s;
+    -o-transition: opacity 0.5s;
+    transition: opacity 0.5s;
+    white-space: nowrap;
+  }
+  .fancybox-nav:hover {
     width: auto;
   }
+  .fancybox-nav:hover hgroup {
+    opacity: 1;
+  }
 
   .fancybox-prev {
-    left: 30px;
+    left: 0;
+    text-align: left;
+  }
+  .fancybox-prev em {
+    left: 0;
+  }
+  .fancybox-prev hgroup {
+    left: -500px;
+  }
+  .fancybox-prev:hover hgroup {
+    left: 0;
   }
 
   .fancybox-next {
-    right: 30px;
+    right: 0;
+    text-align: right;
+  }
+  .fancybox-next em {
+    right: 0;
+  }
+  .fancybox-next hgroup {
+    right: -500px;
+  }
+  .fancybox-next:hover hgroup {
+    right: 0;
   }
 
   .fancybox-title {

diff --git a/stylesheets/screen.scss b/stylesheets/screen.scss
@@ -123,25 +123,44 @@ nav {
     right: 30px;
   }
   .fancybox-nav {
-    background: $purple;
+    // background: red;
-    height: 36px;
+    height: 41px;
-    margin-top: -18px;
+    margin-top: -33px;
     position: fixed;
     top: 50%;
+    min-width: 36px;
     width: 36px;
-    span {
+    em {
-      display: block;
+      position: absolute;
-      // Nuking Defaults //
+      width: 36px;
-      height: auto;
+      height: 36px;
-      margin: 0;
+      background: red;
-      position: static;
-      top: auto;
-      visibility: visible;
-      width: auto;
     }
+    hgroup {
+      background: $purple;
+      opacity: 0;
+      padding: 15px 30px;
+      position: absolute;
+      @include transition(opacity .5s);
+      white-space: nowrap;
+    }
+    &:hover { width: auto; }
+    &:hover hgroup { opacity: 1; }
+  }
+  .fancybox-prev {
+    left: 0;
+    text-align: left;
+    em { left: 0; }
+    hgroup { left: -500px; }
+    &:hover hgroup { left: 0; }
+  }
+  .fancybox-next {
+    right: 0;
+    text-align: right;
+    em { right: 0; }
+    hgroup { right: -500px; }
+    &:hover hgroup { right: 0; }
   }
-  .fancybox-prev { left: 30px; }
-  .fancybox-next { right: 30px; }
   .fancybox-title {
     line-height: $default-line-height;
     hgroup {

diff --git a/views/layouts/default.html.erb b/views/layouts/default.html.erb
@@ -47,10 +47,8 @@
   		  aspectRatio: true,
   		  beforeLoad: function() {
           this.title = $(this.element).children('aside').html();
-          this.tpl.prev = "<a title='Previous' class='fancybox-nav fancybox-prev'>The Previous Title</a>";
+          this.tpl.prev = "<a title='Previous' class='fancybox-nav fancybox-prev'><em></em>" + $(this.element).parent().prev().find('a > aside').html() + "</a>";
-          this.tpl.next = "<a title='Next' class='fancybox-nav fancybox-next'>" + $(this.element).parent().next().find('a > aside > hgroup').html() + "</a>";
+          this.tpl.next = "<a title='Next' class='fancybox-nav fancybox-next'><em></em>" + $(this.element).parent().next().find('a > aside').html() + "</a>";
-          console.log($(this.element).parent().prev().find('a > aside > hgroup').html());
-          console.log($(this.element).parent().next().find('a > aside > hgroup').html());
         },
   		  height: 540,
   		  loop: false,