Bootstrap 5 + Darkmode changes
This commit is contained in:
Joey Kimsey
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user