Fix desktop responsive layout: sidebar, content sizing, remove duplicate tab bar
- Replace uni-app custom-tab-bar with manual NavBar component in App.vue (uni-app auto-detection was not including component in build) - Mobile: NavBar hidden via CSS display:none, uni-app default tab bar handles nav - Desktop: NavBar visible as 220px left sidebar, uni-app tab bar hidden - Content area: max-width 1200px with margin-left:220px, centered - Buttons/inputs/cards: global desktop CSS overrides for reasonable sizing - Clean approach: NavBar always in DOM, CSS media queries control visibility (no v-if, no conflicting !important)
This commit is contained in:
+36
-3
@@ -1,8 +1,12 @@
|
||||
<template>
|
||||
<router-view />
|
||||
<div class="app-wrapper">
|
||||
<NavBar />
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NavBar from './components/nav-bar.vue'
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -18,7 +22,7 @@ html, body, #app {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Let uni-app framework manage layout for native tabbar */
|
||||
/* Let uni-app pages scroll */
|
||||
uni-page {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
@@ -29,12 +33,22 @@ uni-page-body {
|
||||
|
||||
/* ===== Desktop responsive (≥1024px) ===== */
|
||||
@media (min-width: 1024px) {
|
||||
/* Hide the built-in uni-app tab bar on desktop */
|
||||
uni-tabbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Sidebar — shift page content right */
|
||||
uni-page-body {
|
||||
margin-left: 220px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* Remove the tab-bar-height bottom padding that uni-app adds for tab pages */
|
||||
.uni-app--showtabbar uni-page-wrapper:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Constrain + center page content */
|
||||
uni-page-body > view {
|
||||
max-width: 1200px !important;
|
||||
@@ -49,7 +63,26 @@ uni-page-body {
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
/* Fix floating AI assistant (clear sidebar + reasonable position) */
|
||||
/* Buttons: reasonable desktop sizing */
|
||||
uni-page-body button,
|
||||
uni-page-body .btn-primary,
|
||||
uni-page-body .btn-secondary,
|
||||
uni-page-body .uni-btn,
|
||||
uni-page-body [class*="btn-"] {
|
||||
min-width: 120px;
|
||||
padding: 12px 32px !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
uni-page-body input,
|
||||
uni-page-body textarea,
|
||||
uni-page-body .uni-input-input {
|
||||
font-size: 15px !important;
|
||||
padding: 10px 16px !important;
|
||||
}
|
||||
|
||||
/* Fix floating AI assistant (clear sidebar) */
|
||||
.ai-float-btn {
|
||||
right: 40px !important;
|
||||
bottom: 40px !important;
|
||||
|
||||
Reference in New Issue
Block a user