Skip to content

Commit

Permalink
Merge pull request #122 from DDMAL/animation
Browse files Browse the repository at this point in the history 
Add animation and bg image to home page
  • Loading branch information
@yinanazhou
yinanazhou authored Jul 19, 2024
2 parents f3486d4 + 88788df commit 6ce3eab
Show file tree
Hide file tree
Showing 12 changed files with 409 additions and 213 deletions.
9 changes: 1 addition & 8 deletions .djlintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,5 @@
"blank_line_after_tag": "load,extends,include,endblock",
"ignore": "H006,H016,H021,H025,H030,H031",
"close_void_tags": true,
"format_css": true,
"css": {
"indent_size": 2
},
"format_js": true,
"js": {
"indent_size": 2
}
"max_line_length": "80"
}
312 changes: 157 additions & 155 deletions web-app/django/VIM/apps/instruments/templates/instruments/detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,155 +1,157 @@
{% extends "base.html" %}

{% load static %}

{% block title %}
Instrument Detail
{% endblock title %}

{% block css_files %}
<link rel="stylesheet" href="{% static "instruments/css/index.css" %}" />
<link rel="stylesheet" href="{% static "instruments/css/detail.css" %}" />
{% endblock css_files %}

{% block content %}
<div class="instrument-detail">
<div class="detail-header">
<h2>
{% for instrumentname in instrument_names %}
{% if instrumentname.language.en_label == active_language.en_label %}{{ instrumentname.name|title }}{% endif %}
{% endfor %}
</h2>
<hr />
</div>
<div class="detail-body">
<div class="instrument-forms">
<table class="table table-sm table-striped table-bordered">
<tbody>
<tr>
<th scope="row">Wikidata ID</th>
<td>
<div class="name-form-item">
<div class="name-field">
<a class="view-field"
href="https://www.wikidata.org/wiki/{{ instrument.wikidata_id }}"
target="_blank">{{ instrument.wikidata_id }}</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Hornbostel-Sachs Classification</th>
<td>
<div class="name-form-item">
<div class="name-field">
<span class="view-field">{{ instrument.hornbostel_sachs_class }}</span>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">MIMO Classification</th>
<td>
<div class="name-form-item">
<div class="name-field">
<a class="view-field"
href="https://vocabulary.mimo-international.com/InstrumentsKeywords/en/page/{{ mimo_class }}"
target="_blank">{{ instrument.mimo_class }}</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Instrument Names in Different Languages</th>
<td>
<table class="table table-sm table-striped table-bordered">
<thead>
<tr>
<th scope="col">
<span class="name-form-item">Language</span>
</th>
<th scope="col">
<span class="name-form-item">Name</span>
</th>
<th scope="col">
<span class="name-form-item">Source</span>
</th>
</tr>
</thead>
<tbody>
{% for instrumentname in instrument_names %}
<tr>
<td>
<div class="name-form-item">
<div class="name-field">
<span class="view-field">{{ instrumentname.language.en_label }}</span>
<input class="edit-field"
type="text"
value="{{ instrumentname.language.en_label }}" />
</div>
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
</div>
</td>
<td>
<div class="name-form-item">
<div class="name-field">
<span class="view-field">{{ instrumentname.name }}</span>
<input class="edit-field" type="text" value="{{ instrumentname.name }}" />
</div>
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
</div>
</td>
<td>
<div class="name-form-item">
<div class="name-field">
<span class="view-field">{{ instrumentname.source_name }}</span>
<input class="edit-field"
type="text"
value="{{ instrumentname.source_name }}" />
</div>
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
</tr>
<tr>
<th scope="row">Image</th>
<td>
<div class="name-form-item">
<div class="detail-image">
<img src="{{ instrument.default_image.url }}"
alt="{{ instrument.default_image.url }}"
class="figure-img img-fluid rounded instrument-image" />
<div class="detail-image-caption">
<a href="{{ instrument.default_image.url }}" target="_blank">View image in full size</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{% endblock content %}

{% block scripts %}
<script src="{% static "instruments/js/InstrumentDetail.js" %}"></script>
{% endblock scripts %}
{% extends "base.html" %}

{% load static %}

{% block title %}
Instrument Detail
{% endblock title %}

{% block css_files %}
<link rel="stylesheet" href="{% static "instruments/css/index.css" %}" />
<link rel="stylesheet" href="{% static "instruments/css/detail.css" %}" />
{% endblock css_files %}

