moj_internal_template 0.1.0

data/app/assets/stylesheets/moj-internal-ie6.scss

@@ -0,0 +1,5 @@
+$is-ie: true;
+$ie-version: 6;
+$mobile-ie6: false;
+
+@import "moj-internal";

data/app/assets/stylesheets/moj-internal-ie7.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 7;
+
+@import "moj-internal";

data/app/assets/stylesheets/moj-internal-ie8.scss

@@ -0,0 +1,4 @@
+$is-ie: true;
+$ie-version: 8;
+
+@import "moj-internal";

data/app/assets/stylesheets/moj-internal.scss

@@ -0,0 +1,56 @@
+@import "govuk-template";
+
+// Import GOV.UK frontend toolkit
+
+@import "colours";
+@import "measurements";
+@import "conditionals";
+@import "shims";
+@import "typography";
+@import "css3";
+@import "design-patterns/alpha-beta";
+@import "design-patterns/buttons";
+
+// Shame
+// For changes awaiting merge into the front-end toolkit
+@import "elements/shame";
+
+// Helpers
+@import "elements/helpers";
+
+// Reset
+@import "elements/reset";
+
+// Layout
+@import "elements/layout";
+
+// Modules
+// ==========================================================================
+
+// Forms
+@import "elements/forms";
+
+// Tables
+@import "elements/tables";
+
+// Buttons
+@import "elements/buttons";
+
+// Lists
+@import "elements/lists";
+
+// Panels
+@import "elements/panels";
+
+// Colours
+@import "elements/colours";
+
+// Icons
+@import "elements/icons";
+
+// MoJ
+// ==========================================================================
+
+// Typography
+@import "moj/typography";
+@import "moj/header"

data/app/assets/stylesheets/moj/_fonts.scss

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'Bliss2';
+  src: url('/assets/Bliss2Rg.eot'); /* IE9 Compat Modes */
+  src: url('/assets/Bliss2Rg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('/assets/Bliss2Rg.woff') format('woff'), /* Modern Browsers */
+       url('/assets/Bliss2Rg.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('/assets/Bliss2Rg.svg#svgBliss2Rg') format('svg'); /* Legacy iOS */
+}
+
+body {
+  font-family: 'Bliss2', arial, sans-serif;
+}

data/app/assets/stylesheets/moj/_header.scss

@@ -0,0 +1,126 @@
+@import '_shims';
+@import '_conditionals';
+@import '_measurements';
+
+$header-background-color: #f7f7ed;
+$header-foreground-color: $black;
+
+#global-header {
+  background-color: $header-background-color;
+  width: 100%;
+
+  .header-wrapper {
+    background-color: $header-background-color;
+    max-width: 990px;
+    margin: 0 auto;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    @extend %contain-floats;
+    @include media(tablet){
+      padding-left: $gutter-half;
+      padding-right: $gutter-half;
+    }
+    @include ie-lte(8) {
+      width: 990px;
+    }
+
+    .header-global {
+      @extend %contain-floats;
+      .header-logo {
+        @extend %contain-floats;
+        float: left;
+
+        @include media(desktop){
+          width: 33.33%;
+        }
+        @media screen and (max-width: 379px) {
+          width: auto;
+          float: none;
+        }
+
+        .content {
+          margin: 0 15px;
+        }
+      }
+      .header-logo {
+        margin: 5px 0 2px;
+      }
+    }
+  }
+
+  #logo {
+    float: left;
+    position: relative;
+    top: 1px;
+
+    height: 30px;
+    overflow: visible;
+    vertical-align: baseline;
+
+    color: $header-foreground-color;
+    font-weight: bold;
+    font-size: 30px;
+    line-height: 1em;
+    text-decoration: none;
+    text-rendering: optimizeLegibility;
+    margin-bottom: -1px;
+    padding-bottom: 1px;
+
+    img {
+      position: relative;
+      top: -2px;
+
+      width: 35px;
+      height: 31px;
+
+      padding-right: 6px;
+
+      float: left;
+      display: inline;
+      line-height: inherit;
+      border: none;
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      border-bottom: 1px solid;
+      padding-bottom: 0;
+    }
+
+    &:active {
+      color: $light-blue;
+    }
+  }
+
+  #log-in-out {
+    font-size: 16px;
+    float: right;
+    margin-top: 15px;
+    margin-right: 15px;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+/* Global header bar */
+
+#global-header-bar {
+  @include outer-block;
+  .inner-block {
+    @include inner-block;
+  }
+  .header-bar {
+    height: 10px;
+    background-color: $header-foreground-color;
+    @include ie-lte(8) {
+      font-size: 0;
+    }
+  }
+}

