Skip to content

Commit

Permalink
fix: use v-card-actions in v-dialogs to allow scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@raphodn
raphodn committed Feb 28, 2024
1 parent e83a9cd commit 86942a5
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 76 deletions.
12 changes: 4 additions & 8 deletions src/components/BarcodeManualInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@

<v-divider></v-divider>

<v-form @submit.prevent="onSubmit">
<v-card-text>
<v-card-text>
<v-form @submit.prevent="onSubmit">
<v-text-field
ref="barcodeInput"
v-model="barcodeForm.barcode"
Expand All @@ -19,18 +19,14 @@
:hint="barcodeForm.barcode.length.toString()"
persistent-hint
></v-text-field>
</v-card-text>

<v-divider></v-divider>

<v-card-text>
<v-btn
type="submit"
class="mt-2"
:disabled="!formFilled"
>{{ $t('BarcodeManualInput.Submit') }}</v-btn>
</v-card-text>
</v-form>
</v-form>
</v-card-text>
</v-card>
</v-dialog>
</template>
Expand Down
6 changes: 3 additions & 3 deletions src/components/BarcodeScanner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@

<v-divider></v-divider>

<v-card-text>
<div class="float-right">
<v-card-actions class="justify-end">
<div>
<i18n-t keypath="BarcodeScanner.Htlm5-qrcode.Text" tag="span">
<template #url>
<a href="https://github.com/mebjas/html5-qrcode" target="_blank">html5-qrcode</a>
</template>
</i18n-t>
</div>
</v-card-text>
</v-card-actions>
</v-card>
</v-dialog>
</template>
Expand Down
131 changes: 66 additions & 65 deletions src/components/LocationSelector.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-dialog persistent>
<v-dialog scrollable persistent>
<v-card>
<v-card-title>
{{ $t('LocationSelector.Title') }} <v-btn style="float:right;" variant="text" density="compact" icon="mdi-close" @click="close"></v-btn>
Expand Down Expand Up @@ -27,86 +27,87 @@
<template #newline><br /></template>
</i18n-t>
</p>
</v-card-text>

<v-divider></v-divider>
<v-sheet v-if="results && Array.isArray(results)">
<v-divider></v-divider>

<v-card-text v-if="results && Array.isArray(results)">
<h3>
<i18n-t keypath="LocationSelector.Result" tag="span">
<template v-slot:resultNumber>
<small>{{ results.length }}</small>
</template>
</i18n-t>
</h3>
<v-row>
<v-col cols="12" sm="6">
<v-card
class="mb-2"
width="100%"
v-for="location in results"
elevation="1"
@click="selectLocation(location)">
<v-card-text>
<h4>{{ getNominatimLocationTitle(location, true, false, false) }}</h4>
{{ getNominatimLocationTitle(location, false, true, true) }}<br />
<v-chip label size="small" density="comfortable">{{ location.type }}</v-chip>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" style="min-height:200px">
<l-map ref="map" v-model:zoom="mapZoom" :center="mapCenter" :use-global-leaflet="false" @ready="initMap">
<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap"></l-tile-layer>
<l-marker v-for="location in results" :lat-lng="[location.lat, location.lon]">
<l-popup>
<h3>
<i18n-t keypath="LocationSelector.Result" tag="span">
<template v-slot:resultNumber>
<small>{{ results.length }}</small>
</template>
</i18n-t>
</h3>
<v-row>
<v-col cols="12" sm="6">
<v-card
class="mb-2"
width="100%"
v-for="location in results"
elevation="1"
@click="selectLocation(location)">
<v-card-text>
<h4>{{ getNominatimLocationTitle(location, true, false, false) }}</h4>
{{ getNominatimLocationTitle(location, false, true, true) }}<br />
<v-chip label size="small" density="comfortable">{{ location.type }}</v-chip>
</l-popup>
</l-marker>
</l-map>
</v-col>
</v-row>
</v-card-text>
<v-card-text v-if="results && (typeof results === 'string')">{{ results }}</v-card-text>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="6" style="min-height:200px">
<l-map ref="map" v-model:zoom="mapZoom" :center="mapCenter" :use-global-leaflet="false" @ready="initMap">
<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap"></l-tile-layer>
<l-marker v-for="location in results" :lat-lng="[location.lat, location.lon]">
<l-popup>
<h4>{{ getNominatimLocationTitle(location, true, false, false) }}</h4>
{{ getNominatimLocationTitle(location, false, true, true) }}<br />
<v-chip label size="small" density="comfortable">{{ location.type }}</v-chip>
</l-popup>
</l-marker>
</l-map>
</v-col>
</v-row>
</v-sheet>

<v-divider v-if="results"></v-divider>
<v-sheet v-if="results && (typeof results === 'string')">{{ results }}</v-sheet>

<v-card-text v-if="recentLocations.length">
<h3 class="mb-1">
<i18n-t keypath="LocationSelector.RecentLocations" tag="span">
<template v-slot:recentLocationNumber>
<small>{{ recentLocations.length }}</small>
</template>
</i18n-t>
</h3>
<v-chip
class="mb-2"
closable
v-for="location in recentLocations"
:key="location.display_name"
prepend-icon="mdi-history"
close-icon="mdi-delete"
@click="selectLocation(location)"
@click:close="removeRecentLocation(location)">
{{ getNominatimLocationTitle(location, true, true, true) }}
</v-chip>
<br />
<v-btn size="small" @click="clearRecentLocations">
{{ $t('LocationSelector.Clear') }} </v-btn>
<v-sheet v-if="recentLocations.length">
<v-divider class="mt-2 mb-2"></v-divider>

<h3 class="mb-1">
<i18n-t keypath="LocationSelector.RecentLocations" tag="span">
<template v-slot:recentLocationNumber>
<small>{{ recentLocations.length }}</small>
</template>
</i18n-t>
</h3>
<v-chip
class="mb-2"
closable
v-for="location in recentLocations"
:key="location.display_name"
prepend-icon="mdi-history"
close-icon="mdi-delete"
@click="selectLocation(location)"
@click:close="removeRecentLocation(location)">
{{ getNominatimLocationTitle(location, true, true, true) }}
</v-chip>
<br />
<v-btn size="small" @click="clearRecentLocations">
{{ $t('LocationSelector.Clear') }} </v-btn>
</v-sheet>
</v-card-text>

<v-divider v-if="recentLocations.length"></v-divider>
<v-divider></v-divider>

<v-card-text>
<div class="float-right">
<v-card-actions class="justify-end">
<div>
<i18n-t keypath="LocationSelector.OSM.text" tag="span">
<template #url>
<a href="https://nominatim.openstreetmap.org" target="_blank">OpenStreetMap Nominatim</a>
</template>
</i18n-t>
</div>
</v-card-text>
</v-card-actions>
</v-card>
</v-dialog>
</template>
Expand Down

0 comments on commit 86942a5

Please sign in to comment.