v1 hides TopNav below 960px; v2 was inheriting that, so mobile + tablet had zero header chrome — frame card sat at viewport top, no WeVisto wordmark, no page subtitle. Visible gap from the mockup. Now in v2: - Mobile/tablet: TopNav renders as a 52px slim sticky top bar with mark + WeVisto wordmark + italic '— home/library/settings' subtitle. Nav tabs are hidden (BottomNav handles routing at small sizes). - Desktop: TopNav becomes the left side rail with full vertical nav. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -7,11 +7,27 @@
|
||||
// library/settings inner styling, theme swatches.
|
||||
|
||||
[data-design="v2"] {
|
||||
// ── TopNav restyled at desktop into a left side rail ───────────────
|
||||
// ── TopNav: shown at ALL sizes in v2 (v1 hides it below 960px).
|
||||
// Mobile/tablet → slim horizontal top bar (~52px) with brand only.
|
||||
// Desktop → left side rail (overrides below).
|
||||
.top-nav {
|
||||
background: color-mix(in srgb, var(--color-bg) 95%, transparent);
|
||||
display: flex !important; // beat v1 scoped style's `display: none`
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
height: 52px;
|
||||
padding: 0 var(--space-4);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
background: color-mix(in srgb, var(--color-bg) 90%, transparent);
|
||||
backdrop-filter: saturate(160%) blur(18px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(18px);
|
||||
border-bottom-color: var(--color-border);
|
||||
|
||||
&__wordmark { color: var(--color-text); font-family: var(--font-display-v2); font-weight: 400; }
|
||||
&__sub { display: block !important; font-family: var(--font-accent-v2); }
|
||||
|
||||
// Hide the nav tabs at mobile/tablet — the bottom nav handles routing
|
||||
&__tabs { display: none; }
|
||||
|
||||
&__tab {
|
||||
color: var(--color-text-muted);
|
||||
&:hover { background: var(--color-surface); color: var(--color-text); }
|
||||
@@ -19,6 +35,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Push main content below the mobile/tablet top bar
|
||||
@media (max-width: 959px) {
|
||||
.top-nav { position: sticky; top: 0; z-index: 30; }
|
||||
main { padding-top: var(--space-3); }
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.top-nav {
|
||||
position: fixed;
|
||||
@@ -56,7 +78,8 @@
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
flex: 0 0 auto !important; // override v1's flex:1 so __foot can push to bottom
|
||||
display: flex !important; // re-show at desktop (mobile/tablet had display:none)
|
||||
flex: 0 0 auto !important;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: stretch;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -17,9 +17,9 @@
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="WeVisto" />
|
||||
<script type="module" crossorigin src="/build/assets/index-DoRCvcMB.js"></script>
|
||||
<script type="module" crossorigin src="/build/assets/index-DLuZZhks.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
|
||||
<link rel="stylesheet" crossorigin href="/build/assets/index-DXi7r0Mz.css">
|
||||
<link rel="stylesheet" crossorigin href="/build/assets/index-DTaVBzDH.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
Reference in New Issue
Block a user