data/app/assets/stylesheets/moj/_typography.scss

@@ -0,0 +1,72 @@
+// Typography
+// ==========================================================================
+
+// Increase the base font size to 19px
+// Using the core-19 mixin from the govuk_toolkit _typography.scss file
+
+@import "fonts";
+
+body {
+  @include core-19;
+  font-family: "Bliss2", Arial, sans-serif;
+}
+
+// Text
+p {
+  margin-top: em(5, 16 );
+  margin-bottom: em(20, 16);
+
+  @include media(tablet) {
+    margin-top: em(5);
+    margin-bottom: em(20);
+  }
+
+}
+
+// Lede, or intro text
+.lede {
+  @include core-24;
+  font-family: inherit;
+}
+
+// Set a max-width for text blocks
+// Less than 75 characters per line of text
+.text {
+  max-width: 30em;
+}
+
+
+// Code styles
+pre,
+code {
+  font-size: 13px;
+  line-height: 19px;
+  color: $black;
+  background-color: $highlight-colour;
+  border: 1px solid $border-colour;
+  padding: 3px 7px;
+}
+
+
+h1 {
+  @include heading-48();
+  @include bold-48();
+  font-family: inherit;
+}
+
+h2 {
+  @include heading-36();
+  @include bold-36();
+  font-family: inherit;
+}
+
+h3 {
+  @include heading-24;
+  @include bold-24();
+  font-family: inherit;
+}
+
+h4 {
+  @include bold-19();
+  font-family: inherit;
+}

data/app/helpers/moj_helper.rb

@@ -0,0 +1,5 @@
+module MojHelper
+  def config_item(key)
+    Rails.configuration.send(key)
+  end
+end

data/app/views/layouts/moj_internal_template.html.erb

