Skip to content

Commit

Permalink
Improve formatting to be consistent with bootstrap 5 (#212)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fsargent
fsargent authored Jul 24, 2024
1 parent 9d345b3 commit ab23a95
Show file tree
Hide file tree
Showing 8 changed files with 326 additions and 280 deletions.
4 changes: 2 additions & 2 deletions approval_polls/staticfiles/scss/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ $primary: #000000;
$secondary: #ffffff;
$success: #000000;
$info: #ffffff;
$warning: #000000;
$danger: #000000;
$warning: #aa4a44;
$danger: #aa4a44;
$light: #ffffff;
$dark: #000000;

Expand Down
125 changes: 61 additions & 64 deletions approval_polls/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,84 +52,81 @@
<body>
{% load tz %}
{% get_current_timezone as TIME_ZONE %}
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'index' %}">Vote, by ElectionScience.org</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a href="{% url 'create' %}">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Create</button>
</a>
</li>
</ul>
<ul class="nav navbar-nav justify-content-end">
{% block login %}
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="{% url 'index' %}">Vote with Election Science</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMain"
aria-controls="navbarMain"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="{% url 'create' %}">Create Election</a>
</li>
</ul>
<ul class="navbar-nav">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'my_info' %}">{% firstof user.username "My Profile" %}</a>
<a class="nav-link" href="{% url 'my_info' %}">My Profile</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="{% url 'account_logout' %}?next={% url 'index' %}">Logout</a>
</li>
{% else %}
{% if request.path != '/approval_polls/' %}
<li class="nav-item">
<a class="nav-link"
href="{% url 'account_login' %}?next={{ request.path }}">Login</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'account_login' %}">Login</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link"
href="{% url 'account_login' %}{% if request.path != '/approval_polls/' %}?next={{ request.path }}{% endif %}">Login</a>
</li>
{% endif %}
{% endblock login %}
</ul>
</ul>
</div>
</div>
</div>
</nav>
<div class="container mt-5 mb-5">
<div class="row justify-content-center">
{% block content %}
{% endblock content %}
<div class="row-fluid mt-5">
<div class="col-md-12">
<hr>
<p class="text-center">
This poll uses <a href="https://www.electionscience.org/approval-voting">approval voting</a>, instead of the more common plurality system.
<br />
</nav>
</header>
<main class="container my-5">
{% block content %}
{% endblock content %}
</main>
<footer class="bg-light py-4 mt-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<p>
This election uses <a href="https://www.electionscience.org/approval-voting">approval voting</a>, instead of the more common plurality system.
<br>
<a href="https://www.electionscience.org/approval-voting">Learn why it's better</a> and
<a href="{% url 'create' %}" target="_top">create your own poll</a>.
<a href="{% url 'create' %}">create your own election</a>.
</p>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6 text-center">
<a href="https://www.electionscience.org"
target="_blank"
rel="noopener noreferrer">
<img src="{% static 'images/ces-horizontal-stack.png' %}"
class="img-fluid mx-auto d-block"
alt="Election Science Logo"
style="max-width: 100%;
min-width: 200px">
</a>
</div>
</div>
</div>
<a href="https://www.electionscience.org"
target="_blank"
rel="noopener noreferrer">
<img src="{% static 'images/ces-horizontal-stack.png' %}"
class="img-fluid"
alt="Election Science Logo"
style="max-width: 200px">
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Add your scripts here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
</script>
{% block extra_js %}{% endblock %}
</body>
</html>
6 changes: 3 additions & 3 deletions approval_polls/templates/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ <h3>{{ poll.question }}</h3>
id='choice{{ forloop.counter }}'
{% if checked_choices %} {% if choice in checked_choices %}checked{% endif %}
{% endif %}>
{{ choice.choice_text }}
</label>
{{ choice.choice_text }}
</label>
</div>
{% endfor %}
{% if poll.show_write_in and not poll.is_closed %}
Expand All @@ -39,7 +39,7 @@ <h3>{{ poll.question }}</h3>
title='Add Option'
data-toggle='tooltip'
data-placement='bottom'>
<small><i class='glyphicon glyphicon-plus'></i></small>
<i class="bi bi-plus"></i> Add Option
</button>
</p>
{% endif %}
Expand Down
80 changes: 52 additions & 28 deletions approval_polls/templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,60 @@
{% extends 'base.html' %}
{% block content %}
{% if latest_poll_list %}
<div class='row-fluid top-buffer'>
<div class='col-md-12'>
<h2>Latest Public Polls</h2>
{% for poll in latest_poll_list %}
<div class='well well-sm'>
<a href="{% url 'detail' poll.id %}">{{ poll.question }}</a>
<p>Published on {{ poll.pub_date|date:"N j, Y, P e" }} by {% firstof poll.user.username poll.user.first_name %}</p>
</div>
{% endfor %}
<div class="container">
{% if latest_poll_list %}
<h1 class="mb-4">Latest Public Polls</h1>
<div class="row">
<div class="col-12">
{% for poll in latest_poll_list %}
<div class="card mb-3">
<div class="card-body">
<h2 class="card-title h5">
<a href="{% url 'detail' poll.id %}">{{ poll.question }}</a>
</h2>
<p class="card-text">
Published on {{ poll.pub_date|date:"N j, Y, P e" }} by {% firstof poll.user.username poll.user.first_name %}
</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class='row-fluid top-buffer'>
<div class='col-md-12'>
<div class='text-center'>
<nav aria-label="Poll list pagination" class="my-4">
<ul class="pagination justify-content-center">
{% if latest_poll_list.has_previous %}
<a href='?page={{ latest_poll_list.previous_page_number }}'>&laquo;Previous</a>
<li class="page-item">
<a class="page-link"
href="?page={{ latest_poll_list.previous_page_number }}"
aria-label="Previous">
<span aria-hidden="true">&laquo;</span> Previous
</a>
</li>
{% endif %}
(page {{ latest_poll_list.number }} of {{ latest_poll_list.paginator.num_pages }})
{% if latest_poll_list.has_next %}<a href='?page={{ latest_poll_list.next_page_number }}'>Next&raquo;</a>{% endif %}
</div>
</div>
</div>
{% else %}
<div class='row-fluid top-buffer'>
<div class='col-md-12'>
<p>No polls are available.</p>
</div>
</div>
{% endif %}
<li class="page-item disabled">
<span class="page-link">Page {{ latest_poll_list.number }} of {{ latest_poll_list.paginator.num_pages }}</span>
</li>
{% if latest_poll_list.has_next %}
<li class="page-item">
<a class="page-link"
href="?page={{ latest_poll_list.next_page_number }}"
aria-label="Next">
Next <span aria-hidden="true">&raquo;</span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% else %}
<div class="alert alert-info" role="alert">No polls are available.</div>
{% endif %}
</div>
{% endblock content %}
{% block footer %}
<a href='{% url 'create' %}'>Create a Poll</a>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<a href="{% url 'create' %}" class="btn btn-primary">Create a Poll</a>
</div>
</div>
</div>
{% endblock %}
Loading

0 comments on commit ab23a95

Please sign in to comment.