ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Put button in css grid

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2023-11-25 22:00:00 -07:00
parent 3e7caed55e
commit 89179e419e
1 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/pages/home.vue
View File

@@ -2,66 +2,81 @@
<f7-page name="home"> <f7-page name="home">
<!-- Top Navbar --> <!-- Top Navbar -->
<f7-navbar> <f7-navbar>
<f7-nav-left> <f7-nav-left>
<f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link> <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
</f7-nav-left> </f7-nav-left>
<f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title> <f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title>
</f7-navbar> </f7-navbar>
<!-- Page content--> <!-- Page content-->
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 0;"> <div style="display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content min-content 1fr; align-content: stretch; gap: 15px; 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> <h2 style="text-align: center; padding-left: 30px; padding-right: 30px;">Anatomy Lab Visual Identification Neural Network</h2>
<h4>Veterinary Anatomy Edition</h4> <h4 style="text-align: center; margin: 0;">Veterinary Anatomy Edition</h4>
<p>Select a region to begin</p> <p style="text-align: center; margin: 0;">Select a region to begin</p>
<div class="region-menu"> <div class="region-grid">
<div class="region-group"> <f7-button class="region-button thorax" href="/detect/thorax/">
<f7-button class="region-button" href="/detect/thorax/"> <img class="region-image" src="../assets/regions/thorax.svg" />
<img style="object-fit: contain;" src="../assets/regions/thorax.svg" />
</f7-button> </f7-button>
<f7-button class="region-button" href="/detect/abdomen/"> <f7-button class="region-button abdomen" href="/detect/abdomen/">
<img src="../assets/regions/abdpel.svg" /> <img class="region-image" src="../assets/regions/abdpel.svg" />
</f7-button> </f7-button>
</div> <f7-button class="region-button limbs" href="/detect/limbs/">
<div class="region-group"> <img class="region-image" src="../assets/regions/limb.svg" />
<f7-button class="region-button" href="/detect/limbs/"> </f7-button>
<img src="../assets/regions/limb.svg" /> <f7-button class="region-button headneck" href="/detect/head/">
</f7-button> <img class="region-image" src="../assets/regions/headneck.svg" />
<f7-button class="region-button" href="/detect/head/"> </f7-button>
<img src="../assets/regions/headneck.svg" />
</f7-button>
</div>
</div> </div>
</div> </div>
</f7-page> </f7-page>
</template> </template>
<style> <style>
.region-menu { .region-grid {
display: flex; display: grid;
justify-content: center; grid-template-columns: 1fr 1fr;
align-items: stretch; grid-template-rows: minmax(120px,max-content) minmax(120px,max-content);
align-self: stretch; justify-items: center;
flex-wrap: wrap; align-content: center;
gap: 15px; gap: 20px 20px;
padding: 30px; margin: 30px;
} margin-top: 0;
.region-group {
display:flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
min-width: 0;
gap: 15px;
} }
.region-button { .region-button {
aspect-ratio: 1; aspect-ratio: 1;
min-width: 100px;
height: auto; height: auto;
max-width: 250px; width: 100%;
max-height: 250px;
min-width: 0;
background-color: #BDBCAF; background-color: #BDBCAF;
flex-grow: 1; padding: 5px;
flex-shrink: 1;
} }
.region-image {
width: 100%;
}
@media (min-width: 600px) {
.region-grid {
grid-template-columns: auto [thorax] auto [abdomen] auto [limbs] auto [headneck] auto auto;
grid-template-rows: 1fr;
}
.thorax {
grid-column-start: thorax;
}
.abdomen {
grid-column-start: abdomen;
}
.limbs {
grid-column-start: limbs;
}
.headneck {
grid-column-start: headneck;
}
}
</style> </style>