Skip to content

Commit 05f278f

Browse files
BenjaminCharmesBenjaminCharmes
committed
Update for better mobile support
Update CompactConstituentTable for better mobile support Edit EditPage Navbar to better mobile support Edit DynamicDataTableButtons to better mobile support Fix FileList with Bootstrap5 Update CollectionInformation and CollectionPage for better mobile support
1 parent e6cda6f commit 05f278f

File tree

7 files changed

+255
-148
lines changed

7 files changed

+255
-148
lines changed

‎webapp/src/components/CollectionInformation.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="row">
44
<div class="col">
55
<div id="collection-information" class="row">
6-
<div class="col-md-2">
6+
<div class="col-md-2 mb-3">
77
<label id="creators" class="form-label">Creators</label>
88
<div>
99
<Creators :creators="CollectionCreators" :size="36" />

‎webapp/src/components/CompactConstituentTable.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
2-
<table style="width: 600px" class="table table-sm borderless">
2+
<table class="table table-sm borderless w-100">
33
<colgroup>
4-
<col span="1" style="width: 300px" />
5-
<col span="1" style="width: 75px" />
6-
<col span="1" style="width: 50px" />
7-
<col span="1" style="width: 25px" />
4+
<col span="1" class="w-50" />
5+
<col span="1" class="w-25" />
6+
<col span="1" class="w-15" />
7+
<col span="1" class="w-10" />
88
</colgroup>
99
<tbody>
1010
<tr v-for="(constituent, index) in constituents" :key="index">

‎webapp/src/components/DynamicDataTableButtons.vue‎

