fix(ui): enlarge router model and hide router controls
This commit is contained in:
@@ -9,9 +9,10 @@ const props = withDefaults(defineProps<{
|
|||||||
fallback?: string
|
fallback?: string
|
||||||
fillViewport?: boolean
|
fillViewport?: boolean
|
||||||
glassContainer?: boolean
|
glassContainer?: boolean
|
||||||
|
controls?: boolean
|
||||||
/** Development-only gallery controls. Never rendered in production builds. */
|
/** Development-only gallery controls. Never rendered in production builds. */
|
||||||
devBrowse?: boolean
|
devBrowse?: boolean
|
||||||
}>(), { fallback: '', fillViewport: false, glassContainer: false, devBrowse: false })
|
}>(), { fallback: '', fillViewport: false, glassContainer: false, controls: true, devBrowse: false })
|
||||||
const host = ref<HTMLElement>()
|
const host = ref<HTMLElement>()
|
||||||
const frame = ref<HTMLElement>()
|
const frame = ref<HTMLElement>()
|
||||||
const ready = ref(false)
|
const ready = ref(false)
|
||||||
@@ -161,7 +162,7 @@ onBeforeUnmount(() => {
|
|||||||
<svg viewBox="0 0 200 120" aria-hidden="true"><rect x="31" y="59" width="138" height="46" rx="15"/><path d="M38 65V17Q38 9 45 9T52 17V60M148 60V17Q148 9 155 9T162 17V65M92 87h16"/></svg>
|
<svg viewBox="0 0 200 120" aria-hidden="true"><rect x="31" y="59" width="138" height="46" rx="15"/><path d="M38 65V17Q38 9 45 9T52 17V60M148 60V17Q148 9 155 9T162 17V65M92 87h16"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<figcaption class="device-model__caption">
|
<figcaption v-if="controls || devBrowseEnabled" class="device-model__caption">
|
||||||
<span>{{ failed ? label : (devBrowseEnabled ? devModelLabel(currentModel) : 'Drag to explore') }}</span>
|
<span>{{ failed ? label : (devBrowseEnabled ? devModelLabel(currentModel) : 'Drag to explore') }}</span>
|
||||||
<template v-if="devBrowseEnabled">
|
<template v-if="devBrowseEnabled">
|
||||||
<button type="button" aria-label="Previous 3D model" @click="browseModel(-1)">Back</button>
|
<button type="button" aria-label="Previous 3D model" @click="browseModel(-1)">Back</button>
|
||||||
|
|||||||
@@ -535,7 +535,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<div class="glass-card p-6 mb-6 overflow-hidden router-model-card">
|
<div class="glass-card p-6 mb-6 overflow-hidden router-model-card">
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] gap-6 items-start">
|
<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] gap-6 items-start">
|
||||||
<DeviceModel model="beryl-ax" label="Beryl AX (GL-MT3000) OpenWrt router" fill-viewport />
|
<DeviceModel model="beryl-ax" label="Beryl AX (GL-MT3000) OpenWrt router" fill-viewport :controls="false" />
|
||||||
<RouterMarketplace />
|
<RouterMarketplace />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1022,6 +1022,10 @@ onMounted(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
|
.router-model-card .device-model--viewport {
|
||||||
|
min-height: calc(100dvh - 216px);
|
||||||
|
}
|
||||||
|
|
||||||
.router-model-card > .grid > .router-marketplace {
|
.router-model-card > .grid > .router-marketplace {
|
||||||
align-self: end;
|
align-self: end;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user