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

Add responsive button layout #19

Merged
jgeorgi merged 2 commits from msv-new-styles into main 2023-11-26 05:04:26 +00:00
Conversation 0 Commits 2 Files Changed 1 +67 -16
1 changed files with 67 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 89179e419e - Show all commits

97
src/pages/home.vue
View File

@@ -2,66 +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%; 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>
<h4>Veterinary Anatomy Edition</h4>
<p>Select a region to begin</p>
<div class="region-menu">
<div class="region-group">
<f7-button class="region-button" href="/detect/thorax/">
<img style="object-fit: contain;" src="../assets/regions/thorax.svg" />
<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 class="region-button" href="/detect/abdomen/">
<img src="../assets/regions/abdpel.svg" />
</f7-button>
</div>
<div class="region-group">
<f7-button class="region-button" href="/detect/limbs/">
<img src="../assets/regions/limb.svg" />
</f7-button>
<f7-button class="region-button" href="/detect/head/">
<img src="../assets/regions/headneck.svg" />
</f7-button>
</div>
<f7-button class="region-button abdomen" href="/detect/abdomen/">
<img class="region-image" src="../assets/regions/abdpel.svg" />
</f7-button>
<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/">
<img class="region-image" src="../assets/regions/headneck.svg" />
</f7-button>
</div>
</div>
</f7-page>
</template>
<style>
.region-menu {
display: flex;
justify-content: center;
align-items: stretch;
align-self: stretch;
flex-wrap: wrap;
gap: 15px;
padding: 30px;
}
.region-group {
display:flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
min-width: 0;
gap: 15px;
.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;
max-width: 250px;
max-height: 250px;
min-width: 0;
width: 100%;
background-color: #BDBCAF;
flex-grow: 1;
flex-shrink: 1;
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>