commit 718a8c2ce8f061e15c61c48998efa639e12dfe01
parent 7235fd40a7579d6329ab16dc0f9f3d7d4a16f6b9
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date: Thu, 11 Apr 2024 20:21:38 -0700
Add header with maximize button to slides page
Diffstat:
5 files changed, 104 insertions(+), 59 deletions(-)
diff --git a/songs2slides/static/maximize.svg b/songs2slides/static/maximize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize-2"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
+\ No newline at end of file
diff --git a/songs2slides/static/slides.css b/songs2slides/static/slides.css
@@ -0,0 +1,25 @@
+/* Revert reveal.js styling */
+header a {
+ line-height: normal;
+}
+
+/* Position header button */
+header button {
+ float: right;
+}
+
+/* Adjust button styles for header */
+header .icon img {
+ filter: none !important;
+}
+header .icon:hover {
+ background-color: #00000010;
+}
+header .icon:active {
+ background-color: #00000020;
+}
+
+/* Hide header in fullscreen mode */
+:fullscreen header {
+ display: none;
+}
diff --git a/songs2slides/templates/base.html b/songs2slides/templates/base.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <title>{% if title %}{{ title }} - {% endif %}SongsSlides</title>
+ <meta name="description" content="An easy-to-use tool that automatically finds song lyrics and creates lyric slideshows">
+ <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icon-32.png') }}">
+ <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icon-32.png') }}">
+ <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon-180.png') }}">
+ <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}"/>
+
+ {% block head %}{% endblock %}
+ </head>
+
+ <body>
+ {% block body %}{% endblock %}
+ </body>
+</html>
diff --git a/songs2slides/templates/layout.html b/songs2slides/templates/layout.html
@@ -1,27 +1,14 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% extends "base.html" %}
- <title>{% if title %}{{ title }} - {% endif %}SongsSlides</title>
- <meta name="description" content="An easy-to-use tool that automatically finds song lyrics and creates lyric slideshows">
- <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icon-32.png') }}">
- <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icon-32.png') }}">
- <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon-180.png') }}">
- <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}"/>
+{% block body %}
+<header>
+ <a href="{{ url_for('main.home') }}">
+ <img src="{{ url_for('static', filename='icon.svg') }}" alt=""/>
+ Songs2Slides
+ </a>
+</header>
- {% block head %}{% endblock %}
- </head>
- <body>
- <header>
- <a href="{{ url_for('main.home') }}">
- <img src="{{ url_for('static', filename='icon.svg') }}" alt=""/>
- Songs2Slides
- </a>
- </header>
-
- <main>
- {% block main %}{% endblock %}
- </main>
- </body>
-</html>
+<main>
+ {% block main %}{% endblock %}
+</main>
+{% endblock body %}
diff --git a/songs2slides/templates/slides.html b/songs2slides/templates/slides.html
@@ -1,37 +1,49 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Web View - SongsSlides</title>
+{% extends "base.html" %}
- <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/reveal.css">
- <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/theme/black.css">
- <script src="https://unpkg.com/reveal.js@^4//dist/reveal.js"></script>
- </head>
+{% set title = 'Web View' %}
- <body>
- <div class="reveal">
- <div class="slides">
- {% for slide in slides %}
- <section>
- {% for line in slide.split('\n') %}
- <p>{{ line }}</p>
- {% endfor %}
- </section>
- {% endfor %}
- </div>
- </div>
+{% block head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='slides.css') }}"/>
+<link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/reveal.css">
+<link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/theme/black.css">
+<script src="https://unpkg.com/reveal.js@^4//dist/reveal.js"></script>
+{% endblock head %}
- <script>
- // Start Reveal.js slideshow without extra features
- Reveal.initialize({
- controls: false,
- help: false,
- jumpToSlide: false,
- overview: false,
- pause: false,
- progress: false,
- transition: 'none',
- });
- </script>
- </body>
-</html>
+{% block body %}
+<header>
+ <a href="{{ url_for('main.home') }}">
+ <img src="{{ url_for('static', filename='icon.svg') }}" alt=""/>
+ Songs2Slides
+ </a>
+ <button class="icon" title="Fullscreen"
+ onclick="document.body.requestFullscreen()">
+ <img src="{{ url_for('static', filename='maximize.svg') }}"
+ alt="Fullscreen icon"/>
+ </button>
+</header>
+
+<div class="reveal">
+ <div class="slides">
+ {% for slide in slides %}
+ <section>
+ {% for line in slide.split('\n') %}
+ <p>{{ line }}</p>
+ {% endfor %}
+ </section>
+ {% endfor %}
+ </div>
+</div>
+
+<script>
+ // Start Reveal.js slideshow without extra features
+ Reveal.initialize({
+ controls: false,
+ help: false,
+ jumpToSlide: false,
+ overview: false,
+ pause: false,
+ progress: false,
+ transition: 'none',
+ });
+</script>
+{% endblock body %}
