added click to reveal small about this site on home JS

alex-benoit · Oct 15, 2016 · b1a7527 · b1a7527
1 parent 731c094
commit b1a7527
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss
@@ -2,7 +2,7 @@
  * Fonts
  * ------------------------------------- */
 // Google fonts
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700|Ubuntu:400");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Ubuntu:400");
 $base-font: "Open Sans", "Helvetica", "sans-serif";
 $header-font: "Ubuntu", "Helvetica", "sans-serif";
 

diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss
@@ -68,9 +68,14 @@
     color: #7B7B7B;
   }
 
-  #about-the-site {
+  #about-this-site {
+    margin-top: 30px;
+    font-size: 15px;
+    transition: opacity .25s ease-in-out;
+  }
+
+  .transparent {
     opacity: 0;
-    margin-top: 25px;
   }
 }
 
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -7,15 +7,26 @@
         <h1>GitHub Languages</h1>
         <div class='search-box'>
           <form class='search-form' action='/user' method='get'>
-            <input class='form-control' placeholder='Github Username' type='text' name='user'>
+            <input class='form-control' placeholder='GitHub Username' type='text' name='user'>
             <button class='btn btn-link search-btn'>
               <i class='fa fa-search'></i>
             </button>
           </form>
         </div>
-        <p>Discover your favorite programming languages. <a href='#'>About this site</a>.</p>
-        <p id='about-the-site'>This website is built by <a href='#'>Alex</a>. It finds your favorite programming languages using your <a href='#'>GitHub</a> username. You can find out more <a href='#'>here</a>.</p>
+        <p>Discover your favorite programming languages. <a id='show-about-this-site' href='#'>About this site</a>.</p>
+        <p id='about-this-site' class='transparent'>This website is built by <a href='#'>Alex</a>. It finds your favorite programming languages using your <a href='#'>GitHub</a> username. You can find out more <a href='#'>here</a>.</p>
       </div>
     </div>
   </div>
 </div>
+
+<%= content_for(:after_js) do %>
+  <%= javascript_tag do %>
+    $(document).ready(function() {
+      $("#show-about-this-site").on("click", function( e ) {
+        e.preventDefault();
+        $("#about-this-site").toggleClass("transparent");
+      });
+    });
+  <% end %>
+<% end %>