Skip to content

Commit

Permalink
style: reformat detail.html
Browse files Browse the repository at this point in the history
  • Loading branch information
yinanazhou committed Jul 18, 2024
1 parent e518c9f commit 88788df
Showing 1 changed file with 157 additions and 155 deletions.
312 changes: 157 additions & 155 deletions web-app/django/VIM/apps/instruments/templates/instruments/detail.html
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 %}

0 comments on commit 88788df

Please sign in to comment.