From 9df3dfcfd5fa0836008a40da2edb22fb781cd430 Mon Sep 17 00:00:00 2001 From: Brigitte Warner Date: Thu, 14 Aug 2014 20:06:44 -0400 Subject: [PATCH] application nav WIP --- app/assets/stylesheets/application.css | 57 ++++++++++++++++++- .../bootstrap_and_overrides.css.scss | 6 -- app/controllers/application_controller.rb | 2 + app/views/layouts/application.html.haml | 56 +++++++++++------- app/views/site/index.html.haml | 21 ------- 5 files changed, 94 insertions(+), 48 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index dc440fe..108df86 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -9,12 +9,30 @@ * compiled file, but it's generally better to create a new file per style scope. * *= require_self - *= require datepicker *= require bootstrap + *= require datepicker *= require bootstrap-timepicker *= require bootstrap_and_overrides */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; +} + +body { + background-color: #fff; + color: #333; + font-size: 13px; + line-height: 18px; +} + +.x-boundlist-item { + white-space: nowrap; +} + .container { max-width: 940px; margin: 0 auto; @@ -30,6 +48,10 @@ p { padding: 20px 0; } +a { +text-decoration: none; +} + .check_box { width: 30px; height: 30px; @@ -38,4 +60,37 @@ p { label { font-size: x-large; +} + +/* navigation styling */ + +.navbar-default { + background-color: #428bca; + border-color: #428bca; + border-radius: 0px; +} + +.navbar > .container-fluid .navbar-brand { +margin-left: -15px; +} + +.navbar-default .navbar-brand { + color: #ffffff; +} + +.navbar-default .navbar-nav > li > a { + color: #ffffff; + list-style: none; +} + +.navbar-brand { + float: left; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; + height: 50px; +} + +.navbar-default a:hover { + color: #d1b84a !important; } \ No newline at end of file diff --git a/app/assets/stylesheets/bootstrap_and_overrides.css.scss b/app/assets/stylesheets/bootstrap_and_overrides.css.scss index 891367e..87857dd 100644 --- a/app/assets/stylesheets/bootstrap_and_overrides.css.scss +++ b/app/assets/stylesheets/bootstrap_and_overrides.css.scss @@ -1,9 +1,3 @@ -body { - padding-top: 60px; - padding-left: 20px; -} - - // Set the correct sprite paths $iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png'); $iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png'); diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 6641120..8d8ad05 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -1,5 +1,7 @@ class ApplicationController < ActionController::Base before_filter :authenticate_user! protect_from_forgery + + layout 'application' end diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 0666f2e..5fa4ba6 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -5,31 +5,47 @@ %meta{ name: "viewport", content: "width=device-width", "initial-scale" => "1.0"} %title= content_for?(:title) ? yield(:title) : "Velocipede" = csrf_meta_tags - = stylesheet_link_tag "bootstrap_and_overrides", "datepicker", "bootstrap-timepicker", :media => "all" + = stylesheet_link_tag "bootstrap", "application", :media => "all" /[if lt IE 9] = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js" - :css - body { - padding-top: 5px; - } - .x-boundlist-item { - white-space: nowrap; - } - + %body - .container + %nav{class: "navbar navbar-default", role: "navigation"} + %div{class: "container-fluid"} + /[Brand and toggle get grouped for better mobile display] + %div{class: "navbar-header"} + %button{type: "button", class: "navbar-toggle", 'data-toggle' => "collapse", 'data-target' => "#bs-example-navbar-collapse-1"} + %span{class: "sr-only"} Toggle navigation + %span.icon-bar + %span.icon-bar + %span.icon-bar + %a{class:"navbar-brand", href:"/"} + = image_tag 'velo_logo.png' - .content - - if flash[:notice] - %p{:class => 'notice'}= flash[:notice] - - if flash[:alert] - %p{:class => 'alert'}= flash[:alert] - .row - .span12 - = yield + /[Collect the nav links, forms, and other content for toggling] + %div{class: "collapse navbar-collapse", id:"bs-example-navbar-collapse-1"} + %ul{class: "nav navbar-nav"} + %li + %a{href: new_time_entry_path} Add Time Entry + %li + %a{href: time_entries_path} View Timesheet + %li + %a{href: new_bike_path} Add Bike + %li + %a{href: bike_path(@bike)} View Your Bike + %ul{class: "nav navbar-nav navbar-right"} + - if user_signed_in? + %li + %input{id: "index_logout", value: "Logout", "data-url" => destroy_user_session_path } + + .container + - if flash[:notice] + %p{:class => 'notice'}= flash[:notice] + - if flash[:alert] + %p{:class => 'alert'}= flash[:alert] - %footer - %p © BikeShed #{Time.now.year} + %footer + %p © BikeShed #{Time.now.year} = javascript_include_tag "application" = javascript_include_tag params[:controller] diff --git a/app/views/site/index.html.haml b/app/views/site/index.html.haml index 04b6e1a..e69de29 100644 --- a/app/views/site/index.html.haml +++ b/app/views/site/index.html.haml @@ -1,21 +0,0 @@ -= stylesheet_link_tag "bootstrap_and_overrides", :media => "all" -%h2 Dashboard - -%p - %p - %a{class: "btn btn-lg btn-block btn-primary", href: new_time_entry_path} Add Time Entry - %p - %a{class: "btn btn-lg btn-block btn-primary", href: time_entries_path} View Timesheet -- if can? :manage, Bike - %p - %a{class: "btn btn-lg btn-block btn-primary", href: new_bike_path} Add Bike - -- if !@bike.nil? - %p - %a{class: "btn btn-lg btn-block btn-primary", href: bike_path(@bike)} View Your Bike - -%p - %p - %a{class: "btn btn-lg btn-block btn-primary hidden-xs", href: admin_index_path} Desktop View - %p - %input{id: "index_logout", value: "Logout", type: "button", class: "btn btn-lg btn-block btn-danger", "data-url" => destroy_user_session_path }