Layout update

Incorporates latest Tyrian layout, indents properly, adds new way of displaying update timestamps in the footer, adds android theme color, and rainbows.
author: Alex Legler <alex@a3li.li> 2015-12-25 19:48:34 +0100
committer: Alex Legler <alex@a3li.li> 2015-12-25 19:48:34 +0100
commit: e859200b9fe1fb8955b2f9b239184d39c1a67462 (patch)
tree: 86d59d1e4cbd940ede740cf284a643745341b91f
parent: Ruby style updates (diff)
download: infra-status-e859200b9fe1fb8955b2f9b239184d39c1a67462.tar.gz
infra-status-e859200b9fe1fb8955b2f9b239184d39c1a67462.tar.bz2
infra-status-e859200b9fe1fb8955b2f9b239184d39c1a67462.zip
2 files changed, 124 insertions, 100 deletions
diff --git a/public/assets/css/infra-status.css b/public/assets/css/infra-status.css
index ace8033..d85df87 100644
--- a/public/assets/css/infra-status.css
+++ b/public/assets/css/infra-status.css
@@ -25,4 +25,11 @@ i.status-icon {
 
 .active .status-icon {
 	color: white;
-}
-\ No newline at end of file
+}
+
+.group-header {
+  color: #8a8a8a;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  font-size: 90%;
+}
diff --git a/views/layout.erb b/views/layout.erb
index 21968fe..c70aeb5 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -4,6 +4,7 @@
   <title><%= "#{h @title} - " if @title %>Gentoo Infrastructure Status</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#54487a">
   <meta name="description" content="Gentoo Infrastructure Status provides information on the status of the services the Gentoo Linux distribution offers to its developers and users.">
   <link href="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/bootstrap.min.css" rel="stylesheet" media="screen">
   <link href="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/tyrian.min.css" rel="stylesheet" media="screen">
@@ -11,122 +12,138 @@
   <link rel="icon" href="https://www.gentoo.org/favicon.ico" type="image/x-icon">
 </head>
 <body>
-<header>
-  <div class="site-title">
-    <div class="container">
-      <div class="row">
-        <div class="site-title-buttons">
-          <div class="btn-group btn-group-sm">
-            <a href="http://get.gentoo.org/" type="button" class="btn get-gentoo"><span class="fa fa-download"></span> <strong>Get Gentoo!</strong></a>
+  <header>
+    <div class="site-title">
+      <div class="container">
+        <div class="row">
+          <div class="site-title-buttons">
             <div class="btn-group btn-group-sm">
