Merge pull request #51 from DDMAL/front-end-instruments

Front end updates
DDMAL · Oct 5, 2023 · 9d13d8c · 9d13d8c
2 parents b275f68 + 1bb5839
commit 9d13d8c
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 34 deletions.
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css
@@ -57,6 +57,7 @@ hr {
     font-weight: bold;
     color: #435334;
     font-size: 20px;
+    width: 30px;
 }
 
 .display-btn:focus {

diff --git a/web-app/django/VIM/apps/instruments/static/instruments/images/no-image.svg b/web-app/django/VIM/apps/instruments/static/instruments/images/no-image.svg
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplayMode.js b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplayMode.js
@@ -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();
     });
 }
diff --git a/...ments/templates/instruments/listView.html → ...plates/instruments/includes/listView.html b/...ments/templates/instruments/listView.html → ...plates/instruments/includes/listView.html
@@ -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">

diff --git a/...ts/templates/instruments/masonryView.html → ...tes/instruments/includes/masonryView.html b/...ts/templates/instruments/masonryView.html → ...tes/instruments/includes/masonryView.html
@@ -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 %}

diff --git a/...uments/templates/instruments/stdView.html → ...mplates/instruments/includes/stdView.html b/...uments/templates/instruments/stdView.html → ...mplates/instruments/includes/stdView.html
@@ -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">

diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -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">

diff --git a/...jango/VIM/apps/main/static/main/index.css → ...o/VIM/apps/main/static/main/css/index.css b/...jango/VIM/apps/main/static/main/index.css → ...o/VIM/apps/main/static/main/css/index.css
diff --git a/web-app/django/VIM/templates/base.html b/web-app/django/VIM/templates/base.html
@@ -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>