tyrel/akam_roadmap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better tables

Browse Source
This commit is contained in:
Tyrel Souza 2014-11-07 15:37:59 -05:00
parent 2a567232b7
commit 1e066555fe
7 changed files with 280 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
app/assets/stylesheets/application.css
View File

@ -10,178 +10,9 @@
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope. * file per style scope.
* *
*= require bootstrap
*= require_tree . *= require_tree .
*= require_self *= 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;
}

196
app/assets/stylesheets/projects.css.scss
View File

@ -1,3 +1,199 @@
// Place all the styles related to the Projects controller here. // Place all the styles related to the Projects controller here.
// They will automatically be included in application.css. // They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/ // 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;
}

4
app/views/layouts/application.html.erb
View File

@ -44,12 +44,8 @@
<div class="panel-body"> <div class="panel-body">
<div class="row">
<%= yield %> <%= yield %>
</div>
<!--/stories--> <!--/stories-->

5
app/views/projects/edit.html.erb
View File

@ -1,6 +1,11 @@
<div class="row">
<h1>Editing project</h1> <h1>Editing project</h1>
</div>
<div class="row">
<%= render 'form' %> <%= render 'form' %>
<%= link_to 'Show', @project %> | <%= link_to 'Show', @project %> |
<%= link_to 'Back', root_path %> <%= link_to 'Back', root_path %>
</div>

58
app/views/projects/index.html.erb
View File

@ -1,15 +1,22 @@
<br> <div class="row">
<h2>Projects (<%= @projects.count %>)</h2>
</div>
<div class="row">
<% if @active_projects.count > 0 %> <% if @active_projects.count > 0 %>
<h3>Active (<%= @active_projects.count%>)</h3> <h3>Active (<%= @active_projects.count%>)</h3>
<table> <table width="100%">
<thead> <thead>
<tr> <tr>
<th>Project</th> <th width="30%">Project</th>
<th>Requirements</th> <th width="17.5%">Requirements</th>
<th>Design</th> <th width="17.5%">Design</th>
<th>Dev & Ops</th> <th width="17.5%">Dev & Ops</th>
<th>QA & Launch</th> <th width="17.5%">QA & Launch</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -28,14 +35,14 @@
<% if @upcoming_projects.count > 0 %> <% if @upcoming_projects.count > 0 %>
<h3>Upcoming (<%= @upcoming_projects.count%>)</h3> <h3>Upcoming (<%= @upcoming_projects.count%>)</h3>
<table> <table width="100%">
<thead> <thead>
<tr> <tr>
<th>Project</th> <th width="30%">Project</th>
<th>Requirements</th> <th width="17.5%">Requirements</th>
<th>Design</th> <th width="17.5%">Design</th>
<th>Dev & Ops</th> <th width="17.5%">Dev & Ops</th>
<th>QA & Launch</th> <th width="17.5%">QA & Launch</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -54,14 +61,14 @@
<% if @backlog_projects.count > 0 %> <% if @backlog_projects.count > 0 %>
<h3>Backlog (<%= @backlog_projects.count%>)</h3> <h3>Backlog (<%= @backlog_projects.count%>)</h3>
<table> <table width="100%">
<thead> <thead>
<tr> <tr>
<th>Project</th> <th width="30%">Project</th>
<th>Requirements</th> <th width="17.5%">Requirements</th>
<th>Design</th> <th width="17.5%">Design</th>
<th>Dev & Ops</th> <th width="17.5%">Dev & Ops</th>
<th>QA & Launch</th> <th width="17.5%">QA & Launch</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -80,14 +87,14 @@
<% if @completed_projects.count > 0 %> <% if @completed_projects.count > 0 %>
<h3>Completed (<%= @completed_projects.count%>)</h3> <h3>Completed (<%= @completed_projects.count%>)</h3>
<table> <table width="100%">
<thead> <thead>
<tr> <tr>
<th>Project</th> <th width="30%">Project</th>
<th>Requirements</th> <th width="17.5%">Requirements</th>
<th>Design</th> <th width="17.5%">Design</th>
<th>Dev & Ops</th> <th width="17.5%">Dev & Ops</th>
<th>QA & Launch</th> <th width="17.5%">QA & Launch</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -104,3 +111,4 @@
</table> </table>
<% end %> <% end %>
</div>

4
app/views/projects/new.html.erb
View File

@ -1,5 +1,9 @@
<div class="row">
<h1>New project</h1> <h1>New project</h1>
</div>
<div class="row">
<%= render 'form' %> <%= render 'form' %>
<%= link_to 'Back', root_path %> <%= link_to 'Back', root_path %>
</div>

7
app/views/projects/show.html.erb
View File

@ -1,4 +1,10 @@
<% if notice %>
<div class="row">
<p id="notice"><%= notice %></p> <p id="notice"><%= notice %></p>
</div>
<% end %>
<div class="row">
<p> <p>
<strong>Title:</strong> <strong>Title:</strong>
@ -34,3 +40,4 @@
<%= link_to 'Edit', edit_project_path(@project) %> | <%= link_to 'Edit', edit_project_path(@project) %> |
<%= link_to 'Back', root_path %> <%= link_to 'Back', root_path %>
</div>