candifloss/assettrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix: Footer

Browse Source 
- Add footer in login page
- Re-style footer
- Add `login.css`
This commit is contained in:
Candifloss 2025-04-12 15:14:16 +05:30
parent fa7cf6b1d9
commit 4ef6aafd3d
3 changed files with 69 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
static/css/login.css Normal file
View File

@ -0,0 +1,38 @@
/* Login page specific styles */
.login-page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.login-container {
flex: 1;
display: flex;
width: 100%;
}
.login-branding {
flex: 1;
}
.login-form-wrapper {
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.login-form-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.login-footer {
padding: 1rem;
text-align: center;
background-color: #f8f9fa;
border-top: 1px solid #dee2e6;
}

22
templates/footer.html
View File

@ -1,12 +1,12 @@
<footer class="footer mt-auto py-1 bg-light border-top">
<div class="container">
<div class="row align-items-center">
<div class="col text-center text-muted small">
Powered by
<a href="https://git.candifloss.cc/candifloss/flask_crud_app" class="text-decoration-none">AssetTrack</a> |
&copy; 2025 <a href="https://candifloss.cc" class="text-decoration-none">candifloss</a> |
<a href="https://www.gnu.org/licenses/gpl-3.0.html" class="text-decoration-none">GNU GPLv3</a>
</div>
</div>
</div>
<footer class="footer mt-auto py-1 login-footer">
<div class="container">
<div class="row align-items-center">
<div class="col text-center text-muted small">
Powered by
<a href="https://git.candifloss.cc/candifloss/flask_crud_app" class="text-decoration-none">AssetTrack</a> |
&copy; 2025 <a href="https://candifloss.cc" class="text-decoration-none">candifloss</a> |
<a href="https://www.gnu.org/licenses/gpl-3.0.html" class="text-decoration-none">GNU GPLv3</a>
</div>
</div>
</div>
</footer>

37
templates/login.html
View File

@ -6,24 +6,25 @@
<title>{{ brandingconfig.APP_NAME }} - Login</title>
{% include 'favicon.html' %}
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/login.css') }}" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container-fluid vh-100">
<div class="row h-100">
<!-- Left Column (Branding) -->
<div class="col-md-6 d-none d-md-flex bg-primary text-white justify-content-center align-items-center">
<div class="text-center p-5">
<img src="{{ url_for('static', filename=brandingconfig.LOGIN_LOGO) }}"
alt="{{ brandingconfig.APP_NAME }} Logo"
class="img-fluid mb-4" style="max-height: 150px;">
<h1 class="display-4 fw-bold">{{ brandingconfig.APP_NAME }}</h1>
<p class="lead">{{ brandingconfig.TAGLINE }}</p>
</div>
<body class="login-page bg-light">
<div class="login-container">
<!-- Left Column (Branding) -->
<div class="login-branding d-none d-md-flex bg-primary text-white justify-content-center align-items-center">
<div class="text-center p-5">
<img src="{{ url_for('static', filename=brandingconfig.LOGIN_LOGO) }}"
alt="{{ brandingconfig.APP_NAME }} Logo"
class="img-fluid mb-4" style="max-height: 150px;">
<h1 class="display-4 fw-bold">{{ brandingconfig.APP_NAME }}</h1>
<p class="lead">{{ brandingconfig.TAGLINE }}</p>
</div>
</div>
<!-- Right Column (Login Form) -->
<div class="col-md-6 d-flex justify-content-center align-items-center">
<div class="w-100 p-4" style="max-width: 400px;">
<!-- Right Column (Login Form + Footer) -->
<div class="login-form-wrapper">
<div class="login-form-container">
<div class="w-100" style="max-width: 400px;">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
@ -61,10 +62,12 @@
</div>
</div>
</div>
{% include 'footer.html' %}
</div>
</div>
<!-- Bootstrap JS (optional) -->
<!-- Bootstrap JS -->
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>
</html>