Lines changed: 156 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,168 @@
11
<template>
2-
<div v-if="showButtons" class="button-group d-flex justify-content-between align-items-center">
3-
<div class="button-left d-flex gap-2">
4-
<button
5-
v-if="dataType === 'samples'"
6-
data-testid="add-item-button"
7-
class="btn btn-default"
8-
@click="$emit('open-create-item-modal')"
9-
>
10-
Add an item
11-
</button>
12-
<button
13-
v-if="dataType === 'samples'"
14-
data-testid="batch-item-button"
15-
class="btn btn-default"
16-
@click="$emit('open-batch-create-item-modal')"
17-
>
18-
Add batch of items
19-
</button>
20-
<button
21-
v-if="dataType === 'samples'"
22-
data-testid="scan-qr-button"
23-
class="btn btn-default"
24-
@click="$emit('open-qr-scanner-modal')"
25-
>
26-
<font-awesome-icon icon="qrcode" /> Scan QR
27-
</button>
28-
<button
29-
v-if="dataType === 'collections'"
30-
data-testid="add-collection-button"
31-
class="btn btn-default"
32-
@click="$emit('open-create-collection-modal')"
33-
>
34-
Create new collection
35-
</button>
36-
<button
37-
v-if="dataType === 'startingMaterials' && editableInventory"
38-
data-testid="add-starting-material-button"
39-
class="btn btn-default"
40-
@click="$emit('open-create-item-modal')"
41-
>
42-
Add a starting material
43-
</button>
44-
<button
45-
v-if="dataType === 'equipment'"
46-
data-testid="add-equipment-button"
47-
class="btn btn-default"
48-
@click="$emit('open-create-equipment-modal')"
49-
>
50-
Add an item
51-
</button>
2+
<div v-if="showButtons" class="d-flex justify-content-between align-items-center flex-wrap gap-2">
3+
<!-- Section gauche : Boutons ou dropdown -->
4+
<div class="d-flex flex-grow-1 align-items-center gap-2">
5+
<!-- Dropdown visible automatiquement en mobile -->
6+
<div class="d-lg-none dropdown">
7+
<button
8+
class="btn btn-default dropdown-toggle"
9+
type="button"
10+
data-bs-toggle="dropdown"
11+
aria-expanded="false"
12+
>
13+
Add...
14+
</button>
15+
<ul class="dropdown-menu">
16+
<li>
17+
<button
18+
v-if="dataType === 'samples'"
19+
data-testid="add-item-button"
20+
class="dropdown-item"
21+
@click="$emit('open-create-item-modal')"
22+
>
23+
Add an item
24+
</button>
25+
</li>
26+
<li>
27+
<button
28+
v-if="dataType === 'samples'"
29+
data-testid="batch-item-button"
30+
class="dropdown-item"
31+
@click="$emit('open-batch-create-item-modal')"
32+
>
33+
Add batch of items
34+
</button>
35+
</li>
36+
<li>
37+
<button
38+
v-if="dataType === 'samples'"
39+
data-testid="scan-qr-button"
40+
class="dropdown-item"
41+
@click="$emit('open-qr-scanner-modal')"
42+
>
43+
<font-awesome-icon icon="qrcode" /> Scan QR
44+
</button>
45+
</li>
46+
<li>
47+
<button
48+
v-if="dataType === 'collections'"
49+
data-testid="add-collection-button"
50+
class="dropdown-item"
51+
@click="$emit('open-create-collection-modal')"
52+
>
53+
Create new collection
54+
</button>
55+
</li>
56+
<li>
57+
<button
58+
v-if="dataType === 'startingMaterials' && editableInventory"
59+
data-testid="add-starting-material-button"
60+
class="dropdown-item"
61+
@click="$emit('open-create-item-modal')"
62+
>
63+
Add a starting material
64+
</button>
65+
</li>
66+
<li>
67+
<button
68+
v-if="dataType === 'equipment'"
69+
data-testid="add-equipment-button"
70+
class="dropdown-item"
71+
@click="$emit('open-create-equipment-modal')"
72+
>
73+
Add an item
74+
</button>
75+
</li>
76+
</ul>
77+
</div>
78+
79+
<!-- Boutons visibles en grand écran -->
80+
<div class="d-none d-lg-flex gap-2">
81+
<button
82+
v-if="dataType === 'samples'"
83+
data-testid="add-item-button"
84+
class="btn btn-default"
85+
@click="$emit('open-create-item-modal')"
86+
>
87+
Add an item
88+
</button>
89+
<button
90+
v-if="dataType === 'samples'"
91+
data-testid="batch-item-button"
92+
class="btn btn-default"
93+
@click="$emit('open-batch-create-item-modal')"
94+
>
95+
Add batch of items
96+
</button>
97+
<button
98+
v-if="dataType === 'samples'"
99+
data-testid="scan-qr-button"
100+
class="btn btn-default"
101+
@click="$emit('open-qr-scanner-modal')"
102+
>
103+
<font-awesome-icon icon="qrcode" /> Scan QR
104+
</button>
105+
<button
106+
v-if="dataType === 'collections'"
107+
data-testid="add-collection-button"
108+
class="btn btn-default"
109+
@click="$emit('open-create-collection-modal')"
110+
>
111+
Create new collection
112+
</button>
113+
<button
114+
v-if="dataType === 'startingMaterials' && editableInventory"
115+
data-testid="add-starting-material-button"
116+
class="btn btn-default"
117+
@click="$emit('open-create-item-modal')"
118+
>
119+
Add a starting material
120+
</button>
121+
<button
122+
v-if="dataType === 'equipment'"
123+
data-testid="add-equipment-button"
124+
class="btn btn-default"
125+
@click="$emit('open-create-equipment-modal')"
126+
>
127+
Add an item
128+
</button>
129+
</div>
52130
</div>
53-
<div class="button-right d-flex gap-2">
131+
132+
<!-- Section droite : Dropdown "Selected" et recherche -->
133+
<div class="d-flex align-items-center gap-2">
54134
<div class="dropdown">
55135
<button
56136
data-testid="selected-dropdown"
57137
class="btn btn-default dropdown-toggle"
58138
type="button"
59-
data-toggle="dropdown"
60-
aria-haspopup="true"
61-
aria-expanded="false"
139+
data-bs-toggle="dropdown"
62140
:disabled="itemsSelected.length === 0"
63-
@click="isSelectedDropdownVisible = !isSelectedDropdownVisible"
64141
>
65142
{{ itemsSelected.length > 0 ? `${itemsSelected.length} selected... ` : "Selected... " }}
66143
</button>
67-
<div
68-
v-show="isSelectedDropdownVisible"
69-
class="dropdown-menu"
70-
style="display: block"
71-
aria-labelledby="dropdownMenuButton"
72-
>
73-
<a
74-
v-if="itemsSelected.length !== 0 && dataType !== 'collections'"
75-
data-testid="add-to-collection-button"
76-
class="dropdown-item"
77-
@click="handleAddToCollection"
78-
>
79-
Add to collection
80-
</a>
81-
<a
82-
v-if="itemsSelected.length !== 0"
83-
data-testid="delete-selected-button"
84-
class="dropdown-item"
85-
@click="confirmDeletion"
86-
>
87-
Delete selected
88-
</a>
89-
</div>
144+
<ul class="dropdown-menu">
145+
<li>
146+
<a
147+
v-if="itemsSelected.length !== 0 && dataType !== 'collections'"
148+
data-testid="add-to-collection-button"
149+
class="dropdown-item"
150+
@click="handleAddToCollection"
151+
>
152+
Add to collection
153+
</a>
154+
</li>
155+
<li>
156+
<a
157+
v-if="itemsSelected.length !== 0"
158+
data-testid="delete-selected-button"
159+
class="dropdown-item"
160+
@click="confirmDeletion"
161+
>
162+
Delete selected
163+
</a>
164+
</li>
165+
</ul>
90166
</div>
91167

