added button styles and featured images for sections

Gemfile

@@ -38,7 +38,7 @@ gem 'simple_form'
 gem 'devise'
 
 group :production do
-	gem 'pg'
+	
 end
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console

Gemfile.lock

@@ -89,7 +89,6 @@ GEM
       mini_portile2 (~> 2.1.0)
       pkg-config (~> 1.1.7)
     orm_adapter (0.5.0)
-    pg (0.18.4)
     pkg-config (1.1.7)
     puma (3.4.0)
     rack (2.0.1)
@@ -177,7 +176,6 @@ DEPENDENCIES
   jbuilder (~> 2.5)
   jquery-rails
   listen (~> 3.0.5)
-  pg
   puma (~> 3.0)
   rails (~> 5.0.0)
   sass-rails (~> 5.0)

app/assets/stylesheets/style.css

@@ -19,6 +19,7 @@ html, body {
 }
 a {
     color: #0070d2;
+    font-size: 16px;
 }
 h1, h2, h3, h4, h5, h6 {
     color: #16325c !important;
@@ -28,6 +29,7 @@ h1, h2, h3, h4, h5, h6 {
 .logo-container {
     display: flex;
     align-items: center;
+    margin-left: 10px;
 }
 
 .main-heading {
@@ -37,12 +39,13 @@ h1, h2, h3, h4, h5, h6 {
 
 .logo {
     padding: 20px;
+
 }
 
 hr {
     padding: 0px;
     margin: 0px;
-    height: 1px;
+    height: 0.5px;
     background-color: rgb(250, 159, 187);
     background-image: linear-gradient(to right, rgba(250, 159, 187, 0), rgb(191, 76, 118));
 }
@@ -56,12 +59,18 @@ hr {
     padding:1em;
     overflow: hidden;
     border: 1px solid #e7e7e7;
+    box-sizing: border-box;
 }
 
 .nav a {
     position: relative;
     margin-right: 1em;
     color: #5E6B7F;
+    transition: 0.1s ease-in-out;
+}
+
+.nav a:hover {
+    color: #0070d2;
 }
 
 .navigation-buttons {
@@ -84,7 +93,6 @@ hr {
 
 .actions {
     margin-left: auto;
-    margin-right: 20px;
 }
 
 
@@ -96,3 +104,32 @@ thead {
     border-radius: 50%;
     border: 1px #e7e7e7 solid;
 }
+
+.pink {
+    background-color: #E5365F;
+}
+
+.pink:hover {
+    background-color: #DC1A47;
+}
+
+.row-image {
+
+    width: 100vw;
+    position: relative;
+    margin-left: -50vw;
+    /* margin-top: 100px; */
+    left: 50%;
+    margin-top: -40px;
+    margin-bottom: 40px;
+    /* top: -100px; */
+    background-size: cover !important;
+
+}
+
+.overlay {
+    background: linear-gradient(
+                     rgba(20,20,20, .5), 
+                     rgba(20,20,20, .5));
+}
+

app/views/admin/candidates/index.html.erb

-<h4>Displaying All Candidates Grouped By Positions </h4>
+<div class="overlay"><div class="row-image" style="height: 400px; background: url(<%= asset_path 'image1.JPG' %>) center center"></div></div>
+
+<h4>Roster of Candidates</h4>
+
+
+<%=link_to new_admin_candidate_path, {:class =>"button-primary pink"} do%>
+
+Add a Candidate &nbsp; <span class='ion-plus-round'></span>
+
+<% end %>
 
-<%=link_to "Add a Candidate", new_admin_candidate_path%>
 <div class="container"> 
 <center>
 <% @positions.each do |p| %>
-<div style="display:inline-block; border:solid 1px; padding:30px; bottom:0; width:140px; margin:20px;">
+<div style="display:inline-block; border:solid 1px; padding:30px; bottom:0; width:140px; margin:20px; url(<%= asset_path 'candidate.png' %>)">
 
   <h5> <%= p.name %></h5>
 <ul  >

app/views/layouts/application.html.erb

@@ -41,7 +41,7 @@
 <div class="navigation-buttons">
 
 
-<a href="/">Home</a>
+<a href="/"><span class="ion-home">&nbsp</span>Home</a>
 
 <%= link_to "Candidates", admin_candidates_path,{ :class=>""} %>
 <%= link_to "Positions", admin_positions_path,{ :class=>""} %>
@@ -51,10 +51,11 @@
 
 </div>
 <div class="actions">
+
   <a class="button-primary" href="/voting/votes">Vote Now <span class="ion-ios-arrow-thin-right"></span></a>
 <%if user_signed_in?%>
   <%= link_to "Logout", destroy_user_session_path,{ method: :delete,:class=>""} %>
-    <span class=""> Hello <%= current_user.first_name%></span>
+    
     <a href="/profile" class="nav-item right">My Profile</a>
   <%else%>
   <%= link_to "Log-in", new_user_session_path, {:class =>""}%>

app/views/pages/index.html.erb

+<%if user_signed_in?%>
+
+<h6 style="text-align: center; color: #8e8e8e !important; margin: 0px;">Welcome to the results page, <%= current_user.first_name%>.</h6>
+
+<% end %>
+
 <h3 class="main-heading">Election Results</h3>
 <hr>
 <%@positions.each do |p|%>

public/assets/.sprockets-manifest-9066ccb58b84cb3c023fec7ee53485f6.json

+{"files":{"application-9893df45ee3bdaacc085af1efb0fa9eeeac21225cd1010b90afb613af8324d49.js":{"logical_path":"application.js","mtime":"2016-07-20T01:40:03+08:00","size":369870,"digest":"9893df45ee3bdaacc085af1efb0fa9eeeac21225cd1010b90afb613af8324d49","integrity":"sha256-mJPfRe472qzAha8e+w+p7urCEiXNEBC5CvthOvgyTUk="},"application-69cfe39669c7e026924f03c38bf8e27da58495e8b0869e7551d117a171edfb6e.css":{"logical_path":"application.css","mtime":"2016-07-20T01:13:16+08:00","size":13817,"digest":"69cfe39669c7e026924f03c38bf8e27da58495e8b0869e7551d117a171edfb6e","integrity":"sha256-ac/jlmnH4CaSTwPDi/jifaWEleiwhp51UdEXoXHt+24="}},"assets":{"application.js":"application-9893df45ee3bdaacc085af1efb0fa9eeeac21225cd1010b90afb613af8324d49.js","application.css":"application-69cfe39669c7e026924f03c38bf8e27da58495e8b0869e7551d117a171edfb6e.css"}}
\ No newline at end of file

public/assets/application-69cfe39669c7e026924f03c38bf8e27da58495e8b0869e7551d117a171edfb6e.css

+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: rgba(0,30,50,0.8)  ;
+  font-size:17px;
+  text-decoration: none; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
+
+
+/* CSS Reset */
+
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+
+html, body {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    color: #5E6B7F;
+    font-family: 'Roboto' !important;
+    font-weight: 300;
+}
+a {
+    color: #0070d2;
+    font-size: 16px;
+}
+h1, h2, h3, h4, h5, h6 {
+    color: #16325c !important;
+    font-weight: 100;
+}
+/* User defined styles */
+.logo-container {
+    display: flex;
+    align-items: center;
+    margin-left: 10px;
+}
+
+.main-heading {
+    text-align: center;
+    font-weight: 100;
+}
+
+.logo {
+    padding: 20px;
+
+}
+
+hr {
+    padding: 0px;
+    margin: 0px;
+    height: 0.5px;
+    background-color: rgb(250, 159, 187);
+    background-image: linear-gradient(to right, rgba(250, 159, 187, 0), rgb(191, 76, 118));
+}
+.nav {
+    position:relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    list-style-type: none;
+    margin: 0px;
+    padding:1em;
+    overflow: hidden;
+    border: 1px solid #e7e7e7;
+    box-sizing: border-box;
+}
+
+.nav a {
+    position: relative;
+    margin-right: 1em;
+    color: #5E6B7F;
+}
+
+.navigation-buttons {
+    margin-left: 20px;
+}
+
+.button-primary {
+    background: #32B68D;
+    padding: 10px 40px;
+    border-radius: 3px;
+    color: white !important;
+    transition: 0.1s ease-in-out;
+    font-weight: 300;
+}
+
+.button-primary:hover {
+    background: #37D0A0;
+    color: white;
+}
+
+.actions {
+    margin-left: auto;
+}
+
+
+thead {
+    font-weight: bold;
+}
+
+.candidate-image {
+    border-radius: 50%;
+    border: 1px #e7e7e7 solid;
+}
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+
+
+ */
+