sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-04 12:22:47 +00:00
Code Issues Projects Releases Wiki Activity

Add navigation structure.

Browse Source
This commit is contained in:
Patrick Jentsch
2019-07-04 14:59:23 +02:00
parent 05cbf1fed5
commit e127e1e5c4
4 changed files with 73 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/static/css/opaque.css
View File

@@ -0,0 +1,9 @@
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}

11
app/templates/base.html.j2
View File

@@ -12,11 +12,12 @@
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/material-design-icons-3.0.1/iconfont/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--> <!--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"/>
<!--Let browser know website is optimized for mobile--> <!--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 'sidenav.html.j2' %} {% include 'navs.html.j2' %}
<main> <main>
<div class="container"> <div class="container">
@@ -31,6 +32,14 @@
<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(
document.getElementById("nav-account"),
{"constrainWidth": false, "coverTrigger": false}
);
M.Dropdown.init(
document.getElementById("nav-notifications"),
{"constrainWidth": false, "coverTrigger": false}
);
</script> </script>
</body> </body>
</html> </html>

53
app/templates/navs.html.j2 Normal file
View File

@@ -0,0 +1,53 @@
<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>

15
app/templates/sidenav.html.j2
View File

@@ -1,15 +0,0 @@
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="{{ url_for('static', filename='images/favicon.png') }}">
</div>
</div>
</li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>