-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix some UI issues #97
Changes from all commits
97a23e8
1afa2f0
077f913
6d5ca11
994003c
184e8bc
fad81f8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,7 +13,7 @@ | |
{% block content %} | ||
<div class="container py-5"> | ||
<div class="row"> | ||
<div class="col-lg-3"> | ||
<div class="col-xl-3"> | ||
<div class="px-3 pt-3 me-1 mb-3 sidebar-container"> | ||
<div class="info-block p-2 mb-3 notranslate"> | ||
{% if active_language.en_label == "french"%} | ||
|
@@ -29,9 +29,8 @@ <h4>Hornbostel-Sachs Classification</h4> | |
{% if hbs_facet_item.name == '' %} | ||
<span class="text-start">Unclassified</span> | ||
{% else %} | ||
<span class="text-start">{{ hbs_facet_item.value }} - {{ hbs_facet_item.name }}</span> | ||
<span class="text-start">{{ hbs_facet_item.value }} - {{ hbs_facet_item.name }} ({{ hbs_facet_item.count}})</span> | ||
{% endif %} | ||
<span class="text-end">{{ hbs_facet_item.count}}</span> | ||
</li> | ||
</a> | ||
{% endfor %} | ||
|
@@ -72,18 +71,22 @@ <h4>######</h4> | |
</div> | ||
</div> | ||
|
||
<div class="col-lg-9 pt-3 body-container"> | ||
<div class="col-xl-9 pt-3 body-container"> | ||
<div class="navigation d-flex justify-content-between align-items-center"> | ||
<div class="d-flex"> | ||
<h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4> | ||
<div class="dropdown mx-2 notranslate" id="instrument-language-element"> | ||
<button class="btn btn-warning dropdown-toggle position-relative py-0" type="button" data-bs-toggle="dropdown" aria-expanded="false"> | ||
<button class="btn btn-warning dropdown-toggle position-relative py-0" | ||
type="button" | ||
aria-expanded="false" | ||
data-bs-toggle="dropdown" | ||
data-bs-title="Instrument name language"> | ||
{{ active_language.autonym|title }} | ||
<span id="instrument-language-badge" | ||
{% comment %} <span id="instrument-language-badge" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same question here... |
||
class="position-absolute top-0 start-95 translate-middle-y badge rounded-pill bg-secondary" | ||
style="--bs-bg-opacity: .5; display: none;"> | ||
Instrument name language | ||
</span> | ||
</span> {% endcomment %} | ||
</button> | ||
<ul class="dropdown-menu"> | ||
{% for language in languages %} | ||
|
@@ -94,17 +97,24 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4> | |
</div> | ||
|
||
<div class="d-flex"> | ||
<button type="button" class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn" id="masonry-btn"> | ||
<button type="button" class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn" | ||
id="masonry-btn" data-bs-toggle="tooltip" | ||
data-bs-title="Switch to Masonry View" | ||
aria-label="Switch to Masonry View" | ||
aria-pressed="true"> | ||
<i class="bi bi-columns-gap"></i> | ||
</button> | ||
<button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn" id="std-btn"> | ||
<button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn" | ||
id="std-btn" data-bs-toggle="tooltip" | ||
data-bs-title="Switch to Standard View" | ||
aria-label="Switch to Standard View"> | ||
<i class="bi bi-grid"></i> | ||
</button> | ||
</div> | ||
</div> | ||
<hr class="mb-2 mx-2"> | ||
<div class="container py-3" id="body-content"> | ||
<div class="mb-2 d-flex flex-md-row flex-column justify-content-between view-per-page"> | ||
<div class="mb-2 d-flex flex-md-row flex-column align-items-center justify-content-between view-per-page"> | ||
<span id="instrumentNum" data-instrument-num="{{ page_obj.paginator.count }}" class="text-start"> | ||
Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} entries | ||
{% if hbs_facet_name %} | ||
|
@@ -115,13 +125,13 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4> | |
<div class="ms-2 d-flex align-items-center"> | ||
<span class="text-start">View</span> | ||
<input type="radio" class="btn-check option-radio" name="options-group1" id="20" autocomplete="off"> | ||
<label class="btn" for="20">20</label> | ||
<label class="btn" data-bs-toggle="tooltip" data-bs-title="View 20 entries per page" for="20">20</label> | ||
<label class="col-form-label mb-1">|</label> | ||
<input type="radio" class="btn-check option-radio" name="options-group1" id="50" autocomplete="off"> | ||
<label class="btn" for="50">50</label> | ||
<label class="btn" data-bs-toggle="tooltip" data-bs-title="View 50 entries per page" for="50">50</label> | ||
<label class="col-form-label mb-1">|</label> | ||
<input type="radio" class="btn-check option-radio" name="options-group1" id="100" autocomplete="off"> | ||
<label class="btn" for="100">100</label> | ||
<label class="btn" data-bs-toggle="tooltip" data-bs-title="View 100 entries per page" for="100">100</label> | ||
<span class="text-end">per page</span> | ||
</div> | ||
</div> | ||
|
@@ -134,25 +144,27 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4> | |
<div class="me-2 mb-1 d-flex align-items-center justify-content-end view-per-page"> | ||
<span class="text-start">View</span> | ||
<input type="radio" class="btn-check option-radio" name="options-group2" id="20" autocomplete="off"> | ||
<label class="btn" for="20">20</label> | ||
<label class="btn" data-bs-toggle="tooltip" data-bs-title="View 20 entries per page" for="20">20</label> | ||
<label class="col-form-label mb-1">|</label> | ||
<input type="radio" class="btn-check option-radio" name="options-group2" id="50" autocomplete="off"> | ||
<label class="btn" for="50">50</label> | ||
<label class="btn" data-bs-toggle="tooltip" data-bs-title="View 50 entries per page" for="50">50</label> | ||
<label class="col-form-label mb-1">|</label> | ||
<input type="radio" class="btn-check option-radio" name="options-group2" id="100" autocomplete="off"> | ||
<label class="btn" for="100">100</label> | ||
<label class="btn" data-bs-toggle="tooltip" data-bs-title="View 100 entries per page" for="100">100</label> | ||
<span class="text-end">per page</span> | ||
</div> | ||
<div class="pagination-container "> | ||
<ul class="pagination mb-1 justify-content-center"> | ||
{% if page_obj.has_previous %} | ||
<li class="page-item"> | ||
<a class="page-link" href="?page=1{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="First" title="First"> | ||
<a class="page-link" href="?page=1{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" | ||
aria-label="First" data-bs-toggle="tooltip" data-bs-title="First"> | ||
<i class="bi bi-chevron-double-left"></i> | ||
</a> | ||
</li> | ||
<li class="page-item"> | ||
<a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Previous" title="Previous"> | ||
<a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" | ||
aria-label="Previous" data-bs-toggle="tooltip" data-bs-title="Previous"> | ||
<i class="bi bi-chevron-left"></i> | ||
</a> | ||
</li> | ||
|
@@ -169,12 +181,14 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4> | |
|
||
{% if page_obj.has_next %} | ||
<li class="page-item {% if not page_obj.has_next %}disabled{% endif %}"> | ||
<a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Next" title="Next"> | ||
<a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" | ||
aria-label="Next" data-bs-toggle="tooltip" data-bs-title="Next"> | ||
<i class="bi bi-chevron-right"></i> | ||
</a> | ||
</li> | ||
<li class="page-item {% if not page_obj.has_next %}disabled{% endif %}"> | ||
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Last" title="Last"> | ||
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" | ||
aria-label="Last" data-bs-toggle="tooltip" data-bs-title="Last"> | ||
<i class="bi bi-chevron-double-right"></i> | ||
</a> | ||
</li> | ||
|
@@ -196,4 +210,8 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4> | |
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script> | ||
<script src="{% static "instruments/js/DisplaySettings.js" %}"></script> | ||
<script src="{% static "instruments/js/PaginationTools.js" %}"></script> | ||
<script> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can this go in one of our static There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure, I'll fix this today. |
||
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle="dropdown"]') | ||
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) | ||
</script> | ||
{% endblock %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
.content-container { | ||
height: 90vh; | ||
height: 80vh; | ||
} | ||
|
||
.content-container h1 { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ | |
{% load static %} | ||
|
||
{% block title %} | ||
Login | ||
Change Password | ||
{% endblock %} | ||
|
||
{% block css_files %} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
{% extends "base.html" %} | ||
{% load static %} | ||
|
||
{% block title %} | ||
Reset Password | ||
{% endblock %} | ||
|
||
{% block css_files %} | ||
<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}"> | ||
{% endblock %} | ||
|
||
{% block content %} | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="mr-3 p-4 col-md-12"> | ||
{% if messages %} | ||
<div class="alert alert-success alert-dismissible"> | ||
{% for message in messages %} | ||
{{ message }} | ||
{% endfor %} | ||
</div> | ||
{% endif %} | ||
{% if form.errors %} | ||
<div class="alert alert-danger alert-dismissible"> | ||
{% for field, error in form.errors.items %} | ||
{{ error }} | ||
{% endfor %} | ||
</div> | ||
{% endif %} | ||
<div class="col-md mt-4 login-form" id="login"> | ||
<h5><strong>Reset Password</strong></h5> | ||
<p class="mt-4">Forgotten your password? Enter your email address below, and we'll email instructions for setting a new one.</p> | ||
<form method="post"> | ||
{% csrf_token %} | ||
<div class="mt-4 mb-4"> | ||
<label for="exampleInputEmail" class="form-label">Email Address</label> | ||
{{ form.email }} | ||
</div> | ||
<button type="submit" class="btn btn-primary">Send Password Reset Email</button> | ||
</form> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
{% endblock %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
{% extends "base.html" %} | ||
{% load static %} | ||
|
||
{% block title %} | ||
Reset Password | ||
{% endblock %} | ||
|
||
{% block css_files %} | ||
<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}"> | ||
{% endblock %} | ||
|
||
{% block content %} | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="mr-3 p-4 col-md-12"> | ||
<div class="col-md mt-4 login-form" id="login"> | ||
<h5><strong>Password Reset Complete</strong></h5> | ||
<p class="mt-4">Your password has been successfully reset. You can now <a href="{% url 'main:login' %}">log in</a> with your new password.</p> | ||
</div> | ||
</div> | ||
</div> | ||
{% endblock %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
{% extends "base.html" %} | ||
{% load static %} | ||
|
||
{% block title %} | ||
Reset Password | ||
{% endblock %} | ||
|
||
{% block css_files %} | ||
<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}"> | ||
{% endblock %} | ||
|
||
{% block content %} | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="mr-3 p-4 col-md-12"> | ||
<div class="col-md mt-4 login-form" id="login"> | ||
<h5><strong>Set New Password</strong></h5> | ||
<form class="mt-4" method="post"> | ||
{% csrf_token %} | ||
{{ form.new_password1.label_tag }} | ||
{{ form.new_password1 }} | ||
{{ form.new_password2.label_tag }} | ||
{{ form.new_password2 }} | ||
<button type="submit" class="btn btn-primary">Change Password</button> | ||
</form> | ||
</div> | ||
</div> | ||
</div> | ||
{% endblock %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
Please click the following link to reset your password: | ||
|
||
{% autoescape off %} | ||
{{ protocol }}://{{ domain }}{% url 'main:reset_password_confirm' uidb64=uid token=token %} | ||
{% endautoescape %} | ||
|
||
If you didn't request a password reset, please ignore this message. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
{% extends "base.html" %} | ||
{% load static %} | ||
|
||
{% block title %} | ||
Reset Password | ||
{% endblock %} | ||
|
||
{% block css_files %} | ||
<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}"> | ||
{% endblock %} | ||
|
||
{% block content %} | ||
<div class="container"> | ||
<div class="row"> | ||
<div class="mr-3 p-4 col-md-12"> | ||
<div class="col-md mt-4 login-form" id="login"> | ||
<h5><strong>Password Reset Email Sent</strong></h5> | ||
<p class="mt-4">We've sent you an email with instructions to reset your password. Please check your inbox.</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
{% endblock %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a reason you comment instead of delete?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These are Yinan's codes, and these changes are for #96 . If she thinks these changes are okay, I will delete them.