Skip to content

Commit 04930a4

Browse files
yinanazhouyinanazhou
committed
style: align instrument page columns on mobile devices
refs: #191
1 parent 7d235a1 commit 04930a4

File tree

1 file changed

+117
-115
lines changed
  • web-app/django/VIM/templates/instruments

1 file changed

+117
-115
lines changed

‎web-app/django/VIM/templates/instruments/index.html

Lines changed: 117 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -82,129 +82,131 @@ <h4>######</h4>
8282
</div> {% endcomment %}
8383
</div>
8484
</div>
85-
<div class="col-xl-9 pt-3 body-container">
86-
<div class="navigation d-flex justify-content-between align-items-center">
87-
<div class="d-flex">
88-
<h4 class="ms-3 me-2 my-auto">
89-
<small>INSTRUMENT LIST</small>
90-
</h4>
91-
<div class="dropdown mx-2 notranslate"
92-
id="instrument-language-element"
93-
data-bs-toggle="tooltip"
94-
data-bs-title="Instrument Name Language"
95-
aria-label="Instrument Name Language"
96-
aria-pressed="true">
97-
<button class="btn btn-warning dropdown-toggle position-relative py-0"
98-
type="button"
99-
aria-expanded="false"
100-
data-bs-toggle="dropdown"
101-
data-bs-title="Instrument name language"
102-
id="language-dropdown-btn">
103-
{{ active_language.autonym|title }}
85+
<div class="col-xl-9">
86+
<div class="body-container pt-3">
87+
<div class="navigation d-flex justify-content-between align-items-center">
88+
<div class="d-flex">
89+
<h4 class="ms-3 me-2 my-auto">
90+
<small>INSTRUMENT LIST</small>
91+
</h4>
92+
<div class="dropdown mx-2 align-content-center notranslate"
93+
id="instrument-language-element"
94+
data-bs-toggle="tooltip"
95+
data-bs-title="Instrument Name Language"
96+
aria-label="Instrument Name Language"
97+
aria-pressed="true">
98+
<button class="btn btn-warning dropdown-toggle position-relative py-0"
99+
type="button"
100+
aria-expanded="false"
101+
data-bs-toggle="dropdown"
102+
data-bs-title="Instrument name language"
103+
id="language-dropdown-btn">
104+
{{ active_language.autonym|title }}
105+
</button>
106+
<ul class="dropdown-menu umil-dropdown-menu" id="language-dropdown-list">
107+
{% for language in languages %}
108+
<li>
109+
<a class="dropdown-item umil-dropdown-item"
110+
href="?language={{ language.en_label }}"
111+
data-language="{{ language.en_label }}">
112+
{{ language.en_label|title }} ({{ language.autonym|title }})</a>
113+
</li>
114+
{% endfor %}
115+
</ul>
116+
</div>
117+
</div>
118+
<div class="d-flex">
119+
<button type="button"
120+
class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn"
121+
id="masonry-btn"
122+
title="Masonry View"
123+
aria-label="Masonry View"
124+
aria-pressed="true">
125+
<i class="bi bi-columns-gap"></i>
126+
</button>
127+
<button type="button"
128+
class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn"
129+
id="std-btn"
130+
title="Standard View"
131+
aria-label="Standard View">
132+
<i class="bi bi-grid"></i>
104133
</button>
105-
<ul class="dropdown-menu umil-dropdown-menu" id="language-dropdown-list">
106-
{% for language in languages %}
107-
<li>
108-
<a class="dropdown-item umil-dropdown-item"
109-
href="?language={{ language.en_label }}"
110-
data-language="{{ language.en_label }}">
111-
{{ language.en_label|title }} ({{ language.autonym|title }})</a>
112-
</li>
113-
{% endfor %}
114-
</ul>
115134
</div>
116135
</div>
117-
<div class="d-flex">
118-
<button type="button"
119-
class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn"
120-
id="masonry-btn"
121-
title="Masonry View"
122-
aria-label="Masonry View"
123-
aria-pressed="true">
124-
<i class="bi bi-columns-gap"></i>
125-
</button>
126-
<button type="button"
127-
class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn"
128-
id="std-btn"
129-
title="Standard View"
130-
aria-label="Standard View">
131-
<i class="bi bi-grid"></i>
132-
</button>
133-
</div>
134-
</div>
135-
<hr class="mb-2 mx-2" />
136-
<div class="container py-3" id="body-content">
137-
<div class="mb-2 d-flex flex-md-row flex-column align-items-center justify-content-between">
138-
<span id="instrumentNum"
139-
data-instrument-num="{{ page_obj.paginator.count }}"
140-
class="text-start">
141-
Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} entries
142-
{% if hbs_facet_name %}for{% endif %}
143-
<strong>{{ hbs_facet_name }}</strong>
144-
</span>
145-
{% include "instruments/includes/paginationOptions.html" %}
136+
<hr class="mb-2 mx-2" />
137+
<div class="container py-3" id="body-content">
138+
<div class="mb-2 d-flex flex-md-row flex-column align-items-center justify-content-between">
139+
<span id="instrumentNum"
140+
data-instrument-num="{{ page_obj.paginator.count }}"
141+
class="text-start">
142+
Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} entries
143+
{% if hbs_facet_name %}for{% endif %}
144+
<strong>{{ hbs_facet_name }}</strong>
145+
</span>
146+
{% include "instruments/includes/paginationOptions.html" %}
146147

