mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-06-10 07:19:26 +02:00
Add header announcement system
This commit is contained in:
parent
34a3619387
commit
4dd01b8431
|
@ -523,4 +523,20 @@ function updateAtlasAll(atlas = atlasAll) {
|
||||||
entry.center = currentCenter
|
entry.center = currentCenter
|
||||||
}
|
}
|
||||||
return atlas
|
return atlas
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Announcement system
|
||||||
|
|
||||||
|
const announcementEl = document.querySelector("#headerAnnouncement")
|
||||||
|
const announcementButton = announcementEl.querySelector('[role=button]')
|
||||||
|
const announcementText = announcementEl.querySelector('p').textContent.trim()
|
||||||
|
|
||||||
|
if (announcementText && announcementText !== window.localStorage.getItem('announcement-closed')) {
|
||||||
|
announcementButton.click()
|
||||||
|
document.querySelector('#objectsList').style.marginTop = '2.8rem'
|
||||||
|
}
|
||||||
|
|
||||||
|
announcementEl.querySelector('[role=button]').addEventListener('click', () => {
|
||||||
|
window.localStorage.setItem('announcement-closed', announcementText)
|
||||||
|
document.querySelector('#objectsList').style.marginTop = '0'
|
||||||
|
})
|
||||||
|
|
101
web/index.html
101
web/index.html
|
@ -106,53 +106,62 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="wrapper" class="listHidden">
|
<div id="wrapper" class="listHidden">
|
||||||
<nav id="main-navbar" class="navbar navbar-expand-md fixed-top bg-body border-bottom">
|
<header class="fixed-top">
|
||||||
<div class="container-fluid">
|
<aside class="container-fluid alert-primary collapse" id="headerAnnouncement">
|
||||||
<a class="navbar-brand text-body d-flex align-items-center" href="./">
|
<div class="d-flex w-100 py-2 align-items-center">
|
||||||
<picture>
|
<i class="bi bi-info-circle-fill fs-5"></i>
|
||||||
<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">
|
<p class="mb-0 flex-grow-1 px-2"> The 2023 edition of r/place is currently underway, and we are back! Check out <a class="alert-link" href="https://2023.place-atlas.stefanocoding.me">The 2023 r/place Atlas</a>!</p>
|
||||||
<img class="d-block me-2" height="32" width="32" src="./_img/favicon.svg" alt="">
|
<a class="fs-5" data-bs-toggle="collapse" href="#headerAnnouncement" role="button" aria-expanded="false" aria-controls="headerAnnouncement"><i class="bi bi-x-lg"></i></a>
|
||||||
</picture>
|
|
||||||
The 2022 r/place Atlas
|
|
||||||
</a>
|
|
||||||
<button class="navbar-toggler text-body collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<i class="bi bi-list" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
||||||
<ul class="navbar-nav me-auto my-2 my-md-0">
|
|
||||||
<li class="nav-item">
|
|
||||||
<div class="btn-group" role="group">
|
|
||||||
<button id="showListButton" class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasList" aria-controls="offcanvasList">Entries List</button>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="navbar-nav mx-auto d-block d-md-none d-lg-block">
|
|
||||||
<li class="nav-item d-flex align-items-center gap-2">
|
|
||||||
<span class="p-2">Coordinates: <span class="badge bg-secondary" id="coords_p">0, 0</span></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<hr class="d-md-none">
|
|
||||||
<ul class="navbar-nav flex-row flex-wrap ms-auto">
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-current="page">
|
|
||||||
Atlas Map
|
|
||||||
</a>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a class="dropdown-item" href="https://2017.place-atlas.stefanocoding.me/">2017</a></li>
|
|
||||||
<li><a class="dropdown-item" href="#" aria-current="page">2022</a></li>
|
|
||||||
<li><a class="dropdown-item" href="https://2023.place-atlas.stefanocoding.me/">2023</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item col-6 col-md-auto">
|
|
||||||
<a class="nav-link" href="https://place-wiki.stefanocoding.me/">Place Wiki</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item col-6 col-md-auto">
|
|
||||||
<a class="nav-link" href="./about.html">About</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</aside>
|
||||||
</nav>
|
<nav id="main-navbar" class="navbar navbar-expand-md bg-body border-bottom">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand text-body d-flex align-items-center" href="./">
|
||||||
|
<picture>
|
||||||
|
<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">
|
||||||
|
<img class="d-block me-2" height="32" width="32" src="./_img/favicon.svg" alt="">
|
||||||
|
</picture>
|
||||||
|
The 2022 r/place Atlas
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler text-body collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<i class="bi bi-list" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||||
|
<ul class="navbar-nav me-auto my-2 my-md-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<button id="showListButton" class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasList" aria-controls="offcanvasList">Entries List</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="navbar-nav mx-auto d-block d-md-none d-lg-block">
|
||||||
|
<li class="nav-item d-flex align-items-center gap-2">
|
||||||
|
<span class="p-2">Coordinates: <span class="badge bg-secondary" id="coords_p">0, 0</span></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<hr class="d-md-none">
|
||||||
|
<ul class="navbar-nav flex-row flex-wrap ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle active" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-current="page">
|
||||||
|
Atlas Map
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a class="dropdown-item" href="https://2017.place-atlas.stefanocoding.me/">2017</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#" aria-current="page">2022</a></li>
|
||||||
|
<li><a class="dropdown-item" href="https://2023.place-atlas.stefanocoding.me/">2023</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link" href="https://place-wiki.stefanocoding.me/">Place Wiki</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item col-6 col-md-auto">
|
||||||
|
<a class="nav-link" href="./about.html">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div id="loading" class="d-flex justify-content-center">
|
<div id="loading" class="d-flex justify-content-center">
|
||||||
<div id="loadingContent" class="my-auto mx-3 text-center text-white">
|
<div id="loadingContent" class="my-auto mx-3 text-center text-white">
|
||||||
|
|
Loading…
Reference in a new issue