Skip to content

Commit

Permalink
Upgrade to Bootstrap 3 (WiP)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wvengen
wvengen committed Aug 12, 2016
1 parent 7009b36 commit 821dd0a
Show file tree
Hide file tree
Showing 176 changed files with 1,232 additions and 1,173 deletions.
11 changes: 6 additions & 5 deletions Gemfile
View file
Expand Up @@ -29,8 +29,9 @@ gem 'simple_form'
gem 'inherited_resources'
gem 'localize_input', git: "git://github.com/bennibu/localize_input.git"
gem 'daemons'
gem 'twitter-bootstrap-rails', '~> 2.2.8'
gem 'simple-navigation', '~> 3.14.0' # 3.x for simple_navigation_bootstrap
gem 'twitter-bootstrap-rails', '~> 3.2'
gem 'font-awesome-rails'
gem 'simple-navigation'
gem 'simple-navigation-bootstrap'
gem 'ransack'
gem 'acts_as_tree'
Expand Down Expand Up @@ -71,20 +72,20 @@ group :development do
# allow to use `debugger` https://github.com/conradirwin/pry-rescue
gem 'pry-rescue'
gem 'pry-stack_explorer'

# Better error output
gem 'better_errors'
gem 'binding_of_caller'
# gem "rails-i18n-debug"
# chrome debugging extension https://github.com/dejan/rails_panel
gem 'meta_request'

# Get infos when not using proper eager loading
gem 'bullet'

# Hide assets requests in log
gem 'quiet_assets'

# Deploy with Capistrano
gem 'capistrano', '~> 3.2.0', require: false
gem 'capistrano-rvm', require: false
Expand Down
15 changes: 9 additions & 6 deletions Gemfile.lock
View file
Expand Up @@ -157,6 +157,8 @@ GEM
faker (1.6.3)
i18n (~> 0.5)
ffi (1.9.10)
font-awesome-rails (4.5.0.0)
railties (>= 3.2, < 5.0)
gaffe (1.1.0)
rails (>= 4.0.0)
git-version-bump (0.15.1)
Expand Down Expand Up @@ -306,7 +308,7 @@ GEM
activesupport (= 4.2.6)
rake (>= 0.8.7)
thor (>= 0.18.1, < 2.0)
rake (11.2.0)
rake (11.2.2)
ransack (1.7.0)
actionpack (>= 3.0)
activerecord (>= 3.0)
Expand Down Expand Up @@ -430,10 +432,10 @@ GEM
tilt (2.0.5)
tins (1.6.0)
ttfunk (1.4.0)
twitter-bootstrap-rails (2.2.8)
twitter-bootstrap-rails (3.2.2)
actionpack (>= 3.1)
execjs
rails (>= 3.1)
execjs (>= 2.2.2, >= 2.2)
less-rails (>= 2.5.0)
railties (>= 3.1)
twitter-text (1.13.4)
unf (~> 0.1.0)
Expand Down Expand Up @@ -488,6 +490,7 @@ DEPENDENCIES
exception_notification
factory_girl_rails
faker
font-awesome-rails
foodsoft_messages!
foodsoft_wiki!
gaffe
Expand Down Expand Up @@ -528,15 +531,15 @@ DEPENDENCIES
sass-rails
select2-rails
selenium-webdriver
simple-navigation (~> 3.14.0)
simple-navigation
simple-navigation-bootstrap
simple_form
simplecov
spreadsheet
sqlite3
therubyracer
thin
twitter-bootstrap-rails (~> 2.2.8)
twitter-bootstrap-rails (~> 3.2)
uglifier (>= 1.0.3)
web-console (~> 2.0)
whenever
145 changes: 59 additions & 86 deletions app/assets/stylesheets/bootstrap_and_overrides.css.less
View file
@@ -1,37 +1,19 @@
@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
@import "delta_input";

body {
padding-top: 10px;
}

