Restyle menu
This commit is contained in:
61
index.html
61
index.html
@@ -8,7 +8,7 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Recipe">
|
||||
<title>Recipe App - Modular</title>
|
||||
<link rel="manifest" href="./manifest.webmanifest?v=20260406-51">
|
||||
<link rel="manifest" href="./manifest.webmanifest?v=20260406-58">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
|
||||
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@@ -384,14 +384,15 @@
|
||||
}
|
||||
#app-bottom-nav .bottom-dock {
|
||||
position: relative;
|
||||
width: min(calc(100% - 2rem), 22.4rem);
|
||||
min-height: 3.7rem;
|
||||
box-sizing: border-box;
|
||||
width: min(calc(100% - 3.6rem), 20.9rem);
|
||||
height: 3.34rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
padding: 0.35rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
align-items: stretch;
|
||||
gap: 0.06rem;
|
||||
padding: 0.22rem;
|
||||
border-radius: 1.68rem;
|
||||
background: #393937;
|
||||
border: 1px solid #41423f;
|
||||
box-shadow:
|
||||
@@ -400,6 +401,13 @@
|
||||
0 22px 34px rgba(0, 0, 0, 0.18);
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav .nav-slot {
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#app-bottom-nav .nav-tab,
|
||||
#app-bottom-nav .nav-action {
|
||||
appearance: none;
|
||||
@@ -407,15 +415,15 @@
|
||||
border: 0;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
width: 2.55rem;
|
||||
height: 2.55rem;
|
||||
width: 2.18rem;
|
||||
height: 2.18rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
border-radius: 1.35rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
flex: 0 0 auto;
|
||||
color: #ece8e0;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
@@ -436,13 +444,12 @@
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active {
|
||||
width: 2.95rem;
|
||||
height: 2.95rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background: #2d2e2b !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04),
|
||||
0 10px 20px rgba(0, 0, 0, 0.24) !important;
|
||||
border-radius: 1.46rem;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab:active,
|
||||
#app-bottom-nav .nav-action:active {
|
||||
@@ -459,18 +466,22 @@
|
||||
padding-inline: 0.7rem;
|
||||
}
|
||||
#app-bottom-nav .bottom-dock {
|
||||
width: min(calc(100% - 1.4rem), 21.6rem);
|
||||
min-height: 3.45rem;
|
||||
padding-inline: 0.35rem;
|
||||
width: min(calc(100% - 2.4rem), 19.7rem);
|
||||
height: 3.12rem;
|
||||
gap: 0.05rem;
|
||||
padding: 0.2rem;
|
||||
border-radius: 1.56rem;
|
||||
}
|
||||
#app-bottom-nav .nav-tab,
|
||||
#app-bottom-nav .nav-action {
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
width: 2.02rem;
|
||||
height: 2.02rem;
|
||||
border-radius: 1.28rem;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 1.36rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -509,7 +520,7 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const APP_ASSET_VERSION = '20260406-51';
|
||||
const APP_ASSET_VERSION = '20260406-58';
|
||||
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
|
||||
const APP_VERSION_QUERY_KEY = 'appv';
|
||||
|
||||
@@ -543,7 +554,7 @@
|
||||
})();
|
||||
</script>
|
||||
<script type="module">
|
||||
const appVersion = window.__APP_ASSET_VERSION__ || '20260406-51';
|
||||
const appVersion = window.__APP_ASSET_VERSION__ || '20260406-58';
|
||||
const recoveryKey = `recipe-app-recovery-${appVersion}`;
|
||||
|
||||
function renderBootstrapError(message) {
|
||||
|
||||
@@ -52,19 +52,27 @@ function getBottomNavHTML() {
|
||||
return `
|
||||
<nav id="app-bottom-nav" aria-label="Główna nawigacja">
|
||||
<div class="bottom-dock">
|
||||
<div class="nav-slot">
|
||||
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot">
|
||||
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
|
||||
<i class="far fa-calendar-alt" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot">
|
||||
<button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
|
||||
<i class="fas fa-warehouse" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-slot">
|
||||
<button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
|
||||
<i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user