Merge branch 'master' of https://github.com/AaronLindsayDaisy/final_p…

…roject
AaronLindsayDaisy · Jul 9, 2015 · 1925947 · 1925947
2 parents ebf6020 + 1ab3eaf
commit 1925947
Show file tree

Hide file tree

Showing 8 changed files with 226 additions and 93 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
-ruby '2.2.2'
+ruby '2.2.1'
 gem 'paperclip'
 gem 'aws-sdk', '~> 1.6'
 gem 'ratyrate'

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -15,6 +15,25 @@
 //= require_tree .
 //= require jquery.raty
 //= require ratyrate
+
+
+// create experiment view: tab navigation
+
+$(document).ready(function(){
+    $("ul#tabs li").click(function(e){
+        if (!$(this).hasClass("active")) {
+            var tabNum = $(this).index();
+            var nthChild = tabNum+1;
+            $("ul#tabs li.active").removeClass("active");
+            $(this).addClass("active");
+            $("ul#tab li.active").removeClass("active");
+            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
+        }
+    });
+});
+
+// create experiment view: add fields dynamically
+
 $(function () {
 
     if ($('.experiment').length) {

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -32,7 +32,6 @@ p {margin-bottom: 1.3em;}
 
 h1, h2, h3, h4 {
   display: block;
-  margin: 1.414em 0 0.5em;
   font-weight: inherit;
   line-height: 1.2;
 }

diff --git a/app/assets/stylesheets/experiments.scss b/app/assets/stylesheets/experiments.scss
@@ -25,40 +25,95 @@
   width: 10em;
 }
 
-.exp-img {
-  img {
-    height:20em;
-    width: 20em;
-  }
-}
+// all experiments page
+
 .page-title {
 	margin-left: 4em;
 }
 
 .experiment-card {
 	display: block;
 	width: 80%;
+	height: 18em;
 	background-color: #F2F3F4;
   	box-shadow: -0 0 20px #ccc;
 	margin: 1em auto;
 	padding: 1em;
 }
 
-.card-container {
-	padding: 1.5em;
+.exp-title {
+	transition: all .2s ease-in-out; 
 }
 
-.exp-img {
-	float: left;
-	padding: 1.5em;
+.exp-title:hover { 
+	transform: scale(1.05); 
 }
 
 .exp-heading {
 	font-weight: bold;
 	padding: 0;
+	margin: 0;
 }
 
 .exp-min-detail {
-	margin: 1.2em;
+	display: inline-block;
+	position: relative;
+	float: right;
+	line-height: 1.6em;
+	margin: 0 0.5%;	
+	height: 20em;
+	width: 63%;
+}
+
+.image {
+	float: left;
+	margin: 2.5% 0 0 2.5%;
+	height: 15em;
+	width: 30%;
+	box-shadow: -0 0 10px #CCC;
+}
+
+// create experiment view tab navigation 
+
+ul#tabs {
+    list-style-type: none;
+    padding: 0;
+    text-align: center;
+	font-size: 1.3em;
+}
+ul#tabs li {
+    display: inline-block;
+    background-color: #F2F3F4;
+    padding: 5px 20px;
+    color: #323232;
+    cursor: pointer;
+	border-bottom: solid 3px #F2F3F4;
+}
+ul#tabs li:hover {
+    background-color: #E8E8E8;
+	border-bottom: solid 3px #E8E8E8;
+}
+ul#tabs li.active {
+	border-bottom: solid 3px #323232;
+	transition: all 0.2s ease-in-out; 
+}
+ul#tab {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+ul#tab li {
+    display: none;
+}
+ul#tab li.active {
+    display: block;
+	width: 50%;
+	background-color: #F2F3F4;
+	margin: 0 auto;
+	padding: 1em;
+	box-shadow: -0 0 20px #ccc;
+}
 
+.form-container {
+	padding: 2em 2.5em;
 }
diff --git a/app/assets/stylesheets/reset.css b/app/assets/stylesheets/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/app/views/experiments/_form.html.erb b/app/views/experiments/_form.html.erb
@@ -11,65 +11,84 @@
     </div>
   <% end %>
 
-<div class="experiment">
-  <div class="field">
-    <%= f.label :name %><br>
-    <%= f.text_area :name %>
-  </div>
 
-  <div class="field">
-    <%= f.label :description %><br>
-    <%= f.text_area :description %>
-  </div>
-  <div class="field">
-    <%= f.label :uploaded_file %><br>
-    <%= f.file_field 'uploaded_file', id: 'pictureInput' %>
-  </div>
-  <div id="target">
-  </div>
-  <div class="field">
-    <%= f.label :youtube_link %><br>
-    <%= f.url_field :youtube_link %>
-  </div>
-  <div class="field">
-    <%= f.label :complete_time %><br>
-    <%= f.number_field(:complete_time, in: 0.5..20.0, step: 0.5) %> hours
-  </div>
-  <h3>Materials</h3>
-  <ul class="unordered-list-materials">
-    <%= f.fields_for(:materials) do |ff| %>
-      <li>
-        <div class="field material">
-          <%= ff.label :item %><br>
-          <%= ff.text_field :item, :class=> "new-material" %>
-        </div>
-      </li>
-      <button type="button" class="add-material-btn">+</button>
-    <% end %>
+<div class="experiment">
+  <ul id="tabs">
+      <li class="active">Basics</li>
+      <li>Materials</li>
+      <li>Instructions</li>
   </ul>
