Skip to content
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

Merged
merged 7 commits into from
Dec 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -67,25 +67,25 @@ function setMasonryView() {
});
}

// Instrument badge settings
const instrumentLanguage = document.querySelector("#instrument-language-element");
const instrumentBadge = document.querySelector("#instrument-language-badge");

updateInstrumentBadge();

function updateInstrumentBadge() {
const hideInstrumentBadge = localStorage.getItem('hideInstrumentBadge') || false;
if (hideInstrumentBadge) {
instrumentBadge.style.display = "none";
} else {
instrumentBadge.style.display = "";
}
}

instrumentLanguage.addEventListener("click", function () {
localStorage.setItem("hideInstrumentBadge", true);
updateInstrumentBadge();
});
// // Instrument badge settings
Copy link
Contributor

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?

Copy link
Contributor Author

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.

// const instrumentLanguage = document.querySelector("#instrument-language-element");
// const instrumentBadge = document.querySelector("#instrument-language-badge");

// updateInstrumentBadge();

// function updateInstrumentBadge() {
// const hideInstrumentBadge = localStorage.getItem('hideInstrumentBadge') || false;
// if (hideInstrumentBadge) {
// instrumentBadge.style.display = "none";
// } else {
// instrumentBadge.style.display = "";
// }
// }

// instrumentLanguage.addEventListener("click", function () {
// localStorage.setItem("hideInstrumentBadge", true);
// updateInstrumentBadge();
// });


// HBS facet settings
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"%}
Expand All @@ -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 %}
Expand Down Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The 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 %}
Expand All @@ -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 %}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this go in one of our static .js files?

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 %}
2 changes: 1 addition & 1 deletion web-app/django/VIM/apps/main/static/main/css/index.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.content-container {
height: 90vh;
height: 80vh;
}

.content-container h1 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{% load static %}

{% block title %}
Login
Change Password
{% endblock %}

{% block css_files %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{% block content %}
<div class="container">
<div class="row">
<div class="mr-3 p-4 col-md-6">
<div class="mr-3 p-4 col-md-8">
{% if messages %}
<div class="alert alert-success alert-dismissible">
{% for message in messages %}
Expand Down Expand Up @@ -40,7 +40,10 @@ <h5><strong>Login for Contributors</strong></h5>
{{ form.password }}
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<p class="mt-2">
<a href="{% url 'main:reset_password' %}">Forgot your password?</a>
</p>
</form>
</div>
<div class="col-md mt-4 create-account-link">
<p>Don't have an account?
Expand Down
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 %}
Loading