Compare commits

..

3 Commits

6 changed files with 48 additions and 15 deletions

1
.gitignore vendored
View File

@@ -2,3 +2,4 @@ app/config.yaml
*__pycache__* *__pycache__*
app/static/cache/* app/static/cache/*
.env .env
app/cypress/screenshots/*

View File

@@ -75,8 +75,8 @@ browse:
# Open the application in the browser at http://localhost:$(PORT) # Open the application in the browser at http://localhost:$(PORT)
chromium http://localhost:$(PORT) chromium http://localhost:$(PORT)
# Cypress tests\ nCYPRESS_DIR := app npm-install:
.PHONY: test cd app && npm install
test: down prod
# Run end-to-end tests with Cypress. test: npm-install
cd app && npx cypress run --spec "cypress/e2e/**/*.spec.js" cd app && npx cypress run --spec "cypress/e2e/**/*.spec.js"

View File

@@ -0,0 +1,32 @@
describe('Navbar Logo Visibility', () => {
beforeEach(() => {
cy.visit('/');
});
it('should have #navbar_logo present in the DOM', () => {
cy.get('#navbar_logo').should('exist');
});
it('should be invisible (opacity 0) by default', () => {
cy.get('#navbar_logo')
.should('exist')
.and('have.css', 'opacity', '0');
});
it('should become visible (opacity 1) after entering fullscreen', () => {
cy.window().then(win => {
win.fullscreen();
});
cy.get('#navbar_logo', { timeout: 4000 })
.should('have.css', 'opacity', '1');
});
it('should become invisible again (opacity 0) after exiting fullscreen', () => {
cy.window().then(win => {
win.fullscreen();
win.exitFullscreen();
});
cy.get('#navbar_logo', { timeout: 4000 })
.should('have.css', 'opacity', '0');
});
});

View File

@@ -173,6 +173,11 @@ iframe{
transition: opacity var(--anim-duration) ease-in-out; transition: opacity var(--anim-duration) ease-in-out;
} }
#navbar_logo.visible {
opacity: 1 !important;
}
/* 1. Make sure headers and footers can collapse */ /* 1. Make sure headers and footers can collapse */
header, header,
footer { footer {

View File

@@ -41,14 +41,11 @@ function enterFullscreen() {
setFullWidth(true); setFullWidth(true);
updateUrlFullscreen(true); updateUrlFullscreen(true);
// fade in logo… (unchanged) // Nur jetzt sichtbar machen
const logo = document.getElementById('navbar_logo'); const logo = document.getElementById('navbar_logo');
if (logo) { if (logo) {
// hide the navbarlogo restore link in fullscreen logo.classList.add('visible');
logo.classList.add('d-none');
} }
// now recalc in lock-step with the CSS collapse animation
recalcWhileCollapsing(); recalcWhileCollapsing();
} }
@@ -57,13 +54,11 @@ function exitFullscreen() {
setFullWidth(false); setFullWidth(false);
updateUrlFullscreen(false); updateUrlFullscreen(false);
// Jetzt wieder verstecken
const logo = document.getElementById('navbar_logo'); const logo = document.getElementById('navbar_logo');
if (logo) { if (logo) {
// show the navbarlogo restore link again logo.classList.remove('visible');
logo.classList.remove('d-none');
} }
// recalc while header/footer expand back
recalcWhileCollapsing(); recalcWhileCollapsing();
} }

View File

@@ -54,7 +54,7 @@
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav{{menu_type}}"> <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
{% if menu_type == "header" %} {% if menu_type == "header" %}
<a class="navbar-brand d-flex align-items-center d-none js-restore" id="navbar_logo" href="#"> <a class="navbar-brand align-items-center d-flex js-restore" id="navbar_logo" href="#">
<img <img
src="{{ url_for('static', filename=platform.logo.cache) }}" src="{{ url_for('static', filename=platform.logo.cache) }}"
alt="{{ platform.titel }}" alt="{{ platform.titel }}"