fix styling

iarambula · iarambula · commit 5bd9aa02b1db · 2016-08-05T16:03:17.000-07:00
diff --git a/app/assets/stylesheets/_install_steps.scss b/app/assets/stylesheets/_install_steps.scss
@@ -47,7 +47,7 @@ section {
 }
 
 .install_steps.show {
-  // color: white;
+  color: white;
 }
 
 .install_steps.show {
@@ -56,7 +56,11 @@ section {
   }
 }
 
-.choose_os_version, .install_rails, .update_rubygems {
+.step_color_0 {
+  color: rgb(59, 60, 60)!important;
+}
+
+.step_color_1 {
   background-color: #5B6474;
 
   .note:before {
@@ -84,15 +88,15 @@ section {
   padding: 1.7em;
 }
 
-.find_the_command_line, .install_rvm_and_ruby {
+.step_color_2 {
   background-color: #3B4960;
 
   .note:before {
     border-color:#fff #3B4960 rgba(255,255,255,0.2) #658E15;
   }
 }
 
-.railsinstaller, .rails_for_linux_and_other, .install_git, .railsinstaller_windows {
+.step_color_3 {
   background-color: #CE613E;
 
   .prompt {
@@ -119,23 +123,23 @@ section {
   }
 }
 
-.verify_ruby_version, .install_xcode, .textmate {
+.step_color_4 {
   background-color: #65AE55;
 
   .note:before {
     border-color:#fff #65AE55 rgba(255,255,255,0.2) #658E15;
   }
 }
 
-.configure_git, .find_git_bash, .install_homebrew, .verify_rails_version {
-  // background-color: #8E59BC;
+.step_color_5 {
+  background-color: #8E59BC;
 
   .note:before {
     border-color:#fff #8E59BC rgba(255,255,255,0.2) #658E15;
   }
 }
 
-.sublime_text, .update_ruby, .create_ssh_key {
+.step_color_6 {
   background-color: #72B49B;
 
   .option {
@@ -152,15 +156,15 @@ section {
   }
 }
 
-.create_your_first_app, .update_rails {
+.step_color_7 {
   background: #CF7C00;
 
   .note:before {
     border-color:#fff #CF7C00 rgba(255,255,255,0.2) #658E15;
   }
 }
 
-.see_it_live {
+.step_color_8 {
   background: #5181BD;
 
   .note:before {
@@ -198,7 +202,7 @@ header {
 }
 
 .instructions {
-  // text-align: center;
+  text-align: center;
   font-size: 20px;
   line-height: 1.4;
   margin: 0 15%;
@@ -280,7 +284,7 @@ http://nicolasgallagher.com/pure-css-folded-corner-effect/
 
 .note {
   background: rgba(255,255,255,0.2);
-  // color: #fff;
+  color: #fff;
   font-size: 90%;
   margin-bottom: 2em;
   margin-top: 2em;
@@ -295,7 +299,7 @@ http://nicolasgallagher.com/pure-css-folded-corner-effect/
     right:0;
     border-width:0 16px 16px 0;
     border-style:solid;
-    // border-color:#fff #CF7C00 rgba(255,255,255,0.2) #658E15;
+    border-color:#fff #CF7C00 rgba(255,255,255,0.2) #658E15;
     background: rgba(255,255,255,1);
     -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
     -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
diff --git a/app/controllers/install_steps_controller.rb b/app/controllers/install_steps_controller.rb
@@ -8,6 +8,7 @@ class InstallStepsController < ApplicationController
   # rescue_from Wicked::Wizard::InvalidStepError, with: ->{ redirect_to root_path }
 
   def show
+    @color_class = "step_color_#{current_step_index % 9}" if current_step_index.present?
     render_wizard
   end
 
diff --git a/app/views/install_steps/install_homebrew.html.erb b/app/views/install_steps/install_homebrew.html.erb
@@ -9,10 +9,10 @@
     </li>
     <li>
       <p>Press enter and you’ll be prompted for your password. Enter your system password and press enter again.</p>
-      <p>Note: When you enter your system password here, you won’t see any movement or dots or characters. It’s confusing at first, but once you press enter it will tell you if it’s wrong.</p>
+      <p class="note">Note: When you enter your system password here, you won’t see any movement or dots or characters. It’s confusing at first, but once you press enter it will tell you if it’s wrong.</p>
       <p>When this is done you should see a screen like this</p>
       <%= image_tag 'mac_steps/homebrew_terminal_install_finish.png', class: "img-responsive" %>
-      <p>Note the block towards the bottoms that says <samp>==> Installation successful!</samp> Woop woop! First part down.</p>
+      <p class="note">Note the block towards the bottoms that says <samp>==> Installation successful!</samp> Woop woop! First part down.</p>
     </li>
   </ol>
 </section>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -14,7 +14,7 @@
 
   <%= yield(:head) %>
 </head>
-<body class="<%= controller_name %> <%= action_name %> <%= params[:id] %>">
+<body class="<%= controller_name %> <%= action_name %> <%= params[:id] %>  <%= @color_class %>">
 
   <%= yield(:header) %>
 

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ section {`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`.install_steps.show {`
`50`		`- // color: white;`
	`50`	`+ color: white;`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`.install_steps.show {`
`@@ -56,7 +56,11 @@ section {`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`
`59`		`-.choose_os_version, .install_rails, .update_rubygems {`
	`59`	`+.step_color_0 {`
	`60`	`+ color: rgb(59, 60, 60)!important;`
	`61`	`+}`
	`62`	`+`
	`63`	`+.step_color_1 {`
`60`	`64`	`background-color: #5B6474;`
`61`	`65`
`62`	`66`	`.note:before {`
`@@ -84,15 +88,15 @@ section {`
`84`	`88`	`padding: 1.7em;`
`85`	`89`	`}`
`86`	`90`
`87`		`-.find_the_command_line, .install_rvm_and_ruby {`
	`91`	`+.step_color_2 {`
`88`	`92`	`background-color: #3B4960;`
`89`	`93`
`90`	`94`	`.note:before {`
`91`	`95`	`border-color:#fff #3B4960 rgba(255,255,255,0.2) #658E15;`
`92`	`96`	`}`
`93`	`97`	`}`
`94`	`98`
`95`		`-.railsinstaller, .rails_for_linux_and_other, .install_git, .railsinstaller_windows {`
	`99`	`+.step_color_3 {`
`96`	`100`	`background-color: #CE613E;`
`97`	`101`
`98`	`102`	`.prompt {`
`@@ -119,23 +123,23 @@ section {`
`119`	`123`	`}`
`120`	`124`	`}`
`121`	`125`
`122`		`-.verify_ruby_version, .install_xcode, .textmate {`
	`126`	`+.step_color_4 {`
`123`	`127`	`background-color: #65AE55;`
`124`	`128`
`125`	`129`	`.note:before {`
`126`	`130`	`border-color:#fff #65AE55 rgba(255,255,255,0.2) #658E15;`
`127`	`131`	`}`
`128`	`132`	`}`
`129`	`133`
`130`		`-.configure_git, .find_git_bash, .install_homebrew, .verify_rails_version {`
`131`		`- // background-color: #8E59BC;`
	`134`	`+.step_color_5 {`
	`135`	`+ background-color: #8E59BC;`
`132`	`136`
`133`	`137`	`.note:before {`
`134`	`138`	`border-color:#fff #8E59BC rgba(255,255,255,0.2) #658E15;`
`135`	`139`	`}`
`136`	`140`	`}`
`137`	`141`
`138`		`-.sublime_text, .update_ruby, .create_ssh_key {`
	`142`	`+.step_color_6 {`
`139`	`143`	`background-color: #72B49B;`
`140`	`144`
`141`	`145`	`.option {`
`@@ -152,15 +156,15 @@ section {`
`152`	`156`	`}`
`153`	`157`	`}`
`154`	`158`
`155`		`-.create_your_first_app, .update_rails {`
	`159`	`+.step_color_7 {`
`156`	`160`	`background: #CF7C00;`
`157`	`161`
`158`	`162`	`.note:before {`
`159`	`163`	`border-color:#fff #CF7C00 rgba(255,255,255,0.2) #658E15;`
`160`	`164`	`}`
`161`	`165`	`}`
`162`	`166`
`163`		`-.see_it_live {`
	`167`	`+.step_color_8 {`
`164`	`168`	`background: #5181BD;`
`165`	`169`
`166`	`170`	`.note:before {`
`@@ -198,7 +202,7 @@ header {`
`198`	`202`	`}`
`199`	`203`
`200`	`204`	`.instructions {`
`201`		`- // text-align: center;`
	`205`	`+ text-align: center;`
`202`	`206`	`font-size: 20px;`
`203`	`207`	`line-height: 1.4;`
`204`	`208`	`margin: 0 15%;`
`@@ -280,7 +284,7 @@ http://nicolasgallagher.com/pure-css-folded-corner-effect/`
`280`	`284`
`281`	`285`	`.note {`
`282`	`286`	`background: rgba(255,255,255,0.2);`
`283`		`- // color: #fff;`
	`287`	`+ color: #fff;`
`284`	`288`	`font-size: 90%;`
`285`	`289`	`margin-bottom: 2em;`
`286`	`290`	`margin-top: 2em;`
`@@ -295,7 +299,7 @@ http://nicolasgallagher.com/pure-css-folded-corner-effect/`
`295`	`299`	`right:0;`
`296`	`300`	`border-width:0 16px 16px 0;`
`297`	`301`	`border-style:solid;`
`298`		`- // border-color:#fff #CF7C00 rgba(255,255,255,0.2) #658E15;`
	`302`	`+ border-color:#fff #CF7C00 rgba(255,255,255,0.2) #658E15;`
`299`	`303`	`background: rgba(255,255,255,1);`
`300`	`304`	`-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);`
`301`	`305`	`-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);`