Merge pull request #69 from DDMAL/front-fix

Frontend updates
DDMAL · Oct 12, 2023 · 196127d · 196127d
2 parents 2ce1f86 + 53ab95d
commit 196127d
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 46 deletions.
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
@@ -1,10 +1,10 @@
 
 const masonryBtn = document.getElementById("masonry-btn");
-const listBtn = document.getElementById("list-btn");
+// const listBtn = document.getElementById("list-btn");
 const stdBtn = document.getElementById("std-btn");
 
 const masonryView = document.getElementById('masonry-view');
-const listView = document.getElementById('list-view');
+// const listView = document.getElementById('list-view');
 const stdView = document.getElementById('std-view');
 
 updateDisplayMode();
@@ -23,26 +23,26 @@ function updateDisplayMode() {
         case 'masonry':
             setMasonryView();
             masonryBtn.style.display = "";
-            listBtn.style.display = "none";
+            // listBtn.style.display = "none";
             stdBtn.style.display = "none";
             masonryView.style.display = "";
-            listView.style.display = "none";
-            stdView.style.display = "none";
-            break;
-        case 'list':
-            masonryBtn.style.display = "none";
-            listBtn.style.display = "";
-            stdBtn.style.display = "none";
-            masonryView.style.display = "none";
-            listView.style.display = "";
+            // listView.style.display = "none";
             stdView.style.display = "none";
             break;
+        // case 'list':
+        //     masonryBtn.style.display = "none";
+        //     listBtn.style.display = "";
+        //     stdBtn.style.display = "none";
+        //     masonryView.style.display = "none";
+        //     listView.style.display = "";
+        //     stdView.style.display = "none";
+        //     break;
         case 'standard':
             masonryBtn.style.display = "none";
-            listBtn.style.display = "none";
+            // listBtn.style.display = "none";
             stdBtn.style.display = "";
             masonryView.style.display = "none";
-            listView.style.display = "none";
+            // listView.style.display = "none";
             stdView.style.display = "";
             break;
         default:
@@ -52,15 +52,15 @@ function updateDisplayMode() {
 
 // Switch to the next mode
 masonryBtn.addEventListener("click", () => {
-    setDisplayMode('list');
-    updateDisplayMode();
-});
-
-listBtn.addEventListener("click", () => {
     setDisplayMode('standard');
     updateDisplayMode();
 });
 
+// listBtn.addEventListener("click", () => {
+//     setDisplayMode('standard');
+//     updateDisplayMode();
+// });
+
 stdBtn.addEventListener("click", () => {
     setDisplayMode('masonry'); 
     updateDisplayMode();

diff --git a/...ments/static/instruments/js/pagination.js → .../static/instruments/js/PaginationTools.js b/...ments/static/instruments/js/pagination.js → .../static/instruments/js/PaginationTools.js
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
@@ -4,7 +4,7 @@
 <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">
+    <a href="https://wikidata.org/wiki/{{ instrument.wikidata_id}}" class="text-decoration-none" target="_blank">
       <div class="card mb-3">
         <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" %}';">

diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/pageSetting.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/pageSetting.html
@@ -16,7 +16,7 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Pagination Setting</h1>
                         <div class="row mb-2">
                             <label for="paginate-by" class="col-sm-4 col-form-label">Paginate by:</label>
                             <div class="col-sm-6 d-flex align-items-center">
-                                <input type="range" id="pagination-range" name="paginate_by" min="15" max="50" step="1" value="20">
+                                <input type="range" id="pagination-range" name="paginate_by" min="15" max="50" step="5" value="20">
                             </div>
                             <div class="col-sm-2">
                                 <span class="range-value" id="range-value">20</span>

diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
@@ -4,7 +4,7 @@
 <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">
+    <a href="https://wikidata.org/wiki/{{ instrument.wikidata_id}}" class="text-decoration-none" target="_blank">
       <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"

diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -104,9 +104,9 @@ <h4 class="ms-3 my-auto"><small>{% trans "INSTRUMENT LIST" %}</small></h4>
           <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;">
+          {% comment %} <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> {% endcomment %}
           <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>
@@ -115,7 +115,7 @@ <h4 class="ms-3 my-auto"><small>{% trans "INSTRUMENT LIST" %}</small></h4>
     <hr>
     <div class="container py-3" id="body-content">
       {% include "instruments/includes/masonryView.html" %}
-      {% include "instruments/includes/listView.html" %}
+      {% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %}
       {% include "instruments/includes/stdView.html" %}
     </div>
 
@@ -166,5 +166,5 @@ <h4 class="ms-3 my-auto"><small>{% trans "INSTRUMENT LIST" %}</small></h4>
 <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
 <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
 <script src="{% static "instruments/js/DisplayMode.js" %}"></script>
-<script src="{% static "instruments/js/pagination.js" %}"></script>
+<script src="{% static "instruments/js/PaginationTools.js" %}"></script>
 {% endblock %}
diff --git a/web-app/django/VIM/templates/base.html b/web-app/django/VIM/templates/base.html
@@ -40,27 +40,25 @@
           <input type="search" class="form-control search-input" placeholder="{% trans 'Search...' %}" aria-label="Search">
         </form>
 
-        <div class="text-end">
+        <div class="text-end d-flex">
           <button type="button" class="btn me-2 login-btn">{% trans "Login" %}</button>
-          <button type="button" class="btn btn-warning signup-btn">{% trans "Sign-up" %}</button>
-        </div>
-
-        <div class="dropdown">
-          {% get_current_language as CURR_LANGUAGE_CODE %}
-          {% get_language_info for CURR_LANGUAGE_CODE as curr_language_info %}
-          {% get_available_languages as LANGUAGE_LIST %}
-          {% get_language_info_list for LANGUAGE_LIST as language_info_list %}
-
-          <button class="btn ms-2 dropdown-toggle language-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-            {{ curr_language_info.name_local }}
-          </button>
-          <ul class="dropdown-menu language-dp-menu">
-            {% for language_info in language_info_list %}
-              <li><a class="dropdown-item language-opt" href="/{{ language_info.code }}/">
-                  {{ language_info.name_local }}
-              </a></li>
-            {% endfor %}
-          </ul>
+          <div class="dropdown">
+            {% get_current_language as CURR_LANGUAGE_CODE %}
+            {% get_language_info for CURR_LANGUAGE_CODE as curr_language_info %}
+            {% get_available_languages as LANGUAGE_LIST %}
+            {% get_language_info_list for LANGUAGE_LIST as language_info_list %}
+
+            <button class="btn ms-2 dropdown-toggle language-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+              {{ curr_language_info.name_local }}
+            </button>
+            <ul class="dropdown-menu language-dp-menu">
+              {% for language_info in language_info_list %}
+                <li><a class="dropdown-item language-opt" href="/{{ language_info.code }}/">
+                    {{ language_info.name_local }}
+                </a></li>
+              {% endfor %}
+            </ul>
+          </div>
         </div>
       </div>
     </div>