Skip to content

Commit

Permalink
Update Layout (#13)
Browse files Browse the repository at this point in the history
  • Loading branch information
@smashedr
smashedr authored Jul 7, 2024
1 parent 5354a04 commit 7c3b69d
Show file tree
Hide file tree
Showing 7 changed files with 118 additions and 102 deletions.
9 changes: 9 additions & 0 deletions src/_config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,15 @@ url: https://open-links-in-new-tab.cssnr.com
author: Shane
site_name: Open Links in New Tab

menu:
- name: Home
link: /
- name: Docs
link: /docs/
- name: Screen Shots
link: /screenshots/
external: true

github_name: cssnr/open-links-in-new-tab
github_url: https://github.com/cssnr/open-links-in-new-tab

Expand Down
56 changes: 27 additions & 29 deletions src/_layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<body class="d-flex flex-column h-100">

<header>
<nav class="navbar navbar-expand-sm" aria-label="Primary Navigation">
<nav class="navbar navbar-expand-sm bg-body-tertiary mb-2" aria-label="Primary Navigation">
<div class="container-fluid">
<a class="mx-2" href="{{ "/" | relative_url }}">
<img src="{{ "/media/logo.png" | relative_url }}" width="24" height="24" alt="logo" class="my-auto"></a>
Expand All @@ -49,57 +49,55 @@
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item"><a class="nav-link {% if page.title == 'Home' %}active{% endif %}" href="{{ "/" | relative_url }}">
Home</a></li>
<li class="nav-item"><a class="nav-link {% if page.title == 'Docs' %}active{% endif %}" href="{{ "/docs/" | relative_url }}">
Docs</a></li>
<li class="nav-item"><a class="nav-link" href="{{ "/screenshots/" | relative_url }}" target="_blank">
Screen Shots <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li class="nav-item"><a class="nav-link" href="{{ site.github_url }}" target="_blank" rel="noopener">
GitHub <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a></li>
<div class="collapse navbar-collapse me-auto " id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
{% for item in site.menu %}
<li class="nav-item">
<a class="nav-link {% if page.title == item.name %}active{% endif %}"
href="{{ item.link | relative_url }}" {% if item.external %}target="_blank"{% endif %}>
{{ item.name }}{% if item.external %} <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i>{% endif %}</a>
</li>
{% endfor %}
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="{{ site.discord_invite }}" target="_blank" rel="noopener">
Discord <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li class="nav-item"><a class="nav-link" href="{{ site.github_url }}" target="_blank" rel="noopener">
GitHub <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>

<main class="flex-grow-1 px-3">
<main class="flex-grow-1 px-2 px-sm-3">
{{ content }}
<div class="clearfix"></div>
</main>

<footer class="footer mt-auto px-1 flex-shrink-0">
<div class="container-fluid">
<div class="d-flex flex-column flex-md-row py-2">
<footer class="footer mt-auto px-1 flex-shrink-0 bg-body-tertiary">
<div class="container-fluid py-2">
<div class="d-flex flex-column flex-md-row">
<div class="me-md-auto">
<a class="link-body-emphasis text-decoration-none" href="{{ site.github_url }}" target="_blank" rel="noopener">
<i class="fab fa-github"></i> {{ site.site_name }}</a>
</div>
<div class="ms-md-auto">
<nav aria-label="Secondary Navigation">
<ol class="list-inline mb-1">
<li class="list-inline-item">
<a class="link-body-emphasis text-decoration-none {% if page.title == 'Home' %}fw-bold{% endif %}" href="{{ "/" | relative_url }}">
Home</a>
</li>
<li class="list-inline-item">
<a class="link-body-emphasis text-decoration-none {% if page.title == 'Docs' %}fw-bold{% endif %}" href="{{ "/docs/" | relative_url }}">
Docs</a>
</li>
<li class="list-inline-item">
<a class="link-body-emphasis text-decoration-none" href="{{ "/screenshots/" | relative_url }}" target="_blank">
Screen Shots <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a>
</li>
<ol class="list-inline mb-1 d-flex flex-column flex-sm-row">
{% for item in site.menu %}
<li class="list-inline-item">
<a class="link-body-emphasis text-decoration-none {% if page.title == item.name %}fw-bold{% endif %}"
href="{{ item.link | relative_url }}" {% if item.external %}target="_blank"{% endif %}>
{{ item.name }}{% if item.external %} <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i>{% endif %}</a>
</li>
{% endfor %}
<li class="list-inline-item">
<a class="link-body-emphasis text-decoration-none" href="{{ site.discord_invite }}" target="_blank">
Discord <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i></a>
</li>
</ol>
</nav>

</div>
</div>
</div>
Expand Down
8 changes: 5 additions & 3 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
width: 100%;
}

