More compact search bar and other fixes

This commit is contained in:
mxdanger 2022-05-05 16:05:13 -07:00
parent c3e473179a
commit c044528f8a
2 changed files with 13 additions and 8 deletions

View file

@ -55,7 +55,7 @@ .navbar {
}
.offcanvas {
top: 3.7rem;
top: 3.7rem !important;
padding-left: env(safe-area-inset-left);
}
@ -82,7 +82,6 @@ #linesCanvas {
left: 0;
top: 0;
height: 100%;
/*width: calc(100% - 320px);*/
width: 100%;
z-index: -500;
}
@ -142,6 +141,10 @@ #highlightCanvas {
image-rendering: pixelated;
}
#searchList {
width: 25%;
}
#objectsList {
max-width: 300px;
width: 100%;
@ -186,6 +189,9 @@ @media (max-width: 750px) {
#wrapper:not(.listHidden) > #closeObjectsListButton {
display: none;
}
#wrapper:not(.listHidden) > #objectsListOverflowNotice {
display: none;
}
}
@media (max-width: 576px) {

View file

@ -213,10 +213,10 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
</div>
<div id="entriesListControls" class="d-flex flex-column gap-2 p-3 bg-secondary bg-opacity-10 rounded">
<span id="atlasSize"></span>
<div class="input-group">
<input autofocus class="form-control" id="searchList" type="search" placeholder="Search…" autocomplete="off" spellcheck="false" aria-describedby="atlasSize">
<div class="d-flex align-items-center gap-2">
<label for="sort">Sort:</label>
<select class="form-select" id="sort" title="Sort entries">
<label for="sort" class="visually-hidden">Sort entries</label>
<select class="form-select" id="sort">
<option selected value="shuffle">Random</option>
<option value="relevant" id="relevantOption" disabled>Relevant</option>
<option value="alphaAsc" label="↓ Alphabetical">Descending Alphabetical</option>
@ -241,7 +241,6 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
<button type="button" class="btn btn-secondary" id="zoomOutButton" title="Zoom out">
<i class="bi bi-dash-lg" aria-hidden="true"></i>
</button>
</div>
<div id="variantControls">
<div class="input-group">
@ -260,7 +259,7 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
</datalist>
</div>
<div id="author" class="bg-body d-flex align-items-center justify-content-center py-1 px-2 rounded shadow" style="--bs-bg-opacity: .9;">
<span style="font-size: 0.75rem;">Code owned by <a href="https://github.com/placeAtlas" target="_blank" rel="noopener noreferrer">Place Atlas</a>. Source on <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">GitHub</a>. Site powered by <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">Netlify</a>.</span>
<span style="font-size: 0.7rem;">Code by <a href="https://github.com/placeAtlas" target="_blank" rel="noopener noreferrer">Place Atlas</a>. Source on <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">GitHub</a>. Site powered by <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">Netlify</a>.</span>
</div>
</div>
<div class="offcanvas offcanvas-start bg-body" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasDraw" aria-labelledby="offcanvasDrawLabel">