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

Add responsive button layout (#19)

Browse Source 
Took long enough, but buttons are in 2 x 2 grid in narrow screens and 1 x 4 grid in wider screens

Reviewed-on: Georgi_Lab/ALVINN_f7#19
This commit is contained in:
Justin Georgi
2023-11-25 22:04:25 -07:00
parent 28dfc0b7fd
commit ed048d0e83
1 changed files with 67 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/pages/home.vue
View File

@@ -2,30 +2,81 @@
<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: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;">
<h2>Anatomy Lab Visual Identification Neural Network</h2>
<h4>Veterinary Anatomy Edition</h4>
<p>Select a region to begin</p>
<f7-segmented raised style="flex-wrap: wrap;">
<f7-button style="height: auto; width: auto;" href="/detect/thorax/">
<img src="../assets/regions/thorax.svg" />
<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>
<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 class="region-button thorax" href="/detect/thorax/">
<img class="region-image" src="../assets/regions/thorax.svg" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/abdomen/">
<img src="../assets/regions/abdpel.svg" />
<f7-button class="region-button abdomen" href="/detect/abdomen/">
<img class="region-image" src="../assets/regions/abdpel.svg" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/limbs/">
<img src="../assets/regions/limb.svg" />
<f7-button class="region-button limbs" href="/detect/limbs/">
<img class="region-image" src="../assets/regions/limb.svg" />
</f7-button>
<f7-button style="height: auto; width: auto;" href="/detect/head/">
<img src="../assets/regions/headneck.svg" />
<f7-button class="region-button headneck" href="/detect/head/">
<img class="region-image" src="../assets/regions/headneck.svg" />
</f7-button>
</f7-segmented>
</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;
}
.region-button {
aspect-ratio: 1;
min-width: 100px;
height: auto;
width: 100%;
background-color: #BDBCAF;
padding: 5px;
}
.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>