nngo/PassKeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

04/19 Continue fixing the UI issues with Chrome

Browse Source
This commit is contained in:
Nguyen Ngo
2026-04-19 09:40:48 -04:00
parent d2240bc4d7
commit 562cb85de9
6 changed files with 1351 additions and 2808 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/__init__.py
+5 -1
View File
@@ -31,6 +31,10 @@ def create_app(config_name: str = 'development') -> Flask:
cors_origins = app.config.get('CORS_ORIGINS', '*')
CORS(app, resources={r'/api/*': {'origins': cors_origins}})
# Inject static asset version into every template for cache-busting.
# Usage in templates: {{ url_for('static', filename='css/app.css') }}?v={{ sv }}
app.jinja_env.globals['sv'] = app.config.get('STATIC_VERSION', '1')
# Attach security headers to every response
@app.after_request
def set_security_headers(response):
@@ -111,4 +115,4 @@ def create_app(config_name: str = 'development') -> Flask:
def recover_page():
return render_template('auth/recover.html')
return app
return app
app/config.py
+6 -1
View File
@@ -41,6 +41,11 @@ class BaseConfig:
# CORS — restrict to the production origin in production config.
CORS_ORIGINS = os.environ.get('CORS_ORIGINS', '*')
# Cache-busting version string appended as ?v=... to all static assets.
# Bump this value on every deploy to force browsers to reload CSS/JS.
# Set via .env: STATIC_VERSION=20260418
STATIC_VERSION = os.environ.get('STATIC_VERSION', '1')
class DevelopmentConfig(BaseConfig):
DEBUG = True
@@ -59,4 +64,4 @@ class ProductionConfig(BaseConfig):
config = {
'development': DevelopmentConfig,
'production': ProductionConfig,
}
}
app/static/css/app.css
+441 -1147
View File
File diff suppressed because it is too large Load Diff
app/static/js/layout-init.js
+26
View File
@@ -0,0 +1,26 @@
/**
* layout-init.js — runs synchronously in <head> before body renders.
*
* Sets html.is-mobile or html.is-desktop immediately so CSS scoped to
* those classes takes effect on the very first paint. No flash, no
* layout shift, works on Chrome and Safari equally.
*
* Also restores the sidebar collapsed state on desktop so the sidebar
* width is correct from the very first frame.
*
* Must be loaded with NO defer/async attribute so it blocks parsing
* until it runs — that's intentional and necessary.
*/
(function () {
var isMobile = window.matchMedia('(max-width: 768px)').matches;
document.documentElement.classList.add(isMobile ? 'is-mobile' : 'is-desktop');
// On desktop, restore collapsed state from localStorage so the sidebar
// renders at the correct width without any visual jump.
if (!isMobile && localStorage.getItem('sidebar_collapsed') === '1') {
// We can't set it on #sidebar yet (body not parsed), so we use a
// temporary html class that CSS can target, then vault.js adds
// .collapsed to the sidebar element on DOMContentLoaded.
document.documentElement.classList.add('sidebar-will-collapse');
}
})();
app/static/js/vault.js
+851 -1634
View File
File diff suppressed because it is too large Load Diff
app/templates/base.html
+22 -25
View File
@@ -1,28 +1,25 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self';"
/>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>{% block title %}PassKeeper{% endblock %}</title>
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/app.css') }}"
/>
{% block head_extra %}{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
{% block body %}{% endblock %}
<div id="toast" class="toast" aria-live="polite"></div>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self';">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{% block title %}PassKeeper{% endblock %}</title>
<!-- layout-init.js MUST be synchronous (no defer/async) so it runs before body renders -->
<script src="{{ url_for('static', filename='js/layout-init.js') }}?v={{ sv }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}?v={{ sv }}">
{% block head_extra %}{% endblock %}
</head>
{% block scripts %}{% endblock %}
</body>
</html>
<body class="{% block body_class %}{% endblock %}">
{% block body %}{% endblock %}
<div id="toast" class="toast" aria-live="polite"></div>
{% block scripts %}{% endblock %}
</body>
</html>