Skip to content

Improve mobile responsiveness #301

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

Open
apodacaduron wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Improve mobile responsiveness #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
b214d31
reduce logo padding and hide ocr badge on mobile
apodacaduron Mar 24, 2026
492a26e
change drawer props from actor drawer to prevent screen overflow
apodacaduron Mar 24, 2026
b55b2a4
standarize container height and make sure to grow to 100%, hide some …
apodacaduron Mar 24, 2026
8f1b727
reduce padding of dialogs on mobile
apodacaduron Mar 24, 2026
0c9cc18
add support for mobile on bulletin dialog
apodacaduron Mar 24, 2026
a883e92
hide file metadata on mobile
apodacaduron Mar 24, 2026
60d65ca
hide ocr button from media card on mobile
apodacaduron Mar 24, 2026
f85b9e7
disable ocr interactions on mobile
apodacaduron Mar 24, 2026
32b220c
standarize component heights on other pages, hide import csv buttons …
apodacaduron Mar 24, 2026
00f5dc1
transform left menu to horizontal menu on mobile
apodacaduron Mar 24, 2026
4e4d438
make sure content fits nicely without forcing heights
apodacaduron Mar 24, 2026
e97750f
fix tabs state from url and disable shrink in tabs components
apodacaduron Mar 24, 2026
df37108
hide some more actions for mobile on other pages
apodacaduron Mar 24, 2026
64c7ee9
improve actor dialog form compatibility with mobile
apodacaduron Mar 24, 2026
bbc3d30
tweak menu on account security page
apodacaduron Mar 25, 2026
4133dc2
Merge branch 'main' into improve-mobile-responsive
level09 Mar 31, 2026
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
4 changes: 2 additions & 2 deletions enferno/admin/templates/admin/actor-fields.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,14 @@
<v-main>
<div class="pa-4">
<v-card>
<v-card-text class="d-flex justify-space-between ga-12 pt-6">
<v-card-text class="d-flex justify-space-between pt-6" :class="{ 'flex-column ga-4': $vuetify.display.smAndDown, 'ga-12': $vuetify.display.smAndUp }">
<div class="text-h6 text-no-wrap">{{ _('Actor Dynamic From Builder') }}
</div>

<v-text-field density="compact" class="flex-grow-1" placeholder="{{ _('Search') }}" prepend-inner-icon="mdi-magnify"
hide-details v-model="ui.search" clearable></v-text-field>

<div class="d-flex ga-4 align-center">
<div v-if="$vuetify.display.smAndUp" class="d-flex ga-4 align-center">
<v-btn
class="outlined-btn"
prepend-icon="mdi-history"
Expand Down
32 changes: 15 additions & 17 deletions enferno/admin/templates/admin/actors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
@close-entity-details="closeActorDrawer()"
></map-visualization>

<v-container fluid>
<v-container fluid style="height: calc(100vh - 64px);">
<v-tooltip text="{{ _('Map visualization') }}">
<template #activator="{props}">
<v-btn
Expand Down Expand Up @@ -63,14 +63,13 @@
</template>
</v-tooltip>

<v-card>
<v-card class="h-100">
<v-card-title>
<div class="flex-grow-1"></div>
</v-card-title>
<v-card-text>
<v-card-text class="h-100">
<v-data-table-server
fixed-header
height="calc(100vh - 331px)"
id="actors-dt"
v-model="selected"
hover
Expand All @@ -84,20 +83,19 @@
item-value="id"
select-strategy="page"
item-selectable="selectable"
class="elevation-1"
class="elevation-1 h-100"
hide-default-footer
>

<template v-slot:top>
<v-sheet class="ma-3 d-flex align-center">
<v-btn variant="text" class="hidden-sm-and-down" @click="allActors"
text>{{ _('All Actors') }}</v-btn>
<v-divider class="mx-2 hidden-sm-and-down" inset vertical></v-divider>
<v-btn variant="text" class="hidden-sm-and-down" @click="myAssigned"
text>{{ _('Assigned to me') }}</v-btn>
<v-divider class="mx-2 hidden-sm-and-down" inset vertical></v-divider>
<v-btn variant="text" @click="myReview" class="mr-2 hidden-sm-and-down"
text>{{ _('My Review List') }}</v-btn>
<template v-if="this.$vuetify.display.smAndUp">
<v-btn variant="text" @click="allActors" text>{{ _('All Actors') }}</v-btn>
<v-divider class="mx-2" inset vertical></v-divider>
<v-btn variant="text" @click="myAssigned" text>{{ _('Assigned to me') }}</v-btn>
<v-divider class="mx-2" inset vertical></v-divider>
<v-btn variant="text" @click="myReview" class="mr-2" text>{{ _('My Review List') }}</v-btn>
</template>

<v-text-field
variant="outlined"
Expand All @@ -115,7 +113,7 @@
></v-text-field>


