First shot at bootstrapifying the layout.

DavidS · Aug 18, 2014 · e762a2f · e762a2f
1 parent de5756c
commit e762a2f
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 35 deletions.
diff --git a/Gemfile b/Gemfile
@@ -72,3 +72,7 @@ gem "scoped_search"
 
 # required on windows
 gem "tzinfo-data"
+
+# Style with style
+gem 'bootstrap-sass', '~> 3.2.0'
+gem 'autoprefixer-rails'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -29,7 +29,11 @@ GEM
       tzinfo (~> 1.1)
     arel (5.0.1.20140414130214)
     ast (2.0.0)
+    autoprefixer-rails (2.2.0.20140804)
+      execjs
     bcrypt (3.1.7)
+    bootstrap-sass (3.2.0.1)
+      sass (~> 3.2)
     builder (3.2.2)
     celluloid (0.15.2)
       timers (~> 1.1.0)
@@ -198,6 +202,8 @@ GEM
       coffee-rails
     tzinfo (1.2.1)
       thread_safe (~> 0.1)
+    tzinfo-data (1.2014.6)
+      tzinfo (>= 1.0.0)
     uglifier (2.5.3)
       execjs (>= 0.3.0)
       json (>= 1.8.0)
@@ -206,6 +212,8 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  autoprefixer-rails
+  bootstrap-sass (~> 3.2.0)
   codeclimate-test-reporter
   coffee-rails (~> 4.0.0)
   guard-rspec
@@ -224,4 +232,5 @@ DEPENDENCIES
   spring
   sqlite3
   turbolinks
+  tzinfo-data
   uglifier (>= 1.3.0)
diff --git a/Templates/bootstrap-3.2.0-dist/index.html b/Templates/bootstrap-3.2.0-dist/index.html
@@ -8,7 +8,8 @@
 
     <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
-	<link href="css/bootstrap-theme.min.css" rel="stylesheet">
+    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
+    <link href="css/eigene.css" rel="stylesheet">
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -132,4 +133,4 @@ <h2>Food Court</h2>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>
   </body>
-</html>
+</html>
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -14,4 +14,5 @@
 //= require jquery_ujs
 //= require jquery-ui
 //= require turbolinks
+//= require bootstrap-sprockets
 //= require_tree .
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -0,0 +1,16 @@
+@import "bootstrap-sprockets";
+@import "bootstrap";
+@import "bootstrap/theme";
+
+.navbar-default .navbar-nav > .active > a {
+  background-image: linear-gradient(to bottom, #ff6600 0%, #ffd89a 100%);
+}
+
+.navbar-inverse {
+  border-color: #ffd89a;
+  background-image: linear-gradient(to bottom, #ffd89a 0%, #ffd89a 100%);
+}
+
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: linear-gradient(to bottom, #ff6600 0%, #ffbb00 100%);
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,26 +1,75 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-  <title>Hrdb</title>
-  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <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)} | HRDB" : "HRDB" %></title>
   <%= csrf_meta_tags %>
+
+  <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+  <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
+  <![endif]-->
+
+  <%= stylesheet_link_tag "application", :media => "all" %>
+
+  <!-- For third-generation iPad with high-resolution Retina display: -->
+  <!-- Size should be 144 x 144 pixels -->
+  <%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
+
+  <!-- For iPhone with high-resolution Retina display: -->
+  <!-- Size should be 114 x 114 pixels -->
+  <%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
+
+  <!-- For first- and second-generation iPad: -->
+  <!-- Size should be 72 x 72 pixels -->
+  <%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
+
+  <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+  <!-- Size should be 57 x 57 pixels -->
+  <%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
+
+  <!-- For all other devices -->
+  <!-- Size should be 32 x 32 pixels -->
+  <%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
+
+  <%= javascript_include_tag "application" %>
 </head>
 <body>
 
-<%= yield %>
-
-<p>
-<%= link_to "People", people_path %> |
-<%= link_to "Projects", projects_path %> |
-<% if current_user %>
-  Logged in as <%= current_user.email %>.
-  <%= link_to "Log out", logout_path %>
-<% else %>
-  <%= link_to "Sign up", signup_path %> or
-  <%= link_to "log in", login_path %>.
-<% end %>
-</p>
+<div class="navbar navbar-default navbar-static-top" role="navigation">
+  <div class="container-fluid">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+    <a class="navbar-brand" href="http://www.worldvision.at"><%= image_tag 'worldvision.png', alt: 'www.worldvision.at', height: '50px', style:"margin-top:-15px; margin-left:-10px" %></a>
+    <div class="navbar-collapse collapse navbar-responsive-collapse">
+      <ul class="nav navbar-nav">
+        <li class="active"><%= link_to "Overview", root_path %></li>
+        <li><%= link_to "People", people_path %></li>
+        <li><%= link_to "Projects", projects_path %></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<h1 align="center"><%= yield(:title) %></h1>
+
+<div class="container">
+  <div class="row">
+    <div class="col-lg-12">
+      <%#= bootstrap_flash %>
+    </div>
+  </div><!--/row-->
+  <%= yield %>
+
+  <footer>
+    <p>&copy; Company 2014</p>
+  </footer>
+
+</div> <!-- /container -->
 
 </body>
 </html>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
@@ -1,5 +1,22 @@
-<h1>Welcome#index</h1>
+<% content_for :title do "Overview" end -%>
+<div class="row">
+<div class="col-xs-8 col-xs-offset-1">
+<h2>Holidays</h2>
+Christine (bis 1.9.)<br />
+Andrea (ab Montag)
+</div>
+<div class="col-xs-3">
+<h2>Links</h2>
+<a href="http://10.43.1.18/MediaWiki/index.php/Hauptseite">World Vision Wiki</a><br />
+<a href="http://10.43.1.18/glpi/">IT Tickets</a><br />
+<a href="http://10.43.1.18/TeamPass/">Passwort Datenbank</a><br />
+</div>
+</div>
+<div class="row">
+<div class="col-xs-8 col-xs-offset-1">
 <ul>
 <li><%= link_to 'New Person', new_person_path %></li>
 <li><%= link_to 'New Project', new_project_path %></li>
 </ul>
+</div>
+</div>
diff --git a/public/images/worldvision.png b/public/images/worldvision.png