Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Use simple form and twitter bootstrap

  • Loading branch information...
commit 5ef5ce7f586b9d4198fe1ef1115492fd8223ee89 1 parent ff58d35
@pkordel pkordel authored
View
4 Gemfile
@@ -1,6 +1,6 @@
source 'https://rubygems.org'
-gem 'rails', '3.2.1'
+gem 'rails', '3.2.2'
gem 'thin'
@@ -14,6 +14,7 @@ group :assets do
# gem 'therubyracer'
gem 'uglifier', '>= 1.0.3'
+ gem 'bootstrap-sass'
end
gem 'jquery-rails'
@@ -33,6 +34,7 @@ gem 'friendly_id', '~> 4.0.0'
# View related
gem 'slim-rails'
gem 'kaminari'
+gem 'simple_form'
gem 'heroku', :group => :development
View
68 Gemfile.lock
@@ -18,12 +18,12 @@ GIT
GEM
remote: https://rubygems.org/
specs:
- actionmailer (3.2.1)
- actionpack (= 3.2.1)
+ actionmailer (3.2.2)
+ actionpack (= 3.2.2)
mail (~> 2.4.0)
- actionpack (3.2.1)
- activemodel (= 3.2.1)
- activesupport (= 3.2.1)
+ actionpack (3.2.2)
+ activemodel (= 3.2.2)
+ activesupport (= 3.2.2)
builder (~> 3.0.0)
erubis (~> 2.7.0)
journey (~> 1.0.1)
@@ -31,23 +31,24 @@ GEM
rack-cache (~> 1.1)
rack-test (~> 0.6.1)
sprockets (~> 2.1.2)
- activemodel (3.2.1)
- activesupport (= 3.2.1)
+ activemodel (3.2.2)
+ activesupport (= 3.2.2)
builder (~> 3.0.0)
- activerecord (3.2.1)
- activemodel (= 3.2.1)
- activesupport (= 3.2.1)
- arel (~> 3.0.0)
+ activerecord (3.2.2)
+ activemodel (= 3.2.2)
+ activesupport (= 3.2.2)
+ arel (~> 3.0.2)
tzinfo (~> 0.3.29)
- activeresource (3.2.1)
- activemodel (= 3.2.1)
- activesupport (= 3.2.1)
- activesupport (3.2.1)
+ activeresource (3.2.2)
+ activemodel (= 3.2.2)
+ activesupport (= 3.2.2)
+ activesupport (3.2.2)
i18n (~> 0.6)
multi_json (~> 1.0)
addressable (2.2.6)
- arel (3.0.0)
+ arel (3.0.2)
bcrypt-ruby (3.0.1)
+ bootstrap-sass (2.0.1)
builder (3.0.0)
capybara (1.1.2)
mime-types (>= 1.16)
@@ -111,7 +112,7 @@ GEM
libxml-ruby (>= 1.1.4)
rake
rdoc
- journey (1.0.1)
+ journey (1.0.3)
jquery-rails (2.0.0)
railties (>= 3.2.0.beta, < 5.0)
thor (~> 0.14)
@@ -124,7 +125,7 @@ GEM
launchy (2.0.5)
addressable (~> 2.2.6)
libxml-ruby (2.2.2)
- mail (2.4.1)
+ mail (2.4.3)
i18n (>= 0.4.0)
mime-types (~> 1.16)
treetop (~> 1.4.8)
@@ -142,23 +143,23 @@ GEM
sfl (~> 2.0)
polyglot (0.3.3)
rack (1.4.1)
- rack-cache (1.1)
+ rack-cache (1.2)
rack (>= 0.4)
rack-ssl (1.3.2)
rack
rack-test (0.6.1)
rack (>= 1.0)
- rails (3.2.1)
- actionmailer (= 3.2.1)
- actionpack (= 3.2.1)
- activerecord (= 3.2.1)
- activeresource (= 3.2.1)
- activesupport (= 3.2.1)
+ rails (3.2.2)
+ actionmailer (= 3.2.2)
+ actionpack (= 3.2.2)
+ activerecord (= 3.2.2)
+ activeresource (= 3.2.2)
+ activesupport (= 3.2.2)
bundler (~> 1.0)
- railties (= 3.2.1)
- railties (3.2.1)
- actionpack (= 3.2.1)
- activesupport (= 3.2.1)
+ railties (= 3.2.2)
+ railties (3.2.2)
+ actionpack (= 3.2.2)
+ activesupport (= 3.2.2)
rack-ssl (~> 1.3.2)
rake (>= 0.8.7)
rdoc (~> 3.4)
@@ -195,6 +196,9 @@ GEM
multi_json (~> 1.0.4)
rubyzip
sfl (2.1)
+ simple_form (2.0.1)
+ actionpack (~> 3.0)
+ activemodel (~> 3.0)
simplecov (0.5.4)
multi_json (~> 1.0.3)
simplecov-html (~> 0.5.3)
@@ -223,7 +227,7 @@ GEM
treetop (1.4.10)
polyglot
polyglot (>= 0.3.1)
- tzinfo (0.3.31)
+ tzinfo (0.3.32)
uglifier (1.2.3)
execjs (>= 0.3.0)
multi_json (>= 1.0.2)
@@ -235,6 +239,7 @@ PLATFORMS
DEPENDENCIES
bcrypt-ruby (~> 3.0.0)
+ bootstrap-sass
capybara
coffee-rails (~> 3.2.1)
cucumber-rails
@@ -251,11 +256,12 @@ DEPENDENCIES
nokogiri
pg
poltergeist
- rails (= 3.2.1)
+ rails (= 3.2.2)
rdf
rest-client
rspec-rails
sass-rails (~> 3.2.3)
+ simple_form
simplecov
slim-rails
sparql-client!
View
12 app/assets/javascripts/application.js
@@ -12,4 +12,16 @@
//
//= require jquery
//= require jquery_ujs
+//= require bootstrap-transition
+//= require bootstrap-alert
+//= require bootstrap-button
+//= require bootstrap-carousel
+//= require bootstrap-collapse
+//= require bootstrap-dropdown
+//= require bootstrap-modal
+//= require bootstrap-scrollspy
+//= require bootstrap-tab
+//= require bootstrap-tooltip
+//= require bootstrap-popover
+//= require bootstrap-typeahead
//= require_tree .
View
5 app/assets/stylesheets/application.css.scss
@@ -8,9 +8,6 @@
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
- *= require base
- *= require layout
- *= require skeleton
- *= require main
+ *= require_self
*= require_tree .
*/
View
280 app/assets/stylesheets/main.css.scss
@@ -1,21 +1,82 @@
-// Variables
-$baseLineHeight: 18px;
-
-.logo {
- background: #232020;
- padding: 0;
- margin: 0;
-}
-
-#subnav {
-}
+// Set the correct sprite paths
+$iconSpritePath: image_path('glyphicons-halflings.png');
+$iconWhiteSpritePath: image_path('glyphicons-halflings-white.png');
-.content {
- margin-top: 20px;
-}
-
-.cancel {
- margin-left: 30px;
+// Variables
+$baseLineHeight: 18px;
+$navbarBackground: #000;
+$navbarBackgroundHighlight: #000;
+
+/*!
+ * Bootstrap 2.0.1
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ * Converted to SASS by Thomas McDonald
+ */
+
+// Core variables and mixins
+@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
+@import "bootstrap/mixins";
+
+// CSS Reset
+@import "bootstrap/reset";
+
+// Grid system and page structure
+@import "bootstrap/scaffolding";
+@import "bootstrap/grid";
+@import "bootstrap/layouts";
+
+// Base CSS
+@import "bootstrap/type";
+//@import "bootstrap/code";
+@import "bootstrap/forms";
+@import "bootstrap/tables";
+
+// Components: common
+@import "bootstrap/sprites";
+@import "bootstrap/dropdowns";
+@import "bootstrap/wells";
+//@import "bootstrap/component-animations";
+@import "bootstrap/close";
+
+// Components: Buttons & Alerts
+@import "bootstrap/buttons";
+@import "bootstrap/button-groups";
+@import "bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.
+
+// Components: Nav
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+
+// Components: Popovers
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+
+// Components: Misc
+@import "bootstrap/thumbnails";
+@import "bootstrap/labels";
+@import "bootstrap/progress-bars";
+@import "bootstrap/accordion";
+@import "bootstrap/carousel";
+@import "bootstrap/hero-unit";
+
+// Utility classes
+@import "bootstrap/utilities"; // Has to be last to override when necessary
+
+body {
+ padding-top: 70px;
+}
+
+.btn {
+ margin-right: 10px;
}
#error_wrapper {
@@ -26,6 +87,7 @@ $baseLineHeight: 18px;
width: 100%;
background-color: darkGrey;
}
+
#error_explanation {
border: 3px dashed #666;
background-color: darkGrey;
@@ -62,195 +124,13 @@ article {
}
}
-#flash_notice {
- border: 1px solid #bbb;
- margin: 0 0 10px;
- background-color: #ccffcc;
- padding: 5px;
-}
-
-#flash_alert {
- border: 1px solid #f00;
- margin: 0 0 10px;
- background-color: #fcc;
- padding: 5px;
-}
-
-table {
- width: 100%;
- margin-bottom: $baseLineHeight;
- th, td {
- padding: 8px;
- line-height: $baseLineHeight;
- text-align: left;
- border-top: 1px solid #ddd;
- }
- th {
- font-weight: bold;
- vertical-align: bottom;
- }
- td {
- vertical-align: top;
- }
- // Remove top border from thead by default
- thead:first-child tr th,
- thead:first-child tr td {
- border-top: 0;
- }
- // Account for multiple tbody instances
- tbody {
- border-top: 2px solid #ddd;
- }
-}
-
-// CONDENSED TABLE W/ HALF PADDING
-// -------------------------------
-
-.table-condensed {
- th,
- td {
- padding: 4px 5px;
- }
-}
-
-
-// BORDERED VERSION
-// ----------------
-
-@mixin border-radius($radius: 5px) {
- -web-kit-border-radius: $radius;
- -moz-border-radius: $radius;
- border-radius: $radius;
-}
-
-.table-bordered {
- border: 1px solid #ddd;
- border-collapse: separate; // Done so we can round those corners!
- *border-collapse: collapsed; // IE7 can't round corners anyway
- @include border-radius(4px);
- th, td, td, th {
- border-left: 1px solid #ddd;
- }
- // Prevent a double border
- thead:first-child tr:first-child th,
- tbody:first-child tr:first-child th,
- tbody:first-child tr:first-child td {
- border-top: 0;
- }
- // For first th or td in the first row in the first thead or tbody
- thead:first-child tr:first-child th:first-child,
- tbody:first-child tr:first-child td:first-child {
- @include border-radius(4px 0 0 0);
- }
- thead:first-child tr:first-child th:last-child,
- tbody:first-child tr:first-child td:last-child {
- @include border-radius(0 4px 0 0);
- }
- // For first th or td in the first row in the first thead or tbody
- thead:last-child tr:last-child th:first-child,
- tbody:last-child tr:last-child td:first-child {
- @include border-radius(0 0 0 4px);
- }
- thead:last-child tr:last-child th:last-child,
- tbody:last-child tr:last-child td:last-child {
- @include border-radius(0 0 4px 0);
- }
-}
-
-
-// ZEBRA-STRIPING
-// --------------
-
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.table-striped {
- tbody {
- tr:nth-child(odd) td,
- tr:nth-child(odd) th {
- background-color: #f9f9f9;
- }
- }
-}
-
-// FORM
-// ----
-form {
- .field {
- margin: 0 0 10px 0;
-
- label {
- line-height: 1.4;
- text-shadow: 0 1px 1px #fff;
- color: #666;
- color: rgba(0, 0, 0, 0.6);
- }
- }
- .field:last-child {
- margin: 0;
- }
- input[type="text"], textarea {
- width: 280px;
- padding: 5px 8px;
- font-size: 1.2em;
- color: #666;
- @include border-radius(4px);
- }
- select {
- width: 280px;
- padding: 5px 8px;
- font-size: 1.2em;
- color: #666;
- @include border-radius(4px);
- }
- .actions {
- .button {
- margin-right: 20px;
- font-size: 1.1em;
- }
- }
-}
-
.hidden {
display: none;
}
-#topnav {
- ul {
- float:right;
- margin: 0;
- padding: 0;
- li {
- list-style-type: none;
- display: inline-block;
-
- a {
- padding: 0 5px;
- font-weight: bold;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
-}
-
.feed {
float: right;
padding: 5px;
}
-.pagination {
- background-color: #F5F5F5;
- padding: 2px;
- margin-bottom: 8px;
- text-align: center;
- border: 1px solid darkGrey;
-
- a {
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
- }
-}
+@import 'bootstrap-responsive';
View
54 app/assets/stylesheets/reviews.css.scss
@@ -2,57 +2,3 @@
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
-input#review_isbn, input#isbn {
- width: 210px;
-}
-
-input#book_title,
-input#book_authors,
-input#review_title,
-textarea#review_abstract,
-textarea#review_text {
- width: 97%;
-}
-
-div.hint {
- margin: 0 0 20px;
- color: #cccccc;
-}
-
-form#book_info {
- fieldset {
- background: #dddddd;
- border: 1px solid #666666;
- padding: 10px;
- input[type="text"] {
- display: inline;
- }
- .button {
- font-size: 1.2em;
- margin-left: 10px;
- font-color: #666;
- }
- }
-}
-
-.nav {
- display: block;
- text-align: center;
- border-top: 1px solid lightGrey;
- border-bottom: 1px solid lightGrey;
- margin: 10px auto 10px;
- min-height: 35px;
- padding: 10px 0 6px;
- ul {
- display: block;
- margin: 0 auto;
- text-align: center;
- li {
- display: block;
- float: left;
- padding: 0 15px;
- }
- li.first { padding-left: 0; }
- li.last { padding-right: 0; }
- }
-}
View
54 app/views/layouts/application.html.slim
@@ -31,32 +31,36 @@ html lang="nb"
link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png"
body
- div.container
- div.sixteen.columns
- header.logo
+ div.navbar.navbar-fixed-top
+ div.navbar-inner
+ div.container
+ a.btn.btn-navbar(data-toggle="collapse" data-target=".nav-collapse")
+ span.icon-bar
+ span.icon-bar
+ span.icon-bar
= link_to image_tag('logo.jpg', alt: t('home'), \
- title: t('home'), width: 300, height: 54), dashboard_path
+ title: t('home'), width: 200, height: 36), dashboard_path, class: 'brand'
= link_to image_tag('feed.png', alt: 'Atom feed', class: 'feed', \
title: 'Atom feed', width: 32, height: 32), feed_path
- nav#topnav.clearfix
- ul
- - unless signed_in?
- li= link_to(t('sessions.signin'), signin_path)
- - else
- li= link_to(t('sessions.signout'), signout_path, method: :delete)
- nav#subnav
- ul.tabs
- li= nav_link(:dashboard)
- - if signed_in?
- li= link_to 'Mine anbefalinger', \
- user_reviews_path(current_user), \
- class: (controller_name == 'reviews' ? 'active' : '')
- - if is_admin?
- li= nav_link(:sources)
- li= nav_link(:users)
- - flash.each do |name, msg|
- = content_tag :div, msg, id: "flash_#{name}"
- = yield
- footer
- = debug(params) if Rails.env.development?
+ div.nav-collapse
+ ul.nav
+ li= nav_link(:dashboard)
+ - if signed_in?
+ li= link_to 'Mine anbefalinger', \
+ user_reviews_path(current_user), \
+ class: (controller_name == 'reviews' ? 'active' : '')
+ - if is_admin?
+ li= nav_link(:sources)
+ li= nav_link(:users)
+ - unless signed_in?
+ li= link_to(t('sessions.signin'), signin_path)
+ - else
+ li= link_to(t('sessions.signout'), signout_path, method: :delete)
+
+ div.container
+ - flash.each do |name, msg|
+ = content_tag :div, msg, id: "flash_#{name}"
+ = yield
+ footer
+ p= debug(params) if Rails.env.development?
View
11 app/views/reviews/_article_footer.html.slim
@@ -1,7 +1,6 @@
-footer.clearfix
+div.form-actions
+ = link_to t('back'), user_reviews_path(current_user), class: 'btn'
- if signed_in?
- .nav
- ul
- li.first= link_to t('edit'), edit_user_review_path(current_user, review), class: 'button'
- li.last= link_to t('destroy'), user_review_path(current_user, review), \
- :confirm => t('confirm'), :method => :delete, class: 'button'
+ = link_to t('edit'), edit_user_review_path(current_user, review), class: 'btn'
+ = link_to t('destroy'), user_review_path(current_user, review), \
+ :confirm => t('confirm'), :method => :delete, class: 'btn btn-danger'
View
6 app/views/reviews/index.html.slim
@@ -1,9 +1,9 @@
div.row
- div.nine.columns.alpha
+ div.span7
h2= t('reviews.title')
- div.seven.columns.omega
+ div.span5
- if signed_in?
- = link_to t('reviews.new'), new_user_review_path, class: 'button'
+ = link_to t('reviews.new'), new_user_review_path, class: 'btn btn-primary'
- unless @reviews.empty?
== paginate(@reviews)
== render @reviews
View
23 app/views/sources/_form.html.slim
@@ -1,15 +1,8 @@
-= form_for source do |f|
- - if source.errors.any?
- == render 'shared/form_errors', target: source
- .field
- = f.label :title
- = f.text_field :title
- .field
- = f.label :description
- = f.text_area :description, rows: 4
- .field
- = f.label :url
- = f.text_field :url
- .actions
- = f.submit class: 'button'
- = link_to(t('cancel'), sources_path, class: 'button')
+= simple_form_for(source, html: { class: 'form-horizontal' }) do |f|
+ fieldset
+ = f.input :title
+ = f.input :description, input_html: { rows: 4 }
+ = f.input :url
+ .form-actions
+ = f.button :submit, class: 'btn btn-primary'
+ = link_to t('cancel'), sources_path, class: 'btn cancel'
View
6 app/views/sources/edit.html.slim
@@ -1,4 +1,2 @@
-div.sixteen.columns
- h2= t('sources.edit')
-
- == render 'form'
+h2= t('sources.edit')
+== render 'form'
View
9 app/views/sources/index.html.slim
@@ -2,7 +2,7 @@ h2= t('sources.title')
- if @sources.empty?
h4= t('sources.not_found')
- else
- table.table-bordered.table-striped
+ table.table.table-bordered.table-striped.table-condensed
thead
tr
th= Source.human_attribute_name(:title)
@@ -16,6 +16,7 @@ h2= t('sources.title')
td= source.title
td= source.description
td= link_to source.url, source.url
- td= link_to t('edit'), edit_source_path(source), class: 'button'
- td= link_to t('destroy'), source_path(source), confirm: t('confirm'), method: :delete, class: 'button'
-= link_to(t('sources.new'), new_source_path, class: 'button')
+ td= link_to t('edit'), edit_source_path(source), class: 'btn btn-mini'
+ td= link_to t('destroy'), source_path(source), confirm: t('confirm'), \
+ method: :delete, class: 'btn btn-mini btn-danger'
+= link_to(t('sources.new'), new_source_path, class: 'btn')
View
1  app/views/sources/new.html.slim
@@ -1,4 +1,3 @@
h2= t('sources.new')
-
= render 'form'
View
32 app/views/users/_form.html.slim
@@ -1,21 +1,11 @@
-= form_for user do |f|
- - if user.errors.any?
- == render 'shared/form_errors', target: user
- .field
- = f.label :username
- = f.text_field :username
- .field
- = f.label :fullname
- = f.text_field :fullname
- .field
- = f.label :email
- = f.text_field :email
- .field
- = f.label :password
- = f.password_field :password
- .field
- = f.label :password_confirmation
- = f.password_field :password_confirmation
- .actions
- = f.submit class: 'button'
- = link_to(t('cancel'), users_path, class: 'button')
+= simple_form_for user, html: { class: 'form-horizontal' } do |f|
+ fieldset
+ /legend= t('users.new')
+ = f.input :username
+ = f.input :fullname
+ = f.input :email
+ = f.input :password
+ = f.input :password_confirmation
+ div.form-actions
+ = f.button :submit, class: 'btn btn-primary'
+ = link_to t('cancel'), users_path, class: 'btn cancel'
View
8 app/views/users/index.html.slim
@@ -2,7 +2,7 @@ h2= t('users.title')
- if @users.empty?
h4= t('users.not_found')
- else
- table.table-bordered.table-striped
+ table.table.table-bordered.table-striped.table-condensed
thead
tr
th= User.human_attribute_name(:username)
@@ -16,11 +16,11 @@ h2= t('users.title')
td= user.username
td= user.fullname
td= user.email
- td= link_to t('edit'), edit_user_path(user), class: 'button'
+ td= link_to t('edit'), edit_user_path(user), class: 'btn btn-mini'
td
- unless user.is_admin?
- = link_to t('destroy'), user_path(user), class: 'button', \
+ = link_to t('destroy'), user_path(user), class: 'btn btn-mini btn-danger', \
confirm: t('confirm'), method: :delete
-= link_to t('users.new'), new_user_path, class: 'button'
+= link_to t('users.new'), new_user_path, class: 'btn'
View
176 config/initializers/simple_form.rb
@@ -0,0 +1,176 @@
+# Use this setup block to configure all options available in SimpleForm.
+SimpleForm.setup do |config|
+ # Wrappers are used by the form builder to generate a
+ # complete input. You can remove any component from the
+ # wrapper, change the order or even add your own to the
+ # stack. The options given below are used to wrap the
+ # whole input.
+ config.wrappers :default, :class => :input,
+ :hint_class => :field_with_hint, :error_class => :field_with_errors do |b|
+ ## Extensions enabled by default
+ # Any of these extensions can be disabled for a
+ # given input by passing: `f.input EXTENSION_NAME => false`.
+ # You can make any of these extensions optional by
+ # renaming `b.use` to `b.optional`.
+
+ # Determines whether to use HTML5 (:email, :url, ...)
+ # and required attributes
+ b.use :html5
+
+ # Calculates placeholders automatically from I18n
+ # You can also pass a string as f.input :placeholder => "Placeholder"
+ b.use :placeholder
+
+ ## Optional extensions
+ # They are disabled unless you pass `f.input EXTENSION_NAME => :lookup`
+ # to the input. If so, they will retrieve the values from the model
+ # if any exists. If you want to enable the lookup for any of those
+ # extensions by default, you can change `b.optional` to `b.use`.
+
+ # Calculates maxlength from length validations for string inputs
+ b.optional :maxlength
+
+ # Calculates pattern from format validations for string inputs
+ b.optional :pattern
+
+ # Calculates min and max from length validations for numeric inputs
+ b.optional :min_max
+
+ # Calculates readonly automatically from readonly attributes
+ b.optional :readonly
+
+ ## Inputs
+ b.use :label_input
+ b.use :hint, :wrap_with => { :tag => :span, :class => :hint }
+ b.use :error, :wrap_with => { :tag => :span, :class => :error }
+ end
+
+ config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|
+ b.use :html5
+ b.use :placeholder
+ b.use :label
+ b.wrapper :tag => 'div', :class => 'controls' do |ba|
+ ba.use :input
+ ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
+ ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-block' }
+ end
+ end
+
+ config.wrappers :prepend, :tag => 'div', :class => "control-group", :error_class => 'error' do |b|
+ b.use :html5
+ b.use :placeholder
+ b.use :label
+ b.wrapper :tag => 'div', :class => 'controls' do |input|
+ input.wrapper :tag => 'div', :class => 'input-prepend' do |prepend|
+ prepend.use :input
+ end
+ input.use :hint, :wrap_with => { :tag => 'span', :class => 'help-block' }
+ input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
+ end
+ end
+
+ config.wrappers :append, :tag => 'div', :class => "control-group", :error_class => 'error' do |b|
+ b.use :html5
+ b.use :placeholder
+ b.use :label
+ b.wrapper :tag => 'div', :class => 'controls' do |input|
+ input.wrapper :tag => 'div', :class => 'input-append' do |append|
+ append.use :input
+ end
+ input.use :hint, :wrap_with => { :tag => 'span', :class => 'help-block' }
+ input.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
+ end
+ end
+
+ # Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
+ # Check the Bootstrap docs (http://twitter.github.com/bootstrap)
+ # to learn about the different styles for forms and inputs,
+ # buttons and other elements.
+ config.default_wrapper = :bootstrap
+
+ # Define the way to render check boxes / radio buttons with labels.
+ # Defaults to :nested for bootstrap config.
+ # :inline => input + label
+ # :nested => label > input
+ config.boolean_style = :nested
+
+ # Default class for buttons
+ config.button_class = 'btn'
+
+ # Method used to tidy up errors.
+ # config.error_method = :first
+
+ # Default tag used for error notification helper.
+ config.error_notification_tag = :div
+
+ # CSS class to add for error notification helper.
+ config.error_notification_class = 'alert alert-error'
+
+ # ID to add for error notification helper.
+ # config.error_notification_id = nil
+
+ # Series of attempts to detect a default label method for collection.
+ # config.collection_label_methods = [ :to_label, :name, :title, :to_s ]
+
+ # Series of attempts to detect a default value method for collection.
+ # config.collection_value_methods = [ :id, :to_s ]
+
+ # You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none.
+ # config.collection_wrapper_tag = nil
+
+ # You can define the class to use on all collection wrappers. Defaulting to none.
+ # config.collection_wrapper_class = nil
+
+ # You can wrap each item in a collection of radio/check boxes with a tag,
+ # defaulting to :span. Please note that when using :boolean_style = :nested,
+ # SimpleForm will force this option to be a label.
+ # config.item_wrapper_tag = :span
+
+ # You can define a class to use in all item wrappers. Defaulting to none.
+ # config.item_wrapper_class = nil
+
+ # How the label text should be generated altogether with the required text.
+ # config.label_text = lambda { |label, required| "#{required} #{label}" }
+
+ # You can define the class to use on all labels. Default is nil.
+ config.label_class = 'control-label'
+
+ # You can define the class to use on all forms. Default is simple_form.
+ # config.form_class = :simple_form
+
+ # You can define which elements should obtain additional classes
+ # config.generate_additional_classes_for = [:wrapper, :label, :input]
+
+ # Whether attributes are required by default (or not). Default is true.
+ # config.required_by_default = true
+
+ # Tell browsers whether to use default HTML5 validations (novalidate option).
+ # Default is enabled.
+ config.browser_validations = false
+
+ # Collection of methods to detect if a file type was given.
+ # config.file_methods = [ :mounted_as, :file?, :public_filename ]
+
+ # Custom mappings for input types. This should be a hash containing a regexp
+ # to match as key, and the input type that will be used when the field name
+ # matches the regexp as value.
+ # config.input_mappings = { /count/ => :integer }
+
+ # Default priority for time_zone inputs.
+ # config.time_zone_priority = nil
+
+ # Default priority for country inputs.
+ # config.country_priority = nil
+
+ # Default size for text inputs.
+ # config.default_input_size = 50
+
+ # When false, do not use translations for labels.
+ # config.translate_labels = true
+
+ # Automatically discover new inputs in Rails' autoload path.
+ # config.inputs_discovery = true
+
+ # Cache SimpleForm inputs discovery
+ # config.cache_discovery = !Rails.env.development?
+end
View
24 config/locales/simple_form.en.yml
@@ -0,0 +1,24 @@
+en:
+ simple_form:
+ "yes": 'Yes'
+ "no": 'No'
+ required:
+ text: 'required'
+ mark: '*'
+ # You can uncomment the line below if you need to overwrite the whole required html.
+ # When using html, text and mark won't be used.
+ # html: '<abbr title="required">*</abbr>'
+ error_notification:
+ default_message: "Some errors were found, please take a look:"
+ # Labels and hints examples
+ # labels:
+ # password: 'Password'
+ # user:
+ # new:
+ # email: 'E-mail para efetuar o sign in.'
+ # edit:
+ # email: 'E-mail.'
+ # hints:
+ # username: 'User name to sign in.'
+ # password: 'No special characters, please.'
+
View
10 lib/templates/slim/scaffold/_form.html.slim
@@ -0,0 +1,10 @@
+= simple_form_for(@<%= singular_table_name %>) do |f|
+ = f.error_notification
+
+ .form-inputs
+<%- attributes.each do |attribute| -%>
+ = f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %>
+<%- end -%>
+
+ .form-actions
+ = f.button :submit
View
8 spec/requests/dashboard_spec.rb
@@ -10,12 +10,4 @@
it { should have_selector('h2', text: 'Bokanbefalinger') }
end
- describe 'show review' do
- let(:review) { Fabricate(:review) }
- before do
- visit review_path review
- end
-
- it { should have_selector('h3', text: review.title) }
- end
end
View
335 vendor/assets/stylesheets/base.css
@@ -1,335 +0,0 @@
-/*
-* Skeleton V1.1
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
-*/
-
-
-/* Table of Content
-==================================================
- #Reset & Basics
- #Basic Styles
- #Site Styles
- #Typography
- #Links
- #Lists
- #Images
- #Buttons
- #Tabs
- #Forms
- #Misc */
-
-
-/* #Reset & Basics (Inspired by E. Meyers)
-================================================== */
- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline; }
- article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
- display: block; }
- body {
- line-height: 1; }
- ol, ul {
- list-style: none; }
- blockquote, q {
- quotes: none; }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none; }
- table {
- border-collapse: collapse;
- border-spacing: 0; }
-
-
-/* #Basic Styles
-================================================== */
- body {
- background: #fff;
- font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #444;
- -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
- -webkit-text-size-adjust: 100%;
- }
-
-
-/* #Typography
-================================================== */
- h1, h2, h3, h4, h5, h6 {
- color: #181818;
- font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
- font-weight: normal; }
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
- h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
- h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
- h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
- h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
- h5 { font-size: 17px; line-height: 24px; }
- h6 { font-size: 14px; line-height: 21px; }
- .subheader { color: #777; }
-
- p { margin: 0 0 20px 0; }
- p img { margin: 0; }
- p.lead { font-size: 21px; line-height: 27px; color: #777; }
-
- em { font-style: italic; }
- strong { font-weight: bold; color: #333; }
- small { font-size: 80%; }
-
-/* Blockquotes */
- blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
- blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
- blockquote cite { display: block; font-size: 12px; color: #555; }
- blockquote cite:before { content: "\2014 \0020"; }
- blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
-
- hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
-
-
-/* #Links
-================================================== */
- a, a:visited { color: #333; text-decoration: underline; outline: 0; }
- a:hover, a:focus { color: #000; }
- p a, p a:visited { line-height: inherit; }
-
-
-/* #Lists
-================================================== */
- ul, ol { margin-bottom: 20px; }
- ul { list-style: none outside; }
- ol { list-style: decimal; }
- ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
- ul.square { list-style: square outside; }
- ul.circle { list-style: circle outside; }
- ul.disc { list-style: disc outside; }
- ul ul, ul ol,
- ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
- ul ul li, ul ol li,
- ol ol li, ol ul li { margin-bottom: 6px; }
- li { line-height: 18px; margin-bottom: 12px; }
- ul.large li { line-height: 21px; }
- li p { line-height: 21px; }
-
-/* #Images
-================================================== */
-
- img.scale-with-grid {
- max-width: 100%;
- height: auto; }
-
-
-/* #Buttons
-================================================== */
-
- a.button,
- button,
- input[type="submit"],
- input[type="reset"],
- input[type="button"] {
- background: #eee; /* Old browsers */
- background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
- background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
- background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
- background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
- background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
- background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
- border: 1px solid #aaa;
- border-top: 1px solid #ccc;
- border-left: 1px solid #ccc;
- padding: 4px 12px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- color: #444;
- display: inline-block;
- font-size: 11px;
- font-weight: bold;
- text-decoration: none;
- text-shadow: 0 1px rgba(255, 255, 255, .75);
- cursor: pointer;
- margin-bottom: 20px;
- line-height: 21px;
- font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
-
- a.button:hover,
- button:hover,
- input[type="submit"]:hover,
- input[type="reset"]:hover,
- input[type="button"]:hover {
- color: #222;
- background: #ddd; /* Old browsers */
- background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
- background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
- background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
- background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
- background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
- background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
- border: 1px solid #888;
- border-top: 1px solid #aaa;
- border-left: 1px solid #aaa; }
-
- a.button:active,
- button:active,
- input[type="submit"]:active,
- input[type="reset"]:active,
- input[type="button"]:active {
- border: 1px solid #666;
- background: #ccc; /* Old browsers */
- background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
- background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
- background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
- background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
- background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
- background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
-
- .button.full-width,
- button.full-width,
- input[type="submit"].full-width,
- input[type="reset"].full-width,
- input[type="button"].full-width {
- width: 100%;
- padding-left: 0 !important;
- padding-right: 0 !important;
- text-align: center; }
-
-
-/* #Tabs (activate in tabs.js)
-================================================== */
- ul.tabs {
- display: block;
- margin: 0 0 20px 0;
- padding: 0;
- border-bottom: solid 1px #ddd; }
- ul.tabs li {
- display: block;
- width: auto;
- height: 30px;
- padding: 0;
- float: left;
- margin-bottom: 0; }
- ul.tabs li a {
- display: block;
- text-decoration: none;
- width: auto;
- height: 29px;
- padding: 0px 20px;
- line-height: 30px;
- border: solid 1px #ddd;
- border-width: 1px 1px 0 0;
- margin: 0;
- background: #f5f5f5;
- font-size: 13px; }
- ul.tabs li a.active {
- background: #fff;
- height: 30px;
- position: relative;
- top: -4px;
- padding-top: 4px;
- border-left-width: 1px;
- margin: 0 0 0 -1px;
- color: #111;
- -moz-border-radius-topleft: 2px;
- -webkit-border-top-left-radius: 2px;
- border-top-left-radius: 2px;
- -moz-border-radius-topright: 2px;
- -webkit-border-top-right-radius: 2px;
- border-top-right-radius: 2px; }
- ul.tabs li:first-child a.active {
- margin-left: 0; }
- ul.tabs li:first-child a {
- border-width: 1px 1px 0 1px;
- -moz-border-radius-topleft: 2px;
- -webkit-border-top-left-radius: 2px;
- border-top-left-radius: 2px; }
- ul.tabs li:last-child a {
- -moz-border-radius-topright: 2px;
- -webkit-border-top-right-radius: 2px;
- border-top-right-radius: 2px; }
-
- ul.tabs-content { margin: 0; display: block; }
- ul.tabs-content > li { display:none; }
- ul.tabs-content > li.active { display: block; }
-
- /* Clearfixing tabs for beautiful stacking */
- ul.tabs:before,
- ul.tabs:after {
- content: '\0020';
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0; }
- ul.tabs:after {
- clear: both; }
- ul.tabs {
- zoom: 1; }
-
-
-/* #Forms
-================================================== */
-
- form {
- margin-bottom: 20px; }
- fieldset {
- margin-bottom: 20px; }
- input[type="text"],
- input[type="password"],
- input[type="email"],
- textarea,
- select {
- border: 1px solid #ccc;
- padding: 6px 4px;
- outline: none;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #777;
- margin: 0;
- width: 210px;
- max-width: 100%;
- display: block;
- margin-bottom: 20px;
- background: #fff; }
- select {
- padding: 0; }
- input[type="text"]:focus,
- input[type="password"]:focus,
- input[type="email"]:focus,
- textarea:focus {
- border: 1px solid #aaa;
- color: #444;
- -moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
- -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
- box-shadow: 0 0 3px rgba(0,0,0,.2); }
- textarea {
- min-height: 60px; }
- label,
- legend {
- display: block;
- font-weight: bold;
- font-size: 13px; }
- select {
- width: 220px; }
- input[type="checkbox"] {
- display: inline; }
- label span,
- legend span {
- font-weight: normal;
- font-size: 13px;
- color: #444; }
-
-/* #Misc
-================================================== */
- .remove-bottom { margin-bottom: 0 !important; }
- .half-bottom { margin-bottom: 10px !important; }
- .add-bottom { margin-bottom: 20px !important; }
-
-
View
58 vendor/assets/stylesheets/layout.css
@@ -1,58 +0,0 @@
-/*
-* Skeleton V1.1
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
-*/
-
-/* Table of Content
-==================================================
- #Site Styles
- #Page Styles
- #Media Queries
- #Font-Face */
-
-/* #Site Styles
-================================================== */
-
-/* #Page Styles
-================================================== */
-
-/* #Media Queries
-================================================== */
-
- /* Smaller than standard 960 (devices and browsers) */
- @media only screen and (max-width: 959px) {}
-
- /* Tablet Portrait size to standard 960 (devices and browsers) */
- @media only screen and (min-width: 768px) and (max-width: 959px) {}
-
- /* All Mobile Sizes (devices and browser) */
- @media only screen and (max-width: 767px) {}
-
- /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
- @media only screen and (min-width: 480px) and (max-width: 767px) {}
-
- /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
- @media only screen and (max-width: 479px) {}
-
-
-/* #Font-Face
-================================================== */
-/* This is the proper syntax for an @font-face file
- Just create a "fonts" folder at the root,
- copy your FontName into code below and remove
- comment brackets */
-
-/* @font-face {
- font-family: 'FontName';
- src: url('../fonts/FontName.eot');
- src: url('../fonts/FontName.eot?iefix') format('eot'),
- url('../fonts/FontName.woff') format('woff'),
- url('../fonts/FontName.ttf') format('truetype'),
- url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
- font-weight: normal;
- font-style: normal; }
-*/
View
236 vendor/assets/stylesheets/skeleton.css
@@ -1,236 +0,0 @@
-/*
-* Skeleton V1.1
-* Copyright 2011, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
-*/
-
-
-/* Table of Contents
-==================================================
- #Base 960 Grid
- #Tablet (Portrait)
- #Mobile (Portrait)
- #Mobile (Landscape)
- #Clearing */
-
-
-
-/* #Base 960 Grid
-================================================== */
-
- .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
- .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
- .row { margin-bottom: 20px; }
-
- /* Nested Column Classes */
- .column.alpha, .columns.alpha { margin-left: 0; }
- .column.omega, .columns.omega { margin-right: 0; }
-
- /* Base Grid */
- .container .one.column { width: 40px; }
- .container .two.columns { width: 100px; }
- .container .three.columns { width: 160px; }
- .container .four.columns { width: 220px; }
- .container .five.columns { width: 280px; }
- .container .six.columns { width: 340px; }
- .container .seven.columns { width: 400px; }
- .container .eight.columns { width: 460px; }
- .container .nine.columns { width: 520px; }
- .container .ten.columns { width: 580px; }
- .container .eleven.columns { width: 640px; }
- .container .twelve.columns { width: 700px; }
- .container .thirteen.columns { width: 760px; }
- .container .fourteen.columns { width: 820px; }
- .container .fifteen.columns { width: 880px; }
- .container .sixteen.columns { width: 940px; }
-
- .container .one-third.column { width: 300px; }
- .container .two-thirds.column { width: 620px; }
-
- /* Offsets */
- .container .offset-by-one { padding-left: 60px; }
- .container .offset-by-two { padding-left: 120px; }
- .container .offset-by-three { padding-left: 180px; }
- .container .offset-by-four { padding-left: 240px; }
- .container .offset-by-five { padding-left: 300px; }
- .container .offset-by-six { padding-left: 360px; }
- .container .offset-by-seven { padding-left: 420px; }
- .container .offset-by-eight { padding-left: 480px; }
- .container .offset-by-nine { padding-left: 540px; }
- .container .offset-by-ten { padding-left: 600px; }
- .container .offset-by-eleven { padding-left: 660px; }
- .container .offset-by-twelve { padding-left: 720px; }
- .container .offset-by-thirteen { padding-left: 780px; }
- .container .offset-by-fourteen { padding-left: 840px; }
- .container .offset-by-fifteen { padding-left: 900px; }
-
-
-
-/* #Tablet (Portrait)
-================================================== */
-
- /* Note: Design for a width of 768px */
-
- @media only screen and (min-width: 768px) and (max-width: 959px) {
- .container { width: 768px; }
- .container .column,
- .container .columns { margin-left: 10px; margin-right: 10px; }
- .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
- .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
-
- .container .one.column { width: 28px; }
- .container .two.columns { width: 76px; }
- .container .three.columns { width: 124px; }
- .container .four.columns { width: 172px; }
- .container .five.columns { width: 220px; }
- .container .six.columns { width: 268px; }
- .container .seven.columns { width: 316px; }
- .container .eight.columns { width: 364px; }
- .container .nine.columns { width: 412px; }
- .container .ten.columns { width: 460px; }
- .container .eleven.columns { width: 508px; }
- .container .twelve.columns { width: 556px; }
- .container .thirteen.columns { width: 604px; }
- .container .fourteen.columns { width: 652px; }
- .container .fifteen.columns { width: 700px; }
- .container .sixteen.columns { width: 748px; }
-
- .container .one-third.column { width: 236px; }
- .container .two-thirds.column { width: 492px; }
-
- /* Offsets */
- .container .offset-by-one { padding-left: 48px; }
- .container .offset-by-two { padding-left: 96px; }
- .container .offset-by-three { padding-left: 144px; }
- .container .offset-by-four { padding-left: 192px; }
- .container .offset-by-five { padding-left: 240px; }
- .container .offset-by-six { padding-left: 288px; }
- .container .offset-by-seven { padding-left: 336px; }
- .container .offset-by-eight { padding-left: 348px; }
- .container .offset-by-nine { padding-left: 432px; }
- .container .offset-by-ten { padding-left: 480px; }
- .container .offset-by-eleven { padding-left: 528px; }
- .container .offset-by-twelve { padding-left: 576px; }
- .container .offset-by-thirteen { padding-left: 624px; }
- .container .offset-by-fourteen { padding-left: 672px; }
- .container .offset-by-fifteen { padding-left: 720px; }
- }
-
-
-/* #Mobile (Portrait)
-================================================== */
-
- /* Note: Design for a width of 320px */
-
- @media only screen and (max-width: 767px) {
- .container { width: 300px; }
- .columns, .column { margin: 0; }
-
- .container .one.column,
- .container .two.columns,
- .container .three.columns,
- .container .four.columns,
- .container .five.columns,
- .container .six.columns,
- .container .seven.columns,
- .container .eight.columns,
- .container .nine.columns,
- .container .ten.columns,
- .container .eleven.columns,
- .container .twelve.columns,
- .container .thirteen.columns,
- .container .fourteen.columns,
- .container .fifteen.columns,
- .container .sixteen.columns,
- .container .one-third.column,
- .container .two-thirds.column { width: 300px; }
-
- /* Offsets */
- .container .offset-by-one,
- .container .offset-by-two,
- .container .offset-by-three,
- .container .offset-by-four,
- .container .offset-by-five,
- .container .offset-by-six,
- .container .offset-by-seven,
- .container .offset-by-eight,
- .container .offset-by-nine,
- .container .offset-by-ten,
- .container .offset-by-eleven,
- .container .offset-by-twelve,
- .container .offset-by-thirteen,
- .container .offset-by-fourteen,
- .container .offset-by-fifteen { padding-left: 0; }
-
- }
-
-
-/* #Mobile (Landscape)
-================================================== */
-
- /* Note: Design for a width of 480px */
-
- @media only screen and (min-width: 480px) and (max-width: 767px) {
- .container { width: 420px; }
- .columns, .column { margin: 0; }
-
- .container .one.column,
- .container .two.columns,
- .container .three.columns,
- .container .four.columns,
- .container .five.columns,
- .container .six.columns,
- .container .seven.columns,
- .container .eight.columns,
- .container .nine.columns,
- .container .ten.columns,
- .container .eleven.columns,
- .container .twelve.columns,
- .container .thirteen.columns,
- .container .fourteen.columns,
- .container .fifteen.columns,
- .container .sixteen.columns,
- .container .one-third.column,
- .container .two-thirds.column { width: 420px; }
- }
-
-
-/* #Clearing
-================================================== */
-
- /* Self Clearing Goodness */
- .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
-
- /* Use clearfix class on parent to clear nested columns,
- or wrap each row of columns in a <div class="row"> */
- .clearfix:before,
- .clearfix:after,
- .row:before,
- .row:after {
- content: '\0020';
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0; }
- .row:after,
- .clearfix:after {
- clear: both; }
- .row,
- .clearfix {
- zoom: 1; }
-
- /* You can also use a <br class="clear" /> to clear columns */
- .clear {
- clear: both;
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0;
- }
-
-
Please sign in to comment.
Something went wrong with that request. Please try again.