From 1e066555fe59d7a766d402877375624abec0f6aa Mon Sep 17 00:00:00 2001 From: Tyrel Souza Date: Fri, 7 Nov 2014 15:37:59 -0500 Subject: [PATCH] better tables --- app/assets/stylesheets/application.css | 171 +------------------- app/assets/stylesheets/projects.css.scss | 196 +++++++++++++++++++++++ app/views/layouts/application.html.erb | 4 - app/views/projects/edit.html.erb | 13 +- app/views/projects/index.html.erb | 58 ++++--- app/views/projects/new.html.erb | 10 +- app/views/projects/show.html.erb | 61 +++---- 7 files changed, 280 insertions(+), 233 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 6514ee6..d0dc3f4 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -10,178 +10,9 @@ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * + *= require bootstrap *= require_tree . *= require_self - *= require bootstrap */ -/* override bootstrap styles */ -@import url('http://fonts.googleapis.com/css?family=Oswald:300,400:latin,latin-ext'); - -.navbar-form input, .form-inline input { - width:auto; -} - -body { - color:#646464; - background-color:#FAFAFA; -} - -h1,h2,h3,.highlight,.navbar a,#masthead h4 { - font-family:'Oswald',arial narrow,sans-serif; -} - -footer { - - margin-top:40px; - padding-top:40px; - padding-bottom:40px; - background-color:#cecece; - -} -#masthead { - min-height:311px; - background-color:#1D84FB; - color:#aaaacc; - background-image: url('/assets/bg_header.png'); - background-repeat: no-repeat; - background-attachment: fixed; - background-position: center 0 ; -} - -#masthead h1 { - font-size: 55px; - line-height: 1; - color:#fefeff; - margin-top:50px; -} - -#masthead .well { - clear:both; - - /*margin-top:31px;*/ - background-color:#1D84FB; - border:none; - -webkit-box-shadow: none; - -moz-box-shadow: none ; - box-shadow: none; - color:#fff; - /*min-height:127px;*/ -} - -#topPanel { - padding-top:0px; - padding-left:22px; - padding-right:22px; -} -#topPanel .panel-body { - padding-top:0px; -} - -.navbar.affix { - position:fixed; - top:0; - width:100%; -} - -.top-spacer { - background-color:#ffffff; - height:40px; -} - -a,a:hover { - color:#223344; - text-decoration:none; -} - -.icon-bar { - background-color:#fff; -} - -@media screen and (min-width: 768px) { - #masthead h1 { - font-size: 80px; - } -} - -.navbar-bright { - background-color:#111166; - color:#fff; - margin-bottom: 0; - border-width: 0; -} - -.navbar-bright a, .navbar-bright .navbar-brand, #masthead h4 { - color:#ccccdd; - font-size:14px; - text-transform: uppercase; - letter-spacing:.08em; -} - -.navbar-bright li > a:hover { - background-color:#000044; -} - -.dropdown-menu { - min-width: 250px; -} - -.caret { - color:#fff; -} - -.navbar-toggle { - color:#fff; - border-width:0; -} - -.navbar-toggle:hover { - background-color:#fff; -} - -.panel { - clear:both; - margin-top: -120px; - background-color: #fff; - border:3px solid #3AB1FE ! important; - border-radius:0; - padding:15px; -} - -.thumbnail { - margin-bottom:8px; -} - -.img-container { - overflow:hidden; - height:170px; -} - -.img-container img { - min-width:280px; - min-height:180px; - max-width:380px; - max-height:280px; -} - -.txt-container { - overflow:hidden; - height:100px; -} - -.panel .lead { - overflow:hidden; - height:90px; -} - -.label-float{ - margin:0 auto; - position: absolute; - top: 0; - z-index: 1; - width:100%; - opacity:.9; - padding:6px; - color:#fff; -} diff --git a/app/assets/stylesheets/projects.css.scss b/app/assets/stylesheets/projects.css.scss index 7b9c6ec..86923c5 100644 --- a/app/assets/stylesheets/projects.css.scss +++ b/app/assets/stylesheets/projects.css.scss @@ -1,3 +1,199 @@ // Place all the styles related to the Projects controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ + +//colors +$color_storm_dust_approx: #646464; +$alabaster: #fafafa; +$color_celeste_approx: #cecece; +$color_dodger_blue_approx: #1d84fb; +$color_logan_approx: #aaaacc; +$color_white_approx: #fefeff; +$white: #fff; +$color_ebony_clay_approx: #223344; +$color_arapawa_approx: #111166; +$color_mischka_approx: #ccccdd; +$color_stratos_approx: #000044; +$color_picton_blue_approx: #3ab1fe; + +//fonts +$font_0: 'Open Sans'; +$font_1: 'Open Sans Light'; +$font_2: 'Open Sans Bold'; + +//@extend-elements +//original selectors +//.navbar-bright a, .navbar-bright .navbar-brand, #masthead h4 +%extend_1 { + color: $color_mischka_approx; + font-size: 14px; + text-transform: uppercase; + letter-spacing: .08em; +} + + +//@import url('http://fonts.googleapis.com/css?family=Oswald:300,400:latin,latin-ext'); +@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,300,600'); +body { + color: $color_storm_dust_approx; + background-color: #FAFAFA; +} +h1 { + font-family: $font_0, $font_1, $font_2; +} +h2 { + font-family: $font_0, $font_1, $font_2; +} +h3 { + font-family: $font_0, $font_1, $font_2; +} +.highlight { + font-family: $font_0, $font_1, $font_2; +} +.navbar { + a { + font-family: $font_0, $font_1, $font_2; + } + &.affix { + position: fixed; + top: 0; + width: 100%; + } +} +#masthead { + min-height: 311px; + background-color: #1D84FB; + color: $color_logan_approx; + background-image: url('/assets/bg_header.png'); + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center 0; + h4 { + font-family: $font_0, $font_1, $font_2; + @extend %extend_1; + } + h1 { + font-size: 55px; + line-height: 1; + color: $color_white_approx; + margin-top: 50px; + } + .well { + clear: both; + background-color: #1D84FB; + border: none; + //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: none; + color: $white; + } +} +footer { + margin-top: 40px; + padding-top: 40px; + padding-bottom: 40px; + background-color: $color_celeste_approx; +} +#topPanel { + padding-top: 0; + padding-left: 22px; + padding-right: 22px; + .panel-body { + padding-top: 0; + } +} +.top-spacer { + background-color: $white; + height: 40px; +} +a { + color: $color_ebony_clay_approx; + text-decoration: none; + &:hover { + color: $color_ebony_clay_approx; + text-decoration: none; + } +} +.icon-bar { + background-color: $white; +} +@media screen and (min-width: 768px) { + #masthead h1 { + font-size: 80px; + } +} +.navbar-bright { + background-color: $color_arapawa_approx; + color: $white; + margin-bottom: 0; + border-width: 0; + a { + @extend %extend_1; + } + .navbar-brand { + @extend %extend_1; + } + li > a:hover { + background-color: $color_stratos_approx; + } +} +.dropdown-menu { + min-width: 250px; +} +.caret { + color: $white; +} +.navbar-toggle { + color: $white; + border-width: 0; + &:hover { + background-color: $white; + } +} +.panel { + clear: both; + margin-top: -120px; + background-color: $white; + border-radius: 15; + padding: 15px; + box-shadow: 2px 2px 3px #aaaaaa; + + + .lead { + overflow: hidden; + height: 90px; + + } +} +.thumbnail { + margin-bottom: 8px; +} +.img-container { + overflow: hidden; + height: 170px; + img { + min-width: 280px; + min-height: 180px; + max-width: 380px; + max-height: 280px; + } +} +.txt-container { + overflow: hidden; + height: 100px; +} +.label-float { + margin: 0 auto; + position: absolute; + top: 0; + z-index: 1; + width: 100%; + opacity: .9; + padding: 6px; + color: $white; +} +.navbar-form input { + width: auto; +} +.form-inline input { + width: auto; +} \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 00bc729..0914d83 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -44,12 +44,8 @@
-
<%= yield %> - -
- diff --git a/app/views/projects/edit.html.erb b/app/views/projects/edit.html.erb index 7375a3d..99165b3 100644 --- a/app/views/projects/edit.html.erb +++ b/app/views/projects/edit.html.erb @@ -1,6 +1,11 @@ -

Editing project

+
-<%= render 'form' %> +

Editing project

+
+
-<%= link_to 'Show', @project %> | -<%= link_to 'Back', root_path %> + <%= render 'form' %> + + <%= link_to 'Show', @project %> | + <%= link_to 'Back', root_path %> +
\ No newline at end of file diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb index 773790e..834c425 100644 --- a/app/views/projects/index.html.erb +++ b/app/views/projects/index.html.erb @@ -1,15 +1,22 @@ -
+
+ +

Projects (<%= @projects.count %>)

+
+ + +
+ <% if @active_projects.count > 0 %>

Active (<%= @active_projects.count%>)

- +
- - - - - + + + + + @@ -28,14 +35,14 @@ <% if @upcoming_projects.count > 0 %>

Upcoming (<%= @upcoming_projects.count%>)

-
ProjectRequirementsDesignDev & OpsQA & LaunchProjectRequirementsDesignDev & OpsQA & Launch
+
- - - - - + + + + + @@ -54,14 +61,14 @@ <% if @backlog_projects.count > 0 %>

Backlog (<%= @backlog_projects.count%>)

-
ProjectRequirementsDesignDev & OpsQA & LaunchProjectRequirementsDesignDev & OpsQA & Launch
+
- - - - - + + + + + @@ -80,14 +87,14 @@ <% if @completed_projects.count > 0 %>

Completed (<%= @completed_projects.count%>)

-
ProjectRequirementsDesignDev & OpsQA & LaunchProjectRequirementsDesignDev & OpsQA & Launch
+
- - - - - + + + + + @@ -104,3 +111,4 @@
ProjectRequirementsDesignDev & OpsQA & LaunchProjectRequirementsDesignDev & OpsQA & Launch
<% end %> +
\ No newline at end of file diff --git a/app/views/projects/new.html.erb b/app/views/projects/new.html.erb index a08a294..65411fe 100644 --- a/app/views/projects/new.html.erb +++ b/app/views/projects/new.html.erb @@ -1,5 +1,9 @@ -

New project

+
+

New project

+
+
-<%= render 'form' %> + <%= render 'form' %> -<%= link_to 'Back', root_path %> + <%= link_to 'Back', root_path %> +
\ No newline at end of file diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb index 2ab9b1c..be59785 100644 --- a/app/views/projects/show.html.erb +++ b/app/views/projects/show.html.erb @@ -1,36 +1,43 @@ -

<%= notice %>

+<% if notice %> +
-

- Title: - <%= @project.title %> -

+

<%= notice %>

+
+<% end %> +
-

- Status: - <%= @project.status %> -

+

+ Title: + <%= @project.title %> +

-

- Requirements: - <%= @project.requirements %> -

+

+ Status: + <%= @project.status %> +

-

- Design: - <%= @project.design %> -

+

+ Requirements: + <%= @project.requirements %> +

-

- Dev & Ops: - <%= @project.devops %> -

+

+ Design: + <%= @project.design %> +

-

- QA & Launch: - <%= @project.qalaunch %> -

+

+ Dev & Ops: + <%= @project.devops %> +

+ +

+ QA & Launch: + <%= @project.qalaunch %> +

-<%= link_to 'Edit', edit_project_path(@project) %> | -<%= link_to 'Back', root_path %> + <%= link_to 'Edit', edit_project_path(@project) %> | + <%= link_to 'Back', root_path %> +
\ No newline at end of file