Add header with maximize button to slides page

ashermorgan · Apr 12, 2024 · 718a8c2 · 718a8c2
1 parent 7235fd4
commit 718a8c2
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 59 deletions.
diff --git a/songs2slides/static/maximize.svg b/songs2slides/static/maximize.svg
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 %}