92168
<IconField>
@@ -96,8 +172,9 @@
96172
<InputText
97173
v-model="localFilters.global.value"
98174
data-testid="search-input"
99-
class="search-input"
175+
class="search-input w-100"
100176
placeholder="Search"
177+
style="max-width: 150px"
101178
/>
102179
</IconField>
103180
</div>

‎webapp/src/components/FileList.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
<div class="container">
33
<label class="form-label me-2">Files</label>
44
<div class="card">
5-
<div id="filearea" class="card-body overflow-auto">
5+
<div
6+
v-show="Object.keys(stored_files).length > 0"
7+
id="filearea"
8+
class="card-body overflow-auto pb-0"
9+
>
610
<div v-for="(file, file_id) in stored_files" :key="file_id" class="file-group">
711
<a @click="deleteFile($event, file_id)">
812
<font-awesome-icon icon="times" fixed-width class="delete-file-button" />
@@ -51,7 +55,7 @@
5155
</span>
5256
</div>
5357
</div>
54-
<div class="d-flex align-items-center mb-3 ms-3 gap-2">
58+
<div class="d-flex align-items-center mt-3 mb-3 ms-3 gap-2">
5559
<button id="uppy-trigger" class="btn btn-default btn-sm" type="button">
5660
Upload files...</button
5761
><!-- Surrounding divs so that buttons don't become full-width in the card -->

‎webapp/src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
// import BootstrapVue from 'bootstrap-vue';
22

33
import "bootstrap/dist/css/bootstrap.css";
4+
import "bootstrap/dist/js/bootstrap.bundle.min.js";
5+
46
// import 'bootstrap-vue/dist/bootstrap-vue.css'
57

68
import { API_URL } from "@/resources.js";

‎webapp/src/views/CollectionPage.vue‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,43 @@
11
<template>
22
<div id="topScrollPoint"></div>
33
<nav
4-
class="navbar navbar-expand sticky-top navbar-dark py-0 px-3 editor-navbar"
4+
class="d-flex navbar navbar-expand-md navbar-dark py-lg-0 px-3 editor-navbar"
55
:style="{ backgroundColor: navbarColor }"
66
>
7-
<span class="navbar-brand" @click="scrollToID($event, 'topScrollPoint')">
8-
{{ itemTypeEntry?.navbarName || "loading..." }}&nbsp;&nbsp;|&nbsp;&nbsp;
9-
<FormattedItemName :item_id="collection_id" item-type="collections" />
10-
</span>
11-
<div class="navbar-nav">
12-
<a class="nav-item nav-link" href="/">Home</a>
13-
<a class="nav-item nav-link" :href="collectionApiUrl" target="_blank">
14-
<font-awesome-icon icon="code" fixed-width /> View JSON
15-
</a>
7+
<div class="d-flex align-items-center">
8+
<button
9+
class="navbar-toggler me-4"
10+
type="button"
11+
data-bs-toggle="collapse"
12+
data-bs-target="#navbarContent"
13+
aria-controls="navbarContent"
14+
aria-expanded="false"
15+
aria-label="Toggle navigation"
16+
>
17+
<span class="navbar-toggler-icon"></span>
18+
Menu
19+
</button>
20+
21+
<div id="navbarContent" class="collapse navbar-collapse">
22+
<div class="navbar-nav me-auto">
23+
<span class="navbar-brand" @click="scrollToID($event, 'topScrollPoint')">
24+
{{ itemTypeEntry?.navbarName || "loading..." }}&nbsp;&nbsp;|&nbsp;&nbsp;
25+
<FormattedItemName :item_id="collection_id" item-type="collections" />
26+
</span>
27+
<router-link class="nav-item nav-link" to="/">Home</router-link>
28+
29+
<a class="nav-item nav-link" :href="collectionApiUrl" target="_blank">
30+
<font-awesome-icon icon="code" fixed-width /> View JSON
31+
</a>
32+
</div>
33+
</div>
1634
</div>
17-
<div class="navbar-nav ms-auto">
18-
<span v-if="data_loaded && !savedStatus" class="navbar-text unsaved-warning">
35+
<div class="navbar-nav d-flex flex-row ms-auto">
36+
<span v-if="data_loaded && !savedStatus" class="navbar-text unsaved-warning me-2">
1937
Unsaved changes
2038
</span>
21-
<span
22-
v-if="data_loaded && lastModified"
23-
class="navbar-text small mx-2 d-flex align-items-center"
24-
><i>Last saved: {{ lastModified }}</i>
39+
<span v-if="data_loaded && lastModified" class="navbar-text small me-2">
40+
<i>Last saved: {{ lastModified }}</i>
2541
</span>
2642
<font-awesome-icon
2743
icon="save"

0 commit comments

Comments
 (0)