Layout and fullscreen functionality.

berkes · Jun 5, 2012 · 141da96 · 141da96
1 parent 3d9813f
commit 141da96
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 26 deletions.
diff --git a/public/images/15.JPG b/public/images/15.JPG
diff --git a/public/sass/app.scss b/public/sass/app.scss
@@ -3,14 +3,91 @@
 // Table of Content
 //-----------------------------------------
 // - Shared Styles
-// - Page Name 1
+// - Slider
 // - Page Name 2
 
 // Shared Styles
+body, html {
+    height:100%;
+    }
 h1, h2, h3, h4, h5, cite {
   font-family: 'Berkshire Swash', cursive;
 }
 
-// Page Name 1
+body {
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-attachment:fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.container {
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:3em;
+  z-index:99;
+}
+
+//Slides
+#questions {
+  .question {
+    display:none;
+    position:absolute;
+    top:0;
+    left:0;
+
+    width:100%;
+    height:100%;
+    margin:0;
+    padding:0;
+
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: none;
+
+    cite {
+      font-size: 6em;
+      padding: 1em;
+      background-color: #fff;
+      color: #000;
+      position:absolute;
+      top: 80px;
+      left: 80px;
+    }
+    .name {
+      font-size:2em;
+      padding:1em;
+      background-color: #fff;
+      color: #000;
+      position:absolute;
+      bottom:20px;
+      right: 10px;
+    }
+  }
+  .question.active {
+     display:block;
+  }
+  .next,.prev {
+    position: absolute;
+    top:0;
+    z-index: 100;
+
+    font-size:1.4em;
+
+    background-color: #fff;
+    padding:0.4em;
+  }
+  .next {
+    right: 0;
+  }
+  .prev {
+    left:0;
+  }
+}
+
 
-// Page Name 2
diff --git a/public/stylesheets/app.css b/public/stylesheets/app.css
@@ -1,5 +1,87 @@
 /* Artfully masterminded by ZURB  */
 /* line 10, ../sass/app.scss */
+body, html {
+  height: 100%;
+}
+
+/* line 13, ../sass/app.scss */
 h1, h2, h3, h4, h5, cite {
   font-family: 'Berkshire Swash', cursive;
 }
+
+/* line 17, ../sass/app.scss */
+body {
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-attachment: fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+/* line 27, ../sass/app.scss */
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3em;
+  z-index: 99;
+}
+
+/* line 38, ../sass/app.scss */
+#questions .question {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-size: cover;
+  background-position: 50% 50%;
+  background-repeat: none;
+}
+/* line 53, ../sass/app.scss */
+#questions .question cite {
+  font-size: 6em;
+  padding: 1em;
+  background-color: #fff;
+  color: #000;
+  position: absolute;
+  top: 80px;
+  left: 80px;
+}
+/* line 62, ../sass/app.scss */
+#questions .question .name {
+  font-size: 2em;
+  padding: 1em;
+  background-color: #fff;
+  color: #000;
+  position: absolute;
+  bottom: 20px;
+  right: 10px;
+}
+/* line 72, ../sass/app.scss */
+#questions .question.active {
+  display: block;
+}
+/* line 75, ../sass/app.scss */
+#questions .next, #questions .prev {
+  position: absolute;
+  top: 0;
+  z-index: 100;
+  font-size: 1.4em;
+  background-color: #fff;
+  padding: 0.4em;
+}
+/* line 85, ../sass/app.scss */
+#questions .next {
+  right: 0;
+}
+/* line 88, ../sass/app.scss */
+#questions .prev {
+  left: 0;
+}
diff --git a/views/index.erb b/views/index.erb
@@ -21,22 +21,46 @@
   <link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css'>
   <script src="/javascripts/jquery.min.js" type="text/javascript"></script>
   <script src="/javascripts/jquery.reveal.js" type="text/javascript"></script>
-  <script src="/javascripts/jquery.orbit-1.4.0.js" type="text/javascript"></script>
-  <script type="text/javascript">
-     $(window).load(function() {
-         $('#slides').orbit();
-     });
+  <script>
+    function nextSlide() {
+      var active = $('#questions .question.active');
+      var next = active.next();
+
+      active.fadeOut("slow", "swing").removeClass('active').next().fadeIn("slow", "swing").addClass('active');
+    }
+    function prevSlide() {
+      var active = $('#questions .question.active');
+      var prev = active.prev();
+
+      prev.addClass('active').show();
+      active.removeClass('active').hide();
+    }
+
+    $(function() {
+      //Make the data-dash-image stuffs the backgrounds and preload.
+      $('#questions .question').each(function() {
+        var c = new Image();
+        var path = $(this).data("image");
+        $(this).css('background-image', 'url('+ path +')');
+        c.src = path;
+      });
+
+      //Attach onclick on .next and prev
+      $("a.next").click(function() {
+        nextSlide();
+      });
+      $("a.prev").click(function() {
+        prevSlide();
+      });
+    });
   </script>
 </head>
 <body>
   <!-- container -->
   <div class="container">
     <div class="row">
-      <div class="six columns">
-        <h1>Questions?</h1>
-      </div>
-      <div class="six columns">
-        <a class="radius green button full-width" data-reveal-id="question-form">Ask!</a>
+      <div class="twelve columns">
+        <a class="radius green button full-width" data-reveal-id="question-form"><strong>&#8615;</strong> Ask!</a>
       </div>
     </div>
     <div class="row">
@@ -54,22 +78,20 @@
         </div>
       </div>
     </div>
-    <div class="row">
-      <div class="twelve columns">
-        <div id="slides">
-        <% @questions.each do |question| %>
-          <img src="/images/<%= question.id %>.jpg" alt="<%= h question.question %>" data-caption="#question-<%= question.id %>" />
+  </div>
+  <div id="questions">
+    <% @questions.each_with_index do |question, index| %>
+      <div class="question<%= " active" if index == 0 %>" id="q-<%= question.id %>" data-image="/images/<%= question.id %>.jpg">
+        <cite><%= h question.question %></cite>
+        <strong class="name">&#150; <%= h question.name %></strong>
+        <% if index < @questions.size %>
+          <a href="#q-<%= question.id %>" class="next">&#8594;</a>
         <% end %>
-        </div>
-
-        <% @questions.each do |question| %>
-          <span class="orbit-caption" id="question-<%= question.id %>">
-            <cite><%= h question.question %></cite>
-            <br /><strong class="name">-- <%= h question.name %></strong>
-          </span>
+        <% if index > 0 %>
+          <a href="#q-<%= question.id %>" class="prev">&#8592;</a>
         <% end %>
       </div>
-    </div>
+    <% end %>
   </div>
 </body>
 </html>