<v-spacer></v-spacer>
<v-spacer v-if="this.$vuetify.display.smAndUp"></v-spacer>
{% if current_user.roles_in(['Admin','DA']) %}
<v-btn @click="editItem" color="primary" variant="elevated"
class="ma-2">{{ _('New Actor') }}</v-btn>
Expand All @@ -124,7 +122,7 @@
{% include 'admin/partials/review_dialog.html' %}
</v-sheet>

<v-toolbar class="px-3" v-if="bulkAllowed() || exportAllowed()">
<v-toolbar class="px-3" v-if="selected.length && (bulkAllowed() || exportAllowed())">

<template v-if="bulkIcons">

Expand Down Expand Up @@ -187,12 +185,12 @@

<template #bottom>
<div class="d-flex align-center justify-space-between w-100 border-t px-3" style="height: 61px">
<div>{{ _('Search time: ') }}
<div v-if="this.$vuetify.display.smAndUp">{{ _('Search time: ') }}
${searchTime} {{ _('seconds') }}</div>
<div>

<div class="d-flex flex-row align-center ga-2">
<div class="d-flex flex-row align-center ga-2">
<div v-if="this.$vuetify.display.smAndUp" class="d-flex flex-row align-center ga-2">
{{ _('Items per page:') }}
<v-select :model-value="perPage" @update:model-value="setNextPerPageValue" hide-details
density="compact" :items="itemsPerPageOptions" variant="outlined"></v-select>
Expand Down
11 changes: 5 additions & 6 deletions enferno/admin/templates/admin/bulletin-fields.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,13 @@
<v-main>
<div class="pa-4">
<v-card>
<v-card-text class="d-flex justify-space-between ga-12 pt-6">
<div class="text-h6 text-no-wrap">{{ _('Bulletin Dynamic From Builder') }}
</div>
<v-card-text class="d-flex justify-space-between pt-6" :class="{ 'flex-column ga-4': $vuetify.display.smAndDown, 'ga-12': $vuetify.display.smAndUp }">
<div class="text-h6 text-no-wrap">{{ _('Bulletin Dynamic From Builder') }}</div>

<v-text-field density="compact" class="flex-grow-1" placeholder="{{ _('Search') }}" prepend-inner-icon="mdi-magnify"
hide-details v-model="ui.search" clearable></v-text-field>

<div class="d-flex ga-4 align-center">
<div v-if="$vuetify.display.smAndUp" class="d-flex ga-4 align-center">
<v-btn
class="outlined-btn"
prepend-icon="mdi-history"
Expand All @@ -90,12 +89,12 @@
</v-card-text>

<div class="d-flex">
<div class="ml-1">
<div v-if="$vuetify.display.smAndUp" class="ml-1">
<v-card class="h-fit ma-3 flex-shrink-0 rounded-10 border border-opacity-25">
<v-card-text class="text-no-wrap font-weight-medium text-h6 text-medium-emphasis py-6 px-5">{{ _('Media') }}</v-card-text>
</v-card>
</div>
<v-divider vertical></v-divider>
<v-divider v-if="$vuetify.display.smAndUp" vertical></v-divider>
<v-card variant="flat" class="ml-3 w-100">
<v-card-text class="d-flex flex-column ga-4 overflow-y-scroll pt-0 px-0" style="height: calc(100vh - 176px);">
<v-container v-if="formBuilder.loading && !formBuilder.dynamicFields.bulletin.length" height="130px" class="d-flex justify-center align-center">
Expand Down
106 changes: 82 additions & 24 deletions enferno/admin/templates/admin/bulletins.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@


{% include'admin/partials/export_drawer.html' %}
<v-container fluid>
<v-container fluid style="height: calc(100vh - 64px);">
<v-tooltip text="{{ _('Visualize Results') }}">
<template #activator="{props}">
<v-btn
Expand All @@ -37,12 +37,10 @@
</template>
</v-tooltip>

<v-card>

<v-card-text>
<v-card class="h-100">
<v-card-text class="h-100">
<v-data-table-server
fixed-header
height="calc(100vh - 331px)"
id="bulletins-dt"
v-model="selected"
hover
Expand All @@ -56,22 +54,18 @@
item-value="id"
select-strategy="page"
item-selectable="selectable"
class="elevation-1"
class="elevation-1 h-100"
hide-default-footer
>
<template #top>
<v-sheet class="ma-3 d-flex align-center">
<v-btn variant="text" class="hidden-sm-and-down" @click="allBulletins"
>{{ _('All Bulletins') }}</v-btn
>
<v-divider class="mx-1 hidden-sm-and-down" inset vertical></v-divider>
<v-btn variant="text" class="hidden-sm-and-down" @click="myAssigned"
>{{ _('Assigned to me') }}</v-btn
>
<v-divider class="mx-1 hidden-sm-and-down" inset vertical></v-divider>
<v-btn variant="text" @click="myReview" class="mr-2 hidden-sm-and-down"
>{{ _('My Review List') }}</v-btn
>
<template v-if="this.$vuetify.display.smAndUp">
<v-btn variant="text" @click="allBulletins">{{ _('All Bulletins') }}</v-btn>
<v-divider class="mx-1" inset vertical></v-divider>
<v-btn variant="text" @click="myAssigned">{{ _('Assigned to me') }}</v-btn>
<v-divider class="mx-1" inset vertical></v-divider>
<v-btn variant="text" @click="myReview" class="mr-2">{{ _('My Review List') }}</v-btn>
</template>

