Make landing page responsive.

This commit is contained in:
benji 2016-02-17 15:09:49 +01:00
parent d9714b853d
commit 03a86f89af
7 changed files with 64 additions and 51 deletions

View file

@ -0,0 +1,44 @@
.landing_columns {
& > div {
border-style: solid;
border-color: black;
border-width: 0;
text-align: center;
@media screen and (min-width: 48em) {
border-width: 0 1px;
padding: 1em 3em;
&:first-child {
text-align: right;
border-left: 0;
}
&:last-child {
text-align: left;
border-right: 0;
}
a.login-button {
margin: 2em 2em 0 0;
}
}
}
}
a.login-button {
font-size: 200%;
}
.full-table {
width: 100%;
}
.landing-column {
padding: 1em;
}
.columns-title {
text-align: center;
}
.shame-percentage {
text-align: right
}

View file

@ -0,0 +1,3 @@
// Place all the styles related to the pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

View file

@ -1,35 +0,0 @@
// Place all the styles related to the pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.shame-percentage {
text-align: right
}
a.login-button {
font-size: 200%;
margin: 2em;
}
.columns-title {
text-align: center;
}
.left-column {
text-align: right;
padding: 1em 3em;
border-right: 1px solid black;
}
.right-column {
text-align: left;
padding: 1em 3em;
border-left: 1px solid black;
}
.full-table {
width: 100%;
}
.landing-column {
padding: 1em;
}

View file

@ -0,0 +1,9 @@
.pure-u-1
.pure-menu.pure-menu-horizontal
= link_to "Tab", root_path, class: "pure-menu-heading pure-menu-link"
%ul.pure-menu-list
%li.pure-menu-item
= link_to current_user.name.capitalize, current_user, class: "pure-menu-link"
- if current_user.penning
%li.pure-menu-item
=link_to "Zeus", User.zeus, class: "pure-menu-link"

View file

@ -2,22 +2,14 @@
%html %html
%head %head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%meta{:name => "viewport", :content => "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}
%title Tab %title Tab
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags = csrf_meta_tags
%body %body
.pure-g .pure-g
- if current_user = render 'menu' if current_user
.pure-u-1
.pure-menu.pure-menu-horizontal
= link_to "Tab", root_path, class: "pure-menu-heading pure-menu-link"
%ul.pure-menu-list
%li.pure-menu-item
= link_to current_user.name.capitalize, current_user, class: "pure-menu-link"
- if current_user.penning
%li.pure-menu-item
=link_to "Zeus", User.zeus, class: "pure-menu-link"
.pure-u-1 .pure-u-1
= render 'partials/flash' = render 'flash'
= yield = yield

View file

@ -1,18 +1,18 @@
%h1.columns-title Tab %h1.columns-title Tab
= javascript_include_tag "//www.google.com/jsapi", "chartkick" = javascript_include_tag "//www.google.com/jsapi", "chartkick"
- unless user_signed_in? - unless user_signed_in?
.pure-g .pure-g.landing_columns
.pure-u-1-2.left-column .pure-u-1.pure-u-md-1-2
%h2 Authentication %h2 Authentication
%p Log een keer in en betaal uw schulden! %p Log een keer in en betaal uw schulden!
%p= link_to "Log in met Zeus WPI", user_omniauth_authorize_path(:zeuswpi), class: "pure-button pure-button-primary login-button" %p= link_to "Log in met Zeus WPI", user_omniauth_authorize_path(:zeuswpi), class: "pure-button pure-button-primary login-button"
.pure-u-1-2.right-column .pure-u-1.pure-u-md-1-2
%h2 Pie of Shame %h2 Pie of Shame
= pie_chart @statistics.shamehash = pie_chart @statistics.shamehash
- else - else
%h2.columns-title Cute Little Statistics %h2.columns-title Cute Little Statistics
.pure-g .pure-g
.pure-u-1-2.landing-column .pure-u-1.pure-u-md-1-2.landing-column
%h3.columns-title Pie of Shame %h3.columns-title Pie of Shame
= pie_chart @statistics.shamehash = pie_chart @statistics.shamehash
%h3.columns-title Table of Shame %h3.columns-title Table of Shame
@ -27,7 +27,7 @@
// Won't divide by zero because there won't be any users with // Won't divide by zero because there won't be any users with
// a shameful debt if the total debt is zero. // a shameful debt if the total debt is zero.
%td.shame-percentage= "#{-100 * user.balance / @statistics.total_debt}%" %td.shame-percentage= "#{-100 * user.balance / @statistics.total_debt}%"
.pure-u-1-2.landing-column .pure-u-1.pure-u-md-1-2.landing-column
%h3.columns-title Distribution of Debt Sources %h3.columns-title Distribution of Debt Sources
= pie_chart @statistics.by_issuer = pie_chart @statistics.by_issuer
%h3.columns-title Top Debt Creators %h3.columns-title Top Debt Creators