Skip to content

C
candi-date-tayo
Commit dc0f552a authored by Alexander Hans Collado Jr.'s avatar Alexander Hans Collado Jr.
Browse files
Options

added button styles and featured images for sections

parent 00d4a726
Show whitespace changes
Inline Side-by-side
Showing with 12809 additions and 10 deletions
Gemfile
View file @ dc0f552a
......@@ -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
View file @ dc0f552a
......@@ -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
View file @ dc0f552a
......@@ -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
View file @ dc0f552a
<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
View file @ dc0f552a
......@@ -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
View file @ dc0f552a
<%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 0 → 100644
View file @ dc0f552a
{"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 0 → 100644
View file @ dc0f552a
/*
* 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.
*
*/
public/assets/application-9893df45ee3bdaacc085af1efb0fa9eeeac21225cd1010b90afb613af8324d49.js 0 → 100644
View file @ dc0f552a
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment