visual fixes

This commit is contained in:
Joey Kimsey
2024-12-20 14:10:31 -05:00
parent 1c5b020a87
commit 87e4f90bab
9 changed files with 41 additions and 32 deletions

View File

@ -12,6 +12,9 @@
.context-main { .context-main {
color: #fff; color: #fff;
} }
.context-second {
color: #1e1e1e;
}
.context-main-bg { .context-main-bg {
background-color: #2c2c2c; background-color: #2c2c2c;
} }

View File

@ -1,5 +1,4 @@
<div class="col-8 mx-auto p-4 rounded shadow-sm mb-5 context-main-bg mt-4 container">
<div class="col-8 mx-auto p-4 rounded shadow-sm mb-5 context-main-bg mt-4 container">
<h2 class="text-center mb-4">Bug Report</h2> <h2 class="text-center mb-4">Bug Report</h2>
<p>Thank you for visiting our bug reporting page. We value our users' input highly and in an effort to better serve your needs, please fill out the form below to help us address this issue.</p> <p>Thank you for visiting our bug reporting page. We value our users' input highly and in an effort to better serve your needs, please fill out the form below to help us address this issue.</p>
<p>We read each and every bug report submitted, and by submitting this form you allow us to send you a follow-up email.</p> <p>We read each and every bug report submitted, and by submitting this form you allow us to send you a follow-up email.</p>

View File

@ -130,8 +130,10 @@ class Notification extends DatabaseModel {
} }
if ( $message->seenAt == 0 ) { if ( $message->seenAt == 0 ) {
$message->unseenBadge = Views::simpleView( 'notifications.unseenBadge' ); $message->unseenBadge = Views::simpleView( 'notifications.unseenBadge' );
$message->markReadLink = '<a href="{ROOT_URL}notifications/markRead/'.$message->ID.'" class="btn btn-sm btn-primary"><i class="fa-solid fa-fw fa-envelope-open"></i></a>';
} else { } else {
$message->unseenBadge = ''; $message->unseenBadge = '';
$message->markReadLink = '';
} }
$out[] = (object) $message; $out[] = (object) $message;
if ( !empty( $end ) ) { if ( !empty( $end ) ) {

View File

@ -1,8 +1,7 @@
<div class="col-8 mx-auto p-4 rounded shadow-sm context-main-bg my-4">
<div class="container py-4">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-8"> <div class="col-md-8">
<legend>Notifications</legend> <legend class="text-center">Notifications</legend>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -14,14 +13,20 @@
<tbody> <tbody>
{LOOP} {LOOP}
<tr {unseenBadge}> <tr {unseenBadge}>
<td>{notification}</td> <td class=" context-main">{notification}</td>
<td><a href="{ROOT_URL}notifications/markRead/{ID}" class="btn btn-sm btn-primary"><i class="fa fa-fw fa-upload"></i></a></td> <td>
<td><a href="{ROOT_URL}notifications/delete/{ID}" class="btn btn-sm btn-danger"><i class="fa fa-fw fa-trash"></i></a></td> {markReadLink}
</td>
<td>
<a href="{ROOT_URL}notifications/delete/{ID}" class="btn btn-sm btn-danger">
<i class="fa fa-fw fa-trash"></i>
</a>
</td>
</tr> </tr>
{/LOOP} {/LOOP}
{ALT} {ALT}
<tr> <tr>
<td colspan="7"> <td colspan="7" class=" context-main">
No Notifications No Notifications
</td> </td>
</tr> </tr>

View File

@ -1,4 +1,4 @@
<div class="col-8 mx-auto p-4 rounded shadow-sm mb-5 context-main-bg mt-4"> <div class="col-8 mx-auto p-4 rounded shadow-sm context-main-bg my-4">
<h2 class="text-center text-primary mb-4">Welcome to AllTheBookmarks</h2> <h2 class="text-center text-primary mb-4">Welcome to AllTheBookmarks</h2>
<p class="lead"> <p class="lead">
AllTheBookmarks was built out of a need to manage my own bookmarks better. As a web developer, I would not only use URLs for every aspect of my job, but I also needed to switch browsers, operating systems, or devices. For years, I had a version of this tool that I used on my own local network. In 2025, I'm bringing it to anyone who wants it. AllTheBookmarks was built out of a need to manage my own bookmarks better. As a web developer, I would not only use URLs for every aspect of my job, but I also needed to switch browsers, operating systems, or devices. For years, I had a version of this tool that I used on my own local network. In 2025, I'm bringing it to anyone who wants it.

View File

@ -1,4 +1,4 @@
<div class="container py-5 context-main-bg my-5"> <div class="container p-4 context-main-bg my-4">
<h1 class="mb-4">Frequently Asked Questions</h1> <h1 class="mb-4">Frequently Asked Questions</h1>
<hr> <hr>
@ -6,59 +6,59 @@
<div class="mb-5"> <div class="mb-5">
<h2 class="h4">Table of Contents</h2> <h2 class="h4">Table of Contents</h2>
<ul class="list-unstyled"> <ul class="list-unstyled">
<li><a href="#question1" class="text-decoration-none">Does this work on mobile?</a></li> <li><a href="#question1" class="text-decoration-none context-main">Does this work on mobile?</a></li>
<li><a href="#question2" class="text-decoration-none">Does this work on Mac/PC/Linux?</a></li> <li><a href="#question2" class="text-decoration-none context-main">Does this work on Mac/PC/Linux?</a></li>
<li><a href="#question3" class="text-decoration-none">How do I use the extension on my mobile device?</a></li> <li><a href="#question3" class="text-decoration-none context-main">How do I use the extension on my mobile device?</a></li>
<li><a href="#question4" class="text-decoration-none">How do I add this to my phone like an app?</a></li> <li><a href="#question4" class="text-decoration-none context-main">How do I add this to my phone like an app?</a></li>
</ul> </ul>
</div> </div>
<!-- Accordion for Questions --> <!-- Accordion for Questions -->
<div class="accordion" id="faqAccordion"> <div class="accordion" id="faqAccordion">
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="heading1"> <h2 class="accordion-header context-second-bg" id="heading1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"> <button class="accordion-button context-main context-main-bg" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
Does this work on mobile? Does this work on mobile?
</button> </button>
</h2> </h2>
<div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#faqAccordion"> <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#faqAccordion">
<div class="accordion-body" id="question1"> <div class="ml-5 accordion-body context-main context-main-bg" id="question1">
Yes, this works seamlessly on mobile devices. Yes, this works seamlessly on mobile devices.
</div> </div>
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="heading2"> <h2 class="accordion-header context-main context-second-bg" id="heading2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
Does this work on Mac/PC/Linux? Does this work on Mac/PC/Linux?
</button> </button>
</h2> </h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#faqAccordion"> <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#faqAccordion">
<div class="accordion-body" id="question2"> <div class="accordion-body context-main context-main-bg" id="question2">
Yes, it is compatible with Mac, PC, and Linux platforms. Yes, it is compatible with Mac, PC, and Linux platforms.
</div> </div>
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="heading3"> <h2 class="accordion-header context-main context-second-bg" id="heading3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
How do I use the extension on my mobile device? How do I use the extension on my mobile device?
</button> </button>
</h2> </h2>
<div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#faqAccordion"> <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#faqAccordion">
<div class="accordion-body" id="question3"> <div class="accordion-body context-main context-main-bg" id="question3">
To use the extension on mobile, open your browser, install the extension, and follow the setup instructions. To use the extension on mobile, open your browser, install the extension, and follow the setup instructions.
</div> </div>
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="heading4"> <h2 class="accordion-header context-main context-second-bg" id="heading4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4"> <button class="accordion-button context-main context-main-bg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
How do I add this to my phone like an app? How do I add this to my phone like an app?
</button> </button>
</h2> </h2>
<div id="collapse4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#faqAccordion"> <div id="collapse4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#faqAccordion">
<div class="accordion-body" id="question4"> <div class="accordion-body context-main context-main-bg" id="question4">
You can add it to your phone by installing the app or creating a shortcut from your browser to your home screen. You can add it to your phone by installing the app or creating a shortcut from your browser to your home screen.
</div> </div>
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="col-6 col-md-2 mb-3"> <div class="col-6 col-md-2 mb-3 text-center">
<h5>More Info</h5> <h5>More Info</h5>
<ul class="nav flex-column"> <ul class="nav flex-column">
{LOOP} {LOOP}

View File

@ -1,4 +1,4 @@
<div class="col-6 col-md-2 mb-3"> <div class="col-6 col-md-2 mb-3 text-center">
<h5>Contact Us</h5> <h5>Contact Us</h5>
<ul class="nav flex-column"> <ul class="nav flex-column">
{LOOP} {LOOP}

View File

@ -1,6 +1,6 @@
<div class="col-6 col-md-2 mb-3"> <div class="col-6 col-md-2 mb-3 text-center">
<h5>Dark Mode</h5> <h5>Dark Mode</h5>
<div class="material-switch px-4"> <div class="material-switch px-4 mt-2">
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" class="form-check-input"> <input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" class="form-check-input">
<label for="dark-mode-toggle" class="label-default"></label> <label for="dark-mode-toggle" class="label-default"></label>
</div> </div>