-
-  <h3>Instructions</h3>
-  <ul class="unordered-list-instructions">
-    <%= f.fields_for(:instructions) do |ff| %>
+
+  <ul id="tab">
+      <li class="active">
+          <div class="form-container">
+            <div class="field">
+              <%= f.label :name %><br>
+              <%= f.text_area :name, :cols => 100, :rows => 3 %>
+            </div>
+
+            <div class="field">
+              <%= f.label :description %><br>
+              <%= f.text_area :description, :cols => 100, :rows => 3 %>
+            </div>
+
+            <div class="field">
+              <%= f.label :uploaded_file %><br>
+              <%= f.file_field 'uploaded_file', id: 'pictureInput', :rows => 3 %>
+            </div>
+
+            <div id="target">
+            </div>
+
+            <div class="field">
+              <%= f.label :youtube_link %><br>
+              <%= f.url_field :youtube_link, :rows => 3%>
+            </div>
+
+            <div class="field">
+              <%= f.label :complete_time %><br>
+              <%= f.number_field(:complete_time, in: 0.5..20.0, step: 0.5) %> hours
+            </div>
+          </div>  
+      </li>
+
       <li>
-      <div class="instruction-fields">
-        <div class="field instruction">
-          <%= ff.label :information %><br>
-          <%= ff.text_field :information, :class=> "new-instruction" %>
-        </div>
-        <div class="field">
-          <%= ff.label :order %><br>
-          <%= ff.number_field :order %>
-        </div>
-      </div>
+          <ul class="unordered-list-materials">
+            <%= f.fields_for(:materials) do |ff| %>
+              <li>
+                <div class="field material">
+                  <%= ff.label :item %><br>
+                  <%= ff.text_field :item, :class=> "new-material" %>
+                </div>
+              </li>
+              <button type="button" class="add-material-btn"><i class="fa fa-plus"></i></button>
+            <% end %>
+          </ul>
       </li>
-      <button type="button" class="add-instruction-btn">+</button>
-    <% end %>
+
+      <li>
+          <ul class="unordered-list-instructions">
+            <%= f.fields_for(:instructions) do |ff| %>
+              <li>
+              <div class="instruction-fields">
+                <div class="field instruction">
+                  <%= ff.label :information %><br>
+                  <%= ff.text_field :information, :class=> "new-instruction" %>
+                </div>
+                <div class="field">
+                  <%= ff.label :order %><br>
+                  <%= ff.number_field :order %>
+                </div>
+              </div>
+              </li>
+              <button type="button" class="add-instruction-btn"><i class="fa fa-plus"></i></button>
+            <% end %>
+
+            <div class="actions">
+              <%= f.submit %>
+            </div>
+          </ul>
   </ul>
-
-  <div class="actions">
-    <%= f.submit %>
-  </div>
-
+
 <% end %>
 </div>
diff --git a/app/views/experiments/index.html.erb b/app/views/experiments/index.html.erb
@@ -6,32 +6,26 @@
     <% @experiments.each do |experiment| %>
         <br>
      <div class="experiment-card">
-        <div class="card-container">
             <div class="exp-img">
               <% if experiment.uploaded_file_file_name != nil %>
-                <%= image_tag experiment.uploaded_file %><br>
+                <%= image_tag experiment.uploaded_file, class: "image" %><br>
               <% end %>
             </div>
-
-            <div class="exp-min-detail">
-
-                <h3><a><%= link_to experiment.name, experiment %></a><br></h3>
-
-                <div class="exp-heading">Description</div><br>
-                <%= experiment.description %><br>
-
-                <div class="exp-heading">Complete time</div><br>
-                <%= experiment.complete_time %><br>
-
-                <%= experiment.average("name").nil? ? '0' : experiment.average("name").avg %>
-                Messy Rating : <%= rating_for experiment, "name", star_path: '/images/ratyrate', :disable_after_rate => true %>
-                <em>
-                  -- <%= experiment.user.username %>
+
+        <div class="exp-min-detail">
+
+            <h3 class="exp-title"><a><%= link_to experiment.name, experiment %></a><br></h3>
+
+            <div class="exp-heading">Description<br>
+            <%= experiment.description %><br></div>
+
+            <div class="exp-heading">Complete time: <%= experiment.complete_time %> hour(s)<br>
+
+            <i class="fa fa-thumbs-up"></i><%= experiment.user.username %>
                   | <%= pluralize experiment.votes, "vote" %>
-                </em>
-                <%= link_to 'Edit', edit_experiment_path(experiment) %> |
-            </div>
-        </div>
+                  
+            Mess Factor: <%= experiment.average("name").nil? ? '0' : experiment.average("name").avg %><br><%= rating_for experiment, "name", star_path: '/images/ratyrate', :disable_after_rate => true %></div>
+
+        </div>   
      </div>
-
     <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -58,7 +58,6 @@
           }(document));
 
           </script>
-
-          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
 </body>
 </html>