diff options
| -rw-r--r-- | lib/helpers.rb | 14 | ||||
| -rw-r--r-- | views/index.erb | 4 | ||||
| -rw-r--r-- | views/layout.erb | 127 | ||||
| -rw-r--r-- | views/notice.erb | 20 |
4 files changed, 83 insertions, 82 deletions
diff --git a/lib/helpers.rb b/lib/helpers.rb index 55fffea..4430886 100644 --- a/lib/helpers.rb +++ b/lib/helpers.rb @@ -22,7 +22,7 @@ helpers do content = '' ServiceRegistry.instance.columns[id].each do |category| - content << "<h3>%s</h3>\n" % category + content << "<h3 class='mt-3'>%s</h3>\n" % category content << services_info(ServiceRegistry.instance.categories[category][:services]) end @@ -41,7 +41,7 @@ helpers do service_name = service_array.nil? ? 'UNKNOWN NAME' : service_array[:name] data_service_name = service_name.gsub('"', "'") content << " - <a class=\"list-group-item has-tooltip notice-link status-#{_service_status}\" href=\"#notices\" title=\"#{_status_text}\" + <a class=\"list-group-item list-group-item-action has-tooltip notice-link status-#{_service_status}\" href=\"#notices\" title=\"#{_status_text}\" data-toggle=\"tooltip\" data-placement=\"top\" data-container=\"body\" data-service=\"#{service}\" data-service-name=\"#{data_service_name}\"> @@ -83,13 +83,13 @@ helpers do def panel_class(notice) if notice['type'] == 'outage' - 'panel-danger' + 'border-danger' elsif notice['type'] == 'information' - 'panel-info' + 'border-info' elsif notice['type'] == 'maintenance' - 'panel-warning' + 'border-warning' else - 'panel-default' + '' end end @@ -128,7 +128,7 @@ helpers do when 'maintenance' return '<i class="fa fa-wrench"></i>' when 'outage' - return '<i class="glyphicon glyphicon-fire"></i>' + return '<i class="fa fa-fire" aria-hidden="true"></i>' when 'information' return '<i class="fa fa-info-circle"></i>' end diff --git a/views/index.erb b/views/index.erb index 568b5eb..2bafe24 100644 --- a/views/index.erb +++ b/views/index.erb @@ -2,7 +2,7 @@ <p>This data is aggregated from our automated service monitoring system as well as the outage and maintenance notices posted below.</p> -<h2>Service availability overview</h2> +<h2 class="mb-4">Service availability overview</h2> <div class="row"> <div class="col-lg-4"> @@ -16,6 +16,6 @@ </div> </div> -<h2 id="notices">Maintenance and outage notices <small id="notices-for"></small></h2> +<h2 id="notices" class="mt-5">Maintenance and outage notices <small id="notices-for"></small></h2> <%= partial :notice, :collection => NoticeStore.instance.visible_notices %> diff --git a/views/layout.erb b/views/layout.erb index a2cb8be..64d0480 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -6,73 +6,77 @@ <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://assets.gentoo.org/tyrian/v1/bootstrap.min.css" rel="stylesheet" media="screen"> - <link href="https://assets.gentoo.org/tyrian/v1/tyrian.min.css" rel="stylesheet" media="screen"> + <link href="https://assets.gentoo.org/tyrian/v2/tyrian.min.css" rel="stylesheet" media="screen"> <link href="/assets/css/infra-status.css" rel="stylesheet" media="screen"> <link rel="icon" href="https://www.gentoo.org/favicon.ico" type="image/x-icon"> </head> <body> - <header> + + <header> <div class="site-title"> - <div class="container"> - <div class="row"> - <div class="site-title-buttons"> + <div class="container"> + <div class="row justify-content-between"> + <div class="logo"> + <a href="/" title="Back to the homepage" class="site-logo"> + <img src="https://assets.gentoo.org/tyrian/v2/site-logo.png" alt="Gentoo" srcset="https://assets.gentoo.org/tyrian/v2/site-logo.svg"> + </a> + <span class="site-label">Infra status</span> + </div> + <div class="site-title-buttons"> + <div class="btn-group btn-group-sm"> + <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 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> + <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="d-none d-sm-inline">gentoo.org sites</span> + <span class="caret"></span> + </a> + <div class="dropdown-menu dropdown-menu-right"> + <a class="dropdown-item" href="https://www.gentoo.org/" title="Main Gentoo website"><span class="fa fa-home fa-fw"></span> + gentoo.org</a> + <a class="dropdown-item" href="https://wiki.gentoo.org/" title="Find and contribute documentation"><span class="fa fa-file-text-o fa-fw"></span> + Wiki</a> + <a class="dropdown-item" href="https://bugs.gentoo.org/" title="Report issues and find common issues"><span class="fa fa-bug fa-fw"></span> + Bugs</a> + <a class="dropdown-item" href="https://forums.gentoo.org/" title="Discuss with the community"><span class="fa fa-comments-o fa-fw"></span> + Forums</a> + <a class="dropdown-item" href="https://packages.gentoo.org/" title="Find software for your Gentoo"><span class="fa fa-hdd-o fa-fw"></span> + Packages</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" 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> + <a class="dropdown-item" href="https://archives.gentoo.org/" title="Read up on past discussions"><span class="fa fa-archive fa-fw"></span> + Archives</a> + <a class="dropdown-item" href="https://sources.gentoo.org/" title="Browse our source code"><span class="fa fa-code fa-fw"></span> + Sources</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item" 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> </div> </div> </div> - <div class="logo"> - <a href="/" title="Back to the homepage" class="site-logo"> - <object data="https://assets.gentoo.org/tyrian/v1/site-logo.svg" type="image/svg+xml"> - <img src="https://assets.gentoo.org/tyrian/v1/site-logo.png" alt="Gentoo Linux Logo"> - </object> - </a> - <span class="site-label">Infra status</span> - </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> - </div> - </div> + </div> + <nav class="tyrian-navbar navbar navbar-dark navbar-expand-lg bg-primary" role="navigation"> + <div class="container"> + <div class="navbar-header"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> </div> + <div class="collapse navbar-collapse navbar-main-collapse" id="navbar-main-collapse"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item"><a class="nav-link" href="/">Home</a></li> + <li class="nav-item"><a class="nav-link" href="/feed.atom"><span class="fa fa-rss"></span> Atom feed</a></a></li> + </ul> + </div> + </div> </nav> - </header> + </header> - <div class="container"> + <div class="container pb-4"> <div class="row"> <div class="col-lg-12"> <%= yield %> @@ -83,40 +87,40 @@ <footer> <div class="container"> <div class="row"> - <div class="col-xs-12 col-md-offset-2 col-md-7"> + <div class="col-12 offset-md-2 col-md-7"> <h3 class="footerhead">Gentoo infrastructure status</h3> <div class="row"> - <div class="col-xs-12 col-md-4"> + <div class="col-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"> + <div class="col-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"> + <div class="col-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"> + <div class="col-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="row"> - <div class="col-xs-2 col-sm-3 col-md-2"> + <div class="col-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://www.facebook.com/gentoo.org" title="Gentoo on Facebook"><span class="fa fa-facebook fa-fw"></span></a></li> <li></li> </ul> </div> - <div class="col-xs-10 col-sm-9 col-md-10"> + <div class="col-10 col-sm-9 col-md-10"> <strong>© 2001–2020 Gentoo Foundation, Inc.</strong><br> <small> Gentoo is a trademark of the Gentoo Foundation, Inc. @@ -129,8 +133,9 @@ </div> </footer> - <script src="https://assets.gentoo.org/tyrian/v1/jquery.min.js"></script> - <script src="https://assets.gentoo.org/tyrian/v1/bootstrap.min.js"></script> + <script src="https://assets.gentoo.org/tyrian/v2/jquery-3.3.slim.js"></script> + <script src="https://assets.gentoo.org/tyrian/v2/popper.min.js"></script> + <script src="https://assets.gentoo.org/tyrian/v2/bootstrap.min.js"></script> <script src="/assets/js/infra-status.js"></script> </body> </html> diff --git a/views/notice.erb b/views/notice.erb index eb740f2..5959fac 100644 --- a/views/notice.erb +++ b/views/notice.erb @@ -1,15 +1,12 @@ -<div class="panel <%= panel_class(notice) %> notice" data-services="<%= notice['affects'].join ' ' %>" data-url="<%= notice.url %>"> - <div class="panel-heading"> - <h3 class="panel-title"><%= item_icon notice['type']%> <a href="/notice/<%= h notice['id'] %>"><%= h notice['title'] %></a></h3> - </div> - <div class="panel-body"> +<div class="card <%= panel_class(notice) %> notice" data-services="<%= notice['affects'].join ' ' %>" data-url="<%= notice.url %>"> + <h3 class="card-header"><%= item_icon notice['type']%> <a class="text-dark" href="/notice/<%= h notice['id'] %>"><%= h notice['title'] %></a></h3> + <div class="card-body"> <%= markdown notice.content %> </div> - <div class="panel-footer"> + <div class="card-footer"> <div class="row"> <div class="col-sm-4 has-tooltip" data-toggle="tooltip" data-placement="top" title="Notice publication date"> - <span class="glyphicon glyphicon-send pull-left" title="Notice publication date"></span> - <div style="margin-left: 1.25em"><em><%= date_format notice['created_at'] %></em></div> + <div><i class="fa fa-paper-plane mr-1" title="Notice publication date" aria-hidden="true"></i> <em><%= date_format notice['created_at'] %></em></div> </div> <% if notice.key? 'starts_at' %> <%- diff = ((DateTime.now - notice['starts_at']) * 24 * 60 * 60).to_i %> @@ -19,15 +16,14 @@ <% else %> title="Maintenance started <%= humanize(diff) %> ago" <% end %>> - <span class="glyphicon glyphicon-wrench pull-left" title="Maintenance start time"></span> - <div style="margin-left: 1.25em;"><em><%= date_format notice['starts_at'] %></em></div> + <div><i class="fa fa-wrench mr-1" title="Maintenance start time" aria-hidden="true"></i> <em><%= date_format notice['starts_at'] %></em></div> </div> <% else %> <div class="col-sm-4"></div> <% end %> <div class="col-sm-4 has-tooltip" data-toggle="tooltip" data-placement="top" title="Estimated time of service recovery"> - <span class="glyphicon glyphicon-ok pull-left" title="Estimated time of service recovery"></span> - <div style="margin-left: 1.25em;"> + <div> + <i class="fa fa-check mr-1" title="Estimated time of service recovery" aria-hidden="true"></i> <% if notice.key? 'eta' %> <em><%= date_format notice['eta'] %></em> (estimated) <% else %> |