Browse Source

Add common navbar and display MOTD on all pages

Now that we have a page for etherpads, navigation between the various
page is a bit awkward. This change introduces a common navbar across
all pages, and makes sure the MOTD displays on all of them.

This makes some of the links redundant, so we remove them.

Change-Id: I57d02c505ced355d53bc79e0d8240ea63737eae3
changes/26/694326/1
Thierry Carrez 2 months ago
parent
commit
e361c20008
5 changed files with 82 additions and 18 deletions
  1. +22
    -2
      html/etherpads.html
  2. +29
    -10
      html/index.html
  3. BIN
      html/logo.png
  4. +9
    -0
      html/motd.js
  5. +22
    -6
      html/ptg.html

+ 22
- 2
html/etherpads.html View File

@@ -3,13 +3,32 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="180">
<title>List of PTG Etherpads</title>
<title>Project Teams Gathering - List of Etherpads</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.7.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>List of PTG Etherpads</h2>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-brand"><img src="/logo.png"></div>
<div class="navbar-header navbar-brand">Project Teams Gathering</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="ptg.html">Currently at the PTG</a></li>
<li class="active"><a href="etherpads.html">List of Etherpads</a></li>
<li><a href="index.html">Useful links</a></li>
</ul>
</div>
</div>
</nav>
<script id="MOTDTemplate" type="text/x-handlebars-template">
{{#if motd.message}}
<div class="alert alert-{{motd.level}}" role="alert">{{motd.message}}</div>
{{/if}}
</script>
<div id="MOTD"></div>

<p>We use etherpads to track the agenda of topics that should be covered in
each track.<p>
<div id="PTGsessions">
@@ -43,6 +62,7 @@ each track.<p>
<script src="jquery-1.9.1.min.js"></script>
<script src="handlebars-4.0.6.js"></script>
<script src="bootstrap-3.3.7.min.js"></script>
<script src="motd.js"></script>
<script src="ptg.js"></script>
</body>
</html>

+ 29
- 10
html/index.html View File

@@ -2,31 +2,50 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quick PTG Resources</title>
<title>Project Teams Gathering - Useful links</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.7.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>

<div class="container">
<h2>Quick PTG Resources</h2>
<p>Follow links to useful sites for the Project Teams Gathering.</p>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-brand"><img src="/logo.png"></div>
<div class="navbar-header navbar-brand">Project Teams Gathering</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="ptg.html">Currently at the PTG</a></li>
<li><a href="etherpads.html">List of Etherpads</a></li>
<li class="active"><a href="index.html">Useful links</a></li>
</ul>
</div>
</div>
</nav>
<script id="MOTDTemplate" type="text/x-handlebars-template">
{{#if motd.message}}
<div class="alert alert-{{motd.level}}" role="alert">{{motd.message}}</div>
{{/if}}
</script>
<div id="MOTD"></div>

<p>Follow links to useful resources for the Project Teams Gathering.</p>
<script id="LinksTemplate" type="text/x-handlebars-template">
{{#each links as |url title|}}
<li><a href="{{ url }}">{{ title }}</a></li>
<li class="list-group-item"><a href="{{ url }}">{{ title }}</a></li>
{{/each}}
</script>
<ul>
<li><a href="https://www.openstack.org/ptg/">event details, overall schedule, travel info, FAQs</a></li>
<li><a href="ptg.html">current/next topics and room schedule</a></li>
<li><a href="etherpads.html">reference list of track etherpads</a></li>
<li><a href="https://opendev.org/openstack/ptgbot/src/branch/master/README.rst">instructions for interacting with the IRC bot</a></li>
<div id="ExtraLinks"></div>

<ul class="list-group">
<li class="list-group-item"><a href="https://www.openstack.org/ptg/">Event details, overall schedule, travel info, FAQs</a></li>
<li class="list-group-item"><a href="https://opendev.org/openstack/ptgbot/src/branch/master/README.rst">Instructions for interacting with the IRC bot</a></li>
<div id="ExtraLinks"></div>
</ul>
</div>

<script src="jquery-1.9.1.min.js"></script>
<script src="handlebars-4.0.6.js"></script>
<script src="motd.js"></script>
<script src="index.js"></script>
</body>
</html>

BIN
html/logo.png View File

Before After
Width: 20  |  Height: 20  |  Size: 812B

+ 9
- 0
html/motd.js View File

@@ -0,0 +1,9 @@
// sets variable source to the animalTemplate id in index.html
var dsource = document.getElementById("MOTDTemplate").innerHTML;

// Handlebars compiles the above source into a template
var dtemplate = Handlebars.compile(dsource);

$.getJSON("ptg.json", function(json) {
document.getElementById("MOTD").innerHTML = dtemplate(json);
});

+ 22
- 6
html/ptg.html View File

@@ -3,18 +3,36 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="180">
<title>Currently at the PTG</title>
<title>Project Teams Gathering - Currently at the PTG</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.7.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>Project Teams Gathering</h2>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-brand"><img src="/logo.png"></div>
<div class="navbar-header navbar-brand">Project Teams Gathering</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="ptg.html">Currently at the PTG</a></li>
<li><a href="etherpads.html">List of Etherpads</a></li>
<li><a href="index.html">Useful links</a></li>
</ul>
</div>
</div>
</nav>
<script id="MOTDTemplate" type="text/x-handlebars-template">
{{#if motd.message}}
<div class="alert alert-{{motd.level}}" role="alert">{{motd.message}}</div>
{{/if}}
</script>
<div id="MOTD"></div>

<p>See what is being discussed currently at the PTG, and what's coming next.<p>
<div id="PTGsessions">
</div>
</div>

<script id="PTGtemplate" type="text/x-handlebars-template">
<style>
.bot-help {
@@ -29,9 +47,6 @@
}
{{/each}}
</style>
{{#if motd.message}}
<div class="alert alert-{{motd.level}}" role="alert">{{motd.message}}</div>
{{/if}}
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">Current discussion topics</h3></div>
<table class="table">
@@ -146,6 +161,7 @@
<script src="jquery-1.9.1.min.js"></script>
<script src="handlebars-4.0.6.js"></script>
<script src="bootstrap-3.3.7.min.js"></script>
<script src="motd.js"></script>
<script src="ptg.js"></script>
</body>
</html>

Loading…
Cancel
Save