Skip to content
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

Jump to bottom

RES-1933 mobile layout when viewing data #681

Merged
merged 3 commits into from
Sep 4, 2023
Merged

RES-1933 mobile layout when viewing data #681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7f9e95
Layout improvements for mobile.
edwh Aug 28, 2023
6c9e7a9
More layout improvements for mobile.
edwh Aug 28, 2023
fb77b85
Scroll to add device form after clicking button.
edwh Aug 28, 2023
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
5 changes: 1 addition & 4 deletions resources/js/components/CollapsibleSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
<slot name="title" />
</div>
<div v-if="count" :class="{
'd-inline' : true,
'd-md-none' : !alwaysShowCount,
'text-muted' : true,
'd-flex' : true,
Expand All @@ -24,9 +23,7 @@
<span v-if="countBadge">
&nbsp;<b-badge variant="primary" pill>{{ count }}</b-badge>
</span>
<span v-else>
&nbsp;<span :class="countClass">({{ count }})</span>
</span>
<span v-else :class="countClass + ' ml-1'">({{ count }})</span>
</div>
<slot name="title-icon" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/EventDeviceList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<b-th class="d-none d-md-table-cell">
{{ __('devices.spare_parts') }}
</b-th>
<b-th v-if="canedit" class="d-none d-md-table-cell">
<b-th v-if="canedit">
</b-th>
</b-tr>
</b-thead>
Expand Down
14 changes: 7 additions & 7 deletions resources/js/components/EventDeviceSummary.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<h3 class="noheader">
{{ translatedCategoryName }}
</h3>
<div class="d-block d-md-none">
<div class="d-td-cell d-md-none">
<div :class="badgeClass + ' d-block d-md-none'">
{{ status }}
</div>
Expand All @@ -23,17 +23,17 @@
<b-td class="d-none d-md-table-cell" v-if="powered">
{{ device.brand }}
</b-td>
<b-td v-if="powered" class="d-block d-md-none">
<b-td v-if="powered" class="d-td-cell d-md-none">
<div>
<span class="pl-0 pl-md-2 pr-2 clickme edit" @click="editDevice">
<span class="pl-0 pl-md-2 pr-4 clickme edit" @click="editDevice">
<b-img class="icon edit" src="/icons/edit_ico_green.svg" />
</span>
<span class="pl-2 pr-2 clickme" @click="deleteConfirm">
<span class="pr-2 clickme" @click="deleteConfirm">
<b-img class="icon" src="/icons/delete_ico_red.svg" />
</span>
</div>
</b-td>
<b-td v-if="!powered" class="d-block d-md-none">
<b-td v-if="!powered" class="d-td-cell d-md-none">
<div>
<span class="pl-0 pl-md-2 pr-2 clickme edit" @click="editDevice">
<b-img class="icon" src="/icons/edit_ico_green.svg" />
Expand All @@ -59,10 +59,10 @@
</b-td>
<b-td v-if="canedit" class="text-right d-none d-md-table-cell">
<div class="d-flex">
<span class="pl-0 pl-md-2 pr-2 clickme edit" @click="editDevice">
<span class="pl-0 pl-md-2 pr-4 clickme edit" @click="editDevice">
<b-img class="icon" src="/icons/edit_ico_green.svg" />
</span>
<span class="pl-2 pr-2 clickme" @click="deleteConfirm">
<span class="pr-2 clickme" @click="deleteConfirm">
<b-img class="icon" src="/icons/delete_ico_red.svg" />
</span>
</div>
Expand Down
40 changes: 29 additions & 11 deletions resources/js/components/EventDevices.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</template>
<p v-html="__('devices.description_powered')" />
<EventDeviceList :devices="powered" :powered="true" :canedit="canedit" :idevents="idevents" :brands="brands" :barrier-list="barrierList" :itemTypes="itemTypes" :clusters="clusters" />
<b-btn variant="primary" v-if="canedit" class="mb-4 ml-4 add-powered-device-desktop" @click="addingPowered = true">
<b-btn variant="primary" v-if="canedit" class="mb-4 ml-4 add-powered-device-desktop" @click="addPowered($event)">
<b-img class="icon mb-1" src="/images/add-icon.svg" /> {{ __('partials.add_device_powered') }}
</b-btn>
<EventDevice v-if="addingPowered" :powered="true" :add="true" :edit="false" :clusters="clusters" :idevents="idevents" :brands="brands" :barrier-list="barrierList" :itemTypes="itemTypes" @close="addingPowered = false" />
Expand All @@ -54,7 +54,7 @@
</template>
<p v-html="__('devices.description_unpowered')" />
<EventDeviceList :devices="unpowered" :powered="false" :canedit="canedit" :idevents="idevents" :brands="brands" :barrier-list="barrierList" :itemTypes="itemTypes" :clusters="clusters" />
<b-btn variant="primary" v-if="canedit" class="mb-4 ml-4 add-unpowered-device-desktop" @click="addingUnpowered = true">
<b-btn variant="primary" v-if="canedit" class="mb-4 ml-4 add-unpowered-device-desktop" @click="addUnpowered($event)">
<b-img class="icon mb-1" src="/images/add-icon.svg" /> {{ __('partials.add_device_unpowered') }}
</b-btn>
<EventDevice v-if="addingUnpowered" :powered="false" :add="true" :edit="false" :clusters="clusters" :idevents="idevents" :event="event" :brands="brands" :barrier-list="barrierList" :itemTypes="itemTypes" @close="addingUnpowered = false"/>
Expand All @@ -71,12 +71,12 @@
</div>
</template>
<template slot="title-right">
<div class="d-flex text-brand small">
<div class="ml-2 mr-1 pt-1 lower align-self-center">
<div class="d-flex text-brand small text-center">
<div class="ml-2 mr-1 pt-1 lower small">
<b-img src="/images/trash_brand.svg" class="icon" />
{{ Math.round(stats.waste_powered) }}
</div>
<div class="ml-1 mr-1 lower pt-1 small align-self-center">
<div class="ml-1 mr-1 lower pt-1 small">
<b-img src="/images/co2_brand.svg" class="icon" />
{{ Math.round(stats.co2_powered) }}
</div>
Expand All @@ -85,7 +85,7 @@
<template slot="content">
<p v-html="__('devices.description_powered')" />
<EventDeviceList :devices="powered" :powered="true" :canedit="canedit" :idevents="idevents" :brands="brands" :barrier-list="barrierList" :itemTypes="itemTypes" :clusters="clusters" />
<b-btn variant="primary" v-if="canedit" class="mb-4 ml-4 add-powered-device-mobile" @click="addingPowered = true">
<b-btn variant="primary" v-if="canedit" class="mb-4 ml-4 add-powered-device-mobile" @click="addPowered($event)">
<b-img class="icon mb-1" src="/images/add-icon.svg" /> {{ __('partials.add_device_powered') }}
</b-btn>
<EventDevice v-if="addingPowered" :powered="true" :add="true" :edit="false" :clusters="clusters" :idevents="idevents" :brands="brands" :barrier-list="barrierList" :itemTypes="itemTypes" @close="addingPowered = false" />
Expand All @@ -95,17 +95,17 @@
<template slot="title">
<div class="d-flex justify-content-between small ml-1 align-self-center">
<div>
<b>{{ __('partials.add_device_unpowered') }}</b>
<b>{{ __('devices.title_unpowered') }}</b>
</div>
</div>
</template>
<template slot="title-right">
<div class="d-flex text-brand small">
<div class="ml-2 mr-1 pt-1 lower align-self-center">
<div class="d-flex text-brand small text-center">
<div class="ml-2 mr-1 pt-1 lower small">
<b-img src="/images/trash_brand.svg" class="icon" />
{{ Math.round(stats.waste_unpowered) }}
</div>
<div class="ml-1 mr-1 lower pt-1 small align-self-center">
<div class="ml-1 mr-1 lower pt-1 small">
<b-img src="/images/co2_brand.svg" class="icon" />
{{ Math.round(stats.co2_unpowered) }}
</div>
Expand All @@ -114,7 +114,7 @@
<template slot="content">
<p v-html="__('devices.description_unpowered')" />
<EventDeviceList :devices="unpowered" :powered="false" :canedit="canedit" :idevents="idevents" :brands="brands" :barrier-list="barrierList" :itemTypes="itemTypes" :clusters="clusters" />
<b-btn variant="primary" v-if="canedit" class="mb-4 ml-4 add-unpowered-device-desktop" @click="addingUnpowered = true">
<b-btn variant="primary" v-if="canedit" class="mb-4 ml-4 add-unpowered-device-desktop" @click="addUnpowered($event)">
<b-img class="icon mb-1" src="/images/add-icon.svg" /> {{ __('partials.add_device_unpowered') }}
</b-btn>
<EventDevice v-if="addingUnpowered" :powered="false" :add="true" :edit="false" :clusters="clusters" :idevents="idevents" :brands="brands" :barrier-list="barrierList" :itemTypes="itemTypes" @close="addingUnpowered = false" />
Expand Down Expand Up @@ -208,6 +208,24 @@ export default {
idevents: this.idevents,
devices: this.devices
})
},
methods: {
async addPowered(event) {
this.addingPowered = true
await this.$nextTick()
event.target.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
},
async addUnpowered(event) {
this.addingUnpowered = true
await this.$nextTick()
event.target.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
}
}
}
</script>
Expand Down