mikhailov.aa/leaflet_svelte
1
Fork 0
Code Issues 10 Pull requests 1 Projects 1 Releases Activity

Fix navbar styles & map position

Browse source
This commit is contained in:
ThePetrovich 2025-06-27 20:07:54 +08:00
parent eb29cdc585
commit 72c0d5e609
3 changed files with 43 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/routes/Navbar.svelte
View file

@ -41,36 +41,15 @@
}
</script>
<!-- <Navbar color="dark" dark expand="md">
<Nav navbar>
<NavItem>
<NavLink href="/components/">Inactive Link</NavLink>
</NavItem>
<Dropdown nav setActiveFromChild>
<DropdownToggle nav class="nav-link" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem href="#" active>
Lancelot
</DropdownItem>
<DropdownItem href="#">Link</DropdownItem>
<DropdownItem href="#">Secret</DropdownItem>
<DropdownItem href="#">Chimp</DropdownItem>
</DropdownMenu>
</Dropdown>
</Nav>
</Navbar> -->
<Navbar color="light" light expand="lg" fixed="top" class="custom-navbar">
<Navbar color="light" light expand="lg" fixed="top" class="custom-navbar border-bottom">
<Nav class="me-auto mb-2 mb-lg-0" navbar>
<NavbarBrand href="/" class="nav-full-height">
<img src="/logo.svg" alt="Logo" height="36" class="d-inline-block align-text-top" />
<img src="/logo.svg" alt="Logo" height="34" class="d-inline-block align-text-top" />
</NavbarBrand>
<NavItem>
<NavLink
href="/predict"
class="nav-full-height"
class="nav-full-height border-bottom"
active={$page.url.pathname === '/predict'}
>
Прогнозирование
@ -79,7 +58,7 @@
<NavItem>
<NavLink
href="/track"
class="nav-full-height"
class="nav-full-height border-bottom"
active={$page.url.pathname === '/track'}
>
Слежение
@ -89,7 +68,7 @@
<Nav navbar>
{#if isAuthenticated}
<Dropdown nav inNavbar>
<DropdownToggle nav caret class="nav-full-height">
<DropdownToggle nav caret class="nav-full-height border-bottom">
Account
</DropdownToggle>
<DropdownMenu end>
@ -115,7 +94,7 @@
<NavItem>
<NavLink
href="/login"
class="nav-full-height"
class="nav-full-height border-bottom"
active={$page.url.pathname === '/login'}
>
Login

30
src/routes/map.svelte
View file

@ -160,33 +160,3 @@
<VelocityLayer {map} {velocityOptions} />
{/if}
</div>
<style>
.map-container {
position: relative;
width: 100%;
height: 100vh;
}
.coordinates-display {
position: absolute;
top: 54px;
right: 10px;
background: #fff;
padding: 3px 8px;
font-family: Arial, sans-serif;
font-size: 14px;
z-index: 1000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
width: auto;
white-space: nowrap;
}
.panel-container {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 1000;
}
</style>

39
static/css/custom.css
View file

@ -1,5 +1,5 @@
.custom-navbar {
height: 44px;
height: var(--navbar-height);
padding-top: 0rem;
padding-bottom: 0rem;
z-index: 1000;
@ -17,12 +17,12 @@
}
.nav-link:hover {
color: var(--bs-light) !important;;
color: white !important;;
background-color: var(--bs-primary);
}
.nav-link.active {
color: var(--bs-light) !important;
color: white !important;
background-color: var(--bs-primary);
}
@ -48,3 +48,36 @@
.card-header {
cursor: pointer;
}
:root {
--navbar-height: 44px;
}
.map-container {
position: relative;
width: 100%;
height: calc(100vh - var(--navbar-height));
top: var(--navbar-height);
}
.coordinates-display {
position: absolute;
top: 10px;
right: 10px;
background: #fff;
padding: 3px 8px;
font-family: Arial, sans-serif;
font-size: 14px;
z-index: 1000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
width: auto;
white-space: nowrap;
}
.panel-container {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 1000;
}