update to bootstrap 5.2.3 continued

This commit is contained in:
Joey Kimsey
2024-12-10 01:46:00 -05:00
parent b3018de907
commit f3f323d30f
23 changed files with 279 additions and 155 deletions

View File

@ -335,9 +335,14 @@ class Plugin {
}
public function loadFooterNav() {
if ( !empty( $this->footer_links ) ) {
foreach( $this->footer_links as $key => $link ) {
Navigation::addLink( App::FOOTER_MENU_NAME, $link );
if ( !empty( $this->contact_footer_links ) ) {
foreach( $this->contact_footer_links as $key => $link ) {
Navigation::addLink( App::CONTACT_FOOTER_MENU_NAME, $link );
}
}
if ( !empty( $this->info_footer_links ) ) {
foreach( $this->info_footer_links as $key => $link ) {
Navigation::addLink( App::INFO_FOOTER_MENU_NAME, $link );
}
}
}

View File

@ -13,16 +13,10 @@ html {
position: relative;
min-height: 100%;
}
body {
margin-top: 100px;
}
pre {
white-space: pre-wrap;
}
@media ( min-width: 768px ) {
body {
margin-top: 75px;
}
.main {
padding-right: 40px;
padding-left: 40px;
@ -578,4 +572,118 @@ ul.alert-dropdown {
.material-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px;
}
body {
background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.pricing-header {
max-width: 700px;
}
.pricing-container {
max-width: 960px;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.form-control-dark {
border-color: var(--bs-gray);
}
.form-control-dark:focus {
border-color: #fff;
box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}
.text-small {
font-size: 85%;
}
.dropdown-toggle {
outline: 0;
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.feature-icon {
width: 4rem;
height: 4rem;
border-radius: .75rem;
}
.icon-link > .bi {
margin-top: .125rem;
margin-left: .125rem;
fill: currentcolor;
transition: transform .25s ease-in-out;
}
.icon-link:hover > .bi {
transform: translate(.25rem);
}
.icon-square {
width: 3rem;
height: 3rem;
border-radius: .75rem;
}
.text-shadow-1 {
text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
}
.text-shadow-2 {
text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25);
}
.text-shadow-3 {
text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
.card-cover {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.feature-icon-small {
width: 3rem;
height: 3rem;
}

View File

@ -32,7 +32,7 @@ class Blog extends Plugin {
'url' => '{ROOT_URL}admin/blog',
],
];
public $footer_links = [
public $info_footer_links = [
[
'text' => 'Blog',
'url' => '{ROOT_URL}blog/index',

View File

@ -49,7 +49,7 @@ class Bugreport extends Plugin {
'default' => false,
],
];
public $footer_links = [
public $contact_footer_links = [
[
'text' => 'Bug Report',
'url' => '{ROOT_URL}bugreport',

View File

@ -45,7 +45,7 @@ class Feedback extends Plugin {
'default' => false,
],
];
public $footer_links = [
public $contact_footer_links = [
[
'text' => 'Feedback',
'url' => '{ROOT_URL}feedback',

View File

@ -48,9 +48,8 @@ class Messages extends Plugin {
} else {
Components::set( 'RECENT_MESSAGES', '' );
}
App::$topNavRight .= '{RECENT_MESSAGES}';
App::$topNavRightDropdown .= '<li><a href="{ROOT_URL}messages"><i class="fa fa-fw fa-envelope"></i> Inbox {MBADGE}</a></li>';
App::$topNavRightDropdown .= '<li><a href="{ROOT_URL}messages" class="dropdown-item"><i class="fa fa-fw fa-envelope"></i> Inbox {MBADGE}</a></li>';
self::$loaded = true;
}
parent::__construct();

View File

@ -1,15 +1,14 @@
<li class="dropdown nav-item">
<div class="dropdown nav-item mx-2">
<a
href="#"
class="nav-link dropdown-toggle"
class="d-block dropdown-toggle nav-link"
id="messagesDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>{MBADGE}
<i class="fa fa-fw fa-envelope"></i><span class="ml-3">{MBADGE}</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="messagesDropdown">
<ul class="dropdown-menu text-small" aria-labelledby="messagesDropdown">
<li class="message-header">
<div class="media">
<div class="media-body text-center" style="padding-bottom: 10px; padding-top: 10px">
@ -44,7 +43,7 @@
</li>
{/ALT}
<li class="message-footer text-center">
<a href="{ROOT_URL}messages">Read All New Messages</a>
<a href="{ROOT_URL}messages" class="dropdown-item">Read All New Messages</a>
</li>
</ul>
</li>
</div>

View File

@ -56,7 +56,7 @@ class Notifications extends Plugin {
Components::set( 'recentNotifications', '' );
}
App::$topNavRight .= '{recentNotifications}';
App::$topNavRightDropdown .= '<li><a href="{ROOT_URL}notifications"><i class="fa fa-fw fa-bell"></i> Notifications {NBADGE}</a></li>';
App::$topNavRightDropdown .= '<li><a href="{ROOT_URL}notifications" class="dropdown-item"><i class="fa fa-fw fa-bell"></i> Notifications {NBADGE}</a></li>';
self::$loaded = true;
}
}

View File

@ -1,14 +1,14 @@
<li class="dropdown nav-item">
<div class="dropdown nav-item mx-2">
<a
href="#"
class="nav-link dropdown-toggle"
class="d-block dropdown-toggle nav-link"
id="notiificationsDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-fw fa-bell"></i>{NBADGE}
<i class="fa fa-fw fa-bell"></i><span class="ml-3">{MBADGE}</span>
</a>
<ul class="dropdown-menu dropdown-menu-end message-dropdown" aria-labelledby="notiificationsDropdown">
<ul class="dropdown-menu text-small" aria-labelledby="notiificationsDropdown">
{LOOP}
<li class="message-preview">
<a href="{ROOT_URL}notifications">
@ -31,7 +31,7 @@
</li>
{/ALT}
<li class="message-footer text-center">
<a href="{ROOT_URL}notifications">See All Notifications</a>
<a href="{ROOT_URL}notifications" class="dropdown-item">See All Notifications</a>
</li>
</ul>
</li>
</div>

View File

@ -21,6 +21,7 @@ use TheTempusProject\Houdini\Classes\Views;
use TheTempusProject\TheTempusProject as App;
class Subscribe extends Plugin {
private static $loaded = false;
public $pluginName = 'TP Subscribe';
public $pluginAuthor = 'JoeyK';
public $pluginWebsite = 'https://TheTempusProject.com';
@ -36,6 +37,9 @@ class Subscribe extends Plugin {
public function __construct( $load = false ) {
parent::__construct( $load );
Components::set( 'FOOTER_RIGHT', Views::simpleView( 'subscribe.footer.right') );
if ( ! self::$loaded ) {
Components::append( 'FOOTER_RIGHT', Views::simpleView( 'subscribe.footer.right') );
self::$loaded = true;
}
}
}

View File

@ -1,18 +1,13 @@
<div class="col-lg-3 text-center">
<h3>Subscribe</h3>
<ul>
<li>
<div class="input-append newsletter-box">
<form action="{ROOT_URL}subscribe/home" method="post" class="form-horizontal">
<input type="email" class="full form-control" placeholder="Email" id="email" name="email" autocomplete="email" style="margin-bottom: 15px;">
<input type="hidden" name="token" value="{TOKEN}">
<button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary center-block">Subscribe</button>
</form>
</div>
</li>
</ul>
<div class="material-switch" style="margin-top: 25px; margin-bottom: 25px;">
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" style="margin-top: 25px; margin-bottom: 25px; text-align:left;"/>
<label for="dark-mode-toggle" class="label-default" style="text-align:left;"></label>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<form action="{ROOT_URL}subscribe/home" method="post" class="form-horizontal"></form>
<label for="newsletter1" class="visually-hidden">Email address</label>
<input name="email" id="email" type="email" class="form-control" placeholder="Email address" autocomplete="email">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-primary" name="submit" value="submit" type="submit">Subscribe</button>
</form>
</div>
</form>
</div>

View File

@ -71,7 +71,7 @@ class notrealplugin extends forealthoughModel {
'draft' => 0,
],
];
public $footer_links = [
public $contact_footer_links = [
[
'text' => 'Bug Report',
'url' => '{ROOT_URL}bugreport',
@ -82,8 +82,11 @@ class notrealplugin extends forealthoughModel {
if ( true === self::$initialized || !Installer::pluginEnabled( $reflect->getShortName() ) ) {
return;
}
foreach ( $this->footer_links as $key => $link ) {
Navigation::addLink( App::FOOTER_MENU_NAME, $link );
foreach ( $this->contact_footer_links as $key => $link ) {
Navigation::addLink( App::CONTACT_FOOTER_MENU_NAME, $link );
}
foreach ( $this->info_footer_links as $key => $link ) {
Navigation::addLink( App::INFO_MENU_NAME, $link );
}
foreach ( $this->main_links as $key => $link ) {
Navigation::addLink( App::MAIN_MENU_NAME, $link );

View File

@ -41,11 +41,12 @@ class DefaultLoader extends Loader {
$this->addCss( '<link rel="stylesheet" href="{ROOT_URL}app/css/main-dark.css" id="dark-mode-stylesheet" disabled>' );
$this->addJs( '<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="{ROOT_URL}app/js/main.js"></script>' );
Components::setIfNull( 'LOGO', Config::getValue( 'main/logo' ) );
Components::setIfNull( 'FOOTER_LEFT', Navigation::getMenuView( 'footer.left', 'FOOTER_LINKS', App::FOOTER_MENU_NAME, false ) );
Components::setIfNull( 'FOOTER_CENTER', Views::simpleView( 'footer.center') );
Components::setIfNull( 'FOOTER_RIGHT', Views::simpleView( 'footer.right') );
Components::setIfNull( 'COPY', Views::simpleView( 'footer.copy') );
Components::setIfNull( 'SOCIAL', Views::simpleView( 'footer.social') );
Components::prepend( 'FOOTER_LEFT', Views::simpleView( 'footer.left', Navigation::getMenuLinks( App::CONTACT_FOOTER_MENU_NAME ) ) );
Components::prepend( 'FOOTER_CENTER', Views::simpleView( 'footer.center', Navigation::getMenuLinks( App::INFO_FOOTER_MENU_NAME ) ) );
Components::prepend( 'FOOTER_RIGHT', Views::simpleView( 'footer.right') );
Components::setIfNull( 'FOOT', Views::simpleView( 'footer.container') );
Components::setIfNull( 'COPY', Views::simpleView( 'copy') );
/**
* Top-Nav
*/
@ -57,8 +58,7 @@ class DefaultLoader extends Loader {
Components::set( 'STATUS', Views::simpleView( 'nav.statusLoggedOut' ) );
}
Components::set( 'topNavRight', Template::parse( App::$topNavRight . '{STATUS}' ) );
Components::set( 'topNavLeft', Navigation::getMenuView( 'nav.main', 'MENU_LINKS', App::MAIN_MENU_NAME ) );
Components::set( 'topNavLeft', Views::simpleView( 'nav.main', Navigation::getMenuLinks( App::MAIN_MENU_NAME ) ) );
Components::set( 'colorSelect', Views::simpleView( 'forms.colorSelect' ) );
Components::set( 'iconSelect', Views::simpleView( 'forms.iconSelect' ) );
Navigation::setCrumbComponent( 'BREADCRUMB', Input::get( 'url' ) );

View File

@ -29,36 +29,29 @@
{ROBOT}
<link rel="icon" href="{ROOT_URL}images/favicon.ico">
<!-- Required CSS -->
<link rel="stylesheet" href="{FONT_AWESOME_URL}font-awesome.min.css" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="{FONT_AWESOME_URL}fontawesome.min.css" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="{BOOTSTRAP_CDN}css/bootstrap.min.css" crossorigin="anonymous">
<!-- Custom styles for this template -->
{TEMPLATE_CSS_INCLUDES}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<!--Brand and toggle should get grouped for better mobile display but I had to account for additional menus-->
<div class="container-fluid">
<a href="{ROOT_URL}" class="navbar-brand">{SITENAME}</a>
<!-- Toggler Button -->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Navigation -->
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<img src="{ROOT_URL}{LOGO}" class="bi me-2" width="40" height="32" role="img" aria-label="{SITENAME} Logo" />
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
{SITENAME}
</a>
{topNavLeft}
<ul class="navbar-nav ml-auto">
{topNavRight}
</ul>
</div>
</div>
</nav>
<div class="container-fluid top-pad dynamic-footer-padding">
<div class="text-end d-flex align-items-center">
{topNavRight}
</div>
</div>
</div>
</header>
<div class="container-fluid">
{ISSUES}
<div class="container pt-4">
<div class="row">
@ -70,13 +63,10 @@
</div>
{/ISSUES}
<div class="pt-4">
{CONTENT}
{CONTENT}
</div>
</div>
<footer>
{FOOT}
{COPY}
</footer>
{FOOT}
<!-- Bootstrap core JavaScript and jquery -->
<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="{JQUERY_CDN}jquery.min.js"></script>
<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>

View File

@ -1,9 +1,8 @@
<div class="col-lg-6 text-center">
<div class="social">
<i><a href="{ROOT_URL}fb"><span class="fa fa-facebook"></span></a></i>
<i><a href="{ROOT_URL}twitter"><span class="fa fa-twitter"></span></a></i>
<i><a href="{ROOT_URL}in"><span class="fa fa-linkedin"></span></a></i>
<i><a href="{ROOT_URL}youtube"><span class="fa fa-youtube"></span></a></i>
<i><a href="{ROOT_URL}git"><span class="fa fa-github"></span></a></i>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>More Info</h5>
<ul class="nav flex-column">
{LOOP}
<li class="nav-item mb-2"><a href="{url}" class="nav-link p-0 text-muted">{text}</a></li>
{/LOOP}
</ul>
</div>

View File

@ -1,27 +1,15 @@
<div class="footer-head" id="footer-head">
<div class="container custom-expand">
<!-- Collapsible Footer Toggle Button -->
<div class="col-12 text-center">
<button
class="d-lg-none"
type="button"
data-bs-toggle="collapse"
data-bs-target="#footer"
aria-controls="footer"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="fa fa-bars"></i> <!-- Font Awesome Icon -->
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<!-- Collapsible Footer Content -->
<div id="footer" class="collapse d-lg-block">
<div class="row pt-3">
{FOOTER_LEFT}
{FOOTER_CENTER}
{FOOTER_RIGHT}
</div>
</div>
</div>
</div>
<div class="container border-top mt-4">
<footer class="py-5">
<div class="row">
{FOOTER_LEFT}
{FOOTER_CENTER}
{FOOTER_RIGHT}
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
{COPY}
{SOCIAL}
</div>
</footer>
</div>

View File

@ -0,0 +1 @@
<p>© 2024 AllTheBookmarks, Powered by <a href="https://thetempusproject.com" class="text-decoration-none">The Tempus Project</a>.</p>

View File

@ -1,7 +1,8 @@
<div class="col-lg-3 text-center">
<h3> Contact </h3>
<ul>
{FOOTER_LINKS}
<div class="col-6 col-md-2 mb-3">
<h5>Contact Us</h5>
<ul class="nav flex-column">
{LOOP}
<li class="nav-item mb-2"><a href="{url}" class="nav-link p-0 text-muted">{text}</a></li>
{/LOOP}
</ul>
</div>

View File

@ -1,19 +1,6 @@
<div class="col-lg-3 text-center">
<h3>Information</h3>
<ul>
<li>
<a href="{ROOT_URL}about">About Us</a>
</li>
<li>
<a href="{ROOT_URL}contact">Contact Us</a>
</li>
<li>
<a href="{ROOT_URL}privacy">Privacy Policy</a>
</li>
</ul>
<div class="material-switch" style="margin-top: 25px; margin-bottom: 25px;">
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle"/>
<div class="col-6 col-md-2 mb-3 d-flex">
<div class="material-switch mt-5 mx-auto">
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" />
<label for="dark-mode-toggle" class="label-default"></label>
</div>
</div>

View File

@ -0,0 +1,27 @@
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}fb">
<span class="fa-brands fa-fw fa-facebook"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}twitter">
<span class="fa-brands fa-fw fa-twitter"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}in">
<span class="fa-brands fa-fw fa-linkedin"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}youtube">
<span class="fa-brands fa-fw fa-youtube"></span>
</a>
</li>
<li class="ms-3">
<a class="link-dark" href="{ROOT_URL}git">
<span class="fa-brands fa-fw fa-github"></span>
</a>
</li>
</ul>

View File

@ -1,3 +1,5 @@
<ul class="navbar-nav">
{MENU_LINKS}
<ul class="nav col-12 col-lg-auto mb-2 justify-content-center mb-md-0 mx-auto">
{LOOP}
<li><a href="{url}" class="nav-link px-2 text-white">{text}</a></li>
{/LOOP}
</ul>

View File

@ -1,21 +1,20 @@
<li class="dropdown nav-item">
<div class="dropdown nav-item mx-2">
<a
href="#"
class="nav-link dropdown-toggle"
class="d-block dropdown-toggle nav-link"
id="userDropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
{USERNAME}<i class="fa fa-user pl-2"></i>
<span class="mr-3">{USERNAME}</span> <i class="fa fa-user"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
<li><a href="{ROOT_URL}usercp"><i class="fa fa-fw fa-user"></i> Profile</a></li>
<ul class="dropdown-menu text-small" aria-labelledby="userDropdown">
<li><a href="{ROOT_URL}usercp" class="dropdown-item"><i class="fa fa-fw fa-user"></i> Profile</a></li>
{topNavRightDropdown}
<li><a href="{ROOT_URL}usercp/settings"><i class="fa fa-fw fa-gear"></i> Settings</a></li>
<div class="dropdown-divider"></div>
<li><a href="{ROOT_URL}usercp/settings" class="dropdown-item"><i class="fa fa-fw fa-gear"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li>
<a href="{ROOT_URL}home/logout"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
<a href="{ROOT_URL}home/logout" class="dropdown-item"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
</li>
</ul>
</li>
</div>