Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: detail page UI rearrangement #129

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat: detail page UI rearrangement #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 27 additions & 3 deletions web-app/django/VIM/apps/instruments/static/instruments/css/detail.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,20 @@
}
.detail-image {
display: flex;
flex-direction: row;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 30px;
}
.instrument-image {
max-width: 50%;
margin-right: 10px;
max-width: 25%;
}
.detail-image-caption {
display: flex;
Expand Down Expand Up @@ -97,3 +103,21 @@ th[scope='row'] {
.btn.publish {
background-color: #28a745;
}
.btn-primary {
background-color: #435334;
border: 1px solid #435334;
}
.btn-primary:hover {
background-color: #9eb384;
border: 1px solid #9eb384;
}
.form-label {
color: #435334;
}
.image-header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}
132 changes: 77 additions & 55 deletions web-app/django/VIM/apps/instruments/templates/instruments/detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,40 +27,6 @@ <h2>
<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>
Expand Down Expand Up @@ -89,11 +55,13 @@ <h2>
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>
{% if user.is_authenticated %}
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
{% endif %}
</div>
</td>
<td>
Expand All @@ -102,11 +70,13 @@ <h2>
<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>
{% if user.is_authenticated %}
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
{% endif %}
</div>
</td>
<td>
Expand All @@ -117,11 +87,13 @@ <h2>
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>
{% if user.is_authenticated %}
<div class="button-group">
<button class="btn edit">Edit</button>
<button class="btn cancel">Cancel</button>
<button class="btn publish">Publish</button>
</div>
{% endif %}
</div>
</td>
</tr>
Expand All @@ -131,20 +103,70 @@ <h2>
</td>
</tr>
<tr>
<th scope="row">Image</th>
<th scope="row">
<div class="image-header">
<span>Image</span>
{% if user.is_authenticated %}
<button type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#uploadImageModal">
Upload New Images
</button>
{% include "instruments/includes/imageUploadModal.html" %}

{% endif %}
</div>
</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 class="image-container">
<img src="{{ instrument.default_image.url }}"
alt="{{ instrument.default_image.url }}"
class="img-fluid border instrument-image" />
<div class="detail-image-caption">
<a href="{{ instrument.default_image.url }}" target="_blank">View image in full size</a>
</div>
</div>
</div>
</div>
</td>
</tr>
<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>
</tbody>
</table>
</div>
Expand Down
31 changes: 31 additions & 0 deletions web-app/django/VIM/apps/instruments/templates/instruments/includes/imageUploadModal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<div class="modal fade"
id="uploadImageModal"
tabindex="-1"
aria-labelledby="uploadImageModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="uploadImageModalLabel">Upload New Images</h4>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="mb-3">
<label for="imageUpload" class="form-label">Choose images to upload</label>
<input class="form-control"
type="file"
id="imageUpload"
name="images"
multiple />
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
</div>
</div>
</div>