mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-25 02:44:18 +00:00
Create and use module templates for different page sections.
This commit is contained in:
Patrick Jentsch
parent
c27408ef78
commit
96960a9e25
BIN
app/static/images/logo_sfb_1288.png
Normal file
BIN
app/static/images/logo_sfb_1288.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
@ -8,18 +8,15 @@
|
|||||||
<title>Opaque</title>
|
<title>Opaque</title>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<link href="{{ url_for('static', filename='images/favicon.png') }}" rel="icon" type="image/png">
|
<link href="{{ url_for('static', filename='images/favicon.png') }}" rel="icon" type="image/png">
|
||||||
<!-- import materialize icons css -->
|
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/material-icons/material-icons.css') }}">
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/material-design-icons-3.0.1/iconfont/material-icons.css') }}">
|
|
||||||
<!--Import materialize.css-->
|
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}" media="screen,projection"/>
|
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}" media="screen,projection"/>
|
||||||
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/opaque.css') }}" media="screen,projection"/>
|
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/opaque.css') }}" media="screen,projection"/>
|
||||||
<!--Let browser know website is optimized for mobile-->
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% include 'navs.html.j2' %}
|
{% include 'header.html.j2' %}
|
||||||
|
|
||||||
<main>
|
<main class="grey lighten-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
@ -28,17 +25,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
{% include 'footer.html.j2' %}
|
||||||
|
|
||||||
<!--JavaScript at end of body for optimized loading-->
|
<!--JavaScript at end of body for optimized loading-->
|
||||||
<script type="text/javascript" src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
|
<script type="text/javascript" src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
|
||||||
<script>
|
<script>
|
||||||
M.AutoInit();
|
M.AutoInit();
|
||||||
M.Dropdown.init(
|
M.Dropdown.init(
|
||||||
document.getElementById("nav-account"),
|
document.getElementById("nav-notifications"),
|
||||||
{"constrainWidth": false, "coverTrigger": false}
|
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
|
||||||
);
|
);
|
||||||
M.Dropdown.init(
|
M.Dropdown.init(
|
||||||
document.getElementById("nav-notifications"),
|
document.getElementById("nav-settings"),
|
||||||
{"constrainWidth": false, "coverTrigger": false}
|
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
39
app/templates/footer.html.j2
Normal file
39
app/templates/footer.html.j2
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<footer class="page-footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12 l3">
|
||||||
|
<img src="{{ url_for('static', filename='images/logo_sfb_1288.png') }}" class="responsive-img" style="max-height: 140px;">
|
||||||
|
</div>
|
||||||
|
<div class="col s12 l3">
|
||||||
|
<h5 class="white-text">About</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col s12 l3">
|
||||||
|
<h5 class="white-text">Connect</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col s12 l3">
|
||||||
|
<h5 class="white-text">Contact</h5>
|
||||||
|
<ul>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
|
||||||
|
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-copyright">
|
||||||
|
<div class="container">
|
||||||
|
© 2019 Bielefeld University
|
||||||
|
<a class="grey-text text-lighten-4 right" href="#!">Impress</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
36
app/templates/header.html.j2
Normal file
36
app/templates/header.html.j2
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul class="left hide-on-large-only">
|
||||||
|
<li><a href="#" data-target="sidenav" class="sidenav-trigger"><i class="material-icons">menu</i></a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-wrapper">
|
||||||
|
<span class="brand-logo center">
|
||||||
|
{% if title %}
|
||||||
|
{{ title }}
|
||||||
|
{% else %}
|
||||||
|
Opaque
|
||||||
|
{% endif %}
|
||||||
|
</span>
|
||||||
|
<ul class="right hide-on-med-and-down">
|
||||||
|
<li><a id="nav-notifications" class="dropdown-trigger" href="#!" data-target="nav-notifications-dropdown"><i class="material-icons">notifications</i></a></li>
|
||||||
|
<li><a id="nav-settings" class="dropdown-trigger" href="#!" data-target="nav-settings-dropdown"><i class="material-icons">settings</i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- dropdowns -->
|
||||||
|
<div id="nav-notifications-dropdown" class="dropdown-content">
|
||||||
|
<p>Notifications</p>
|
||||||
|
</div>
|
||||||
|
<div id="nav-settings-dropdown" class="dropdown-content">
|
||||||
|
<p>Settings</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- sidenav -->
|
||||||
|
<ul id="slide-out" class="sidenav sidenav-fixed">
|
||||||
|
<li><a href="{{ url_for('index') }}">Opaque</a></li>
|
||||||
|
<li><a href="{{ url_for('auth.login') }}">Login</a></li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
@ -1,53 +0,0 @@
|
|||||||
<nav class="blue-grey darken-2">
|
|
||||||
<ul class="left">
|
|
||||||
<li><a href="#" data-target="sidenav" class="sidenav-trigger show-on-large"><i class="material-icons">menu</i></a></li>
|
|
||||||
</ul>
|
|
||||||
<div class="nav-wrapper">
|
|
||||||
<a href="#" class="brand-logo center">
|
|
||||||
{% if title %}
|
|
||||||
{{ title }}
|
|
||||||
{% else %}
|
|
||||||
Opaque
|
|
||||||
{% endif %}
|
|
||||||
</a>
|
|
||||||
<ul class="right hide-on-med-and-down">
|
|
||||||
<li><a id="nav-notifications" class="dropdown-trigger" href="#!" data-target="nav-notifications-dropdown"><i class="material-icons">notifications</i></a></li>
|
|
||||||
<li><a id="nav-account" class="dropdown-trigger" href="#!" data-target="nav-account-dropdown"><i class="material-icons">account_circle</i></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- sidenav -->
|
|
||||||
<ul id="sidenav" class="sidenav">
|
|
||||||
<li>
|
|
||||||
<img src="{{ url_for('static', filename='images/favicon.png') }}">
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="{{ url_for('index') }}"><i class="material-icons">cloud</i>Opaque</a>
|
|
||||||
</li>
|
|
||||||
<li class="no-padding">
|
|
||||||
<ul class="collapsible collapsible-accordion">
|
|
||||||
<li>
|
|
||||||
<a class="collapsible-header">Ausklappbar<i class="material-icons">arrow_drop_down</i></a>
|
|
||||||
<div class="collapsible-body">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#!">1</a></li>
|
|
||||||
<li><a href="#!">2</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- dropdowns -->
|
|
||||||
<ul id="nav-account-dropdown" class="dropdown-content">
|
|
||||||
<li><a href="#!">Log In</a></li>
|
|
||||||
<li class="divider"></li>
|
|
||||||
<li><a href="#!">Register</a></li>
|
|
||||||
</ul>
|
|
||||||
<div id="nav-notifications-dropdown" class="dropdown-content teal">
|
|
||||||
<p>Notifications</p>
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in New Issue
Block a user