From 1b3309c80e437d50550e923b33dd4077a7196547 Mon Sep 17 00:00:00 2001 From: Lindsey Miller Date: Wed, 8 Jul 2015 15:49:20 -0400 Subject: [PATCH 1/3] all experiments view photo resizing, create new experiment partial tab navigation --- app/assets/javascripts/application.js | 19 ++++ app/assets/stylesheets/experiments.scss | 76 +++++++++++-- app/views/experiments/_form.html.erb | 138 ++++++++++++++---------- app/views/experiments/index.html.erb | 43 ++++---- app/views/layouts/application.html.erb | 3 +- 5 files changed, 191 insertions(+), 88 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 280ff08..b15fee3 100644 --- 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/experiments.scss b/app/assets/stylesheets/experiments.scss index f2af242..0d2bbce 100644 --- a/app/assets/stylesheets/experiments.scss +++ b/app/assets/stylesheets/experiments.scss @@ -28,27 +28,87 @@ .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; - -} \ No newline at end of file + display: inline-block; + position: relative; + float: right; + 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; + box-shadow: -0 0 10px #CCC; + border-bottom: solid 2px #323232; + margin-bottom: 0; + color: #323232; + cursor: pointer; +} +ul#tabs li:hover { + background-color: #CCC; +} +ul#tabs li.active { + background-color: #E8E8E8; + border-bottom: solid 3px #323232; +} +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/views/experiments/_form.html.erb b/app/views/experiments/_form.html.erb index df2c51e..12e8d80 100644 --- a/app/views/experiments/_form.html.erb +++ b/app/views/experiments/_form.html.erb @@ -11,67 +11,95 @@ <% end %> -
-
- <%= f.label :name %>
- <%= f.text_area :name %> -
-
- <%= f.label :description %>
- <%= f.text_area :description %> -
-
- <%= f.label :lesson %>
- <%= f.text_area :lesson %> -
-
- <%= f.label :uploaded_file %>
- <%= f.file_field 'uploaded_file' %> -
-
- <%= f.label :youtube_link %>
- <%= f.url_field :youtube_link %> -
-
- <%= f.label :complete_time %>
- <%= f.number_field(:complete_time, in: 0.5..20.0, step: 0.5) %> hours -
-

Materials

-
From 957b7a221d40521a97a254bc0784e6057da99209 Mon Sep 17 00:00:00 2001 From: Lindsey Miller Date: Wed, 8 Jul 2015 17:14:25 -0400 Subject: [PATCH 3/3] fix border bottom on create experiment page --- app/assets/stylesheets/experiments.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/experiments.scss b/app/assets/stylesheets/experiments.scss index 3f3a101..bce6f8b 100644 --- a/app/assets/stylesheets/experiments.scss +++ b/app/assets/stylesheets/experiments.scss @@ -83,9 +83,11 @@ ul#tabs li { 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;