add sidebar nav, fixes

This commit is contained in:
2021-12-22 19:31:46 -06:00
parent b9dc626e28
commit e445768b95
10 changed files with 73 additions and 44 deletions

View File

@@ -9,23 +9,25 @@
<body class="bg-light">
<div>
{% block navbar %}
{% include 'navbar.html' %}
{% endblock %}
</div>
<div>
{% block header %}
{% endblock %}
</div>
<div class="row flex-row flex-nowrap">
<div class="col-auto">
{% block sidebar %}
<header class="min-vw-100">
<div>
{% block navbar %}
{% include 'navbar.html' %}
{% endblock %}
</div>
<div class="container my-2 col-sm min-vh-100">
<div>
{% block header %}
{% endblock %}
</div>
</header>
<div class="d-inline-flex min-vw-100">
<div class="">
{% block sidebar %}
{% include 'sidebar.html' %}
{% endblock %}
</div>
<div class="container m-2">
<h1>{% block page_heading %}{% endblock %}</h1>
{% block content %}{% endblock %}
</div>

View File

@@ -1,25 +1,11 @@
{% extends "base.html" %}{% load static %}
{% block title %}Bench Coach Home{% endblock %}
{% block sidebar %}
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark min-vh-100 " style="width: 200px;">
<ul class="nav nav-pills flex-column mb-auto">
{% for page in pages %}
<li class="nav-item">
<a class="nav-link text-white" style="text-transform:capitalize;" href="{% url page %}"
aria-current="page">{{ page }} </a>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
{% block content %}
<div class="text-center my-2">
<h1><img class="mx-auto" src="{% static 'benchcoach.svg' %}" style="width: 64px;" /><strong>Welcome to Bench Coach</strong></h1>
<div class="col-lg-6 m-auto">
<p class="lead mb-4 d-none">Quisque at curabitur mollis ornare, malesuada maecenas. Orci elit tristique, malesuada eu pharetra. Est praesent tortor porttitor aptent, amet quisque.</p>
<p class="lead mb-4">Quisque at curabitur mollis ornare, malesuada maecenas. Orci elit tristique, malesuada eu pharetra. Est praesent tortor porttitor aptent, amet quisque.</p>
{# <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mx-1">#}
{# <button class="btn btn-primary" type="button">Login</button><button class="btn btn-outline-secondary" type="button">Sign Up</button>#}
{# </div>#}

View File

@@ -2,10 +2,11 @@
{% block title %}Bench Coach Home{% endblock %}
{% block sidebar %}{% endblock %}
{% block content %}
<div class="text-center d-flex flex-column justify-content-center align-items-center mb-4">
<form style="width: 100%; max-width: 330px; padding: 15px; margin: 0 auto;"
method="post" action="{% url "login" %}">
method="post" action="{% url "login_view" %}">
{% csrf_token %}
<img class="mb-4" src="{% static "benchcoach.svg" %}" width="72" height="72"/>

39
templates/sidebar.html Normal file
View File

@@ -0,0 +1,39 @@
<div class="bg-dark min-vh-100" >
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a class="nav-link {{ events_tab }} text-white" href="{% url 'event list' %}">
<div class="d-inline-block">
<i class="bi bi-calendar3"></i>
<span class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block mx-1 my-auto text-white">
Events
</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ members_tab }} text-white" href="{% url 'player list' %}">
<i class="bi bi-person-fill"></i>
<span class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block mx-1 my-auto text-white">
Players
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ opponents_tab }} text-white" href="{% url 'team list' %}">
<i class="bi bi-people-fill"></i>
<span class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block mx-1 my-auto text-white">
Teams
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ venues_tab }} text-white" href="{% url 'venue list' %}">
<i class="bi bi-geo"></i>
<span class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block mx-1 my-auto text-white">
Venues
</span>
</a>
</li>
</ul>
</div>