@@ -0,0 +1,114 @@
+<%= yield :top_of_page %>
+<!DOCTYPE html>
+<!--[if lt IE 9]><html class="lte-ie8" lang="<%= content_for?(:html_lang) ? yield(:html_lang) : "en" %>"><![endif]-->
+<!--[if gt IE 8]><!--><html lang="<%= content_for?(:html_lang) ? yield(:html_lang) : "en" %>"><!--<![endif]-->
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
+    <title><%= content_for?(:page_title) ? yield(:page_title) : "Ministry of Justice" %></title>
+
+    <script type="text/javascript">
+      (function(){if(navigator.userAgent.match(/IEMobile\/10\.0/)){var d=document,c="appendChild",a=d.createElement("style");a[c](d.createTextNode("@-ms-viewport{width:auto!important}"));d.getElementsByTagName("head")[0][c](a);}})();
+    </script>
+
+    <!--[if gt IE 8]><!--><link href="<%= asset_path "moj-internal.css" %>" media="screen" rel="stylesheet" type="text/css" /><!--<![endif]-->
+    <!--[if IE 6]><link href="<%= asset_path "moj-internal-ie6.css" %>" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
+    <!--[if IE 7]><link href="<%= asset_path "moj-internal-ie7.css" %>" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
+    <!--[if IE 8]><link href="<%= asset_path "moj-internal-ie8.css" %>" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
+
+    <!--[if lt IE 9]>
+      <script src="<%= asset_path "ie.js" %>" type="text/javascript"></script>
+    <![endif]-->
+
+    <link rel="shortcut icon" href="<%= asset_path 'favicon.ico' %>" type="image/x-icon" />
+
+    <!-- For third-generation iPad with high-resolution Retina display: -->
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%= asset_path "apple-touch-icon-144x144.png" %>">
+    <!-- For iPhone with high-resolution Retina display: -->
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<%= asset_path "apple-touch-icon-114x114.png" %>">
+    <!-- For first- and second-generation iPad: -->
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<%= asset_path "apple-touch-icon-72x72.png" %>">
+    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+    <link rel="apple-touch-icon-precomposed" href="<%= asset_path "apple-touch-icon-57x57.png" %>">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:image" content="<%= asset_path "opengraph-image.png" %>">
+
+    <%= yield :head %>
+  </head>
+
+  <body<%= content_for?(:body_classes) ? raw(" class=\"#{yield(:body_classes)}\"") : '' %>>
+    <script type="text/javascript">document.body.className = 'js-enabled ' + document.body.className;</script>
+
+    <div id="skiplink-container">
+      <div>
+        <a href="#content" class="skiplink">Skip to main content</a>
+      </div>
+    </div>
+
+    <div id="global-cookie-message">
+      <div class="outer-block">
+        <div class="inner-block">
+          <% if content_for?(:cookie_message) %>
+            <%= yield :cookie_message %>
+          <% else %>
+            <p>GOV.UK uses cookies to make the site simpler. <a href="https://www.gov.uk/help/cookies">Find out more about cookies</a></p>
+          <% end %>
+        </div>
+      </div>
+    </div>
+    <!--end global-cookie-message-->
+
+    <% unless @omit_header %>
+    <header role="banner" id="global-header" class="<%= yield(:header_class) %>">
+      <div class="header-wrapper">
+        <div class="header-global">
+          <div class="header-logo">
+            <a href="https://www.gov.uk/" title="Go to the GOV.UK homepage" id="logo" class="content">
+              <img src="<%= asset_path 'moj_logotype_crest.png' %>" width="61" height="50" alt="">
+              <%= content_for?(:app_name) ? yield(:app_name) : "Ministry of Justice" %>
+            </a>
+          </div>
+          <div id="log-in-out">
+            <%= yield :log_in_out %>
+          </div>
+          <%= yield :inside_header %>
+        </div>
+      </div>
+    </header>
+    <!--end header-->
+    <% end %>
+
+    <%= yield :after_header %>
+
+    <div id="global-header-bar">
+      <div class="inner-block">
+        <div class="header-bar"></div>
+      </div>
+    </div>
+    <!--end global-header-bar-->
+
+    <%= content_for?(:content) ? yield(:content) : yield %>
+
+    <footer class="group js-footer" id="footer" role="contentinfo">
+
+      <div class="footer-wrapper">
+        <%= yield :footer_top %>
+
+        <div class="footer-meta">
+          <div class="footer-meta-inner">
+            <%= yield :footer_support_links %>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+    <!--end footer-->
+
+    <div id="global-app-error" class="app-error hidden"></div>
+
+    <script src="<%= asset_path "moj.js" %>" type="text/javascript"></script>
+
+    <%= yield :body_end %>
+  </body>
+</html>

data/app/views/layouts/partials/_after_header.html.erb

@@ -0,0 +1,14 @@
+<div class="indicator cf">
+      <p>
+        <strong><%= config_item(:phase).to_s.capitalize %>:</strong>
+        This is a new service -
+        <% if content_for?(:feedback_link) %>
+          <%= yield(:feedback_link) %>
+        <% else %>
+          <a href="<%= "#{config_item(:feedback_url)}" %>">your feedback</a>
+        <% end %>
+        will help us to improve it
+      </p>
+    </div>
+
+    <%= yield :after_header %>

data/app/views/layouts/partials/_body_classes.html.erb

@@ -0,0 +1 @@
+<%= content_for?(:body_classes) ? raw("#{yield(:body_classes)}") : "#{config_item(:phase).to_s.downcase} #{config_item(:product_type).to_s.downcase}" %>

data/app/views/layouts/partials/_body_end.html.erb

@@ -0,0 +1,10 @@
+<!--[if gt IE 6]><!-->
+    <script src="<%= asset_path "vendor/jquery/jquery-1.11.0.min.js" %>" type="text/javascript"></script>
+    <script src="<%= asset_path "moj.js" %>" type="text/javascript"></script>
+
+    <%= yield :javascripts %>
+
+    <script type="text/javascript">$(moj.init);</script>
+    <!--<![endif]-->
+
+    <%= yield :body_end %>

data/app/views/layouts/partials/_content.html.erb

@@ -0,0 +1,11 @@
+<% if content_for?(:content_override) %>
+      <%= yield(:content_override) %>
+    <% else %>
+    <%= yield :before_content %>
+
+    <div id="wrapper" class="group">
+      <section id="content" role="main">
+        <%= content_for?(:content) ? yield(:content) : yield %>
+      </section>
+    </div>
+    <% end %>