mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-11-04 04:12:45 +00:00
Create and use module templates for different page sections.
This commit is contained in:
Patrick Jentsch
@@ -8,18 +8,15 @@
|
||||
<title>Opaque</title>
|
||||
{% endif %}
|
||||
<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-design-icons-3.0.1/iconfont/material-icons.css') }}">
|
||||
<!--Import materialize.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='css/materialize.min.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"/>
|
||||
</head>
|
||||
<body>
|
||||
{% include 'navs.html.j2' %}
|
||||
{% include 'header.html.j2' %}
|
||||
|
||||
<main>
|
||||
<main class="grey lighten-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{% block page_content %}
|
||||
@@ -28,17 +25,19 @@
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'footer.html.j2' %}
|
||||
|
||||
<!--JavaScript at end of body for optimized loading-->
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
|
||||
<script>
|
||||
M.AutoInit();
|
||||
M.Dropdown.init(
|
||||
document.getElementById("nav-account"),
|
||||
{"constrainWidth": false, "coverTrigger": false}
|
||||
document.getElementById("nav-notifications"),
|
||||
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
|
||||
);
|
||||
M.Dropdown.init(
|
||||
document.getElementById("nav-notifications"),
|
||||
{"constrainWidth": false, "coverTrigger": false}
|
||||
document.getElementById("nav-settings"),
|
||||
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
|
||||
);
|
||||
</script>
|
||||
</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>
|
||||
Reference in New Issue
Block a user