{% block content %}
<div class="instrument-detail">
<div class="detail-header">
<h2>
{% for instrumentname in instrument_names %}
{% if instrumentname.language.en_label == active_language.en_label %}
{{ instrumentname.name|title }}
{% endif %}
{% endfor %}
</h2>
<hr />
</div>
<div class="detail-body">
<div class="instrument-forms">
<table class="table table-sm table-striped table-bordered">
<tbody>
<tr>
<th scope="row">Wikidata ID</th>
<td>
<div class="name-form-item">
<div class="name-field">
<a class="view-field"
href="https://www.wikidata.org/wiki/{{ instrument.wikidata_id }}"
target="_blank">{{ instrument.wikidata_id }}</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Hornbostel-Sachs Classification</th>
<td>
<div class="name-form-item">
<div class="name-field">
<span class="view-field">{{ instrument.hornbostel_sachs_class }}</span>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">MIMO Classification</th>
<td>
<div class="name-form-item">
<div class="name-field">
<a class="view-field"
href="https://vocabulary.mimo-international.com/InstrumentsKeywords/en/page/{{ mimo_class }}"
target="_blank">{{ instrument.mimo_class }}</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">Instrument Names in Different Languages</th>
<td>
<table class="table table-sm table-striped table-bordered">
<thead>
<tr>
<th scope="col">
<span class="name-form-item">Language</span>
</th>
<th scope="col">
<span class="name-form-item">Name</span>
</th>
<th scope="col">
<span class="name-form-item">Source</span>
</th>
</tr>
</thead>
<tbody>
{% for instrumentname in instrument_names %}
<tr>
<td>
<div class="name-form-item">
<div class="name-field">
<span class="view-field">{{ instrumentname.language.en_label }}</span>
<input class="edit-field"
type="text"
value="{{ instrumentname.language.en_label }}" />
</div>
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
</div>
</td>
<td>
<div class="name-form-item">
<div class="name-field">
<span class="view-field">{{ instrumentname.name }}</span>
<input class="edit-field" type="text" value="{{ instrumentname.name }}" />
</div>
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
</div>
</td>
<td>
<div class="name-form-item">
<div class="name-field">
<span class="view-field">{{ instrumentname.source_name }}</span>
<input class="edit-field"
type="text"
value="{{ instrumentname.source_name }}" />
</div>
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</td>
</tr>
<tr>
<th scope="row">Image</th>
<td>
<div class="name-form-item">
<div class="detail-image">
<img src="{{ instrument.default_image.url }}"
alt="{{ instrument.default_image.url }}"
class="figure-img img-fluid rounded instrument-image" />
<div class="detail-image-caption">
<a href="{{ instrument.default_image.url }}" target="_blank">View image in full size</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{% endblock content %}

{% block scripts %}
<script src="{% static "instruments/js/InstrumentDetail.js" %}"></script>
{% endblock scripts %}
4 changes: 3 additions & 1 deletion web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
<a href="#" class="text-decoration-none">
<h5 class="card-title notranslate">
{% for instrumentname in instrument.instrumentname_set.all %}
{% if instrumentname.language.en_label == active_language.en_label %}{{ instrumentname.name|title }}{% endif %}
{% if instrumentname.language.en_label == active_language.en_label %}
{{ instrumentname.name|title }}
{% endif %}
{% endfor %}
</h5>
</a>
Expand Down
4 changes: 3 additions & 1 deletion web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
<div class="card-body pb-0 pt-0">
<p class="card-title text-center notranslate ">
{% for instrumentname in instrument.instrumentname_set.all %}
{% if instrumentname.language.en_label == active_language.en_label %}{{ instrumentname.name|title }}{% endif %}
{% if instrumentname.language.en_label == active_language.en_label %}
{{ instrumentname.name|title }}
{% endif %}
{% endfor %}
</p>
</div>
Expand Down
4 changes: 3 additions & 1 deletion web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
<div class="card-body pb-0 pt-0">
<p class="card-title text-center notranslate">
{% for instrumentname in instrument.instrumentname_set.all %}
{% if instrumentname.language.en_label == active_language.en_label %}{{ instrumentname.name|title }}{% endif %}
{% if instrumentname.language.en_label == active_language.en_label %}
{{ instrumentname.name|title }}
{% endif %}
{% endfor %}
</p>
</div>
Expand Down
4 changes: 3 additions & 1 deletion web-app/django/VIM/apps/instruments/templates/instruments/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,9 @@ <h4 class="ms-3 me-2 my-auto">
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
data-bs-title="Instrument name language">{{ active_language.autonym|title }}</button>
data-bs-title="Instrument name language">
{{ active_language.autonym|title }}
</button>
<ul class="dropdown-menu">
{% for language in languages %}
<li>
Expand Down
Loading

0 comments on commit 6ce3eab

Please sign in to comment.