Skip to content

Commit

Permalink
Merge pull request #41 from soehlert/topic/soehlert/ui
Browse files Browse the repository at this point in the history 
feat(UI): Standardize UI
  • Loading branch information
@soehlert
soehlert authored Sep 11, 2023
2 parents 953470d + 5358412 commit c830286
Show file tree
Hide file tree
Showing 14 changed files with 434 additions and 144 deletions.
42 changes: 42 additions & 0 deletions concert_elephant/static/css/project.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,45 @@
background-color: #f2dede;
border-color: #eed3d7;
}

.navbar-custom {
background-color: #5C8374 !important;
}

.nav-link-custom {
color: #040D12;
}

.nva-link-custom:hover {
color: #93B1A6;
}

.btn {
background-color: #040D12;
border-color: #040D12;
color: #93B1A6;
}

.btn:hover {
background-color:#93B1A6;
border-color: #93B1A6;
transition: 0.7s;
}

.card-header-custom {
color: #040D12;
background-color: #93B1A6;
}

thead.table-custom {
background-color: #5C8374 !important;
color: #040D12;
}

.link-custom {
color: #040D12;
}

.link-custom:hover {
color: #93B1A6;
}
2 changes: 1 addition & 1 deletion concert_elephant/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
</head>
<body>
{% include 'navbar.html' %}
<div class="container">
<div class="container pt-5">
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
Expand Down
28 changes: 15 additions & 13 deletions concert_elephant/templates/concerts/artist_create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,21 @@
{% load crispy_forms_tags %}

{% block content %}
<h1>ARTISTS</h1>
<br />
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="text-info border-bottom mb-4">New Artist</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Add Artist</button>
<div class="row justify-content-center">
<div class="col col-md-8 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">New Artist</h5>
</div>
<br />
</form>
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
{{ form|crispy }}
</fieldset>
<div class="text-center">
<button class="btn btn-outline-info text-white" type="submit">Add Artist</button>
</div>
<br />
</form>
</div>
</div>
{% endblock content %}
45 changes: 34 additions & 11 deletions concert_elephant/templates/concerts/artist_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,43 @@
{% extends "base.html" %}

{% block content %}
<div class="row d-flex mt-4 text-center">
<h1>{{ artist.name }}</h1>
</div>
<div class="row d-flex mt-2">
<div class="col col-md-4 align-items-center justify-content-center">
<table class="table table-striped" style="white-space:nowrap;">
<div class="row justify-content-center">
<div class="col col-md-8 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">{{ artist }}</h5>
</div>
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th class="text-center" scope="col">Artist</th>
<th class="text-center" scope="col">Total Concerts</th>
</tr>
</thead>
<tr>
<th>Venue</th>
<th>Date</th>
<td class="text-center">{{ artist }}</td>
<td class="text-center">{{ artist.concerts.count }}</td>
</tr>
{% for concert in artist.concerts.all %}
</table>
</div>
</div>
<div class="row pt-3 justify-content-center">
<div class="col col-md-8 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">Recent Concerts</h5>
</div>
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th scope="col">Artist</th>
<th class="text-center" scope="col">Venue</th>
<th class="text-center" scope="col">Date</th>
</tr>
</thead>
{% for concert in recent_concerts %}
<tr>
<td>{{ concert.venue }}</td>
<td>{{ concert.date }}</td>
<td>{{ concert.artist }}</td>
<td class="text-center">{{ concert.venue }}</td>
<td class="text-center">{{ concert.date }}</td>
</tr>
{% endfor %}
</table>
Expand Down
40 changes: 24 additions & 16 deletions concert_elephant/templates/concerts/artist_list.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
{% extends "base.html" %}

{% block content %}
<br />
<div class="content-section">
<div class="row d-flex mt-4 text-center">
<h1>Artists</h1>
<div class="row justify-content-center">
<div class="col col-md-8 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">Artists</h5>
</div>
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th scope="col">Artist</th>
<th class="text-center" scope="col">Concerts</th>
</tr>
</thead>
{% for artist in artist_list %}
<tr>
<td>
<a class="link-custom link-offset-2 link-underline-opacity-0 link-underline-opacity-25-hover text-decoration-none"
href="{% url 'concerts:artist-detail' artist.id %}">{{ artist }}</a>
</td>
<td class="text-center">{{ artist.concerts.count }}</td>
</tr>
{% endfor %}
</table>
</div>
<table class="table table-striped" style="white-space:nowrap;">
{% for artist in artist_list %}
<tr>
<td>
<a class="link-info link-offset-2 link-underline-opacity-0 link-underline-opacity-25-hover text-decoration-none link"
href="{% url 'concerts:artist-detail' artist.id %}">{{ artist }}</a>
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="form-group">
<div class="text-center">
<a class="link" href="{% url 'concerts:artist-create' %}">
<button class="btn btn-outline-info" type="submit">Add Artist</button>
<button class="btn btn-outline-info text-white" type="submit">Add Artist</button>
</a>
</div>
{% endblock content %}
29 changes: 16 additions & 13 deletions concert_elephant/templates/concerts/concert_create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,22 @@
{% load crispy_forms_tags %}

