Bootstrap 5 + Darkmode changes
This commit is contained in:
Joey Kimsey
@ -11,15 +11,37 @@
|
||||
*/
|
||||
namespace TheTempusProject\Templates;
|
||||
|
||||
use TheTempusProject\Houdini\Classes\Components;
|
||||
use TheTempusProject\Houdini\Classes\Views;
|
||||
use TheTempusProject\Houdini\Classes\Navigation;
|
||||
use TheTempusProject\Houdini\Classes\Components;
|
||||
use TheTempusProject\Bedrock\Functions\Input;
|
||||
use TheTempusProject\TheTempusProject as App;
|
||||
use TheTempusProject\Houdini\Classes\Template;
|
||||
|
||||
class AdminLoader extends DefaultLoader {
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
Components::set( 'ADMINNAV', Navigation::getMenuView( 'nav.admin', 'ADMIN_LINKS', App::ADMIN_MENU_NAME ) );
|
||||
$links = Navigation::getMenuLinks( App::ADMIN_MENU_NAME );
|
||||
foreach ( $links as $key => $link ) {
|
||||
if ( is_array( $link->url ) ) {
|
||||
$links[$key]->linkClasses = 'nav-link d-flex align-items-center justify-content-between';
|
||||
$links[$key]->linkAttributes = Template::parse( 'aria-controls="{dropdownName}Dropdown" data-bs-toggle="collapse" aria-haspopup="true" aria-expanded="false"' );
|
||||
$name = trim(strip_tags( $link->text ) );
|
||||
Components::set( 'dropdownName', $name );
|
||||
$out = [];
|
||||
foreach ( $link->url as $subKey => $subLink ) {
|
||||
$out[] = (object) $subLink;
|
||||
}
|
||||
$links[$key]->url = '#' . $name . 'Dropdown';
|
||||
$links[$key]->text = '<span>' . $link->text . '</span><i class="fa fa-fw fa-caret-down ms-2"></i>';
|
||||
$links[$key]->duuuuuuuh = Views::simpleView( 'nav.adminSub', $out );
|
||||
} else {
|
||||
$links[$key]->linkClasses = 'nav-link';
|
||||
$links[$key]->linkAttributes = '';
|
||||
$links[$key]->duuuuuuuh = '';
|
||||
}
|
||||
}
|
||||
Components::set( 'ADMIN_LINKS', Views::simpleView( 'nav.admin', $links ) );
|
||||
Navigation::setCrumbComponent( 'ADMIN_BREADCRUMBS', Input::get( 'url' ) );
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,91 +24,61 @@
|
||||
{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">
|
||||
{topNavLeft}
|
||||
<ul class="navbar-nav ml-auto">
|
||||
{topNavRight}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-2 col-md-3 bg-dark text-white">
|
||||
<div class="d-flex flex-column min-vh-100">
|
||||
<!-- Main Content Area -->
|
||||
<div class="d-flex flex-grow-1">
|
||||
<!-- Side Navigation -->
|
||||
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
||||
<img src="/images/logo.png" class="bi me-2" width="40" height="32" role="img" aria-label="All The Bookmarks Logo">
|
||||
<span class="fs-4">All The Bookmarks</span>
|
||||
</a>
|
||||
<hr>
|
||||
{ADMIN}
|
||||
<nav class="navbar navbar-expand-lg navbar-dark flex-column align-items-stretch">
|
||||
<ul class="navbar-nav flex-column">
|
||||
{ADMIN_LINKS}
|
||||
</ul>
|
||||
</nav>
|
||||
{ADMIN_LINKS}
|
||||
{/ADMIN}
|
||||
<hr>
|
||||
<div class="d-flex align-items-center">
|
||||
{topNavRight}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<div class="col-lg-10 col-md-9 pt-3 mt-5">
|
||||
{ISSUES}
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
{ERROR}
|
||||
{NOTICE}
|
||||
{SUCCESS}
|
||||
<!-- Center Element -->
|
||||
<div class="flex-grow-1 d-flex flex-column">
|
||||
<!-- Top Navigation Bar -->
|
||||
<div class="p-3 text-bg-dark">
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
||||
{topNavLeft}
|
||||
</div>
|
||||
</div>
|
||||
{/ISSUES}
|
||||
{ADMIN_BREADCRUMBS}
|
||||
{CONTENT}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-grow-1 px-4 py-4">
|
||||
{ISSUES}
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
{ERROR}
|
||||
{NOTICE}
|
||||
{SUCCESS}
|
||||
</div>
|
||||
</div>
|
||||
{/ISSUES}
|
||||
{ADMIN_BREADCRUMBS}
|
||||
{CONTENT}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-light border-top">
|
||||
<div class="container py-3">
|
||||
<div class="d-flex justify-content-between">
|
||||
{COPY}
|
||||
{SOCIAL}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container border-top">
|
||||
<footer class="pt-4">
|
||||
<div class="d-flex flex-column flex-sm-row justify-content-between">
|
||||
<p>© 2024 AllTheBookmarks, Powered by <a href="https://thetempusproject.com" class="text-decoration-none">The Tempus Project</a>.</p>
|
||||
<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>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@ -21,12 +21,16 @@ use TheTempusProject\Bedrock\Functions\Input;
|
||||
use TheTempusProject\TheTempusProject as App;
|
||||
|
||||
class DefaultLoader extends Loader {
|
||||
private static $loaded = false;
|
||||
const TEMPLATE_NAME = 'Default Tempus Project Template';
|
||||
const JQUERY_CDN = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/';
|
||||
const BOOTSTRAP_CDN = 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.6/dist/';
|
||||
const FONT_AWESOME_URL = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/';
|
||||
|
||||
public function __construct() {
|
||||
if ( self::$loaded ) {
|
||||
return;
|
||||
}
|
||||
Components::set( 'TEMPLATE_URL', Template::parse( '{ROOT_URL}app/templates/default/' ) );
|
||||
if ( VENDOR_AUTOLOADED === true ) {
|
||||
Components::set( 'FONT_AWESOME_URL', '/vendor/fortawesome/font-awesome/css/' );
|
||||
@ -40,7 +44,7 @@ class DefaultLoader extends Loader {
|
||||
$this->addCss( '<link rel="stylesheet" href="{ROOT_URL}app/css/main.css">' );
|
||||
$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( 'LOGO', Config::getValue( 'main/logo' ) ?? TP_DEFAULT_LOGO );
|
||||
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 ) ) );
|
||||
@ -63,5 +67,6 @@ class DefaultLoader extends Loader {
|
||||
Components::set( 'iconSelect', Views::simpleView( 'forms.iconSelect' ) );
|
||||
Navigation::setCrumbComponent( 'BREADCRUMB', Input::get( 'url' ) );
|
||||
$this->buildComponents();
|
||||
self::$loaded = true;
|
||||
}
|
||||
}
|
||||
@ -51,19 +51,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container-fluid">
|
||||
{ISSUES}
|
||||
<div class="container pt-4">
|
||||
<div class="row">
|
||||
{ERROR}
|
||||
{NOTICE}
|
||||
{SUCCESS}
|
||||
{INFO}
|
||||
<div class="d-flex flex-column min-vh-100">
|
||||
<div class="flex-container flex-grow-1">
|
||||
{ISSUES}
|
||||
<div class="container pt-4">
|
||||
<div class="row">
|
||||
{ERROR}
|
||||
{NOTICE}
|
||||
{SUCCESS}
|
||||
{INFO}
|
||||
</div>
|
||||
</div>
|
||||
{/ISSUES}
|
||||
<div class="pt-4">
|
||||
{CONTENT}
|
||||
</div>
|
||||
</div>
|
||||
{/ISSUES}
|
||||
<div class="pt-4">
|
||||
{CONTENT}
|
||||
</div>
|
||||
{FOOT}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user