// Set the correct sprite paths
@iconSpritePath: image-url('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: image-url('twitter/bootstrap/glyphicons-halflings-white.png');

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-url('fontawesome-webfont.eot');
@fontAwesomeEotPath_iefix: asset-url('fontawesome-webfont.eot?#iefix');
@fontAwesomeWoffPath: asset-url('fontawesome-webfont.woff');
@fontAwesomeTtfPath: asset-url('fontawesome-webfont.ttf');
@fontAwesomeSvgPath: asset-url('fontawesome-webfont.svg#fontawesomeregular');
@import 'fontawesome/font-awesome';

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;
// Fonts
@glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot");
@glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix");
@glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff");
@glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf");
@glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular");
@import "twitter/bootstrap/glyphicons";

//@import 'fontawesome/font-awesome';

// main ui colours
@mainRedColor: #ED0606;
Expand All @@ -46,14 +28,40 @@ body {
// dim colors by this amount when the information is less important
@nonessentialDim: 35%;

//<---- Bootstrap 3 CSS adaptations
label {
font-weight: normal;
text-align: right;
}
h5 {
font-weight: bold;
}
// token-input-list as form element
.form-group .token-input-list-facebook {
width: 100%;
}
// somehow we get extra padding
.navbar > .container-fluid > .navbar-form:first-child {
padding-left: 0;
}
// heading in well needs no top margin
.well > h1:first-child, .well > h2:first-child, .well > h3:first-child, .well > h4:first-child {
margin-top: 0;
}
//---->

// keep top and main navbar closer together
#navbar-top { margin-bottom: 8px; }
// don't show empty main navbar in sm responsive mode
#navbar-main { min-height: 0; }

// Fix empty dd tags in horizontal dl, see https://github.com/twitter/bootstrap/issues/4062
.dl-horizontal {
dd { .clearfix(); }
}

// Do not use additional margin for input in table
.form-horizontal .control-group.control-group-intable,
.form-horizontal .form-group.form-group-intable,
.form-horizontal .controls.controls-intable,
.input-prepend.intable {
margin: 0;
Expand All @@ -71,9 +79,7 @@ body {


.logo {
margin: 10px 0 0 30px;
float: left;
font-size: 35px;
font-size: 33px;
font-weight: bold;
display: block;
color: @mainRedColor;
Expand All @@ -100,7 +106,7 @@ footer {
border-top: 1px solid #e4e4e4;

a {
color: mix(#888, @linkColor, 70%);
color: mix(#888, @link-color, 70%);
}
}

Expand All @@ -127,7 +133,7 @@ table {
text-align: right;
}
td.odd {
background-color: @tableBackgroundAccent;
background-color: @table-bg-accent;
}
th.left, td.left { text-align: left; }
th.right, td.right { text-align: right; }
Expand All @@ -138,7 +144,7 @@ table {
}

tr.selected td {
background-color: @successBackground;
background-color: @state-success-bg;
}
}

Expand Down Expand Up @@ -186,7 +192,7 @@ table {
display: none;
}
.mw-headline a {
color: @textColor;
color: @text-color;
text-decoration: none;
}
}
Expand All @@ -209,9 +215,13 @@ table {
margin-top: -2px;
}

#order-table {
margin-bottom: 80px; // avoid bottom rows obstruction by #order-footer
}

#order-footer, .article-info {
text-align: left;
z-index: 1;
z-index: 5;
position: fixed;
bottom: 0;
background-color: #E4EED6;
Expand Down Expand Up @@ -300,7 +310,7 @@ td.symbol, th.symbol {
padding-right: 0;
text-align: center;
}
.symbol { color: tint(@textColor, @nonessentialDim); }
.symbol { color: tint(@text-color, @nonessentialDim); }
.used .symbol { color: tint(@articleUsedColor, @nonessentialDim); }
.unused .symbol { color: tint(@articleUnusedColor, @nonessentialDim); }
.partused .symbol { color: tint(@articlePartusedColor, @nonessentialDim); }
Expand Down Expand Up @@ -335,8 +345,8 @@ td.symbol, th.symbol {

// center table rows vertically (including form elements)
table.table {
td, th {
vertical-align: middle;
& > thead, & > tbody, & > tfoot {
& > tr > td, & > tr > th { vertical-align: middle; }
}
select, textarea, input, .uneditable-input,
.input-append, .input-prepend {
Expand All @@ -352,13 +362,13 @@ table.table {
margin: 5px 0 0 0;
}
}
.control-group {
.form-group {
margin-bottom: 5px;
}
.control-group.h_wrapper {
.form-group.h_wrapper {
margin-bottom: 5px;
}
.control-group.select {
.form-group.select {
margin-bottom: 15px
}
}
Expand All @@ -383,11 +393,6 @@ label {
padding-bottom: 0.4ex;
}

// allow buttons as input add-on (with proper height)
.input-append button.add-on {
height: inherit;
}

// inline form elements
.inline {
display: inline;
Expand All @@ -403,7 +408,7 @@ input.package {
.package-image(right);
// disabled and readonly definitions though
&[disabled], &[readonly] {
background-color: @inputDisabledBackground;
background-color: @input-bg-disabled;
}
}
i.package {
Expand All @@ -420,15 +425,15 @@ i.package.icon-only {
background-position: right;
display: inline-block;
}
.package { color: tint(@textColor, @nonessentialDim); }
.package { color: tint(@text-color, @nonessentialDim); }
.used .package { color: tint(@articleUsedColor, @nonessentialDim); }
.unused .package { color: tint(@articleUnusedColor, @nonessentialDim); }
.partused .package { color: tint(@articlePartusedColor, @nonessentialDim); }
.unavailable .package { color: @articleUnavailColor; }

// very small inputs - need !important for responsive selectors
.input-nano {
width: 30px !important;
width: 55px !important;
}

// get rid of extra space on bottom of dialog with form
Expand All @@ -439,10 +444,10 @@ i.package.icon-only {
// multiple-column layout in forms (landscape tablet and wider only)
@media (min-width: 768px) {
.form-horizontal .fold-line {
.control-group {
.form-group {
float: left;
}
.control-group + .control-group {
.form-group + .form-group {
.control-label {
width: auto;
margin: 0 10px;
Expand All @@ -459,7 +464,7 @@ i.package.icon-only {
margin-bottom: 20px;
}
}
.control-group:last-child {
.form-group:last-child {
float: none;
.controls {
float: none;
Expand All @@ -479,40 +484,8 @@ i.package.icon-only {
margin-top: 5px;
}

// unlock button same size as warning sign
.input-prepend button.unlocker {
// small unlock and exclamation mark button with equal size
button.unlocker {
padding-right: 6px;
padding-left: 7px;
}

// TODO: Remove the .panel defines after updating Bootstrap to >=3.0
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-default {
border-color: #ddd;
}

.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px
}

.panel-default > .panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd
}

.panel-body {
padding: 15px;
padding-bottom: 0px;
}

0 comments on commit 821dd0a

Please sign in to comment.