"horizintal navbar"
This commit is contained in:
parent
77b382bb74
commit
fb2d17fbfb
|
|
@ -41,7 +41,7 @@ main > section.inline > article.right {
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
div.content > nav {
|
||||
div.content > nav.vertical {
|
||||
flex: 0 0 200px;
|
||||
background-color: var(--clear-bg);
|
||||
border-right-color: var(--mid-bg);
|
||||
|
|
@ -49,12 +49,12 @@ div.content > nav {
|
|||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
div.content > nav {
|
||||
div.content > nav.vertical {
|
||||
order: -1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.content > nav > a {
|
||||
div.content > nav.vertical > a {
|
||||
display: block;
|
||||
background-color: var(--clear-bg);
|
||||
font-size: 20px;
|
||||
|
|
@ -63,13 +63,13 @@ div.content > nav > a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
div.content > nav > a:hover {
|
||||
div.content > nav.vertical > a:hover {
|
||||
background-color: var(--coloured-bg);
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.content > nav > a.selected {
|
||||
div.content > nav.vertical > a.selected {
|
||||
background-color: var(--light-coloured-bg);
|
||||
}
|
||||
|
||||
|
|
@ -79,6 +79,53 @@ main {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
main > div.navbar_container {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: var(--clear-bg);
|
||||
border-color: var(--coloured-bg);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
color: var(--text-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li > a {
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li > a:hover {
|
||||
background-color: var(--coloured-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li > a.right_border {
|
||||
border-right-color: var(--coloured-bg);
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li > a.selected {
|
||||
background-color: var(--light-coloured-bg);
|
||||
}
|
||||
|
||||
main > article {
|
||||
padding: 10px;
|
||||
color: var(--text-color);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "index.html" %}
|
||||
{% block title %}Ajax{% endblock %}
|
||||
{% block main %}
|
||||
<article class='left'>
|
||||
<h3>Get HTML response from AJAX</h3>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,12 @@
|
|||
{% extends "index.html" %}
|
||||
{% block title %}Articles{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>This is the title</h3>
|
||||
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
|
||||
<article>
|
||||
<h3>Choose your article</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
<p>This <a href='/plop.html'>link</a> will lead to an error page</p>
|
||||
<p>
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia desers unt mollit anim id est laborum.
|
||||
</p>
|
||||
<ul>
|
||||
<li>plop</li>
|
||||
<li>plap</li>
|
||||
<li>plip</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>plop</li>
|
||||
<li>plap</li>
|
||||
<li>plip</li>
|
||||
</ol>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
Please select your article
|
||||
</p>
|
||||
</article>
|
||||
<article class='left'>
|
||||
<h3>The title is back again and is angry</h3>
|
||||
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
<p>
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<article id='article_receiver'>
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
{% extends "index.html" %}
|
||||
{% block title %}Articles{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>Article #{{ ID }}</h3>
|
||||
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
<p>This <a href='/plop.html'>link</a> will lead to an error page</p>
|
||||
<p>
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia desers unt mollit anim id est laborum.
|
||||
</p>
|
||||
<ul>
|
||||
<li>plop</li>
|
||||
<li>plap</li>
|
||||
<li>plip</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>plop</li>
|
||||
<li>plap</li>
|
||||
<li>plip</li>
|
||||
</ol>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</article>
|
||||
<article class='left'>
|
||||
<h3>Another disposition</h3>
|
||||
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
<p>
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "index.html" %}
|
||||
{% block title %}Basics{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>Basics</h3>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "index.html" %}
|
||||
{% block title %}Database{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>Accessing database</h3>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='zxx'>
|
||||
<head>
|
||||
<title>{% block title %}Accueil{% endblock %}</title>
|
||||
<title>TetaWebApp - {% block title %}Accueil{% endblock %}</title>
|
||||
<meta name="viewport" content="initial-scale=1.0" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/colors.css" />
|
||||
|
|
@ -15,19 +15,34 @@
|
|||
<header>{% block banner %}TetaWebApp{% endblock %}</header>
|
||||
<div class='content'>
|
||||
{% block nav %}
|
||||
<nav>
|
||||
<nav class='vertical'>
|
||||
{% block menu %}
|
||||
{% for item in menu %}
|
||||
{% if item[2] == 1 %}
|
||||
<a class='selected' href='{{ item[1] }}'>{{ item[0] }}</a>
|
||||
{% else %}
|
||||
<a href='{{ item[1] }}'>{{ item[0] }}</a>
|
||||
{% endif %}
|
||||
{% for key in item[1] %}
|
||||
{% if item[2] == 1 %}
|
||||
<a class='selected' href='{{ key }}'>{{ item[0] }}</a>
|
||||
{% else %}
|
||||
<a href='{{ key }}'>{{ item[0] }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
</nav>
|
||||
{% endblock%}
|
||||
<main>
|
||||
{% if navbar %}
|
||||
<div class='navbar_container'>
|
||||
<ul class='horizontal'>
|
||||
{% for item in navbar %}
|
||||
{% set selected = ['', 'selected'] %}
|
||||
{% set last = ['right_border', 'last'] %}
|
||||
{% for url in item[1] %}
|
||||
<li><a class='{{ last[item[3]] }} {{ selected[item[2]] }}' href='{{ url }}'>{{ item[0] }}</a></li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>TetaWebApp demo</h3>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "index.html" %}
|
||||
{% block title %}Inputs{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>The input collection</h3>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "index.html" %}
|
||||
{% block title %}TODO{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>TODO list</h3>
|
||||
|
|
@ -9,7 +10,7 @@
|
|||
<li><strike>Basic Ajax support</strike></li>
|
||||
<li><strike>Session management</strike></li>
|
||||
<li>Basic documentation</li>
|
||||
<li>Horizontal navbar</li>
|
||||
<li><strike>Horizontal navbar</strike></li>
|
||||
<li><strike>License</strike></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -29,38 +29,56 @@ app.secret_key = 'ce1d1c9ff0ff388a838b3a1e3207dd27'
|
|||
db = SQLAlchemy(app)
|
||||
|
||||
########################################################################
|
||||
# Menu management:
|
||||
# Menu and navigation management
|
||||
########################################################################
|
||||
|
||||
def get_menu(page):
|
||||
""" The main menu is a list of lists in the followin format:
|
||||
[string caption, string URL endpoint, int 0]
|
||||
- The URL end point MUST match the function called by the corresponding
|
||||
route.
|
||||
[unicode caption,
|
||||
{unicode URL endpoint: [unicode route, ...]},
|
||||
int 0]
|
||||
- The URL end point is the URL where to point to (href)
|
||||
- One of the routes MUST match the route called by request
|
||||
- The int 0 is used to determine which menu entry is actally called.
|
||||
The value MUST be 0."""
|
||||
menu = [['Accueil', '/', 0],
|
||||
['Articles', '/articles', 0],
|
||||
['Basics', '/basics', 0],
|
||||
['Inputs', '/inputs', 0],
|
||||
['Ajax', '/ajax', 0],
|
||||
['Database', '/database', 0],
|
||||
['Todo', '/todo', 0],
|
||||
menu = [[u'Home', {u'/': [u'/']}, 0],
|
||||
[u'Articles', {u'/articles': [u'/articles', u'/articles/<ID>']}, 0],
|
||||
[u'Basics', {u'/basics': [u'/basics']}, 0],
|
||||
[u'Inputs', {u'inputs': [u'/inputs']}, 0],
|
||||
[u'Ajax', {u'/ajax': [u'/ajax']}, 0],
|
||||
[u'Database', {u'/database': [u'/database']}, 0],
|
||||
[u'Todo', {u'/todo': [u'/todo']}, 0],
|
||||
]
|
||||
# This is index page
|
||||
if page == 'index':
|
||||
menu[0][2] = 1
|
||||
return menu
|
||||
|
||||
# Let's look for the actual page
|
||||
page = '/%s' % page
|
||||
for item in menu:
|
||||
if item[1] == page:
|
||||
item[2] = 1
|
||||
return menu
|
||||
for url in item[1]:
|
||||
for route in item[1][url]:
|
||||
if route == page:
|
||||
item[2] = 1
|
||||
return menu
|
||||
# This should never happen
|
||||
return menu
|
||||
|
||||
def get_navbar(page, selected):
|
||||
""" The horizontal navbar is a list of lists in the followin format:
|
||||
[unicode caption, {unicode URL endpoint: [unicode route, ...]}, int 0]
|
||||
- The URL end point is the URL where to point to (href)
|
||||
- One of the routes MUST match the route called by request
|
||||
- The int 0 is used to de """
|
||||
navbars = [[u'First article', {u'/articles/1': [u'/articles', u'/articles/<ID>']}, 0, 0],
|
||||
[u'Second article', {u'/articles/2': [u'/articles', u'/articles/<ID>']}, 0, 0],
|
||||
[u'Third article', {u'/articles/3': [u'/articles', u'/articles/<ID>']}, 0, 0]
|
||||
]
|
||||
navbar = []
|
||||
for item in navbars:
|
||||
for url in item[1]:
|
||||
if url == selected:
|
||||
item[2] = 1
|
||||
for route in item[1][url]:
|
||||
if route == page:
|
||||
navbar.append(item)
|
||||
navbar[len(navbar) - 1][3] = 1
|
||||
return navbar
|
||||
|
||||
########################################################################
|
||||
# Session management
|
||||
########################################################################
|
||||
|
|
@ -118,7 +136,7 @@ def login():
|
|||
token = gen_token()
|
||||
session['token'] = token
|
||||
# Return user to index page
|
||||
page = 'index'
|
||||
page = '/'
|
||||
menu = get_menu(page)
|
||||
response = app.make_response(render_template('index.html', menu=menu))
|
||||
# Push token to cookie
|
||||
|
|
@ -131,7 +149,7 @@ def login():
|
|||
@check_session
|
||||
def index():
|
||||
""" Index page """
|
||||
page = inspect.currentframe().f_code.co_name
|
||||
page = str(request.url_rule)
|
||||
menu = get_menu(page)
|
||||
return render_template('index.html', menu=menu)
|
||||
|
||||
|
|
@ -139,15 +157,27 @@ def index():
|
|||
@check_session
|
||||
def articles():
|
||||
""" Arcticles page """
|
||||
page = inspect.currentframe().f_code.co_name
|
||||
page = str(request.url_rule)
|
||||
menu = get_menu(page)
|
||||
return render_template('articles.html', menu=menu)
|
||||
navbar = get_navbar(page, '')
|
||||
return render_template('articles.html', menu=menu, navbar=navbar)
|
||||
|
||||
@app.route("/articles/<ID>", methods=['GET', 'POST'])
|
||||
@check_session
|
||||
def articles_by_id(ID):
|
||||
""" Arcticles page """
|
||||
page = str(request.url_rule)
|
||||
menu = get_menu(page)
|
||||
selected = page.replace('<ID>', ID)
|
||||
navbar = get_navbar(page, selected)
|
||||
return render_template('articles_by_id.html', menu=menu, navbar=navbar, ID=ID)
|
||||
|
||||
|
||||
@app.route("/basics", methods=['GET', 'POST'])
|
||||
@check_session
|
||||
def basics():
|
||||
""" Basics page """
|
||||
page = inspect.currentframe().f_code.co_name
|
||||
page = str(request.url_rule)
|
||||
menu = get_menu(page)
|
||||
return render_template('basics.html', menu=menu)
|
||||
|
||||
|
|
@ -156,7 +186,7 @@ def basics():
|
|||
@check_session
|
||||
def inputs():
|
||||
""" Show the input collection """
|
||||
page = inspect.currentframe().f_code.co_name
|
||||
page = str(request.url_rule)
|
||||
menu = get_menu(page)
|
||||
return render_template('inputs.html', menu=menu)
|
||||
|
||||
|
|
@ -164,7 +194,7 @@ def inputs():
|
|||
@check_session
|
||||
def ajax():
|
||||
""" Propose various AJAX tests """
|
||||
page = inspect.currentframe().f_code.co_name
|
||||
page = str(request.url_rule)
|
||||
menu = get_menu(page)
|
||||
return render_template('ajax.html', menu=menu)
|
||||
|
||||
|
|
@ -172,7 +202,7 @@ def ajax():
|
|||
@check_session
|
||||
def database():
|
||||
""" A blah on using databases """
|
||||
page = inspect.currentframe().f_code.co_name
|
||||
page = str(request.url_rule)
|
||||
menu = get_menu(page)
|
||||
return render_template('database.html', menu=menu)
|
||||
|
||||
|
|
@ -180,7 +210,7 @@ def database():
|
|||
@check_session
|
||||
def todo():
|
||||
""" The famous TODO list """
|
||||
page = inspect.currentframe().f_code.co_name
|
||||
page = str(request.url_rule)
|
||||
menu = get_menu(page)
|
||||
return render_template('todo.html', menu=menu)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue