sr-rolando/contactorama
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Start switching from 1140 grid to Twitter Bootstrap.

Browse source
This commit is contained in:
Roland Jesse 2012-04-26 23:46:13 +02:00
parent 2a76561200
commit 04f55abef9
11 changed files with 79 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Gemfile
View file

@ -5,6 +5,8 @@ gem 'rails', '3.2.3'
gem 'mysql2', '0.3.11'
gem 'bootstrap-sass', '2.0.2'
# Bourbon: fancy css mixins – https://github.com/thoughtbot/bourbon
gem 'bourbon', '1.4.0'

2
Gemfile.lock
View file

@ -42,6 +42,7 @@ GEM
addressable (2.2.7)
arel (3.0.2)
bcrypt-ruby (3.0.1)
bootstrap-sass (2.0.2)
bourbon (1.4.0)
sass (>= 3.1)
builder (3.0.0)
@ -179,6 +180,7 @@ PLATFORMS
DEPENDENCIES
activeadmin (= 0.4.0)
bcrypt-ruby (= 3.0.1)
bootstrap-sass (= 2.0.2)
bourbon (= 1.4.0)
cancan (= 1.6.5)
capistrano (= 2.5.21)

2
app/assets/javascripts/application.js
View file

@ -1,4 +1,4 @@
//= require jquery
//= require jquery_ujs
//= require_self
//= require bootstrap
//= require_tree .

80
app/assets/stylesheets/1140.css
View file

@ -1,80 +0,0 @@
/* CSS Resets */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
/* The 1140px Grid by Andy Taylor – http://cssgrid.net – http://www.twitter.com/andytlr – http://www.catchingzebra.com */
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
max-width: 1140px;
margin: 0 auto;
overflow: hidden;
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
}
.onecol {
width: 4.85%;
}
.twocol {
width: 13.5%;
}
.threecol {
width: 22.15%;
}
.fourcol {
width: 30.8%;
}
.fivecol {
width: 39.45%;
}
.sixcol {
width: 48.1%;
}
.sevencol {
width: 56.75%;
}
.eightcol {
width: 65.4%;
}
.ninecol {
width: 74.05%;
}
.tencol {
width: 82.7%;
}
.elevencol {
width: 91.35%;
}
.twelvecol {
width: 100%;
float: left;
}
.last {
margin-right: 0px;
}
img, object, embed {
max-width: 100%;
}

16
app/assets/stylesheets/application.css.scss
View file

@ -1,5 +1,17 @@
@import "bourbon";
@import "reset";
@import "1140";
@import "layout";
@import "big_form";
@import "bootstrap_and_overrides";
// Gray background for page content
.content {
background-color: #eee;
padding: 20px;
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

6
app/assets/stylesheets/bootstrap_and_overrides.css.scss vendored Normal file
View file

@ -0,0 +1,6 @@
// Set the correct sprite paths
$iconSpritePath: image-path('glyphicons-halflings.png');
$iconWhiteSpritePath: image-path('glyphicons-halflings-white.png');
@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";

43
app/assets/stylesheets/ie.css
View file

@ -1,43 +0,0 @@
.onecol {
width: 4.7%;
}
.twocol {
width: 13.2%;
}
.threecol {
width: 22.05%;
}
.fourcol {
width: 30.6%;
}
.fivecol {
width: 39%;
}
.sixcol {
width: 48%;
}
.sevencol {
width: 56.75%;
}
.eightcol {
width: 61.6%;
}
.ninecol {
width: 74.05%;
}
.tencol {
width: 82%;
}
.elevencol {
width: 91.35%;
}

23
app/assets/stylesheets/mobile.css
View file

@ -1,23 +0,0 @@
.row, .body, .container {
width: 100%;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
/* Type presets */
body {
font-size: 16px;
line-height: 24px;
}

6
app/views/layouts/_messages.html.erb Normal file
View file

@ -0,0 +1,6 @@
<% flash.each do |name, msg| %>
<div class="alert alert-<%= name == :notice ? "success" : "error" %>">
<a class="close" data-dismiss="alert">×</a>
<%= content_tag :div, msg, :id => "flash_#{name}" if msg.is_a?(String) %>
</div>
<% end %>

12
app/views/layouts/_navigation.html.erb Normal file
View file

@ -0,0 +1,12 @@
<span class="logo_contact">Contact</span><span class="logo_o-rama">-o-Rama</span>
<ul class="nav">
<li><%= link_to 'Home', root_path %></li>
<li><%= link_to 'A..Z', contacts_path %></li>
<li><%= link_to 'Birthdays', birthdays_path %></li>
<li><%= link_to 'New', new_contact_path %></li>
<% if user_signed_in? %>
<li><%= link_to '(|)', destroy_user_session_path, :method => 'delete' %></li>
<% else %>
<li><%= link_to('Login', new_user_session_path) %></li>
<% end %>
</ul>

94
app/views/layouts/application.html.erb
View file

@ -1,69 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Contact-o-Rama - <%= yield(:title) %></title>
<%= stylesheet_link_tag "application" %>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "Contact-o-Rama" %></title>
<meta name="description" content="The app for managing contacts. With Birthdays!">
<meta name="author" content="Tailorama">
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tag %>
<%= csrf_meta_tags %>
<%= yield(:head) %>
</head>
<body>
<%# The new test header. %>
<div class="header">
<div class="container">
<div class="row">
<div class="threecol header_home"><span class="logo_contact">Contact</span><span class="logo_o-rama">-o-Rama</span></div>
<div class="fourcol header_menu">
<%= link_to 'Home', root_path %>
<%= link_to 'A..Z', contacts_path %>
<%= link_to 'Birthdays', birthdays_path %>
<%= link_to 'New', new_contact_path %>
<header class="navbar navbar-fixed-top">
<nav class="navbar-inner">
<div class="container">
<%= render 'layouts/navigation' %>
</div>
<div class="onecol header_search">
<%= form_tag("/search", :method => "get") do %>
<%= text_field_tag(:q, nil, :placeholder => "Search…") %>
<% end %>
</div>
<div class="fourcol last header_user">
<% if current_user.nil? %>
&nbsp;
<% else %>
<%= current_user.email %>
(<%= link_to '|', destroy_user_session_path %>)
<% end %>
</div>
</div>
</div>
</div>
<br /><br /><br />
<div class="container">
<% unless flash.empty? %>
<div class="row">
<div class="fourcol">&nbsp;</div>
<div class="fourcol flash">
<%# examples: flash[:error] (:notice, ...), needs: respective css 'id' elements %>
<% flash.each do | key, msg | %>
<%= content_tag(:p, msg, :id => key) if flash[key] %>
<% end %>
</div>
<div class="fourcol">&nbsp;</div>
</div>
<% end %>
<%= yield %>
<%# Footer %>
<div class="row">
<div class="twelvecol" id="footer">
<span class="copyright">&copy; 2012 <a href="http://tailorama.com/">Tailorama</a></span>
&middot;
<span class="imprint"><a href="http://tailorama.de/impressum/">imprint</a></span>
</div>
</div>
</div> <%# end container %>
</nav>
</header>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
</div> <!--! end of .content -->
<footer>
<div class="row">
<div class="span12" id="footer">
<span class="copyright">&copy; 2012 <a href="http://tailorama.com/">Tailorama</a></span>
&middot;
<span class="imprint"><a href="http://tailorama.de/impressum/">imprint</a></span>
</div>
</div>
</footer>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>