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
|
||||
* 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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -44,12 +44,8 @@
|
||||
<div class="panel-body">
|
||||
|
||||
|
||||
<div class="row">
|
||||
<%= yield %>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--/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 %> |
|
||||
<%= link_to 'Back', root_path %>
|
||||
<%= render 'form' %>
|
||||
|
||||
<%= 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 %>
|
||||
<h3>Active (<%= @active_projects.count%>)</h3>
|
||||
<table>
|
||||
<table width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project</th>
|
||||
<th>Requirements</th>
|
||||
<th>Design</th>
|
||||
<th>Dev & Ops</th>
|
||||
<th>QA & Launch</th>
|
||||
<th width="30%">Project</th>
|
||||
<th width="17.5%">Requirements</th>
|
||||
<th width="17.5%">Design</th>
|
||||
<th width="17.5%">Dev & Ops</th>
|
||||
<th width="17.5%">QA & Launch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -28,14 +35,14 @@
|
||||
|
||||
<% if @upcoming_projects.count > 0 %>
|
||||
<h3>Upcoming (<%= @upcoming_projects.count%>)</h3>
|
||||
<table>
|
||||
<table width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project</th>
|
||||
<th>Requirements</th>
|
||||
<th>Design</th>
|
||||
<th>Dev & Ops</th>
|
||||
<th>QA & Launch</th>
|
||||
<th width="30%">Project</th>
|
||||
<th width="17.5%">Requirements</th>
|
||||
<th width="17.5%">Design</th>
|
||||
<th width="17.5%">Dev & Ops</th>
|
||||
<th width="17.5%">QA & Launch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -54,14 +61,14 @@
|
||||
|
||||
<% if @backlog_projects.count > 0 %>
|
||||
<h3>Backlog (<%= @backlog_projects.count%>)</h3>
|
||||
<table>
|
||||
<table width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project</th>
|
||||
<th>Requirements</th>
|
||||
<th>Design</th>
|
||||
<th>Dev & Ops</th>
|
||||
<th>QA & Launch</th>
|
||||
<th width="30%">Project</th>
|
||||
<th width="17.5%">Requirements</th>
|
||||
<th width="17.5%">Design</th>
|
||||
<th width="17.5%">Dev & Ops</th>
|
||||
<th width="17.5%">QA & Launch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -80,14 +87,14 @@
|
||||
|
||||
<% if @completed_projects.count > 0 %>
|
||||
<h3>Completed (<%= @completed_projects.count%>)</h3>
|
||||
<table>
|
||||
<table width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project</th>
|
||||
<th>Requirements</th>
|
||||
<th>Design</th>
|
||||
<th>Dev & Ops</th>
|
||||
<th>QA & Launch</th>
|
||||
<th width="30%">Project</th>
|
||||
<th width="17.5%">Requirements</th>
|
||||
<th width="17.5%">Design</th>
|
||||
<th width="17.5%">Dev & Ops</th>
|
||||
<th width="17.5%">QA & Launch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -104,3 +111,4 @@
|
||||
</table>
|
||||
<% 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>
|
||||
<strong>Title:</strong>
|
||||
<%= @project.title %>
|
||||
</p>
|
||||
<p id="notice"><%= notice %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="row">
|
||||
|
||||
<p>
|
||||
<strong>Status:</strong>
|
||||
<%= @project.status %>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Title:</strong>
|
||||
<%= @project.title %>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Requirements:</strong>
|
||||
<%= @project.requirements %>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Status:</strong>
|
||||
<%= @project.status %>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Design:</strong>
|
||||
<%= @project.design %>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Requirements:</strong>
|
||||
<%= @project.requirements %>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Dev & Ops:</strong>
|
||||
<%= @project.devops %>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Design:</strong>
|
||||
<%= @project.design %>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>QA & Launch:</strong>
|
||||
<%= @project.qalaunch %>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Dev & Ops:</strong>
|
||||
<%= @project.devops %>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>QA & Launch:</strong>
|
||||
<%= @project.qalaunch %>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<%= link_to 'Edit', edit_project_path(@project) %> |
|
||||
<%= link_to 'Back', root_path %>
|
||||
<%= link_to 'Edit', edit_project_path(@project) %> |
|
||||
<%= link_to 'Back', root_path %>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user