-              <button type="button" class="gentoo-org-sites btn dropdown-toggle" data-toggle="dropdown">
-                <span class="glyphicon glyphicon-globe"></span> gentoo.org sites <span class="caret"></span>
-              </button>
-              <ul class="dropdown-menu">
-                <li><a href="http://www.gentoo.org/" title="Main Gentoo website"><span class="fa fa-home fa-fw"></span> gentoo.org</a></li>
-                <li><a href="http://wiki.gentoo.org/" title="Find and contribute documentation"><span class="fa fa-file-text fa-fw"></span> Wiki</a></li>
-                <li><a href="https://bugs.gentoo.org/" title="Report issues and find common issues"><span class="fa fa-bug fa-fw"></span> Bugs</a></li>
-                <li><a href="http://forums.gentoo.org/" title="Discuss with the community"><span class="fa fa-comments-o fa-fw"></span> Forums</a></li>
-                <li><a href="http://packages.gentoo.org/" title="Find software for your Gentoo"><span class="fa fa-hdd-o fa-fw"></span> Packages</a></li>
-                <li class="divider"></li>
-                <li><a href="http://overlays.gentoo.org/" title="Collaborate on maintaining packages"><span class="fa fa-code-fork fa-fw"></span> Overlays</a></li>
-                <li><a href="http://planet.gentoo.org/" title="Find out what's going on in the developer community"><span class="fa fa-rss fa-fw"></span> Planet</a></li>
-                <li><a href="http://archives.gentoo.org/" title="Read up on past discussions"><span class="fa fa-archive fa-fw"></span> Archives</a></li>
-                <li><a href="http://sources.gentoo.org/" title="Browse our source code"><span class="fa fa-code fa-fw"></span> Sources</a></li>
-                <li class="divider"></li>
-                <li><a href="http://infra-status.gentoo.org/" title="Get updates on the services provided by Gentoo"><span class="fa fa-tasks fa-fw"></span> Infra Status</a></li>
-              </ul>
+              <a href="https://get.gentoo.org/" role="button" class="btn get-gentoo"><span class="fa fa-fw fa-download"></span> <strong>Get Gentoo!</strong></a>
+              <div class="btn-group btn-group-sm">
+                <a class="btn gentoo-org-sites dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
+                  <span class="fa fa-fw fa-map-o"></span> <span class="hidden-xs">gentoo.org sites</span> <span class="caret"></span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-right">
+                  <li><a href="https://www.gentoo.org/" title="Main Gentoo website"><span class="fa fa-home fa-fw"></span> gentoo.org</a></li>
+                  <li><a href="https://wiki.gentoo.org/" title="Find and contribute documentation"><span class="fa fa-file-text-o fa-fw"></span> Wiki</a></li>
+                  <li><a href="https://bugs.gentoo.org/" title="Report issues and find common issues"><span class="fa fa-bug fa-fw"></span> Bugs</a></li>
+                  <li><a href="https://forums.gentoo.org/" title="Discuss with the community"><span class="fa fa-comments-o fa-fw"></span> Forums</a></li>
+                  <li><a href="https://packages.gentoo.org/" title="Find software for your Gentoo"><span class="fa fa-hdd-o fa-fw"></span> Packages</a></li>
+                  <li class="divider"></li>
+                  <li><a href="https://planet.gentoo.org/" title="Find out what's going on in the developer community"><span class="fa fa-rss fa-fw"></span> Planet</a></li>
+                  <li><a href="https://archives.gentoo.org/" title="Read up on past discussions"><span class="fa fa-archive fa-fw"></span> Archives</a></li>
+                  <li><a href="https://sources.gentoo.org/" title="Browse our source code"><span class="fa fa-code fa-fw"></span> Sources</a></li>
+                  <li class="divider"></li>
+                  <li><a href="https://infra-status.gentoo.org/" title="Get updates on the services provided by Gentoo"><span class="fa fa-server fa-fw"></span> Infra Status</a></li>
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="logo">
-          <img src="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/site-logo.png" alt="Gentoo Linux Logo"/>
-          <span class="site-label">Infra Status</span>
+          <div class="logo">
+            <a href="/" title="Back to the homepage" class="site-logo">
+              <object data="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/site-logo.svg" type="image/svg+xml">
+                <img src="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/site-logo.png" alt="Gentoo Linux Logo">
+              </object>
+            </a>
+            <span class="site-label">Site Title</span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <nav class="tyrian-navbar" role="navigation">
-    <div class="container">
-      <div class="row">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-        </div>
-        <div class="collapse navbar-collapse navbar-main-collapse">
-          <ul class="nav navbar-nav">
-            <li><a href="/">Home</a></li>
-            <li><a href="/feed.atom"><span class="fa fa-rss"></span> Atom Feed</a></li>
-          </ul>
+    <nav class="tyrian-navbar" role="navigation">
+      <div class="container">
+        <div class="row">
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+          </div>
+          <div class="collapse navbar-collapse navbar-main-collapse">
+            <ul class="nav navbar-nav">
+              <li><a href="/">Home</a></li>
+              <li><a href="/feed.atom"><span class="fa fa-rss"></span> Atom Feed</a></li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-  </nav>
-</header>
+    </nav>
+  </header>
 
-<div class="container">
-  <div class="row">
-    <div class="col-lg-12">
-      <%= yield %>
-    </div>
-  </div>
-</div>
-
-<footer>
   <div class="container">
     <div class="row">
-      <div class="col-xs-12 col-md-offset-2 col-md-7">
-        <p class="spacer">
-          Status data updated at <em><%= date_format ServiceRegistry.instance.load_date %>.</em><br />
-          Notices updated at <em><%= date_format NoticeStore.instance.load_date %>.</em><br />
-          Served by <em><%= Socket.gethostname == 'avocet' ? 'infra-status-web1' : 'infra-status-web2' %>.</em>
-        </p>
-      </div>
-      <div class="col-xs-12 col-md-3">
-        <h3 class="footerhead">Questions or comments?</h3>
-        Please feel free to <a href="mailto:infra@gentoo.org">contact us</a>.
+      <div class="col-lg-12">
+        <%= yield %>
       </div>
     </div>
