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.

Sign up for GitHub

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

Front end updates #51

Merged
merged 6 commits into from
Oct 5, 2023
Merged

Front end updates #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
17eef99
Fix masonry view on next page
yinanazhou Oct 5, 2023
35b5bd0
Add dummy image when no image available from db
yinanazhou Oct 5, 2023
e9be644
Move index.css into css/
yinanazhou Oct 5, 2023
133c3fa
Add page setting button
yinanazhou Oct 5, 2023
7c6cd3b
Move template html to includes/
yinanazhou Oct 5, 2023
1bb5839
Replace hardcoding url with url tag in django
yinanazhou Oct 5, 2023
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
1 change: 1 addition & 0 deletions web-app/django/VIM/apps/instruments/static/instruments/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ hr {
font-weight: bold;
color: #435334;
font-size: 20px;
width: 30px;
}

.display-btn:focus {
Expand Down
8 changes: 8 additions & 0 deletions web-app/django/VIM/apps/instruments/static/instruments/images/no-image.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 12 additions & 15 deletions web-app/django/VIM/apps/instruments/static/instruments/js/DisplayMode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,20 +68,17 @@ stdBtn.addEventListener("click", () => {


function setMasonryView() {
// Wait for the DOM to be fully loaded
document.addEventListener("DOMContentLoaded", function () {
// Initialize Masonry
var masonryGrid = document.getElementById("masonry-view");
var masonry = new Masonry(masonryGrid, {
percentPosition: true,
});

// Initialize ImagesLoaded
var imgLoad = imagesLoaded(masonryGrid);

// When all images are loaded, relayout Masonry
imgLoad.on("always", function () {
masonry.layout();
});
// Initialize Masonry
var masonryGrid = document.getElementById("masonry-view");
var masonry = new Masonry(masonryGrid, {
percentPosition: true,
});

// Initialize ImagesLoaded
var imgLoad = imagesLoaded(masonryGrid);

// When all images are loaded, relayout Masonry
imgLoad.on("always", function () {
masonry.layout();
});
}
5 changes: 4 additions & 1 deletion ...ments/templates/instruments/listView.html → ...plates/instruments/includes/listView.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
{% load static %}

<div class="row" id="list-view" style="display:none;">
{% for instrument in instruments %}

<div class="card mb-3 px-0 list-item-container">
<div class="row g-0 p-2">
<div class="col-md-2 align-items-center list-img-container">
<a href="#" class="text-decoration-none">
<img src="{{ instrument.avresource_set.first.url }}" class="img-fluid rounded" alt="instrument image">
<img src="{{ instrument.avresource_set.first.url }}" class="img-fluid rounded" alt="instrument image"
onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';">
</a>
</div>
<div class="col-md-10 card-body pb-2 pt-0">
Expand Down
5 changes: 4 additions & 1 deletion ...ts/templates/instruments/masonryView.html → ...tes/instruments/includes/masonryView.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
{% load static %}

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4" id="masonry-view">
{% for instrument in instruments %}
<div class="col">
<a href="#" class="text-decoration-none">
<div class="card mb-3">
<img src="{{ instrument.avresource_set.first.url }}" class="card-img-top rounded p-2" alt="instrument image">
<img src="{{ instrument.avresource_set.first.url }}" class="card-img-top rounded p-2" alt="instrument image"
onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';">
<div class="card-body pb-0 pt-0">
<p class="card-title text-center">
{% for instrumentname in instrument.instrumentname_set.all %}
Expand Down
4 changes: 3 additions & 1 deletion ...uments/templates/instruments/stdView.html → ...mplates/instruments/includes/stdView.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
{% load static %}

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4" id="std-view" style="display:none;">
{% for instrument in instruments %}
<div class="col">
<a href="#" class="text-decoration-none">
<div class="card mb-3">
<div class="square-box">
<img src="{{ instrument.avresource_set.first.url }}" class="card-img-top rounded p-2 img-fluid"
alt="instrument image">
alt="instrument image" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';">
</div>
<div class="card-body pb-0 pt-0">
<p class="card-title text-center">
Expand Down
29 changes: 17 additions & 12 deletions web-app/django/VIM/apps/instruments/templates/instruments/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,21 +95,26 @@ <h4>#####</h4>
<div class="col-lg-9 pt-3 body-container">
<div class="navigation d-flex justify-content-between align-items-center">
<h4 class="ms-3 my-auto"><small>INSTRUMENT LIST</small></h4>
<button type="button" class="btn me-2 px-1 py-0 square-btn justify-content-center display-btn" id="masonry-btn">
<i class="bi bi-columns-gap"></i>
</button>
<button type="button" class="btn me-2 px-1 py-0 square-btn justify-content-center display-btn" id="list-btn" style="display:none;">
<i class="bi bi-view-list"></i>
</button>
<button type="button" class="btn me-2 px-1 py-0 square-btn justify-content-center display-btn" id="std-btn" style="display:none;">
<i class="bi bi-grid"></i>
</button>
<div class="d-flex">
<button type="button" class="btn me-1 px-1 py-0 justify-content-center display-btn" id="page-setting-btn">
<i class="bi bi-gear"></i>
</button>
<button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="masonry-btn">
<i class="bi bi-columns-gap"></i>
</button>
<button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="list-btn" style="display:none;">
<i class="bi bi-view-list"></i>
</button>
<button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="std-btn" style="display:none;">
<i class="bi bi-grid"></i>
</button>
</div>
</div>
<hr>
<div class="container py-3" id="body-content">
{% include "instruments/masonryView.html" %}
{% include "instruments/listView.html" %}
{% include "instruments/stdView.html" %}
{% include "instruments/includes/masonryView.html" %}
{% include "instruments/includes/listView.html" %}
{% include "instruments/includes/stdView.html" %}
</div>

<div class="pagination-container">
Expand Down
0 ...jango/VIM/apps/main/static/main/index.css → ...o/VIM/apps/main/static/main/css/index.css
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions web-app/django/VIM/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav nav-underline col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item">
<a href="/" class="nav-link nav-home px-2">
<a href="{% url "main:home" %}" class="nav-link nav-home px-2">
<img src="{% static "images/logo.svg" %}" alt="vim icon">
VIM
</a>
</li>
<li class="nav-item"><a href="/" class="nav-link px-2 text-decoration-none
<li class="nav-item"><a href="{% url "main:home" %}" class="nav-link px-2 text-decoration-none
{% if active_tab == 'home' %}active{% endif %}">Home</a></li>
<li class="nav-item"><a href="/instruments/" class="nav-link px-2 text-decoration-none
<li class="nav-item"><a href="{% url "instrument-list" %}" class="nav-link px-2 text-decoration-none
{% if active_tab == 'instruments' %}active{% endif %}">Instruments</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-decoration-none">Search</a></li>
<li class="nav-item"><a href="/about/" class="nav-link px-2 text-decoration-none
<li class="nav-item"><a href="{% url "main:about" %}" class="nav-link px-2 text-decoration-none
{% if active_tab == 'about' %}active{% endif %}">About</a></li>
</ul>

Expand Down