Dynamic menu bar

CloudBotIRC · Apr 2, 2015 · 5cfc284 · 5cfc284
1 parent cfc6cf6
commit 5cfc284
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/cloudbot/web/main.py b/cloudbot/web/main.py
@@ -33,7 +33,7 @@ def get(self):
 
 
 class WebInterface():
-    def __init__(self, bot, port=8080, address="0.0.0.0"):
+    def __init__(self, bot, port=8090, address="0.0.0.0"):
         self.bot = bot
         self.port = port
         self.address = address

diff --git a/cloudbot/web/templates/basic.html b/cloudbot/web/templates/basic.html
@@ -1,4 +1,5 @@
 {% extends "layout.html" %}
+{% set active_page = "index" %}
 {% block title %}{{ heading }} - {{ super() }}{% endblock %}
 {% block content %}
 <div class="placeholder">

diff --git a/cloudbot/web/templates/layout.html b/cloudbot/web/templates/layout.html
@@ -1,26 +1,30 @@
+{% set navigation_bar = [
+    ('/', 'index', 'Status'),
+    ('/commands/', 'commands', 'Commands'),
+    ('/factoids/', 'factoids', 'Factoids')
+] -%}
+{% set active_page = active_page|default('index') -%}
 <!DOCTYPE html>
 <html lang="en">
 <head>
     {% block head %}
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <link rel="icon" href="../../favicon.ico">
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="">
+        <meta name="author" content="">
+        <link rel="icon" href="../../favicon.ico">
 
-    <title>{% block title %}{{ main_title }}{% endblock %}</title>
+        <title>{% block title %}{{ main_title }}{% endblock %}</title>
 
-    <!-- Bootstrap core CSS -->
-    <link href="./s/css/bootstrap.min.css" rel="stylesheet">
-    <link href="./s/css/style.css" rel="stylesheet">
+        <link href="./s/css/bootstrap.min.css" rel="stylesheet">
+        <link href="./s/css/style.css" rel="stylesheet">
 
-    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-    <!--[if lt IE 9]>
-    <script  src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-    <script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
+        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+        <!--[if lt IE 9]>
+        <script  src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
     {% endblock %}
 </head>
 
@@ -40,9 +44,10 @@
         </div>
         <div id="navbar" class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
-                <li class="active"><a href="#">Home</a></li>
-                <li><a href="#about">About</a></li>
-                <li><a href="#contact">Contact</a></li>
+                {% for href, id, caption in navigation_bar %}
+                    <li{% if id == active_page %} class="active"{% endif %}><a href="{{ href|e }}">{{ caption|e }}</a>
+                    </li>
+                {% endfor %}
             </ul>
         </div>
         <!--/.nav-collapse -->
@@ -52,12 +57,8 @@
 <div class="container">
     {% block content %}{% endblock %}
 </div>
-<!-- /.container -->
 
-
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
+<!-- javascript -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="./s/js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->