better tables
This commit is contained in:
Tyrel Souza
parent
2a567232b7
commit
1e066555fe
@ -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;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
@ -44,12 +44,8 @@
|
|||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--/stories-->
|
<!--/stories-->
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,11 @@
|
|||||||
<h1>Editing project</h1>
|
<div class="row">
|
||||||
|
|
||||||
<%= render 'form' %>
|
<h1>Editing project</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
<%= link_to 'Show', @project %> |
|
<%= render 'form' %>
|
||||||
<%= link_to 'Back', root_path %>
|
|
||||||
|
<%= link_to 'Show', @project %> |
|
||||||
|
<%= link_to 'Back', root_path %>
|
||||||
|
</div>
|
||||||
@ -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>
|
||||||
@ -1,5 +1,9 @@
|
|||||||
<h1>New project</h1>
|
<div class="row">
|
||||||
|
<h1>New project</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
<%= render 'form' %>
|
<%= render 'form' %>
|
||||||
|
|
||||||
<%= link_to 'Back', root_path %>
|
<%= link_to 'Back', root_path %>
|
||||||
|
</div>
|
||||||
@ -1,36 +1,43 @@
|
|||||||
<p id="notice"><%= notice %></p>
|
<% if notice %>
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
<p>
|
<p id="notice"><%= notice %></p>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<p>
|
||||||
<strong>Title:</strong>
|
<strong>Title:</strong>
|
||||||
<%= @project.title %>
|
<%= @project.title %>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Status:</strong>
|
<strong>Status:</strong>
|
||||||
<%= @project.status %>
|
<%= @project.status %>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Requirements:</strong>
|
<strong>Requirements:</strong>
|
||||||
<%= @project.requirements %>
|
<%= @project.requirements %>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Design:</strong>
|
<strong>Design:</strong>
|
||||||
<%= @project.design %>
|
<%= @project.design %>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>Dev & Ops:</strong>
|
<strong>Dev & Ops:</strong>
|
||||||
<%= @project.devops %>
|
<%= @project.devops %>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<strong>QA & Launch:</strong>
|
<strong>QA & Launch:</strong>
|
||||||
<%= @project.qalaunch %>
|
<%= @project.qalaunch %>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<%= 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>
|
||||||
Loading…
Reference in New Issue
Block a user