<v-text-field
class="mx-1"
Expand All @@ -88,12 +82,9 @@
prepend-inner-icon="mdi-magnify"
label="{{ _('Search') }}"
:bg-color="searchBg"



></v-text-field>

<v-spacer></v-spacer>
<v-spacer v-if="this.$vuetify.display.smAndUp"></v-spacer>
{% if current_user.roles_in(['Admin','DA']) %}
<v-btn
@click="editItem"
Expand All @@ -104,6 +95,7 @@
>
{% if config.WEB_IMPORT and (current_user.can_import_web or current_user.has_role("Admin")) %}
<v-btn
v-if="this.$vuetify.display.smAndUp"
@click="webImportDlg = true"
color="primary"
variant="elevated"
Expand All @@ -118,7 +110,7 @@
{% include'admin/partials/review_dialog.html' %}
</v-sheet>

<v-toolbar class="px-3" v-if="bulkAllowed() || exportAllowed()">
<v-toolbar class="px-3" v-if="selected.length && (bulkAllowed() || exportAllowed())">
<template v-if="bulkIcons">
<v-tooltip location="top" text="{{ _('Unselect all') }}">
<template #activator="{props}">
Expand Down Expand Up @@ -180,12 +172,12 @@

<template #bottom>
<div class="d-flex align-center justify-space-between w-100 border-t px-3" style="height: 61px">
<div>{{ _('Search time: ') }}
<div v-if="this.$vuetify.display.smAndUp">{{ _('Search time: ') }}
${searchTime} {{ _('seconds') }}</div>
<div>

<div class="d-flex flex-row align-center ga-2">
<div class="d-flex flex-row align-center ga-2">
<div v-if="this.$vuetify.display.smAndUp" class="d-flex flex-row align-center ga-2">
{{ _('Items per page:') }}
<v-select :model-value="perPage" @update:model-value="setNextPerPageValue" hide-details density="compact" :items="itemsPerPageOptions"
variant="outlined"></v-select>
Expand Down Expand Up @@ -570,6 +562,7 @@


actorDialog: false,
bulletinMobilePane: 'form',
dialog: dialog,
saving: false,
eventDialog: false,
Expand Down Expand Up @@ -817,6 +810,17 @@


watch: {
'$vuetify.display.smAndDown': {
immediate: true,
handler() {
this.syncBulletinDialogViewportProps();
},
},
dialog(val) {
if (!val) return;
this.bulletinMobilePane = 'form';
this.syncBulletinDialogViewportProps();
},

bulletinDrawer: function (val) {
if (val === false) {
Expand Down Expand Up @@ -866,6 +870,8 @@

},
mounted: function () {
this.syncBulletinDialogViewportProps();

// populate roles for advanced search for admins
{% if current_user.has_role('Admin') %}
api.get('/admin/api/roles/').then(res => {
Expand Down Expand Up @@ -894,6 +900,57 @@
},

methods: {
buildLeftDialogProps(isMobile) {
return {
'retain-focus': false,
'content-props': {
style: { width: isMobile ? '100%' : '60%' },
},
...(isMobile ? {} : { 'content-class': 'absolute left-0' }),
fullscreen: true,
persistent: true,
'no-click-animation': true,
scrim: isMobile,
};
},
buildRightDialogProps(isMobile) {
return {
'retain-focus': false,
'content-props': {
style: { width: isMobile ? '100%' : '60%', contain: 'none' },
},
...(isMobile ? {} : { 'content-class': 'absolute right-0 left-auto' }),
fullscreen: true,
persistent: true,
'no-click-animation': true,
scrim: isMobile,
};
},
buildRightContainedDialogProps(isMobile) {
if (isMobile) {
return {
'retain-focus': false,
fullscreen: true,
persistent: true,
'no-click-animation': true,
scrim: true,
};
}

return {
'retain-focus': false,
contained: true,
persistent: true,
'no-click-animation': true,
scrim: false,
};
},
syncBulletinDialogViewportProps() {
const isMobile = this.$vuetify.display.smAndDown;
this.leftDialogProps = this.buildLeftDialogProps(isMobile);
this.rightDialogProps = this.buildRightDialogProps(isMobile);
this.rightContainedDialogProps = this.buildRightContainedDialogProps(isMobile);
},
refreshEditedMedia(mediaId) {
if (!this.editedItem?.medias) return;
api.get(`/admin/api/media/${mediaId}`).then(response => {
Expand Down Expand Up @@ -1601,6 +1658,7 @@
close() {
this.dialog = false;
this.actorDialog = false;
this.bulletinMobilePane = 'form';
this.closeExpandedMedia();
this.closeMediaDialog();
this.closeSnapshotDialog();
Expand Down
Loading
Loading