Improved base.html navbar and added css

This commit is contained in:
2021-11-09 20:27:03 -06:00
parent f686a93852
commit e7375e6319
3 changed files with 41 additions and 16 deletions

View File

@@ -42,7 +42,9 @@ INSTALLED_APPS = [
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bootstrap5'
'bootstrap5',
'crispy_forms',
'benchcoach'
]
MIDDLEWARE = [
@@ -132,4 +134,6 @@ STATIC_URL = '/static/'
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
CRISPY_TEMPLATE_PACK = 'bootstrap4'

View File

@@ -0,0 +1,7 @@
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}

View File

@@ -1,28 +1,42 @@
<!DOCTYPE html>
<html lang="en">
{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<html lang="en"> {% load bootstrap5 %} {% load static %}
<head>
<meta charset="UTF-8">
<title>{% block title %}Title{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% bootstrap_css %}
{% bootstrap_javascript %}
<link rel='stylesheet' href="{% static 'base.css' %}">
</head>
<body>
<body class="bg-light">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href={% url 'home' %}>⚾️ Bench Coach</a>
<div class="navbar-nav">
<a class="nav-item nav-link" href="{% url 'schedule' %}">Schedule</a>
<a class="nav-item nav-link" href="{% url 'players list' %}">Players</a>
<a class="nav-item nav-link" href="{% url 'teams list' %}">Teams</a>
<a class="nav-item nav-link" href="{% url 'venues list' %}">Venues</a>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="{% url 'home' %}">⚾️ Bench Coach</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li>
<a class="nav-link" href="{% url 'schedule' %}">Schedule</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'players list' %}">Players</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'teams list' %}">Teams</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'venues list' %}">Venues</a>
</li>
</ul>
</div>
</nav>
<div id="content" class="container">
<main role="main" class="container">
{% block content %}{% endblock %}
</div>
</main>
</body>
</html>