Convert detect layout to grid (#21)
Improve basic layout and transition to landscape on smaller screens using css grid. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#21
This commit is contained in:
@@ -29,7 +29,7 @@
|
||||
<f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
|
||||
<img src="../assets/regions/limb.svg" />
|
||||
</f7-button>
|
||||
<f7-button style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
|
||||
<f7-button disabled="true" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
|
||||
<img src="../assets/regions/headneck.svg" />
|
||||
</f7-button>
|
||||
</f7-segmented>
|
||||
|
||||
@@ -4,36 +4,69 @@
|
||||
<f7-navbar :sliding="false" back-link="Back">
|
||||
<f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
|
||||
</f7-navbar>
|
||||
<f7-block style="display: flex; justify-content: flex-start; flex-direction: column; align-items: stretch; height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom)); box-sizing: border-box; width: 100vw;">
|
||||
<img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100vw; min-height: 0;" />
|
||||
<f7-block class="detect-grid">
|
||||
<div class="image-container">
|
||||
<img :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: scale-down; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
|
||||
<div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none;" />
|
||||
<f7-segmented class="image-menu" raised style="margin: 5px; width: 50%; max-width: 400px; min-width: 192px; flex: 0 0 auto;">
|
||||
</div>
|
||||
<div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
|
||||
<f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
|
||||
</div>
|
||||
<f7-segmented class="image-menu" raised>
|
||||
<f7-button popover-open="#region-popover">
|
||||
<img :src="imageRegion" style="height: 100%;" />
|
||||
<img :src="imageRegion" />
|
||||
</f7-button>
|
||||
<f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
|
||||
<img src="../assets/icons/visibility.svg" style="height: 100%;" />
|
||||
<img src="../assets/icons/visibility.svg" />
|
||||
</f7-button>
|
||||
<f7-button @click="selectImage">
|
||||
<img src="../assets/icons/image.svg" style="height: 100%;" />
|
||||
<img src="../assets/icons/image.svg" />
|
||||
</f7-button>
|
||||
<f7-button @click="setData">
|
||||
<img src="../assets/icons/videocam.svg" style="height: 100%;" />
|
||||
<img src="../assets/icons/videocam.svg" />
|
||||
</f7-button>
|
||||
</f7-segmented>
|
||||
<input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
|
||||
<div v-if="resultData && resultData.detections" class="chip-results" style="flex: 0 0 auto; align-self: center;">
|
||||
<f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
|
||||
</div>
|
||||
</f7-block>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.detect-grid {
|
||||
/*display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
||||
box-sizing: border-box;
|
||||
width: 100vw;*/
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto min-content;
|
||||
grid-template-areas:
|
||||
"image-view"
|
||||
"result-view"
|
||||
"menu-view";
|
||||
justify-items: center;
|
||||
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
||||
max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
||||
}
|
||||
|
||||
.image-container {
|
||||
grid-area: image-view;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.chip-results {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
padding: 10px;
|
||||
--f7-chip-border-radius: 16px;
|
||||
--f7-chip-media-size: 32px;
|
||||
--f7-chip-font-weight: normal;
|
||||
@@ -49,11 +82,71 @@
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
|
||||
.image-menu {
|
||||
grid-area: menu-view;
|
||||
margin: 5px;
|
||||
width: 50%;
|
||||
max-width: 400px;
|
||||
min-width: 192px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.image-menu .button {
|
||||
aspect-ratio: 1;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.button > img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-height: 450px) and (orientation: landscape) {
|
||||
.detect-grid {
|
||||
grid-template-columns: minmax(0,1fr) max-content auto;
|
||||
grid-template-rows: calc(100vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - 64px);
|
||||
grid-template-areas:
|
||||
"image-view result-view menu-view";
|
||||
justify-items: center;
|
||||
align-items: stretch;
|
||||
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
||||
max-height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chip-results {
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
justify-self: start;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.image-menu {
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
flex: 1 1 0%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.image-menu .button {
|
||||
aspect-ratio: 1;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
flex: 1 1 0%;
|
||||
border-bottom: 1px solid var(--f7-segmented-raised-divider-color);
|
||||
}
|
||||
|
||||
.button > img {
|
||||
width:auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<f7-button class="region-button limbs" href="/detect/limbs/">
|
||||
<img class="region-image" src="../assets/regions/limb.svg" />
|
||||
</f7-button>
|
||||
<f7-button class="region-button headneck" href="/detect/head/">
|
||||
<f7-button class="region-button headneck" disabled="true" href="/detect/head/">
|
||||
<img class="region-image" src="../assets/regions/headneck.svg" />
|
||||
</f7-button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user