footer li + li::before {
content: '| ';
margin-right: 8px;
@media (min-width: 576px) {
footer li + li::before {
content: '•';
margin-right: 0.3rem;
}
}
6 changes: 5 additions & 1 deletion src/html/docs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@

<h1><i class="fa-regular fa-file-lines"></i> {{ page.title }}</h1>

<p class="lead"><a href="#configure">Configure</a> | <a href="#usage">Usage</a> | <a href="#options">Options</a></p>
<p class="lead">
<a href="#configure" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover">Configure</a> &bull;
<a href="#usage" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover">Usage</a> &bull;
<a href="#options" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover">Options</a>
</p>

<div id="feedback" class="alert alert-success d-none" role="alert">
<p>Thank you for providing feedback. If you provided details we will look into them.</p>
Expand Down
45 changes: 25 additions & 20 deletions src/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@
<h1><i class="fa-solid fa-up-right-from-square"></i> {{ site.site_name }}</h1>

<div class="mb-2" style="min-height: 20px;">
<a href="{{ site.chrome_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/chrome-web-store/users/{{ site.chrome_id }}?logo=google&logoColor=white&label=google%20users" alt="Chrome Web Store Users" style="max-width: 100%;"></a>
<a href="{{ site.firefox_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/amo/users/{{ site.firefox_id }}?logo=mozilla&label=mozilla%20users" alt="Mozilla Add-on Users" style="max-width: 100%;"></a>
<a href="{{ site.chrome_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/chrome-web-store/rating/{{ site.chrome_id }}?logo=google&logoColor=white" alt="Chrome Web Store Users" style="max-width: 100%;"></a>
<a href="{{ site.firefox_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/amo/rating/{{ site.firefox_id }}?logo=mozilla&logoColor=white" alt="Mozilla Add-on Users" style="max-width: 100%;"></a>
<a href="{{ site.chrome_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/chrome-web-store/v/{{ site.chrome_id }}?label=chrome&logo=googlechrome" alt="Chrome Web Store Version" style="max-width: 100%;"></a>
<a href="{{ site.firefox_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/amo/v/{{ site.firefox_id }}?label=firefox&logo=firefox" alt="Mozilla Add-on Version" style="max-width: 100%;"></a>
<a href="{{ site.github_url }}/releases/latest" rel="nofollow" target="_blank">
<img src="https://img.shields.io/github/v/release/{{ site.github_name }}?logo=github" alt="GitHub Release Version" style="max-width: 100%;"></a>
<a href="{{ site.chrome_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/chrome-web-store/users/{{ site.chrome_id }}?logo=google&logoColor=white&label=google%20users" alt="Chrome Web Store Users" style="max-width: 100%;"></a>
<a href="{{ site.firefox_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/amo/users/{{ site.firefox_id }}?logo=mozilla&label=mozilla%20users" alt="Mozilla Add-on Users" style="max-width: 100%;"></a>
<a href="{{ site.chrome_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/chrome-web-store/rating/{{ site.chrome_id }}?logo=google&logoColor=white" alt="Chrome Web Store Users" style="max-width: 100%;"></a>
<a href="{{ site.firefox_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/amo/rating/{{ site.firefox_id }}?logo=mozilla&logoColor=white" alt="Mozilla Add-on Users" style="max-width: 100%;"></a>
<a href="{{ site.chrome_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/chrome-web-store/v/{{ site.chrome_id }}?label=chrome&logo=googlechrome" alt="Chrome Web Store Version" style="max-width: 100%;"></a>
<a href="{{ site.firefox_url }}" rel="nofollow" target="_blank">
<img src="https://img.shields.io/amo/v/{{ site.firefox_id }}?label=firefox&logo=firefox" alt="Mozilla Add-on Version" style="max-width: 100%;"></a>
<a href="{{ site.github_url }}/releases/latest" rel="nofollow" target="_blank">
<img src="https://img.shields.io/github/v/release/{{ site.github_name }}?logo=github" alt="GitHub Release Version" style="max-width: 100%;"></a>
<a href="{{ site.discord_invite }}" title="GitHub" target="_blank" rel="noopener">
<img src="https://img.shields.io/discord/899171661457293343?logo=discord&logoColor=white&label=discord&color=7289da" alt="Join Discord" style="max-width: 100%;"></a>
</div>
Expand Down Expand Up @@ -83,11 +83,16 @@ <h2>Install</h2>
<h2>Support</h2>

<p>
Please submit an
<a href="{{ site.github_url }}/issues" target="_blank">Issue</a>
if you find bugs and open a
<a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank">Feature Request</a>
if you have any ideas, suggestions, or requests.
For usage instructions, head over to the
<a href="{{ "/docs/" | relative_url }}" class="link-body-emphasis link-offset-1 link-underline-opacity-50 link-underline-opacity-75-hover">
Documentation</a>.
</p>

<p>For usage instructions, head over to the <a href="{{ "/docs/" | relative_url }}">documentation</a>.</p>
<p>
If you find any bugs please
<a href="{{ site.github_url }}/issues" target="_blank" rel="noopener">Open an Issue</a>.
If you have any ideas, suggestions, or requests; submit a
<a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">Feature Request</a>.
You may also get support on the
<a href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord Server</a>.
</p>
94 changes: 46 additions & 48 deletions src/html/uninstall.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,55 +8,53 @@
---

<div class="d-flex align-items-center h-100">
<div class="d-flex flex-grow-1 justify-content-center align-items-center w-100 my-2">
<div class="col-sm-12 col-md-10 col-lg-8 col-xxl-6 m-auto">
<div id="login-outer" class="m-auto p-3 rounded rounded-4">
<div class="justify-content-center align-items-center mb-2 d-flex">
<img src="{{ "/media/logo.png" | relative_url }}" class="img-fluid float-start me-2" alt="{{ site.site_name }}" height="42" width="42">
<h1 class="align-middle mb-0">{{ site.site_name }}</h1>
</div>
<p class="text-center">
Please let us know why you uninstalled {{ site.site_name }}.
<br>
<span class="fs-4">
All <a href="{{ site.github_url }}/issues" target="_blank" rel="noopener">bugs that get reported</a> <b>will be fixed!</b>
</span>
<br>
Any <a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">Feature Requests</a> are appreciated.
Support is also available on <a href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord</a>.
</p>
{% include alerts.html %}
<form id="uninstall-form">
<input type="hidden" value="{{ site.discord_webhook }}" id="discord-webhook" hidden="hidden">
<div class="form-check form-switch fs-5">
<input class="form-check-input" type="checkbox" role="switch" id="not-used">
<label class="form-check-label text-success-emphasis" for="not-used">Do Not Need or Not Used</label>
</div>
<div class="form-check form-switch fs-5">
<input class="form-check-input" type="checkbox" role="switch" id="not-expected">
<label class="form-check-label text-warning-emphasis" for="not-expected">Does Not Work as Expected</label>
</div>
<div class="form-check form-switch fs-5">
<input class="form-check-input" type="checkbox" role="switch" id="not-working">
<label class="form-check-label text-danger-emphasis" for="not-working">Not Working or Broken</label>
</div>
<div id="not-working-extra" class="alert alert-warning text-center p-2 mt-2 mb-0 d-none">
Please provide a <strong>link to the site</strong> that is not functioning and we will investigate.
</div>
<div class="my-2">
<label for="uninstall-response" class="form-label visually-hidden">Uninstall Feedback</label>
<textarea class="form-control" id="uninstall-response" rows="4" maxlength="1000"
placeholder="Optional Feedback. Bugs, Missing Features, etc..." autofocus></textarea>
<span id="inputCounter" class="float-end label label-default"><span id="input-count">0</span> / 1000</span>
</div>
<button id="submit-btn" class="btn btn-success w-100" type="submit">
Submit Feedback <i class="fa-regular fa-comment-dots ms-2"></i></button>
</form>
<div id="error-alert" class="alert alert-danger alert-dismissible fade show text-center mt-3" role="alert" style="display: none;"></div>
<div class="col-sm-12 col-md-10 col-lg-8 col-xxl-6 m-auto">
<div id="login-outer" class="py-3 px-1 px-sm-3 mb-3 me-1 rounded rounded-4">
<div class="justify-content-center align-items-center d-flex">
<img src="{{ "/media/logo.png" | relative_url }}" class="img-fluid float-start me-2" alt="{{ site.site_name }}" height="42" width="42">
<h1 class="align-middle mb-0">{{ site.site_name }}</h1>
</div>
</div>
</div>
</div>
<p class="text-center mb-2">
Please let us know why you uninstalled {{ site.site_name }}.
<br>
<span class="fs-4">
All <a href="{{ site.github_url }}/issues" target="_blank" rel="noopener">bugs that get reported</a> <span class="d-inline-block fw-bold">will be fixed!</span>
</span>
<br>
Any <a href="{{ site.github_url }}/discussions/categories/feature-requests" target="_blank" rel="noopener">Feature Requests</a> are appreciated.
Support is also available on <a href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord</a>.
</p>
{% include alerts.html %}
<form id="uninstall-form">
<input type="hidden" value="{{ site.discord_webhook }}" id="discord-webhook" hidden="hidden">
<div class="form-check form-switch fs-5">
<input class="form-check-input" type="checkbox" role="switch" id="not-used">
<label class="form-check-label text-success-emphasis" for="not-used">Do Not Need or Not Used</label>
</div>
<div class="form-check form-switch fs-5">
<input class="form-check-input" type="checkbox" role="switch" id="not-expected">
<label class="form-check-label text-warning-emphasis" for="not-expected">Does Not Work as Expected</label>
</div>
<div class="form-check form-switch fs-5">
<input class="form-check-input" type="checkbox" role="switch" id="not-working">
<label class="form-check-label text-danger-emphasis" for="not-working">Not Working or Broken</label>
</div>
<div id="not-working-extra" class="alert alert-warning text-center p-2 mt-2 mb-0 d-none">
Please provide a <strong>link to the site</strong> that is not functioning.
</div>
<div class="my-2">
<label for="uninstall-response" class="form-label visually-hidden">Uninstall Feedback</label>
<textarea class="form-control" id="uninstall-response" rows="4" maxlength="1000"
placeholder="Optional Feedback. Bugs, Missing Features, etc..." autofocus></textarea>
<span id="inputCounter" class="float-end label label-default"><span id="input-count">0</span> / 1000</span>
</div>
<button id="submit-btn" class="btn btn-success w-100" type="submit">
Submit Feedback <i class="fa-regular fa-comment-dots ms-2"></i></button>
</form>
<div id="error-alert" class="alert alert-danger alert-dismissible fade show text-center mt-3" role="alert" style="display: none;"></div>
</div> <!-- login-outer -->
</div> <!-- col -->
</div> <!-- d-flex -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.37/ua-parser.min.js" integrity="sha512-LAchvH0Y4sxYM1ouOaqHQ6WbSXvOgkioPaiyW0oPOFNNMNfpsBEpvzYmsxgDf8pQM/fMaMdxYP/nFenquTAkdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="{{ "/js/uninstall.js" | relative_url }}"></script>
2 changes: 1 addition & 1 deletion src/js/uninstall.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ redirect.pathname = '/docs/'

const version = url.searchParams.get('version') || 'unknown'

const noAlertVersion = '0.2.0'
const noAlertVersion = '0.2.2'
const discordUsername = 'Open Links in New Tab'
const uninstallMessage = `${discordUsername} Uninstall, Version: **${version}**`
const discordAvatar = 'https://link-extractor.cssnr.com/media/logo.png'
Expand Down

0 comments on commit 7c3b69d

Please sign in to comment.