WP6
/
expub_compendium
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Styling sticky footer and header

joel
Simon Bowie 3 years ago
parent
4861f6cf10
commit
d8a01e87d8
6 changed files with 42 additions and 16 deletions
Unified View Show Diff Stats
  1. +1
    -1
      README.md
  2. +5
    -0
      web/app/__init__.py
  3. +3
    -0
      web/app/static/styles/custom.css
  4. +31
    -14
      web/app/templates/base.html
  5. +1
    -1
      web/app/templates/index.html
  6. +1
    -0
      web/requirements.txt

+ 1
- 1
README.md View File

To build the database run: To build the database run:


`docker exec -it python python` `docker exec -it python python`
`from project import db, create_app, models`
`from app import db, create_app, models`
`db.create_all(app=create_app())` `db.create_all(app=create_app())`

+ 5
- 0
web/app/__init__.py View File

from flask import Flask from flask import Flask
from flask_sqlalchemy import SQLAlchemy from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager from flask_login import LoginManager
from flask_moment import Moment
import os import os


# init SQLAlchemy so we can use it later in our models # init SQLAlchemy so we can use it later in our models
db = SQLAlchemy() db = SQLAlchemy()


moment = Moment()

def create_app(): def create_app():
app = Flask(__name__) app = Flask(__name__)


login_manager.login_view = 'auth.login' login_manager.login_view = 'auth.login'
login_manager.init_app(app) login_manager.init_app(app)


moment.init_app(app)

from .models import User from .models import User


@login_manager.user_loader @login_manager.user_loader

+ 3
- 0
web/app/static/styles/custom.css View File

main > .container {
padding: 60px 15px 0;
}

+ 31
- 14
web/app/templates/base.html View File

# @acknowledgements: # @acknowledgements:
# https://www.digitalocean.com/community/tutorials/how-to-make-a-web-application-using-flask-in-python-3 # https://www.digitalocean.com/community/tutorials/how-to-make-a-web-application-using-flask-in-python-3
# Bootstrap 5.1.3: https://getbootstrap.com/ # Bootstrap 5.1.3: https://getbootstrap.com/
# Flask-Moment: https://flask-moment.readthedocs.io/en/latest/
--> -->


<!DOCTYPE html> <!DOCTYPE html>
<html> <html>


<head> <head>
{{ moment.include_moment() }}
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>COPIM online toolkit</title> <title>COPIM online toolkit</title>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="{{ url_for('static',filename='styles/custom.css') }}" rel="stylesheet">
</head> </head>


<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<body class="d-flex flex-column h-100">

<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('main.index')}}">COPIM online toolkit</a> <a class="navbar-brand" href="{{ url_for('main.index')}}">COPIM online toolkit</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</div>
</nav> </nav>
</header>


<div class="container">
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="alert alert-danger">
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
{% block content %}
{% endblock %}
</div>
<!-- Begin page content -->
<main class="flex-shrink-0">
<div class="container">
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="alert alert-danger">
{{ messages[0] }}
</div>
{% endif %}
{% endwith %}
{% block content %}
{% endblock %}
</div>
</main>



<footer class="footer mt-auto py-3 bg-light fixed-bottom">
<div class="container">
<span class="text-muted">© {{ moment().format('YYYY') }} COPIM and licensed under a Creative Commons Attribution 4.0 International License (CC BY 4.0).</span>
</div>
</footer>
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

+ 1
- 1
web/app/templates/index.html View File

{% extends "base.html" %} {% extends "base.html" %}


{% block content %} {% block content %}
<h1 class="title">
<h1 class="mt-5">
COPIM online toolkit COPIM online toolkit
</h1> </h1>
<h2 class="subtitle"> <h2 class="subtitle">

+ 1
- 0
web/requirements.txt View File

flask flask
flask-sqlalchemy flask-sqlalchemy
flask-login flask-login
flask-moment

Write Preview
Loading…
Cancel
Save