Justin Georgi
23a2772468
The pre app disclaimer makes more sense initialized by the app and not the home page. This PR moves the popup to the app and adds basic store functionality to give global access to the state of the apps agreement. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#68
106 lines
3.5 KiB
Vue
106 lines
3.5 KiB
Vue
<template>
|
|
<f7-page name="home">
|
|
<!-- Top Navbar -->
|
|
<f7-navbar>
|
|
<f7-nav-left>
|
|
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
|
|
</f7-nav-left>
|
|
<f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title>
|
|
</f7-navbar>
|
|
<!-- Page content-->
|
|
<div style="display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content min-content 1fr; align-content: stretch; gap: 15px; min-height: 0px; max-height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top))); height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top)));">
|
|
<h2 style="text-align: center; padding-left: 30px; padding-right: 30px;">Anatomy Lab Visual Identification Neural Network</h2>
|
|
<h4 style="text-align: center; margin: 0;">Veterinary Anatomy Edition</h4>
|
|
<p style="text-align: center; margin: 0;">Select a region to begin.</p>
|
|
<div class="region-grid">
|
|
<!--</f7-button><f7-button :class="`region-button thorax`" :href="'/detect/thorax/'">-->
|
|
<f7-button :class="`region-button thorax${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/thorax/'">
|
|
<RegionIcon class="region-image" :region="0" />
|
|
</f7-button>
|
|
<!--<f7-button :class="`region-button abdomen${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/abdomen/'">-->
|
|
<f7-button :class="`region-button abdomen${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/abdomen/'">
|
|
<RegionIcon class="region-image" :region="1" />
|
|
</f7-button>
|
|
<!--<f7-button :class="`region-button limbs${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/limbs/'">-->
|
|
<f7-button :class="`region-button limbs${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/limbs/'">
|
|
<RegionIcon class="region-image" :region="2" />
|
|
</f7-button>
|
|
<!--<f7-button class="region-button headneck disabled" :href="siteSettings.siteAgreement && '/detect/head/'">-->
|
|
<f7-button class="region-button headneck disabled" :href="'/detect/head/'">
|
|
<RegionIcon class="region-image" :region="3" />
|
|
</f7-button>
|
|
</div>
|
|
</div>
|
|
</f7-page>
|
|
</template>
|
|
|
|
<style>
|
|
.region-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: minmax(120px,max-content) minmax(120px,max-content);
|
|
justify-items: center;
|
|
align-content: center;
|
|
gap: 20px 20px;
|
|
margin: 30px;
|
|
margin-top: 0;
|
|
transform: scale(97%);
|
|
}
|
|
|
|
.region-button {
|
|
aspect-ratio: 1;
|
|
min-width: 100px;
|
|
height: auto;
|
|
width: 100%;
|
|
background-color: var(--avn-button-bg-color);
|
|
padding: 5px;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.region-image {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.region-grid {
|
|
grid-template-columns: 1fr [thorax] auto [abdomen] auto [limbs] auto [headneck] auto 1fr;
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.thorax {
|
|
grid-column-start: thorax;
|
|
}
|
|
|
|
.abdomen {
|
|
grid-column-start: abdomen;
|
|
}
|
|
|
|
.limbs {
|
|
grid-column-start: limbs;
|
|
}
|
|
|
|
.headneck {
|
|
grid-column-start: headneck;
|
|
}
|
|
|
|
.region-button {
|
|
max-height: calc(100% - 15px);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
import RegionIcon from '../components/region-icon.vue'
|
|
import store from '../js/store'
|
|
|
|
export default {
|
|
components: {
|
|
RegionIcon
|
|
},
|
|
setup() {
|
|
return store()
|
|
}
|
|
}
|
|
</script>
|