{% block content %}
<br />
<div class="content-section">
<form method="post">
{% csrf_token %}
<fieldset class="form-group">
<legend class="text-info border-bottom mb-4">New Concert</legend>
{{ form | crispy }} {# Renders form fields #}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Add Concert</button>
<div class="row justify-content-center">
<div class="col col-md-8 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">New Concert</h5>
</div>
<br />
</form>
{{ form.media }}
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
{{ form|crispy }}
</fieldset>
<div class="text-center">
<button class="btn btn-outline-info text-white" type="submit">Add Concert</button>
</div>
<br />
</form>
{{ form.media }}
</div>
</div>
{% endblock content %}
47 changes: 36 additions & 11 deletions concert_elephant/templates/concerts/concert_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,44 @@
{% extends "base.html" %}

{% block content %}
<div class="row d-flex mt-4 text-center">
<h1>{{ concert.artist }}</h1>
<div class="col col-md-4 offset-md-2">
<table class="table table-striped" style="white-space:nowrap;">
<tr>
<th>Artist</th>
<th>Venue</th>
<th>Date</th>
</tr>
<div class="row justify-content-center">
<div class="col col-md-12 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">{{ concert.artist }}</h5>
</div>
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th scope="col">Artist</th>
<th class="text-center" scope="col">Venue</th>
<th class="text-center" scope="col">Date</th>
<th class="text-center" scope="col">Openers</th>
<th class="text-center" scope="col">Festival</th>
</tr>
</thead>
<tr>
<td>{{ concert.artist }}</td>
<td>{{ concert.venue }}</td>
<td>{{ concert.date }}</td>
<td class="text-center">{{ concert.venue }}</td>
<td class="text-center">{{ concert.date }}</td>
<td class="text-center">{{ concert.openers }}</td>
<td class="text-center">
{% if concert.festival %}
<input class="form-check-input"
type="checkbox"
value=""
id="flexCheckCheckedDisabled"
checked
disabled />
<label class="form-check-label" for="flexCheckChecked"></label>
{% else %}
<input class="form-check-input"
type="checkbox"
value=""
id="flexCheckDisabled"
disabled />
<label class="form-check-label" for="flexCheckDefault"></label>
{% endif %}
</td>
</tr>
</table>
{% if user.is_authenticated %}
Expand Down
78 changes: 51 additions & 27 deletions concert_elephant/templates/concerts/concert_list.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,60 @@
{% extends "base.html" %}

{% block content %}
<br />
<div class="content-section">
<div class="row d-flex mt-4 text-center">
<h1>Concerts</h1>
<div class="row justify-content-center">
<div class="col col-md-12 col-sm-12">
<div class="card">
<h5 class="card-header card-header-custom display-4 text-center">Concerts</h5>
</div>
<table class="table table-striped table-hover">
<thead class="table-custom">
<tr>
<th scope="col">Artist</th>
<th class="text-center" scope="col">Venue</th>
<th class="text-center" scope="col">Date</th>
<th class="text-center" scope="col">Openers</th>
<th class="text-center" scope="col">Festival</th>
<th></th>
</tr>
</thead>
{% for concert in concert_list %}
<tr>
<td>{{ concert.artist }}</td>
<td class="text-center">{{ concert.venue }}</td>
<td class="text-center">{{ concert.date }}</td>
<td class="text-center">{{ concert.openers }}</td>
<td class="text-center">
{% if concert.festival %}
<input class="form-check-input"
type="checkbox"
value=""
id="flexCheckCheckedDisabled"
checked
disabled />
<label class="form-check-label" for="flexCheckChecked"></label>
{% else %}
<input class="form-check-input"
type="checkbox"
value=""
id="flexCheckDisabled"
disabled />
<label class="form-check-label" for="flexCheckDefault"></label>
{% endif %}
</td>
<td>
<a class="link-custom link-offset-2 link-underline-opacity-0 link-underline-opacity-25-hover text-decoration-none"
href="{% url 'concerts:concert-detail' concert.id %}">
<span>More info</span>
</a>
</td>
</tr>
{% endfor %}
</table>
</div>
<table class="table table-striped" style="white-space:nowrap;">
<tr>
<th>Artist</th>
<th>Venue</th>
<th>Date</th>
<th></th>
</tr>
{% for concert in concert_list %}
<tr>
<td>{{ concert.artist }}</td>
<td>{{ concert.venue }}</td>
<td>{{ concert.date }}</td>
<td>
<a class="link-info link-offset-2 link-underline-opacity-0 link-underline-opacity-25-hover text-decoration-none link"
href="{% url 'concerts:concert-detail' concert.id %}">
<span>More info</span>
</a>
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="form-group">
<div class="text-center">
<a class="link" href="{% url 'concerts:concert-create' %}">
<button class="btn btn-outline-info" type="submit">Add Concert</button>
<button class="btn btn-outline-info text-white" type="submit">Add Concert</button>
</a>
</div>
{% endblock content %}
Loading

0 comments on commit c830286

Please sign in to comment.