butter/butter-portal
6
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Adds breadcrumbs and navigation, moves QR code to its own page.

Browse source
This commit is contained in:
Ana Custura 2026-02-18 13:17:22 +00:00
parent d9f4c6d597
commit 947b4ac59a
7 changed files with 93 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app/templates/about.html Normal file
View file

@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title is-large butter-title">About this {{get_setting('butterbox_name')}}.</h1>
<div class="block" style="align-content: center; text-align: center;">
<p> Some info here about butter and how to create your own.</p>
</div>
{% endblock %}

31
app/templates/base.html
View file

@ -14,10 +14,33 @@
</head>
<body>
<div class="container">
<div class="header" style="display: inline">
<a href="{{ url_for('index') }}"><img class="image is-32x32" style="display: inline;" src="{{ get_setting('butterbox_logo') }}"></a>
<p style="display: inline; padding-inline-start: 10px;">{{ get_setting('butterbox_name') }}</p>
</div>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a href="/"><img class="image is-32x32" src="{{ get_setting('butterbox_logo') }}"></a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a href="{{ url_for('share') }}" class="navbar-item">
Share
</a>
<a href="{{ url_for('about') }}" class="navbar-item">
About
</a>
<a href="{{ url_for('admin') }}" class="navbar-item">
Admin
</a>
</div>
</div>
</nav>
<div class="content"> </div>
{% with messages = get_flashed_messages() %}

15
app/templates/breadcrumbs.html Normal file
View file

@ -0,0 +1,15 @@
<div class="breadcrumbs">
<nav class="breadcrumb" aria-label="breadcrumbs">
{% set ns = namespace(crumb_path=request.url_root[:-1])%}
{# We use a namespace since jinja 2 variables cannot persist outside loops
The crumb_path var dynamically constructs urls for each breadcrumb based on request.path (removing the trailing slash),
We need to do this for the file viewer, as it can have many nested directories, but works for all other pages. #}
<ul>
{% set breadcrumbs = request.path[1:].split('/') %} {# request.path starts with / #}
{% for crumb in breadcrumbs %}
{% set ns.crumb_path = ns.crumb_path + "/" +crumb %}
<li><a href="{{ ns.crumb_path }}">{{crumb}}</a></li>
{% endfor %}
</ul>
</nav>
</div>

8
app/templates/index.html
View file

@ -13,13 +13,5 @@
</a>
{% endfor %}
</div>
</hr>
{% if display_wifi_password %}
<div class="block" style="align-content: center; text-align: center;">
<p>Connect to this box with wifi:
<img class="image is-128x128" style="margin: 0 auto" src="{{ url_for('static', filename='images/wifi_qr_code.png') }}">
</p>
</div>
{% endif %}
{% endblock %}

18
app/templates/share.html Normal file
View file

@ -0,0 +1,18 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title is-large butter-title">Share access to {{get_setting('butterbox_name')}}.</h1>
{% if display_wifi_password %}
<div class="block" style="align-content: center; text-align: center;">
<p>Connect to WiFi name: "{{ get_setting('ssid') }}" with password: "{{ get_setting('wifi_password') }}". You can also use the following QR code to join:</p>
<img class="image is-256x256" style="margin: 0 auto" src="{{ url_for('static', filename='images/wifi_qr_code.png') }}">
</div>
{% else %}
<div class="block" style="align-content: center; text-align: center;">
<p>Your WiFi name is "{{ get_setting('ssid') }}". You will be able to join without a password.</p>
</div>
{% endif %}
{% endblock %}

6
app/templates/usb-file-viewer.html
View file

@ -1,8 +1,8 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title is-large butter-title">{{ _('File Viewer') }}</h1>
{% include 'breadcrumbs.html' %}
<h1 class="title is-large butter-title">{{ _('File Viewer') }}</h1>
<div>
<table class="table" style="margin: 0 auto">
<thead>
@ -18,7 +18,7 @@
<tr>
<td><img src="{{ f.icon_url}}"></td>
{% if f.is_dir %}
<td><a href=".{{ f.relative_path}}">{{ f.name}}</a></td>
<td><a href="/{{ request.endpoint}}/{{ f.relative_path}}">{{ f.name}}</a></td>
{% endif %}
{% if f.is_file %}