Skip to content

Make identifiers input mobile friendly #11244

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

Merged
merged 5 commits into from
Sep 26, 2025
+130 −81
Merged

Make identifiers input mobile friendly #11244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3fbb7e7
updating identifiersinput.vue
Lasseignejk Aug 25, 2025
25a8963
Added a few comments, removed testing border
Lasseignejk Aug 25, 2025
f15104e
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Sep 8, 2025
43056bd
Fix popular ids appearing twice
cdrini Sep 26, 2025
52ee383
DRY up some code in IdentifiersInput.vue
cdrini Sep 26, 2025
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
209 changes: 129 additions & 80 deletions openlibrary/components/IdentifiersInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,53 @@
<template>
<table class="identifiers">
<tr id="identifiers-form">
<th>
<select
v-model="selectedIdentifier"
class="form-control"
name="name"
<div
class="identifiers wrapper"
role="table"
>
<div
id="identifiers-form"
class="identifiers-table"
role="row"
>
<select
v-model="selectedIdentifier"
class="form-control cell1"
name="name"
>
<option
disabled
value=""
>
Select one
</option>
<template v-if="hasPopularIds">
<option
disabled
value=""
v-for="entry in popularIds.filter(e => isAdmin || e.name !== 'ocaid')"
:key="entry.name"
:value="entry.name"
>
Select one
{{ entry.label }}
</option>
<template v-if="hasPopularIds">
<option
v-for="entry in popularIds.filter(e => isAdmin || e.name !== 'ocaid')"
:key="entry.name"
:value="entry.name"
>
{{ entry.label }}
</option>
<option
disabled
value=""
>
---
</option>
</template>
<option
v-for="idConfig in identifierConfigsByKey"
:key="idConfig.name"
:value="idConfig.name"
:disabled="!isAdmin && idConfig.name === 'ocaid'"
:title="!isAdmin && idConfig.name === 'ocaid' ? 'Only librarians can edit this identifier' : ''"
disabled
value=""
>
{{ idConfig.label }}
---
</option>
</select>
</th>
<th>
</template>
<option
v-for="idConfig in identifierConfigsByKey"
:key="idConfig.name"
:value="idConfig.name"
:disabled="!isAdmin && idConfig.name === 'ocaid'"
:title="!isAdmin && idConfig.name === 'ocaid' ? 'Only librarians can edit this identifier' : ''"
>
{{ idConfig.label }}
</option>
</select>
<div
class="cell2"
role="cell"
>
<input
id="id-value"
v-model.trim="inputValue"
Expand All @@ -48,8 +56,11 @@
name="value"
@keyup.enter="setIdentifier"
>
</th>
<th>
</div>
<div
class="cell3"
role="cell"
>
<button
class="form-control"
name="set"
Expand All @@ -58,45 +69,44 @@
>
Set
</button>
</th>
</tr>
</div>
</div>

<template v-for="(value, name) in assignedIdentifiers">
<tr
v-if="value && !saveIdentifiersAsList"
:key="name"
<div
v-for="(item, idx) in (saveIdentifiersAsList ? value : [value])"
:key="name + idx"
class="assigned-identifiers-table"
role="row"
>
<td>{{ identifierConfigsByKey[name]?.label ?? name }}</td>
<td>{{ value }}</td>
<td>
<div
class="identifier-name"
role="rowheader"
>
{{ identifierConfigsByKey[name]?.label ?? name }}
</div>
<div
class="identifier-value"
role="cell"
>
{{ item }}
</div>
<div
class="remove-button"
role="cell"
>
<button
class="form-control"
@click="removeIdentifier(name)"
:disabled="!isAdmin && name === 'ocaid'"
:title="!isAdmin && name === 'ocaid' ? 'Only librarians can edit this identifier' : ''"
@click="removeIdentifier(name, idx)"
>
Remove
</button>
</td>
</tr>
<template v-else-if="value && saveIdentifiersAsList">
<tr
v-for="(item, idx) in value"
:key="name + idx"
>
<td>{{ identifierConfigsByKey[name]?.label ?? name }}</td>
<td>{{ item }}</td>
<td>
<button
class="form-control"
:disabled="!isAdmin && name === 'ocaid'"
:title="!isAdmin && name === 'ocaid' ? 'Only librarians can edit this identifier' : ''"
@click="removeIdentifier(name, idx)"
>
Remove
</button>
</td>
</tr>
</template>
</div>
</div>
</template>
</table>
</div>
</template>

<script>
Expand Down Expand Up @@ -315,23 +325,62 @@ export default {
select.form-control {
height: calc(2.25rem + 2px);
}
.form-control {
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid #ced4da;
}
table {
.wrapper {
display: inline-block;
background-color: #f6f5ee;
border-collapse: collapse;
padding: .25rem;
}
.identifiers-table {
display: grid;
grid-template-columns: auto auto auto;
gap: 4px;
}
th {
text-align: left;
.cell3 {
justify-self: end;
}
td {
.assigned-identifiers-table {
display: grid;
grid-template-columns: 60% auto auto;
gap: 4px;
align-items: center;
margin-top: 4px;
border-top: 1px solid #ddd;
padding: .25rem 0;
}
th, td {
padding: .25rem;
.identifier-value, .identifier-name {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}
.remove-button {
justify-self: end;
}
// The <select> element will cause the IdentifiersInput area to expand past its boundaries at around 850px which is why the media query targets 855px and not the standard tablet breakpoint of 768.
@media (max-width: 855px) {
.identifiers-table {
grid-template-columns: 1fr auto;
grid-template-areas:
"cell1 cell1"
"cell2 cell3";
}
.cell1 { grid-area: cell1; }
.cell2 { grid-area: cell2; }
.cell3 { grid-area: cell3; }
.assigned-identifiers-table {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"identifier-name remove-button"
"identifier-value remove-button";
}
.identifier-name { grid-area: identifier-name; font-weight: bold; }
.identifier-value { grid-area: identifier-value; }
.remove-button { grid-area: remove-button; }
}
.form-control {
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid #ced4da;
}
</style>
2 changes: 1 addition & 1 deletion openlibrary/templates/books/edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ <h3 class="editFormBookAuthors">
</div>
<div id="hiddenWorkIdentifiers"></div>
<div id="identifiers-display-works">
$ admin = str(ctx.user.is_admin() or ctx.user.is_super_librarian())
$ admin = str(bool(ctx.user) and (ctx.user.is_admin() or ctx.user.is_super_librarian()))
$:render_component('IdentifiersInput', attrs=dict(assigned_ids_string=work.get_identifiers().values(), output_selector='#hiddenWorkIdentifiers', id_config_string=work_config.identifiers, input_prefix='work--identifiers', multiple='true', admin=admin))
</div>
</fieldset>
Expand Down
Loading