Various additions/fixes

* Added wiki link to navbar
* Updated info block card header to be body color instead of link color
* Updated logo with no padding
* Updated logo to switch based on media query
* Fixed entries list to be hidden when drawing
* Fixed -webkit-backdrop-filter supports media query
This commit is contained in:
mxdanger 2022-04-21 00:25:05 -07:00
parent c55d3b8b24
commit 5823e27f67
5 changed files with 25 additions and 12 deletions

View file

@ -50,7 +50,7 @@ .navbar {
z-index: 1100 !important; z-index: 1100 !important;
} }
@supports (backdrop-filter: blur()) { @supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
.navbar, #offcanvasList, #offcanvasDraw { .navbar, #offcanvasList, #offcanvasDraw {
-webkit-backdrop-filter: saturate(180%) blur(15px); -webkit-backdrop-filter: saturate(180%) blur(15px);
backdrop-filter: saturate(180%) blur(15px); backdrop-filter: saturate(180%) blur(15px);
@ -280,7 +280,7 @@ #timeControlsTooltip {
bottom: 40px; bottom: 40px;
} }
@supports (backdrop-filter: blur()) { @supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
#timeControlsTooltip div { #timeControlsTooltip div {
-webkit-backdrop-filter: saturate(180%) blur(15px); -webkit-backdrop-filter: saturate(180%) blur(15px);
backdrop-filter: saturate(180%) blur(15px); backdrop-filter: saturate(180%) blur(15px);

View file

@ -20,6 +20,7 @@ function initDraw(){
var backButton = document.getElementById("showListButton"); var backButton = document.getElementById("showListButton");
backButton.insertAdjacentHTML("afterend", '<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDraw" aria-controls="offcanvasDraw">Edit</button><a id="drawBackButton" class="btn btn-outline-primary" href="./">Exit Draw Mode</a>'); backButton.insertAdjacentHTML("afterend", '<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDraw" aria-controls="offcanvasDraw">Edit</button><a id="drawBackButton" class="btn btn-outline-primary" href="./">Exit Draw Mode</a>');
backButton.remove();
var myOffcanvas = document.getElementById("offcanvasDraw"); var myOffcanvas = document.getElementById("offcanvasDraw");
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas); var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);

View file

@ -44,14 +44,14 @@ function createInfoBlock(entry) {
let headerElement = document.createElement("h4"); let headerElement = document.createElement("h4");
headerElement.className = "card-header"; headerElement.className = "card-header";
let linkElement = document.createElement("a"); let linkElement = document.createElement("a");
linkElement.className = "text-decoration-none d-flex justify-content-between"; linkElement.className = "text-decoration-none d-flex justify-content-between text-body";
linkElement.href = "#" + entry.id; linkElement.href = "#" + entry.id;
let linkNameElement = document.createElement("span"); let linkNameElement = document.createElement("span");
linkNameElement.className = "flex-grow-1 text-break"; linkNameElement.className = "flex-grow-1 text-break";
linkNameElement.innerText = entry.name; linkNameElement.innerText = entry.name;
headerElement.appendChild(linkElement); headerElement.appendChild(linkElement);
linkElement.appendChild(linkNameElement); linkElement.appendChild(linkNameElement);
linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center"></i>');// '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-link-45deg ms-1 align-self-center flex-shrink-0" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>'); linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary"></i>');// '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-link-45deg ms-1 align-self-center flex-shrink-0" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>');
let bodyElement = document.createElement("div"); let bodyElement = document.createElement("div");

View file

@ -39,10 +39,13 @@
<nav class="navbar navbar-expand-md fixed-top bg-body border-bottom"> <nav class="navbar navbar-expand-md fixed-top bg-body border-bottom">
<div class="container"> <div class="container">
<a class="navbar-brand text-body" href="./"> <a class="navbar-brand text-body" href="./">
<img class="d-inline-block align-text-top me-2" src="./_img/logo.svg" height="32" width="32" alt=""> <picture>
<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">
<img class="d-inline-block align-text-top me-2" src="./_img/favicon.svg" height="32" width="32" alt="">
</picture>
The 2022 /r/place Atlas The 2022 /r/place Atlas
</a> </a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <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">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg> </svg>
@ -53,7 +56,10 @@
<a class="nav-link" href="./">Atlas Map</a> <a class="nav-link" href="./">Atlas Map</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">About</a> <a class="nav-link" href="https://place-wiki.stefanocoding.me/" >Wiki</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">About</a>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -86,10 +86,13 @@
<nav id="main-navbar" class="navbar navbar-expand-md fixed-top bg-body border-bottom"> <nav id="main-navbar" class="navbar navbar-expand-md fixed-top bg-body border-bottom">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand text-body" href="./"> <a class="navbar-brand text-body" href="./">
<img class="d-inline-block align-text-top me-2" src="./_img/logo.svg" height="32" width="32" alt=""> <picture>
<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">
<img class="d-inline-block align-text-top me-2" src="./_img/favicon.svg" height="32" width="32" alt="">
</picture>
The 2022 /r/place Atlas The 2022 /r/place Atlas
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <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">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg> </svg>
@ -103,7 +106,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<ul class="navbar-nav mx-auto"> <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"> <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> <span class="p-2">Coordinates: <span class="badge bg-secondary" id="coords_p">0, 0</span></span>
</li> </li>
@ -111,10 +114,13 @@
<hr class="d-md-none"> <hr class="d-md-none">
<ul class="navbar-nav flex-row flex-wrap ms-auto"> <ul class="navbar-nav flex-row flex-wrap ms-auto">
<li class="nav-item col-6 col-md-auto"> <li class="nav-item col-6 col-md-auto">
<a href="./" class="nav-link active" aria-current="page">Atlas Map</a> <a class="nav-link active" href="./" aria-current="page">Atlas Map</a>
</li> </li>
<li class="nav-item col-6 col-md-auto"> <li class="nav-item col-6 col-md-auto">
<a href="./about.html" class="nav-link">About</a> <a class="nav-link" href="https://place-wiki.stefanocoding.me/">Wiki</a>
</li>
<li class="nav-item col-6 col-md-auto">
<a class="nav-link" href="./about.html">About</a>
</li> </li>
</ul> </ul>
</div> </div>