Skip to content

Commit

Permalink
Merge pull request #97 from DDMAL/user-login
Browse files Browse the repository at this point in the history
Fix some UI issues
  • Loading branch information
kunfang98927 authored Dec 14, 2023
2 parents 7184b3d + fad81f8 commit 27dc99d
Show file tree
Hide file tree
Showing 14 changed files with 237 additions and 46 deletions.
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
// 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"
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>
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

0 comments on commit 27dc99d

Please sign in to comment.