-    <div class="row">
-      <div class="col-xs-3 col-md-2">
-        <ul class="footerlinks three-icons">
-          <li><a href="http://twitter.com/gentoo" title="@Gentoo on Twitter"><span class="fa fa-twitter fa-fw"></span></a></li>
-          <li><a href="https://plus.google.com/+Gentoo" title="+Gentoo on Google+"><span class="fa fa-google-plus fa-fw"></span></a></li>
-          <li><a href="https://www.facebook.com/gentoo.org" title="Gentoo on Facebook"><span class="fa fa-facebook fa-fw"></span></a></li>
-        </ul>
+  </div>
+
+  <footer>
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-12 col-md-offset-2 col-md-7">
+          <h3 class="footerhead">Gentoo Infrastructure Status</h3>
+          <div class="row">
+            <div class="col-xs-12 col-md-4">
+              <span class="group-header">Status data updated</span>
+              <br>
+              <%= date_format ServiceRegistry.instance.load_date %>
+            </div>
+            <div class="col-xs-12 col-md-4">
+              <span class="group-header">Notices updated</span>
+              <br>
+              <%= date_format NoticeStore.instance.load_date %>
+            </div>
+            <div class="col-xs-12 col-md-4">
+              <span class="group-header">Served by</span>
+              <br>
+              <%= Socket.gethostname %>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-md-3">
+          <h3 class="footerhead">Questions or comments?</h3>
+          Please feel free to <a href="mailto:infra@gentoo.org">contact us</a>.
+        </div>
       </div>
-      <div class="col-xs-9 col-md-9">
-        <strong>&copy; 2001&ndash;2015 Gentoo Foundation, Inc.</strong><br />
-        <small>
-          Gentoo is a trademark of the Gentoo Foundation, Inc.
-          The contents of this document, unless otherwise expressly stated, are licensed under the
-          <a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="license">CC-BY-SA-3.0</a> license.
-          The <a href="http://www.gentoo.org/main/en/name-logo.xml">Gentoo Name and Logo Usage Guidelines</a> apply.
-        </small>
+      <div class="row">
+        <div class="col-xs-2 col-sm-3 col-md-2">
+          <ul class="footerlinks three-icons">
+            <li><a href="https://twitter.com/gentoo" title="@Gentoo on Twitter"><span class="fa fa-twitter fa-fw"></span></a></li>
+            <li><a href="https://plus.google.com/+Gentoo" title="+Gentoo on Google+"><span class="fa fa-google-plus fa-fw"></span></a></li>
+            <li><a href="https://www.facebook.com/gentoo.org" title="Gentoo on Facebook"><span class="fa fa-facebook fa-fw"></span></a></li>
+          </ul>
+        </div>
+        <div class="col-xs-10 col-sm-9 col-md-10">
+          <strong>&copy; 2001&ndash;2016 Gentoo Foundation, Inc.</strong><br>
+          <small>
+            Gentoo is a trademark of the Gentoo Foundation, Inc.
+            The contents of this document, unless otherwise expressly stated, are licensed under the
+            <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license">CC-BY-SA-3.0</a> license.
+            The <a href="https://www.gentoo.org/inside-gentoo/foundation/name-logo-guidelines.html">Gentoo Name and Logo Usage Guidelines</a> apply.
+          </small>
+        </div>
       </div>
     </div>
-  </div>
-</footer>
+  </footer>
 
-<script src="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/jquery.min.js"></script>
-<script src="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/bootstrap.min.js"></script>
-<script src="/assets/js/infra-status.js"></script>
-<script type="text/javascript">
-  var _paq = _paq || [];
-  _paq.push(["trackPageView"]);
-  _paq.push(["enableLinkTracking"]);
+  <script src="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/jquery.min.js"></script>
+  <script src="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/bootstrap.min.js"></script>
+  <script src="/assets/js/infra-status.js"></script>
+  <script type="text/javascript">
+    var _paq = _paq || [];
+    _paq.push(["trackPageView"]);
+    _paq.push(["enableLinkTracking"]);
 
-  (function() {
-    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.gentoo.org/";
-    _paq.push(["setTrackerUrl", u+"piwik.php"]);
-    _paq.push(["setSiteId", "5"]);
-    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
-    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
-  })();
-</script>
+    (function() {
+      var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.gentoo.org/";
+      _paq.push(["setTrackerUrl", u+"piwik.php"]);
+      _paq.push(["setSiteId", "5"]);
+      var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
+      g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
+    })();
+  </script>
 </body>
 </html>
author	Alex Legler <alex@a3li.li>	2015-12-25 19:48:34 +0100
committer	Alex Legler <alex@a3li.li>	2015-12-25 19:48:34 +0100
commit	e859200b9fe1fb8955b2f9b239184d39c1a67462 (patch)
tree	86d59d1e4cbd940ede740cf284a643745341b91f
parent	Ruby style updates (diff)
download	infra-status-e859200b9fe1fb8955b2f9b239184d39c1a67462.tar.gz infra-status-e859200b9fe1fb8955b2f9b239184d39c1a67462.tar.bz2 infra-status-e859200b9fe1fb8955b2f9b239184d39c1a67462.zip