ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle menu

Browse Source
This commit is contained in:
Rafał
2026-04-06 18:36:10 +02:00
parent 7cf7aef6e4
commit 3258965bcc
2 changed files with 56 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
index.html
View File

@@ -8,7 +8,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Recipe"> <meta name="apple-mobile-web-app-title" content="Recipe">
<title>Recipe App - Modular</title> <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="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png"> <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -384,14 +384,15 @@
} }
#app-bottom-nav .bottom-dock { #app-bottom-nav .bottom-dock {
position: relative; position: relative;
width: min(calc(100% - 2rem), 22.4rem); box-sizing: border-box;
min-height: 3.7rem; width: min(calc(100% - 3.6rem), 20.9rem);
height: 3.34rem;
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center; align-items: stretch;
gap: 0.1rem; gap: 0.06rem;
padding: 0.35rem 0.45rem; padding: 0.22rem;
border-radius: 999px; border-radius: 1.68rem;
background: #393937; background: #393937;
border: 1px solid #41423f; border: 1px solid #41423f;
box-shadow: box-shadow:
@@ -400,6 +401,13 @@
0 22px 34px rgba(0, 0, 0, 0.18); 0 22px 34px rgba(0, 0, 0, 0.18);
pointer-events: auto; 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-tab,
#app-bottom-nav .nav-action { #app-bottom-nav .nav-action {
appearance: none; appearance: none;
@@ -407,15 +415,15 @@
border: 0; border: 0;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
width: 2.55rem; width: 2.18rem;
height: 2.55rem; height: 2.18rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: 999px; border-radius: 1.35rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
justify-self: center; flex: 0 0 auto;
color: #ece8e0; color: #ece8e0;
cursor: pointer; cursor: pointer;
transition: transition:
@@ -436,13 +444,12 @@
background: rgba(255, 255, 255, 0.04) !important; background: rgba(255, 255, 255, 0.04) !important;
} }
#app-bottom-nav .nav-tab.is-active { #app-bottom-nav .nav-tab.is-active {
width: 2.95rem; width: 100%;
height: 2.95rem; height: 100%;
color: #fff; color: #fff;
background: #2d2e2b !important; background: #2d2e2b !important;
box-shadow: border-radius: 1.46rem;
inset 0 1px 0 rgba(255, 255, 255, 0.04), box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
0 10px 20px rgba(0, 0, 0, 0.24) !important;
} }
#app-bottom-nav .nav-tab:active, #app-bottom-nav .nav-tab:active,
#app-bottom-nav .nav-action:active { #app-bottom-nav .nav-action:active {
@@ -459,18 +466,22 @@
padding-inline: 0.7rem; padding-inline: 0.7rem;
} }
#app-bottom-nav .bottom-dock { #app-bottom-nav .bottom-dock {
width: min(calc(100% - 1.4rem), 21.6rem); width: min(calc(100% - 2.4rem), 19.7rem);
min-height: 3.45rem; height: 3.12rem;
padding-inline: 0.35rem; gap: 0.05rem;
padding: 0.2rem;
border-radius: 1.56rem;
} }
#app-bottom-nav .nav-tab, #app-bottom-nav .nav-tab,
#app-bottom-nav .nav-action { #app-bottom-nav .nav-action {
width: 2.35rem; width: 2.02rem;
height: 2.35rem; height: 2.02rem;
border-radius: 1.28rem;
} }
#app-bottom-nav .nav-tab.is-active { #app-bottom-nav .nav-tab.is-active {
width: 2.75rem; height: 100%;
height: 2.75rem; width: 100%;
border-radius: 1.36rem;
} }
} }
@@ -509,7 +520,7 @@
</div> </div>
<script> <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_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv'; const APP_VERSION_QUERY_KEY = 'appv';
@@ -543,7 +554,7 @@
})(); })();
</script> </script>
<script type="module"> <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}`; const recoveryKey = `recipe-app-recovery-${appVersion}`;
function renderBootstrapError(message) { function renderBootstrapError(message) {

32
js/app.js
View File

@@ -52,18 +52,26 @@ function getBottomNavHTML() {
return ` return `
<nav id="app-bottom-nav" aria-label="Główna nawigacja"> <nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div class="bottom-dock"> <div class="bottom-dock">
<button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page"> <div class="nav-slot">
<i class="fas fa-book" aria-hidden="true"></i> <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
</button> <i class="fas fa-book" aria-hidden="true"></i>
<button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer"> </button>
<i class="far fa-calendar-alt" aria-hidden="true"></i> </div>
</button> <div class="nav-slot">
<button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia"> <button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
<i class="fas fa-warehouse" aria-hidden="true"></i> <i class="far fa-calendar-alt" aria-hidden="true"></i>
</button> </button>
<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'}"> </div>
<i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i> <div class="nav-slot">
</button> <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> </div>
</nav> </nav>
`; `;