147-
</div>
148-
{% include "instruments/includes/masonryView.html" %}
148+
</div>
149+
{% include "instruments/includes/masonryView.html" %}
149150

150-
{% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %}
151-
{% include "instruments/includes/stdView.html" %}
151+
{% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %}
152+
{% include "instruments/includes/stdView.html" %}
152153

153-
</div>
154-
<div class="mb-3 d-flex flex-md-row flex-column align-items-center justify-content-center">
155-
{% include "instruments/includes/paginationOptions.html" %}
154+
</div>
155+
<div class="mb-3 d-flex flex-md-row flex-column align-items-center justify-content-center">
156+
{% include "instruments/includes/paginationOptions.html" %}
156157

157-
<div class="pagination-container ">
158-
<ul class="pagination mb-1 justify-content-center">
159-
{% if page_obj.has_previous %}
160-
<li class="page-item">
161-
<a class="page-link"
162-
href="?page=1{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
163-
aria-label="First"
164-
title="First">
165-
<i class="bi bi-chevron-double-left"></i>
166-
</a>
167-
</li>
168-
<li class="page-item">
169-
<a class="page-link"
170-
href="?page={{ page_obj.previous_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
171-
aria-label="Previous"
172-
title="Previous">
173-
<i class="bi bi-chevron-left"></i>
174-
</a>
175-
</li>
176-
{% endif %}
177-
<li class="page-item align-self-center">
178-
<span class="current p-2">
179-
Page
180-
<span class="page-number">{{ page_obj.number }}</span>
181-
of
182-
{{ page_obj.paginator.num_pages }}
183-
</span>
184-
</li>
185-
{% if page_obj.has_next %}
186-
<li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
187-
<a class="page-link"
188-
href="?page={{ page_obj.next_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
189-
aria-label="Next"
190-
title="Next">
191-
<i class="bi bi-chevron-right"></i>
192-
</a>
193-
</li>
194-
<li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
195-
<a class="page-link"
196-
href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
197-
aria-label="Last"
198-
title="Last">
199-
<i class="bi bi-chevron-double-right"></i>
200-
</a>
158+
<div class="pagination-container ">
159+
<ul class="pagination mb-1 justify-content-center">
160+
{% if page_obj.has_previous %}
161+
<li class="page-item">
162+
<a class="page-link"
163+
href="?page=1{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
164+
aria-label="First"
165+
title="First">
166+
<i class="bi bi-chevron-double-left"></i>
167+
</a>
168+
</li>
169+
<li class="page-item">
170+
<a class="page-link"
171+
href="?page={{ page_obj.previous_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
172+
aria-label="Previous"
173+
title="Previous">
174+
<i class="bi bi-chevron-left"></i>
175+
</a>
176+
</li>
177+
{% endif %}
178+
<li class="page-item align-self-center">
179+
<span class="current p-2">
180+
Page
181+
<span class="page-number">{{ page_obj.number }}</span>
182+
of
183+
{{ page_obj.paginator.num_pages }}
184+
</span>
201185
</li>
202-
{% endif %}
203-
</ul>
204-
</div>
205-
<div class="ms-3 mb-1 d-flex align-items-center justify-content-start">
206-
<label for="go-to" class="col-form-label">Go to Page</label>
207-
<input type="number" name="page" id="page-num" min="1" step="1" />
186+
{% if page_obj.has_next %}
187+
<li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
188+
<a class="page-link"
189+
href="?page={{ page_obj.next_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
190+
aria-label="Next"
191+
title="Next">
192+
<i class="bi bi-chevron-right"></i>
193+
</a>
194+
</li>
195+
<li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
196+
<a class="page-link"
197+
href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
198+
aria-label="Last"
199+
title="Last">
200+
<i class="bi bi-chevron-double-right"></i>
201+
</a>
202+
</li>
203+
{% endif %}
204+
</ul>
205+
</div>
206+
<div class="ms-3 mb-1 d-flex align-items-center justify-content-start">
207+
<label for="go-to" class="col-form-label">Go to Page</label>
208+
<input type="number" name="page" id="page-num" min="1" step="1" />
209+
</div>
208210
</div>
209211
</div>
210212
</div>

0 commit comments

Comments
 (0)