changed button design and resolved #28

kennethgoodman · May 16, 2016 · b1481d1 · b1481d1
1 parent 0f05e0f
commit b1481d1
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 7 deletions.
diff --git a/public/javascript/jqueryBinding.js b/public/javascript/jqueryBinding.js
@@ -59,7 +59,7 @@ $(document).ready(function(){
     $('table').on('click', 'input[type="button"]', function(e){
         $(this).closest('tr').remove()
     })
-    $("#submitData").unbind('click').click( function (e) {
+    $(".submitData").unbind('click').click( function (e) {
         $("#confirm").prop("disabled",false);//just in case the button is disabled
         clicked(function(queryArray,infoArray){
             $('body').css('overflow','hidden')

diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
@@ -241,6 +241,73 @@ div.slider {
 table.dataTable tbody td.no-padding {
     padding: 0;
 }
+.submitData{
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  padding: 6px 20px;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid #bbb;
+  overflow: visible;
+  font: bold 13px arial, helvetica, sans-serif;
+  text-decoration: none;
+  white-space: nowrap;
+  color: #555;
+  background-color: #ddd;
+  background-image: linear-gradient(top, rgba(255,255,255,1),
+                                         rgba(255,255,255,0)),
+                    url(data:image/png;base64,iVBORw0KGg[...]QmCC); 
+  transition: background-color .2s ease-out;
+  background-clip: padding-box; /* Fix bleeding */
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
+              0 2px 2px -1px rgba(0, 0, 0, .5),
+              0 1px 0 rgba(255, 255, 255, .3) inset;
+  text-shadow: 0 1px 0 rgba(255,255,255, .9);  
+}
+
+.submitData:hover{
+  background-color: #eee;
+  color: #555;
+}
+
+.submitData:active{
+  background: #e9e9e9;
+  position: relative;
+  top: 1px;
+  text-shadow: none;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
+}
+.button.color{
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0,0,0,.2);
+  background-image: linear-gradient(top, rgba(255,255,255,.3), 
+             rgba(255,255,255,0)),
+                    url(data:image/png;base64,iVBORw0KGg[...]QmCC);
+}
+.button.blue{
+  background-color: #269CE9;
+  border-color: #269CE9;
+}
+
+.button.blue:hover{
+  background-color: #70B9E8;
+}
+
+.button.blue:active{
+  background: #269CE9;
+}
+
+#donateText {
+  width:6em
+}
+#donateText:hover span {
+  display:none
+}
+#donateText:hover:before {
+  content:"Thank you!"
+}
 /*.ajax-loader {
   position: absolute;
   left: 0;

diff --git a/views/pages/index.ejs b/views/pages/index.ejs
@@ -11,16 +11,17 @@
     <% include ../partials/nav.ejs %>
             <br>
     <div class="wrap" style="margin:auto;">
-        <div style="margin:auto; margin-left:20px; margin-top:80px;">
+        <div style="margin-top:80px;">
             <p id="testing">To add a new class, pick your institution and session.  You will be texted when these classes open up </p><br>
-            <div style="margin: auto;">
+            <p>Once class(es) are highlighted click “Get Classes!” to be texted</p><br>
+            <div>
                 <select id="inst" default="pick an institution and session">
                     <option value="defualt" selected="selected">
                         Pick an institution
                     </option>
-                </select>
-                <div class="SubmitButton">
-                    <button type="button" class="btn btn-primary" id="submitData" style="margin-bottom: 12px;">Get Classes!</button>
+                </select><br>
+                <div class="SubmitButton" style="text-align:center;">
+                    <button type="button" class="submitData button color blue">Get Classes!</button>
                 </div>
             </div>
           <br>
@@ -44,6 +45,10 @@
             </tfoot>
         </table>
     </div>
+    <br><br>
+    <div class="SubmitButton" style="text-align:center;">
+        <button type="button" class="submitData button color blue" style="position:relative">Get Classes!</button>
+    </div><br>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/views/partials/nav.ejs b/views/partials/nav.ejs
@@ -13,7 +13,7 @@
             </li>
             <li>
               <button type="button" class="btn btn-default navbar-btn" id="donate" style="margin-top:9px; margin-left:2px">
-                <a href="/donate"><span class="glyphicon glyphicon-heart-empty" style="margin-right:5px"></span>Donate</a>
+                <a href="/donate"><span class="glyphicon glyphicon-heart-empty" style="margin-right:5px"></span><span id="donateText"><span>Donate</span></span></a>
               </button>
             </li>
         </ul>