mirror of
https://github.com/Southampton-RSG/breccia-mapper.git
synced 2026-03-03 03:17:07 +00:00
Add remaining parts of core template structure
This commit is contained in:
James Graham
@@ -8,6 +8,9 @@ https://docs.djangoproject.com/en/2.2/topics/settings/
|
||||
|
||||
For the full list of settings and their values, see
|
||||
https://docs.djangoproject.com/en/2.2/ref/settings/
|
||||
|
||||
Before production deployment, see
|
||||
https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
|
||||
"""
|
||||
|
||||
import collections
|
||||
@@ -16,13 +19,25 @@ import pathlib
|
||||
from decouple import config, Csv
|
||||
import dj_database_url
|
||||
|
||||
|
||||
# Settings exported to templates
|
||||
# https://github.com/jakubroztocil/django-settings-export
|
||||
|
||||
SETTINGS_EXPORT = [
|
||||
'DEBUG',
|
||||
'PROJECT_LONG_NAME',
|
||||
'PROJECT_SHORT_NAME',
|
||||
]
|
||||
|
||||
|
||||
PROJECT_LONG_NAME = config('PROJECT_LONG_NAME', default='Project Long Name')
|
||||
PROJECT_SHORT_NAME = config('PROJECT_SHORT_NAME', default='shortname')
|
||||
|
||||
|
||||
# Build paths inside the project like this: BASE_DIR.joinpath(...)
|
||||
BASE_DIR = pathlib.Path(__file__).parent.parent
|
||||
|
||||
|
||||
# Quick-start development settings - unsuitable for production
|
||||
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
|
||||
|
||||
# SECURITY WARNING: keep the secret key used in production secret!
|
||||
SECRET_KEY = config('SECRET_KEY')
|
||||
|
||||
@@ -48,6 +63,9 @@ DJANGO_APPS = [
|
||||
]
|
||||
|
||||
THIRD_PARTY_APPS = [
|
||||
'bootstrap4',
|
||||
'constance',
|
||||
'constance.backends.database',
|
||||
]
|
||||
|
||||
FIRST_PARTY_APPS = [
|
||||
@@ -75,6 +93,8 @@ TEMPLATES = [
|
||||
'APP_DIRS': True,
|
||||
'OPTIONS': {
|
||||
'context_processors': [
|
||||
'django_settings_export.settings_export',
|
||||
'constance.context_processors.config',
|
||||
'django.template.context_processors.debug',
|
||||
'django.template.context_processors.request',
|
||||
'django.contrib.auth.context_processors.auth',
|
||||
|
||||
21
breccia_mapper/static/css/global.css
Normal file
21
breccia_mapper/static/css/global.css
Normal file
@@ -0,0 +1,21 @@
|
||||
/* Sticky footer from https://css-tricks.com/couple-takes-sticky-footer/#article-header-id-3 */
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* end of sticky footer styles */
|
||||
39
breccia_mapper/static/css/masthead.css
Normal file
39
breccia_mapper/static/css/masthead.css
Normal file
@@ -0,0 +1,39 @@
|
||||
header.masthead {
|
||||
position: relative;
|
||||
background: #343a40 no-repeat center;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 8rem;
|
||||
min-height: 200px;
|
||||
height: 60vh;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
header.masthead .overlay {
|
||||
position: absolute;
|
||||
background-color: #212529;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.4;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
header.masthead .textbox-container {
|
||||
background-color: rgba(30, 30, 30, 0.2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
header.masthead {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 12rem;
|
||||
}
|
||||
|
||||
header.masthead h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
149
breccia_mapper/templates/base.html
Normal file
149
breccia_mapper/templates/base.html
Normal file
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
{% load bootstrap4 %}
|
||||
{% if 'use_i18n'|bootstrap_setting %}
|
||||
{% load i18n %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
{% endif %}
|
||||
<html lang="{{ LANGUAGE_CODE|default:'en_us' }}">
|
||||
|
||||
<head>
|
||||
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
{% bootstrap_css %}
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.min.css"
|
||||
integrity="sha256-/sdxenK1NDowSNuphgwjv8wSosSNZB0t5koXqd7XqOI="
|
||||
crossorigin="anonymous" />
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.min.css"
|
||||
integrity="sha256-8DcgqUGhWHHsTLj1qcGr0OuPbKkN1RwDjIbZ6DKh/RA="
|
||||
crossorigin="anonymous" />
|
||||
|
||||
{% load staticfiles %}
|
||||
<link rel="stylesheet"
|
||||
href="{% static 'css/global.css' %}">
|
||||
|
||||
{% if 'javascript_in_head'|bootstrap_setting %}
|
||||
{% if 'include_jquery'|bootstrap_setting %}
|
||||
{# jQuery JavaScript if it is in head #}
|
||||
{% bootstrap_jquery jquery='include_jquery'|bootstrap_setting %}
|
||||
{% endif %}
|
||||
|
||||
{# Bootstrap JavaScript if it is in head #}
|
||||
{% bootstrap_javascript %}
|
||||
{% endif %}
|
||||
|
||||
{% block extra_head %}{% endblock %}
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content" style="display: flex; flex-direction: column">
|
||||
{% block navbar %}
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a href="{% url 'index' %}" class="navbar-brand">
|
||||
{{ settings.PROJECT_SHORT_NAME }}
|
||||
</a>
|
||||
|
||||
<button type="button" class="navbar-toggler"
|
||||
data-toggle="collapse" data-target="#navbarCollapse"
|
||||
aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navbar">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="navbar-collapse collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mt-2 mt-lg-0">
|
||||
{% if request.user.is_superuser %}
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'admin:index' %}" class="nav-link">Admin</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav mt-2 mt-lg-0 ml-auto">
|
||||
{% if request.user.is_authenticated %}
|
||||
<li class="nav-item">
|
||||
{% if request.user.person %}
|
||||
<a href="{{ request.user.get_absolute_url }}" class="nav-link">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
{{ request.user }}
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
<span class="navbar-text">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
{{ request.user }}
|
||||
</span>
|
||||
|
||||
{% endif %}
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'logout' %}" class="nav-link">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
Log Out
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'login' %}" class="nav-link">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
Log In
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
{# Global banner if config.NOTICE_TEXT is set using Constance #}
|
||||
{% if config.NOTICE_TEXT %}
|
||||
<div class="alert {{ config.NOTICE_CLASS }} rounded-0 mb-0" role="alert">
|
||||
<h4 class="alert-heading text-center mb-0">{{ config.NOTICE_TEXT }}</h4>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block before_content %}{% endblock %}
|
||||
|
||||
<main class="container">
|
||||
{# Display Django messages as Bootstrap alerts #}
|
||||
{% bootstrap_messages %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<div class="container">
|
||||
{% block after_content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer bg-light">
|
||||
<div class="container">
|
||||
<span class="text-muted">{{ settings.PROJECT_LONG_NAME }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% if not 'javascript_in_head'|bootstrap_setting %}
|
||||
{% if 'include_jquery'|bootstrap_setting %}
|
||||
{# jQuery JavaScript if it is in body #}
|
||||
{% bootstrap_jquery jquery='include_jquery'|bootstrap_setting %}
|
||||
{% endif %}
|
||||
|
||||
{# Bootstrap JavaScript if it is in body #}
|
||||
{% bootstrap_javascript %}
|
||||
{% endif %}
|
||||
|
||||
{% block extra_script %}{% endblock %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
79
breccia_mapper/templates/index.html
Normal file
79
breccia_mapper/templates/index.html
Normal file
@@ -0,0 +1,79 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block extra_head %}
|
||||
{% load staticfiles %}
|
||||
<link rel="stylesheet"
|
||||
href="{% static 'css/masthead.css' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block before_content %}
|
||||
<header class="container-fluid masthead text-white text-left"
|
||||
style="background-image: url('https://via.placeholder.com/800x500')">
|
||||
<div class="overlay"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="ml-5 px-4 mt-3 pt-3 textbox-container">
|
||||
<h1 class="display-1">{{ settings.PROJECT_LONG_NAME }}</h1>
|
||||
<p class="lead">Snappy leader here...</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="bg-secondary py-3">
|
||||
<div class="container text-white">
|
||||
<h2>Snappy tagline here...</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-light py-2 mb-4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Do Feature 1</h2>
|
||||
|
||||
<span class="fas fa-5x fa-atlas"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Do Feature 2</h2>
|
||||
|
||||
<span class="fas fa-5x fa-atlas"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Do Feature 3</h2>
|
||||
|
||||
<span class="fas fa-5x fa-atlas"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row align-items-center">
|
||||
<div class="col-sm-8">
|
||||
<h2 class="pb-2">About {{ settings.PROJECT_LONG_NAME }}</h2>
|
||||
|
||||
<p>
|
||||
{{ settings.PROJECT_LONG_NAME }} is...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<img class="img-fluid py-3" src="https://via.placeholder.com/400x400">
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -14,8 +14,17 @@ Including another URLconf
|
||||
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
|
||||
"""
|
||||
from django.contrib import admin
|
||||
from django.urls import path
|
||||
from django.urls import include, path
|
||||
|
||||
from . import views
|
||||
|
||||
urlpatterns = [
|
||||
path('admin/', admin.site.urls),
|
||||
|
||||
path('',
|
||||
include('django.contrib.auth.urls')),
|
||||
|
||||
path('',
|
||||
views.IndexView.as_view(),
|
||||
name='index'),
|
||||
]
|
||||
|
||||
5
breccia_mapper/views.py
Normal file
5
breccia_mapper/views.py
Normal file
@@ -0,0 +1,5 @@
|
||||
from django.views.generic import TemplateView
|
||||
|
||||
|
||||
class IndexView(TemplateView):
|
||||
template_name = 'index.html'
|
||||
Reference in New Issue
Block a user