diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css b/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css index a8bb4b1..2bd2169 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css @@ -1,97 +1,97 @@ .instrument-detail { - display: flex; - flex-wrap: nowrap; - align-items: center; - flex-direction: column; - padding: 50px; + display: flex; + flex-wrap: nowrap; + align-items: center; + flex-direction: column; + padding: 50px; } .detail-header { - display: flex; - flex-direction: row; - justify-content: flex-start; - flex-wrap: wrap; - width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; + flex-wrap: wrap; + width: 100%; } .detail-header hr { - width: 100%; + width: 100%; } .detail-body { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: flex-start; - width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: flex-start; + width: 100%; } .detail-image { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: flex-start; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; } .instrument-image { - max-width: 50%; - margin-right: 10px; + max-width: 50%; + margin-right: 10px; } .detail-image-caption { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: flex-start; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; } .instrument-forms { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + width: 100%; } .name-form-item { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; } .name-field { - width: 90%; + width: 90%; } input.edit-field { - width: inherit; + width: inherit; } th[scope="col"] { - width: 30%; + width: 30%; } th[scope="row"] { - width: 20%; + width: 20%; } .button-group { - display:flex; - flex-direction: row; + display:flex; + flex-direction: row; } .edit-field, .btn.cancel, .btn.publish { - display: none; + display: none; } .btn { - display: inline-block; - padding: 5px 10px; - cursor: pointer; - text-align: center; - text-decoration: none; - outline: none; - color: #fff; - border: none; - border-radius: 3px; - margin-right: 5px; + display: inline-block; + padding: 5px 10px; + cursor: pointer; + text-align: center; + text-decoration: none; + outline: none; + color: #fff; + border: none; + border-radius: 3px; + margin-right: 5px; } .btn.edit { - background-color: #ffc107; + background-color: #ffc107; } .btn.cancel { - background-color: #dc3545; + background-color: #dc3545; } .btn.publish { - background-color: #28a745; + background-color: #28a745; } \ No newline at end of file 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 index 9a27a96..cbd6a2f 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css @@ -1,9 +1,9 @@ @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css'); h2 { - color: #435334; - font-size: 30px; - font-weight: 800; + color: #435334; + font-size: 30px; + font-weight: 800; } h4 { diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js b/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js index f91d145..f2efb8b 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js @@ -1,42 +1,42 @@ document.addEventListener('DOMContentLoaded', function() { - const editButtons = document.querySelectorAll('.btn.edit'); - const cancelButtons = document.querySelectorAll('.btn.cancel'); - const publishButtons = document.querySelectorAll('.btn.publish'); - - editButtons.forEach(button => { - button.addEventListener('click', function() { - const parentTd = this.closest('td'); - parentTd.querySelector('.view-field').style.display = 'none'; - parentTd.querySelector('.edit-field').style.display = 'inline-block'; - parentTd.querySelector('.btn.cancel').style.display = 'inline-block'; - parentTd.querySelector('.btn.publish').style.display = 'inline-block'; - this.style.display = 'none'; - }); + const editButtons = document.querySelectorAll('.btn.edit'); + const cancelButtons = document.querySelectorAll('.btn.cancel'); + const publishButtons = document.querySelectorAll('.btn.publish'); + + editButtons.forEach(button => { + button.addEventListener('click', function() { + const parentTd = this.closest('td'); + parentTd.querySelector('.view-field').style.display = 'none'; + parentTd.querySelector('.edit-field').style.display = 'inline-block'; + parentTd.querySelector('.btn.cancel').style.display = 'inline-block'; + parentTd.querySelector('.btn.publish').style.display = 'inline-block'; + this.style.display = 'none'; }); - - cancelButtons.forEach(button => { - button.addEventListener('click', function() { - const parentTd = this.closest('td'); - parentTd.querySelector('.view-field').style.display = 'inline'; - parentTd.querySelector('.edit-field').style.display = 'none'; - parentTd.querySelector('.btn.edit').style.display = 'inline-block'; - parentTd.querySelector('.btn.publish').style.display = 'none'; - this.style.display = 'none'; - }); + }); + + cancelButtons.forEach(button => { + button.addEventListener('click', function() { + const parentTd = this.closest('td'); + parentTd.querySelector('.view-field').style.display = 'inline'; + parentTd.querySelector('.edit-field').style.display = 'none'; + parentTd.querySelector('.btn.edit').style.display = 'inline-block'; + parentTd.querySelector('.btn.publish').style.display = 'none'; + this.style.display = 'none'; }); + }); - publishButtons.forEach(button => { - button.addEventListener('click', function() { - const parentTd = this.closest('td'); - const newValue = parentTd.querySelector('.edit-field').value; - // TODO: request to update the value on the server - parentTd.querySelector('.view-field').textContent = newValue; - parentTd.querySelector('.view-field').style.display = 'inline'; - parentTd.querySelector('.edit-field').style.display = 'none'; - parentTd.querySelector('.btn.edit').style.display = 'inline-block'; - this.style.display = 'none'; - parentTd.querySelector('.btn.cancel').style.display = 'none'; - }); + publishButtons.forEach(button => { + button.addEventListener('click', function() { + const parentTd = this.closest('td'); + const newValue = parentTd.querySelector('.edit-field').value; + // TODO: request to update the value on the server + parentTd.querySelector('.view-field').textContent = newValue; + parentTd.querySelector('.view-field').style.display = 'inline'; + parentTd.querySelector('.edit-field').style.display = 'none'; + parentTd.querySelector('.btn.edit').style.display = 'inline-block'; + this.style.display = 'none'; + parentTd.querySelector('.btn.cancel').style.display = 'none'; }); + }); }); \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html index e833efa..8d1b864 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html @@ -3,153 +3,153 @@ {% load static %} {% block title %} -Instrument Detail + Instrument Detail {% endblock %} {% block css_files %} - - + + {% endblock %} {% block content %} -
Wikidata ID | -
-
-
-
- {{ wikidata_id }}
-
-
-
- |
-
---|---|
Hornbostel-Sachs Classification | -
-
-
- {{ hornbostel_sachs_class }}
-
-
- |
+