Skip to content

Commit

Permalink
Tweak Options Header
Browse files Browse the repository at this point in the history
  • Loading branch information
@smashedr
smashedr committed Oct 26, 2024
1 parent 6990384 commit b88c9ed
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 42 deletions.
2 changes: 1 addition & 1 deletion src/css/options.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ body {
}

.dropdown-menu {
max-width: 86vw;
max-width: 90vw;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
59 changes: 26 additions & 33 deletions src/html/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,14 @@
<div class="m-auto pb-4 w-100">
<div id="options-wrapper" class="glass-outline blur rounded rounded-3 p-2 p-sm-3 m-auto w-100">

<div class="d-flex flex-row justify-content-center mb-2">
<div>
<a class="link-body-emphasis text-decoration-none fs-4" title="Home Page" href="homepage_url" target="_blank" rel="nofollow">
<span class="display-6">
<img src="../images/logo48.png" class="me-2" height="48" width="48" alt="Aviation Tools" title="Aviation Tools">
Aviation Tools
</span></a>
<a class="link-body-emphasis text-decoration-none small" title="Release Notes" href="version_url" target="_blank" rel="nofollow">
v<span class="version">0.0.0</span></a>
</div>
</div>
<div class="text-center mb-2">
<a class="link-body-emphasis text-decoration-none fs-4" title="Home Page" href="homepage_url" target="_blank" rel="nofollow">
<span class="display-6">
<img src="../images/logo48.png" class="me-2" height="48" width="48" alt="Aviation Tools" title="Aviation Tools">
Aviation Tools</span></a>
<a class="link-body-emphasis text-decoration-none small" title="Release Notes" href="version_url" target="_blank" rel="nofollow">
v<span class="version">0.0.0</span></a>
</div> <!-- header -->

<div class="d-flex flex-column flex-sm-row small">
<div id="jump-list">
Expand All @@ -40,16 +37,17 @@
<a href="#bookmarks-section" class="text-decoration-none">Bookmarks</a>
&bull;
<a href="#extension-section" class="text-decoration-none">Extension</a>
</div>
</div> <!-- jump-list -->
<div class="ms-sm-auto">
<a class="text-decoration-none" data-controls="collapse" role="button">
<i class="fa-solid fa-arrow-up-short-wide"></i> Collapse</a>
&bull;
<a class="text-decoration-none" data-controls="expand" role="button">
<i class="fa-solid fa-arrow-down-short-wide"></i> Expand</a>
</div>
</div>
</div> <!-- data-controls -->
</div> <!-- navigation -->

<!-- ++ keyboard-section -->
<div class="d-flex flex-row align-items-center justify-content-center my-2">
<hr class="w-100 my-0 me-2">
<span class="text-nowrap">Keyboard Shortcuts</span>
Expand All @@ -58,7 +56,6 @@
</div>
<hr class="w-100 my-0 ms-2">
</div>

<section id="keyboard-section">
<div id="table-wrapper" class="glass-bg rounded rounded-3 py-1 px-2 mb-2">
<table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover mb-1">
Expand All @@ -72,8 +69,7 @@
</tr>
</tfoot>
</table>
</div>

</div> <!-- table-wrapper -->
<div class="mb-2">
Manage Keyboard Shortcuts:
<a class="text-decoration-none d-inline-block d-none firefox" href="https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox" target="_blank" rel="noopener">
Expand All @@ -82,6 +78,7 @@
</div>
</section> <!-- keyboard-section -->

<!-- ++ search-section -->
<div class="d-flex flex-row align-items-center justify-content-center my-2">
<hr class="w-100 my-0 me-2">
<span class="text-nowrap">Search Defaults</span>
Expand All @@ -90,7 +87,6 @@
</div>
<hr class="w-100 my-0 ms-2">
</div>

<form class="options">
<section id="search-section">
<div class="row mb-3">
Expand Down Expand Up @@ -164,6 +160,7 @@ <h5>Airport Defaults</h5>
</div>
</section> <!-- search-section -->

<!-- ++ tools-section -->
<div class="d-flex flex-row align-items-center justify-content-center my-2">
<hr class="w-100 my-0 me-2">
<span class="text-nowrap">Tools</span>
Expand All @@ -172,7 +169,6 @@ <h5>Airport Defaults</h5>
</div>
<hr class="w-100 my-0 ms-2">
</div>

<section id="tools-section">
<div class="row mb-3">
<h5>Tools</h5>
Expand Down Expand Up @@ -213,9 +209,10 @@ <h5>Tools</h5>
</div>
</div>
</div>
</section> <!-- search-section -->
</section> <!-- tools-section -->
</form>

<!-- ++ bookmarks-section -->
<div class="d-flex flex-row align-items-center justify-content-center my-2">
<hr class="w-100 my-0 me-2">
<span class="text-nowrap">Bookmarks</span>
Expand All @@ -224,7 +221,6 @@ <h5>Tools</h5>
</div>
<hr class="w-100 my-0 ms-2">
</div>

<section id="bookmarks-section">
<form id="bookmarks-form">
<label class="form-label" for="newBookmark"><i class="fa-solid fa-book-bookmark me-2"></i> Add Bookmark</label>
Expand Down Expand Up @@ -262,6 +258,7 @@ <h5>Tools</h5>
</div>
</section> <!-- bookmarks-section -->

<!-- ++ extension-section -->
<div class="d-flex flex-row align-items-center justify-content-center my-2">
<hr class="w-100 my-0 me-2">
<span class="text-nowrap">Extension Options</span>
Expand All @@ -270,7 +267,6 @@ <h5>Tools</h5>
</div>
<hr class="w-100 my-0 ms-2">
</div>

<section id="extension-section">
<form class="options">
<div class="form-check form-switch">
Expand Down Expand Up @@ -314,13 +310,13 @@ <h5 class="mt-3">
<li><a class="dropdown-item text-ellipsis" role="button"
data-reset-input="pictureURL" data-value="https://picsum.photos/1920/1280">
https://picsum.photos/1920/1280</a></li>
<!-- <li><a class="dropdown-item text-ellipsis" role="button"-->
<!-- data-reset-input="pictureURL" data-value=" https://random-image-pepebigotes.vercel.app/api/random-image">-->
<!-- https://random-image-pepebigotes.vercel.app/api/random-image</a></li>-->
<li><a class="dropdown-item text-ellipsis" role="button"
data-reset-input="pictureURL" data-value=" https://random-image-pepebigotes.vercel.app/api/random-image">
https://random-image-pepebigotes.vercel.app/api/random-image</a></li>
</ul>
</div>
</div>
</form>
</form> <!-- options -->
</section> <!-- extension-section -->

<p class="fst-italic small mt-3">
Expand All @@ -338,19 +334,16 @@ <h5 class="mt-3">
<span class="mx-2">&bull;</span>
<a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
href="https://github.com/cssnr/aviation-tools/issues">Open Issue</a>
</div>
</div> <!-- footer -->

</div> <!-- options-wrapper -->
</div> <!-- m-auto -->
</div> <!-- d-flex -->

<div id="pin-notice" class="text-center bounce p-2 d-none">
<i class="fa-solid fa-hand-point-up"></i>
<br>
To Add to Toolbar
<br>
Click the <i class="fa-solid fa-puzzle-piece mx-1"></i> Icon then
<br>
<i class="fa-solid fa-hand-point-up"></i><br>
To Add to Toolbar<br>
Click the <i class="fa-solid fa-puzzle-piece mx-1"></i> Icon then<br>
<span>
Find the
<img src="../images/logo16.png" class="mx-1 mb-1" alt="ASN Plus" title="ASN Plus" style="height: 1.1em;">
Expand Down
11 changes: 4 additions & 7 deletions src/html/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
<!-- <li id="no-bookmarks"><a class="dropdown-item" href="../html/options.html">No Saved Bookmarks</a></li>-->
</ul>
</div>
</div>
</div> <!-- btn-group -->

<button type="submit" form="search-form" class="visually-hidden"></button>

Expand All @@ -78,17 +78,15 @@
<button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul id="airport" class="dropdown-menu"></ul>
</div>
</div>
</div> <!-- btn-group -->

<form id="search-form">

<div class="row mb-2">
<div class="col">
<label for="searchTerm" class="visually-hidden"></label>
<input id="searchTerm" class="form-control form-control-lg" type="text" placeholder="" required>
</div>
</div>

<div class="row mb-2">
<div class="col text-center fs-5">
<div class="form-check form-check-inline">
Expand All @@ -105,8 +103,7 @@
</div>
</div>
</div>

</form>
</form> <!-- search-form -->

<hr class="my-2">

Expand All @@ -121,7 +118,7 @@
<label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
<i class="fa-solid fa-circle-info ms-1" data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update."></i>
</div>
</form>
</form> <!-- options -->

<a class="btn btn-outline-info w-100" role="button" href="../html/options.html">
<i class="fa-solid fa-sliders me-2"></i> More Options</a>
Expand Down
2 changes: 1 addition & 1 deletion src/js/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function jumpClick(event) {
// `[data-section="${hash.substring(1)}"]`
// ).textContent = 'hide'
jq.css('outline', '#00c800 dashed 2px')
setTimeout(() => jq.css('outline', ''), 1500)
setTimeout(() => jq.css('outline', ''), 1400)
}

function hideShowAll(event) {
Expand Down

0 comments on commit b88c9ed

Please sign in to comment.