Bootstrap 5 + Darkmode changes

This commit is contained in:
Joey Kimsey
2024-12-11 02:08:53 -05:00
parent a0726e6578
commit aaefd66350
32 changed files with 677 additions and 1251 deletions

View File

@ -38,6 +38,8 @@ if ( ! defined( 'CONFIG_DIRECTORY' ) ) {
# Tempus Debugger # Tempus Debugger
define( 'CANARY_SECURE_HASH', 'd73ed7591a30f0ca7d686a0e780f0d05' ); define( 'CANARY_SECURE_HASH', 'd73ed7591a30f0ca7d686a0e780f0d05' );
# Tempus Project Core # Tempus Project Core
define( 'APP_NAME', 'All The Bookmarks');
define( 'TP_DEFAULT_LOGO', 'images/logo.png');
// Check // Check
define( 'MINIMUM_PHP_VERSION', 8.1); define( 'MINIMUM_PHP_VERSION', 8.1);
// Cookies // Cookies

View File

@ -1,423 +1,124 @@
/* General body background and text color */ /**
body { * app/css/main-dark.css
background-color: #121212; /* Dark background */
color: #e0e0e0; /* Light text */
}
/* Navbar */
.navbar {
background-color: #1f1f1f;
border-color: #333;
}
.navbar a {
color: #e0e0e0;
}
.navbar a:hover {
color: #ffffff;
}
/* Panels */
.panel {
background-color: #1f1f1f;
border-color: #333;
color: #e0e0e0;
}
.panel-heading {
background-color: #333;
color: #ffffff;
}
/* Buttons */
.btn {
background-color: #333;
color: #ffffff;
border-color: #444;
}
.btn:hover {
background-color: #444;
border-color: #555;
}
/* Forms */
.form-control {
background-color: #1f1f1f;
color: #e0e0e0;
border: 1px solid #333;
}
.form-control:focus {
border-color: #555;
box-shadow: none;
}
/**
* app/css/main.css
* *
* This file is for any css that should be applied site wide. * This file provides dark mode styles to override existing Bootstrap 5 base styles.
* *
* @version 3.0 * @version 3.0-dark
* @author Joey Kimsey <Joey@thetempusproject.com> * @author Joey Kimsey <Joey@thetempusproject.com>
* @link https://TheTempusProject.com * @link https://TheTempusProject.com
* @license https://opensource.org/licenses/MIT [MIT LICENSE] * @license https://opensource.org/licenses/MIT [MIT LICENSE]
*/ */
@media ( min-width: 768px ) { .context-main {
.side-nav { color: #fff;
/* background-color: #222; */ }
} .context-main-bg {
.side-nav li a:hover, background-color: #2c2c2c;
.side-nav li a:focus { }
background-color: #fff !important; .context-other {
} color: #000;
}
body {
background-image: linear-gradient(180deg, #2c2c2c, #1e1e1e 100px, #1e1e1e);
color: #f5f5f5;
} }
/** /**
* Other * Install Terms
*/ */
.bars {
/* background-color: #333; */
/* box-shadow: 0 5px 0 #333, 0 10px 0 #333; */
}
.bg-gray {
/* background-image: -moz-linear-gradient( center bottom, #BBBBBB 0%, #F0F0F0 100% ); */
/* box-shadow: 0 1px 0 #B4B3B3; */
}
.UI-buffer {
/* border-bottom: 1px solid #CCCCCC; */
}
.UI-page-buffer {
/* border-bottom: 1px solid #CCCCCC; */
}
.table-user-information>tbody>tr {
/* border-top: 1px solid rgb( 221, 221, 221 ); */
}
.sticky-foot-head {
/* background: #EDEFF1; */
/* border-bottom: 1px solid #CCCCCC; */
/* border-top: 1px solid #DDDDDD; */
}
.sticky-foot {
background-color: #fff;
}
.sticky-copy {
background: #282828; /* E3E3E3; */
border-bottom: 1px solid #b0b0b0; /* CCCCCC; */
border-top: 1px solid #bfbfbf; /* DDDDDD; */
}
/**
* Main Carousel
*/
.main-text {
color: #000;
}
.btn-clear {
color: #000;
border-color: #000;
}
.btn-clear:hover {
color: #fff;
/* background-color: #F000FF; */
}
/**
* Top Navigation
*/
.top-nav>li>a {
/* color: #999; */
}
.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
color: #000;
background-color: #fff;
}
.top-nav>.open>.dropdown-menu {
/* border: 1px solid rgba( 0, 0, 0, .15 ); */
background-color: #000;
/* -webkit-box-shadow: 0 6px 12px rgba( 0, 0, 0, .175 ); */
/* box-shadow: 0 6px 12px rgba( 0, 0, 0, .175 ); */
}
/**
* Messages Dropdown
*/
li.message-header {
/* border-bottom: 1px solid rgba( 0, 0, 0, .15 ); */
}
li.message-preview {
/* border-bottom: 1px solid rgba( 0, 0, 0, .15 ); */
}
/**
* Widget
*/
.widget li.list-group-item {
/* border-top: 1px solid #ddd; */
}
.widget li.list-group-item:hover {
/* background-color: rgba( 86, 61, 124, .1 ); */
}
.widget .mic-info {
/* color: #666666; */
}
/**
* Footer and Copyright
*/
.copy {
background: #282828; /* E3E3E3; */
border-bottom: 1px solid #b0b0b0; /* CCCCCC; */
border-top: 1px solid #bfbfbf; /* DDDDDD; */
}
.footer-head {
background: #282828; /* E3E3E3; */
border-bottom: 1px solid #b0b0b0; /* CCCCCC; */
border-top: 1px solid #bfbfbf; /* DDDDDD; */
}
.footer-head h3 {
border-bottom: 1px solid #a1a7ad; /* BAC1C8 */
color: #4a5c6e; /* 54697E */
}
.footer-head ul {
/* color: #7F8C8D; */
}
.footer-head a {
/* color: #78828D */
}
/**
* Side Navigation
*/
.side-nav>li>ul>li>a {
/* color: #999; */
}
.side-nav>li>ul>li>a:hover {
color: #000;
}
.side-nav .active > a {
color: #000;
background-color: #fff;
}
.side-nav .active > a:hover {
color: #000;
background-color: #fff;
}
/**
* Social
*/
.social span {
/* background: none repeat scroll 0 0 #B5B5B5; */
/* border: 2px solid #B5B5B5; */
}
.social span a {
/* color: #EDEFF1; */
}
.social span:hover {
/* border: 2px solid #2c3e50;
background: #2c3e50; */
}
.social span a i {
/* color: #EDEFF1 !important; */
}
/**
* Newsletter Box
*/
.newsletter-box input#appendedInputButton {
background: #000;
}
.newsletter-box .btn {
color: #000;
}
/**
* Colored Badges
*/
.badge {
color: #000;
/* background-color: #999999; */
}
.badge:hover {
color: #000;
}
.badge-error {
/* background-color: #b94a48; */
}
.badge-error:hover {
/* background-color: #953b39; */
}
.badge-warning {
/* background-color: #f89406; */
}
.badge-warning:hover {
/* background-color: #c67605; */
}
.badge-success {
/* background-color: #468847; */
}
.badge-success:hover {
/* background-color: #356635; */
}
.badge-info {
/* background-color: #3a87ad; */
}
.badge-info:hover {
/* background-color: #2d6987; */
}
.badge-inverse {
/* background-color: #333333; */
}
.badge-inverse:hover {
/* background-color: #1a1a1a; */
}
/**
* Install Terms
*/
.install-terms { .install-terms {
/* border: 1px solid #ccc; border: 1px solid #555;
background: #f2f2f2; */ background: #3a3a3a;
} }
.install-terms p, .install-terms p,
.install-terms li { .install-terms li {
/* color: #333; */ color: #dcdcdc;
} }
.install-terms h3 { .install-terms h3 {
color: #fff; color: #ffffff;
} }
.install-terms h4 { .install-terms h4 {
color: #fff; color: #eaeaea;
} }
.install-terms strong { .install-terms strong {
color: #fff; color: #ffffff;
}
.context-main {
color: #ffffff;
}
.context-other {
color: #ffffff;
} }
/** /**
* Terms Page * Terms Page
*/ */
.terms-page { .terms-page {
/* border: 1px solid #ccc; border: 1px solid #555;
background: #f2f2f2; */ background: #3a3a3a;
} }
.terms-page p, .terms-page p,
.terms-page li { .terms-page li {
/* color: #333; */ color: #dcdcdc;
} }
.terms-page h3 { .terms-page h3 {
color: #fff; color: #ffffff;
} }
.terms-page h4 { .terms-page h4 {
color: #fff; color: #eaeaea;
} }
.terms-page strong { .terms-page strong {
color: #fff; color: #ffffff;
} }
/** /**
* Terms * Terms
*/ */
.terms { .terms {
/* border: 1px solid #ccc; */ border: 1px solid #555;
/* background: #f2f2f2; */ background: #3a3a3a;
} }
.terms p, .terms p,
.terms li { .terms li {
/* color: #333; */ color: #dcdcdc;
} }
.terms h3 { .terms h3 {
color: #fff; color: #ffffff;
} }
.terms h4 { .terms h4 {
color: #fff; color: #eaeaea;
} }
.terms strong { .terms strong {
color: #fff; color: #ffffff;
} }
.material-switch > label::before { /**
/* background: rgb(0, 0, 0); */ * Form Control
/* box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); */ */
.form-control-dark:focus {
border-color: #1e90ff;
box-shadow: 0 0 0 .25rem rgba(30, 144, 255, .5);
} }
.material-switch > label::after {
/* background: rgb(255, 255, 255); */ /**
/* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); */ * Example Divider
*/
.b-example-divider {
background-color: rgba(255, 255, 255, .1);
border: solid rgba(255, 255, 255, .15);
box-shadow: inset 0 .5em 1.5em rgba(255, 255, 255, .1), inset 0 .125em .5em rgba(255, 255, 255, .15);
}
/**
* Text Shadows
*/
.text-shadow-1 {
text-shadow: 0 .125rem .25rem rgba(255, 255, 255, .25);
}
.text-shadow-2 {
text-shadow: 0 .25rem .5rem rgba(255, 255, 255, .25);
}
.text-shadow-3 {
text-shadow: 0 .5rem 1.5rem rgba(255, 255, 255, .25);
} }

View File

@ -8,6 +8,75 @@
* @link https://TheTempusProject.com * @link https://TheTempusProject.com
* @license https://opensource.org/licenses/MIT [MIT LICENSE] * @license https://opensource.org/licenses/MIT [MIT LICENSE]
*/ */
/* Base styles for the switch container */
.material-switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
}
/* Hide the default checkbox */
.material-switch input {
opacity: 0;
width: 0;
height: 0;
}
/* Style the label as the switch */
.material-switch .label-default {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--switch-off-bg, #ccc);
border-radius: 25px;
transition: background-color 0.3s ease-in-out;
}
/* Style the toggle circle (slider) */
.material-switch .label-default::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: var(--switch-slider-bg, #fff);
bottom: 2.5px;
left: 5px;
transition: transform 0.3s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Change background color when checked */
.material-switch input:checked + .label-default {
background-color: var(--switch-on-bg, #555); /* Bootstrap primary color */
}
/* Move the slider when checked */
.material-switch input:checked + .label-default::before {
transform: translateX(25px); /* Adjust based on switch width */
}
.context-main {
color: #000;
}
.context-other {
color: #fff;
}
html { html {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
position: relative; position: relative;
@ -16,6 +85,9 @@ html {
pre { pre {
white-space: pre-wrap; white-space: pre-wrap;
} }
body {
background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
}
@media ( min-width: 768px ) { @media ( min-width: 768px ) {
.main { .main {
padding-right: 40px; padding-right: 40px;
@ -25,411 +97,9 @@ pre {
padding-right: 225px; padding-right: 225px;
padding-left: 0; padding-left: 0;
} }
} .bd-placeholder-img-lg {
font-size: 3.5rem;
/** }
* Other
*/
.bars {
display: block;
width: 60px;
height: 3px;
background-color: #333;
box-shadow: 0 5px 0 #333, 0 10px 0 #333;
}
.slide-text-bg {
opacity: 0.6;
}
.avatar-125 {
height: 125px;
width: 125px;
}
.full {
width: 100%;
}
.gap {
height: 30px;
width: 100%;
clear: both;
display: block;
}
.supportLi h4 {
font-size: 20px;
font-weight: lighter;
line-height: normal;
margin-bottom: 0 !important;
padding-bottom: 0;
}
.bg-gray {
background-image: -moz-linear-gradient( center bottom, #BBBBBB 0%, #F0F0F0 100% );
box-shadow: 0 1px 0 #B4B3B3;
}
.payments {
font-size: 1.5em;
}
.UI-buffer {
padding-top: 35px;
height: auto;
border-bottom: 1px solid #CCCCCC;
}
.avatar {
max-width: 33px;
}
.UI-page-buffer {
padding-top: 30px;
position: relative;
height: auto;
border-bottom: 1px solid #CCCCCC;
}
.main {
padding: 20px;
padding-bottom: 75px;
}
.user-row {
margin-bottom: 14px;
}
.user-row:last-child {
margin-bottom: 0;
}
.dropdown-user {
margin: 13px 0;
padding: 5px;
height: 100%;
}
.dropdown-user:hover {
cursor: pointer;
}
.table-user-information>tbody>tr {
border-top: 1px solid rgb( 221, 221, 221 );
}
.table-user-information>tbody>tr:first-child {
border-top: 0;
}
.table-user-information>tbody>tr>td {
border-top: 0;
}
.top-pad {
margin-top: 70px;
}
.foot-pad {
padding-bottom: 0;
/* padding-bottom: 261px; */
}
.dynamic-footer-padding {
padding-bottom: var(--footer-height);
}
.footer-head .navbar-toggler {
display: inline-block;
float: none;
}
.avatar-round-40 {
height: 40px;
width: 40px;
}
.sticky-foot-head {
z-index: 10;
position: fixed;
bottom: 51px;
width: 100%;
background: #EDEFF1;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.sticky-foot {
background-color: #000;
position: fixed;
bottom: 0;
width: 100%;
}
.sticky-copy {
z-index: 10;
padding-top: 10px;
padding-bottom: 10px;
height: 50px;
background: #E3E3E3;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
/**
* Main Carousel
*/
.main-text {
padding-bottom: 0px;
padding-top: 0px;
top: 10px;
bottom: auto;
z-index: 10;
width: auto;
color: #FFF;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-clear {
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover {
color: #000;
background-color: #FFF;
}
#carousel-home {
margin-bottom: 30px;
}
.col-centered {
float: none;
margin: 0 auto;
}
/**
* Messages Dropdown
*/
ul.message-dropdown {
padding: 0;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
li.message-header {
margin: 5px 0;
border-bottom: 1px solid rgba( 0, 0, 0, .15 );
}
li.message-preview {
width: 275px;
border-bottom: 1px solid rgba( 0, 0, 0, .15 );
}
li.message-preview>a {
padding-top: 15px;
padding-bottom: 15px;
}
li.message-footer {
margin: 5px 0;
}
ul.alert-dropdown {
width: 200px;
}
/**
* Widget
*/
.widget .list-group {
margin-bottom: 0;
}
.widget .panel-title {
display: inline
}
.widget .label {
float: right;
}
.widget li.list-group-item {
border-radius: 0;
border: 0;
border-top: 1px solid #ddd;
}
.widget li.list-group-item:hover {
background-color: rgba( 86, 61, 124, .1 );
}
.widget .mic-info {
color: #666666;
font-size: 11px;
}
.widget .action {
margin-top: 5px;
}
.widget .comment-text {
font-size: 12px;
}
.widget .btn-block {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
/**
* Footer and Copyright
*/
.copy {
z-index: 10;
padding-top: 10px;
padding-bottom: 10px;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #E3E3E3;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.footer-head {
z-index: 10;
position: absolute;
bottom: 51px;
width: 100%;
background: #EDEFF1;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.footer-head p {
margin: 0;
}
.footer-head img {
max-width: 100%;
}
.footer-head h3 {
border-bottom: 1px solid #BAC1C8;
color: #54697E;
font-size: 18px;
font-weight: 600;
line-height: 27px;
padding: 5px 0 10px;
text-transform: uppercase;
}
.footer-head ul {
font-size: 13px;
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 15px;
color: #7F8C8D;
}
.footer-head ul li a {
padding: 0 0 5px 0;
display: inline-block;
}
.footer-head a {
color: #78828D
}
/**
* Social
*/
.social {
margin-top: 75px;
bottom: 0;
}
.content {
position: absolute;
}
.social span {
background: none repeat scroll 0 0 #B5B5B5;
border: 2px solid #B5B5B5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
float: center;
height: 36px;
line-height: 36px;
margin: 0 8px 0 0;
padding: 0;
text-align: center;
width: 41px;
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.social span:hover {
transform: scale( 1.15 ) rotate( 360deg) ;
-webkit-transform: scale( 1.1 ) rotate( 360deg) ;
-moz-transform: scale( 1.1 ) rotate( 360deg) ;
-ms-transform: scale( 1.1 ) rotate( 360deg) ;
-o-transform: scale( 1.1 ) rotate( 360deg) ;
}
.social span a {
color: #EDEFF1;
}
.social span:hover {
border: 2px solid #2c3e50;
background: #2c3e50;
}
.social span a i {
font-size: 16px;
margin: 0 0 0 5px;
color: #EDEFF1 !important;
}
/**
* Newsletter Box
*/
.newsletter-box input#appendedInputButton {
background: #FFFFFF;
display: inline-block;
float: center;
height: 30px;
clear: both;
width: 100%;
}
.newsletter-box .btn {
border: medium none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
display: inline-block;
height: 40px;
padding: 0;
width: 100%;
color: #fff;
}
.newsletter-box {
overflow: hidden;
}
/**
* Colored Badges
*/
.badge {
padding: 1px 9px 2px;
font-size: 12.025px;
font-weight: bold;
white-space: nowrap;
color: #ffffff;
background-color: #999999;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.badge:hover {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.badge-error {
background-color: #b94a48;
}
.badge-error:hover {
background-color: #953b39;
}
.badge-warning {
background-color: #f89406;
}
.badge-warning:hover {
background-color: #c67605;
}
.badge-success {
background-color: #468847;
}
.badge-success:hover {
background-color: #356635;
}
.badge-info {
background-color: #3a87ad;
}
.badge-info:hover {
background-color: #2d6987;
}
.badge-inverse {
background-color: #333333;
}
.badge-inverse:hover {
background-color: #1a1a1a;
} }
/** /**
@ -517,71 +187,6 @@ ul.alert-dropdown {
.terms strong { .terms strong {
color: #000; color: #000;
} }
.navbar-header {
margin-right: 75px;
}
.pagination {
padding-left: 75px;
}
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position:absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5;
}
.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 { .pricing-header {
max-width: 700px; max-width: 700px;
} }

View File

@ -84,43 +84,24 @@ $(document).ready(function() {
}); });
// with the dynamic footer, you need to adjust the content padding to make sure the footer doesn't overlap the content // with the dynamic footer, you need to adjust the content padding to make sure the footer doesn't overlap the content
window.onload = function () {
function updateFooterPadding() {
var footer = document.querySelector('footer');
var container = document.querySelector('.container-fluid.top-pad');
if ( ! container ) {
return;
}
// footer has no height but its children do!
var footerHeight = Array.from(footer.children).reduce((totalHeight, child) => {
return totalHeight + child.offsetHeight;
}, 0);
footerHeight += 20; // Add 20px for padding
// console.error(footerHeight);
container.style.setProperty('--footer-height', footerHeight + 'px');
}
// Update padding on initial load
updateFooterPadding();
// Update padding on window resize
window.addEventListener('resize', updateFooterPadding);
};
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('dark-mode-toggle'); const toggleButton = document.getElementById('dark-mode-toggle');
const darkModeStylesheet = document.getElementById('dark-mode-stylesheet'); const darkModeStylesheet = document.getElementById('dark-mode-stylesheet');
console.error( 'DOMContentLoaded');
// Check if dark mode is saved in localStorage // Check if dark mode is saved in localStorage
if (localStorage.getItem('darkMode') === 'enabled') { if (localStorage.getItem('darkMode') === 'enabled') {
darkModeStylesheet.disabled = false; darkModeStylesheet.disabled = false;
toggleButton.checked = true; toggleButton.checked = true;
console.error( 'darkMode enabled');
} else {
console.error( 'darkMode disabled');
} }
toggleButton.addEventListener('click', function () { toggleButton.addEventListener('click', function () {
console.error( 'addEventListener');
if (darkModeStylesheet.disabled) { if (darkModeStylesheet.disabled) {
darkModeStylesheet.disabled = false; darkModeStylesheet.disabled = false;
localStorage.setItem('darkMode', 'enabled'); localStorage.setItem('darkMode', 'enabled');

View File

@ -29,6 +29,7 @@ class BlogLoader extends DefaultLoader {
$posts = $blog->posts; $posts = $blog->posts;
Components::set('SIDEBAR', Views::simpleView('blog.sidebar', $posts->recent(5))); Components::set('SIDEBAR', Views::simpleView('blog.sidebar', $posts->recent(5)));
Components::set('SIDEBAR2', Views::simpleView('blog.sidebar2', $posts->archive())); Components::set('SIDEBAR2', Views::simpleView('blog.sidebar2', $posts->archive()));
Components::set('SIDEBARABOUT', Views::simpleView('blog.about'));
Navigation::setCrumbComponent( 'BLOG_BREADCRUMBS', Input::get( 'url' ) ); Navigation::setCrumbComponent( 'BLOG_BREADCRUMBS', Input::get( 'url' ) );
Components::set( 'BLOG_TEMPLATE_URL', Template::parse( '{ROOT_URL}app/plugins/comments/' ) ); Components::set( 'BLOG_TEMPLATE_URL', Template::parse( '{ROOT_URL}app/plugins/comments/' ) );
$this->addCss( '<link rel="stylesheet" href="{BLOG_TEMPLATE_URL}css/comments.css">' ); $this->addCss( '<link rel="stylesheet" href="{BLOG_TEMPLATE_URL}css/comments.css">' );

View File

@ -10,10 +10,10 @@
* @license https://opensource.org/licenses/MIT [MIT LICENSE] * @license https://opensource.org/licenses/MIT [MIT LICENSE]
--> -->
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:url" content="{CURRENT_URL}"> <meta property="og:url" content="{CURRENT_URL}">
<meta name='twitter:card' content='summary' /> <meta name='twitter:card' content='summary_large_image' />
<title>{TITLE}</title> <title>{TITLE}</title>
<meta itemprop="name" content="{TITLE}"> <meta itemprop="name" content="{TITLE}">
<meta name="twitter:title" content="{TITLE}"> <meta name="twitter:title" content="{TITLE}">
@ -28,10 +28,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="The Tempus Project"> <meta name="author" content="The Tempus Project">
{ROBOT} {ROBOT}
<link rel="alternate" hreflang="en-us" href="alternateURL">
<link rel="icon" href="{ROOT_URL}images/favicon.ico"> <link rel="icon" href="{ROOT_URL}images/favicon.ico">
<!-- Required CSS --> <!-- Required CSS -->
<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"> <link rel="stylesheet" href="{BOOTSTRAP_CDN}css/bootstrap.min.css" crossorigin="anonymous">
<!-- RSS --> <!-- RSS -->
<link rel="alternate" href="{ROOT_URL}blog/rss" title="{TITLE} Feed" type="application/rss+xml" /> <link rel="alternate" href="{ROOT_URL}blog/rss" title="{TITLE} Feed" type="application/rss+xml" />
@ -54,38 +53,106 @@
</div> </div>
</div> </div>
</header> </header>
<div class="container-fluid">
{ISSUES}
<div class="container pt-4">
<div class="row">
{ERROR}
{NOTICE}
{SUCCESS} <div class="d-flex flex-column min-vh-100">
{INFO} <div class="flex-container flex-grow-1">
</div> {ISSUES}
</div> <div class="container pt-4">
{/ISSUES}
<div class="pt-4">
<div class="container">
<h1 class="blog-title text-center">{SITENAME} Blog</h1>
<div class="row"> <div class="row">
<div class="col-sm-8"> {ERROR}
{BLOG_BREADCRUMBS} {NOTICE}
{CONTENT} {SUCCESS}
{INFO}
</div>
</div>
{/ISSUES}
<!-- Leading Content -->
<div class="container">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about whats most interesting in this posts contents.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
</div> </div>
<div class="col-sm-4 blog-sidebar"> </div>
<div class="sidebar-module"> <div class="row mb-2">
{SIDEBAR} <div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div> </div>
<div class="sidebar-module"> </div>
{SIDEBAR2} <div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
</div>
</div>
<div class="pt-4">
<div class="container">
<h3 class="pb-4 mb-4 fst-italic border-bottom">
{SITENAME} Blog
</h3>
<div class="row g-5">
<!-- Main Content -->
<div class="col-md-8">
{CONTENT}
</div>
<!-- Sidebar Content -->
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
<div class="p-4 mb-3 bg-light rounded">
{SIDEBARABOUT}
</div>
<div class="p-4">
{SIDEBAR}
</div>
<div class="p-4">
{SIDEBAR2}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{FOOT}
</div> </div>
{FOOT}
<!-- Bootstrap core JavaScript and jquery --> <!-- 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="{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> <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

@ -0,0 +1,6 @@
<div class="p-4 mb-3 bg-light rounded">
<h4 class="fst-italic">About</h4>
<p class="mb-0">
The blog is mostly here to serve ass a simple way to link to long-form content on the site. There won't be any breaking news or tell-all stories here. Just good ole fashioned boring crap no one wants to read.
</p>
</div>

View File

@ -1,18 +1,15 @@
{PAGINATION}
{LOOP} {LOOP}
<div class="blog-post"> <article class="blog-post">
<h2 class="blog-post-title"><a href="{ROOT_URL}blog/post/{ID}">{title}</a></h2> <h2 class="blog-post-title mb-1">{title}</h2>
<hr> <p class="blog-post-meta">{DTC date}{created}{/DTC} by <a href="{ROOT_URL}home/profile/{author}">{authorName}</a></p>
<div class="well"> <div class="well">
<p class="blog-post-meta">
Posted on <i>{DTC date}{created}{/DTC}</i> by <a href="{ROOT_URL}home/profile/{author}"><strong>{authorName}</strong></a>
</p>
{contentSummary} {contentSummary}
</div> </div>
</div> </article>
<hr>
{/LOOP} {/LOOP}
{ALT} {ALT}
<div class="blog-post"> <article class="blog-post">
<p class="blog-post-meta">No Posts Found.</p> <p class="blog-post-meta">No Posts Found.</p>
</div> </article>
{/ALT} {/ALT}

View File

@ -1,14 +1,11 @@
<div class="card panel-info"> <div class="p-4">
<div class="card-header"> <h4 class="fst-italic">Archives</h4>
<h3 class="card-title">Archives</h3> <ul class="list-unstyled mb-0">
</div> {LOOP}
<div class="card-body"> <li>({count}) <a href="{ROOT_URL}blog/month/{month}/{year}">{monthText} {year}</a></li>
<ol class="list-unstyled"> {/LOOP}
{LOOP} {ALT}
<li>({count}) <a href="{ROOT_URL}blog/month/{month}/{year}">{monthText} {year}</a></li> <li>None To Show</li>
{/LOOP} {/ALT}
{ALT} </ul>
{/ALT}
</ol>
</div>
</div> </div>

View File

@ -1,11 +1,12 @@
<div class="dropdown nav-item mx-2"> <!-- Notifications Dropdown -->
<div class="dropdown nav-item mx-2">
<a <a
href="#" href="#"
class="nav-link dropdown-toggle" class="nav-link dropdown-toggle"
id="notiificationsDropdown" id="notiificationsDropdown"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false"> aria-expanded="false">
<i class="fa fa-fw fa-bell"></i><span class="ml-3">{MBADGE}</span> <i class="fa fa-fw fa-bell"></i><span class="ml-3">{NBADGE}</span>
</a> </a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notiificationsDropdown"> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notiificationsDropdown">
{LOOP} {LOOP}

View File

@ -11,15 +11,37 @@
*/ */
namespace TheTempusProject\Templates; namespace TheTempusProject\Templates;
use TheTempusProject\Houdini\Classes\Components; use TheTempusProject\Houdini\Classes\Views;
use TheTempusProject\Houdini\Classes\Navigation; use TheTempusProject\Houdini\Classes\Navigation;
use TheTempusProject\Houdini\Classes\Components;
use TheTempusProject\Bedrock\Functions\Input; use TheTempusProject\Bedrock\Functions\Input;
use TheTempusProject\TheTempusProject as App; use TheTempusProject\TheTempusProject as App;
use TheTempusProject\Houdini\Classes\Template;
class AdminLoader extends DefaultLoader { class AdminLoader extends DefaultLoader {
public function __construct() { public function __construct() {
parent::__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' ) ); Navigation::setCrumbComponent( 'ADMIN_BREADCRUMBS', Input::get( 'url' ) );
} }
} }

View File

@ -24,91 +24,61 @@
{TEMPLATE_CSS_INCLUDES} {TEMPLATE_CSS_INCLUDES}
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="d-flex flex-column min-vh-100">
<!--Brand and toggle should get grouped for better mobile display but I had to account for additional menus--> <!-- Main Content Area -->
<div class="container-fluid"> <div class="d-flex flex-grow-1">
<a href="{ROOT_URL}" class="navbar-brand">{SITENAME}</a> <!-- Side Navigation -->
<!-- Toggler Button --> <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<button <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
class="navbar-toggler" <img src="/images/logo.png" class="bi me-2" width="40" height="32" role="img" aria-label="All The Bookmarks Logo">
type="button" <span class="fs-4">All The Bookmarks</span>
data-bs-toggle="collapse" </a>
data-bs-target="#navbarNav" <hr>
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">
{ADMIN} {ADMIN}
<nav class="navbar navbar-expand-lg navbar-dark flex-column align-items-stretch"> {ADMIN_LINKS}
<ul class="navbar-nav flex-column">
{ADMIN_LINKS}
</ul>
</nav>
{/ADMIN} {/ADMIN}
<hr>
<div class="d-flex align-items-center">
{topNavRight}
</div>
</div> </div>
<!-- Main Content --> <!-- Center Element -->
<div class="col-lg-10 col-md-9 pt-3 mt-5"> <div class="flex-grow-1 d-flex flex-column">
{ISSUES} <!-- Top Navigation Bar -->
<div class="row mb-3"> <div class="p-3 text-bg-dark">
<div class="col-12"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
{ERROR} {topNavLeft}
{NOTICE}
{SUCCESS}
</div> </div>
</div> </div>
{/ISSUES}
{ADMIN_BREADCRUMBS} <!-- Main Content -->
{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>
</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 --> <!-- 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="{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> <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

@ -21,12 +21,16 @@ use TheTempusProject\Bedrock\Functions\Input;
use TheTempusProject\TheTempusProject as App; use TheTempusProject\TheTempusProject as App;
class DefaultLoader extends Loader { class DefaultLoader extends Loader {
private static $loaded = false;
const TEMPLATE_NAME = 'Default Tempus Project Template'; const TEMPLATE_NAME = 'Default Tempus Project Template';
const JQUERY_CDN = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/'; 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 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/'; const FONT_AWESOME_URL = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/';
public function __construct() { public function __construct() {
if ( self::$loaded ) {
return;
}
Components::set( 'TEMPLATE_URL', Template::parse( '{ROOT_URL}app/templates/default/' ) ); Components::set( 'TEMPLATE_URL', Template::parse( '{ROOT_URL}app/templates/default/' ) );
if ( VENDOR_AUTOLOADED === true ) { if ( VENDOR_AUTOLOADED === true ) {
Components::set( 'FONT_AWESOME_URL', '/vendor/fortawesome/font-awesome/css/' ); 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.css">' );
$this->addCss( '<link rel="stylesheet" href="{ROOT_URL}app/css/main-dark.css" id="dark-mode-stylesheet" disabled>' ); $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>' ); $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( 'COPY', Views::simpleView( 'footer.copy') );
Components::setIfNull( 'SOCIAL', Views::simpleView( 'footer.social') ); 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_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' ) ); Components::set( 'iconSelect', Views::simpleView( 'forms.iconSelect' ) );
Navigation::setCrumbComponent( 'BREADCRUMB', Input::get( 'url' ) ); Navigation::setCrumbComponent( 'BREADCRUMB', Input::get( 'url' ) );
$this->buildComponents(); $this->buildComponents();
self::$loaded = true;
} }
} }

View File

@ -51,19 +51,21 @@
</div> </div>
</div> </div>
</header> </header>
<div class="container-fluid"> <div class="d-flex flex-column min-vh-100">
{ISSUES} <div class="flex-container flex-grow-1">
<div class="container pt-4"> {ISSUES}
<div class="row"> <div class="container pt-4">
{ERROR} <div class="row">
{NOTICE} {ERROR}
{SUCCESS} {NOTICE}
{INFO} {SUCCESS}
{INFO}
</div>
</div>
{/ISSUES}
<div class="pt-4">
{CONTENT}
</div> </div>
</div>
{/ISSUES}
<div class="pt-4">
{CONTENT}
</div> </div>
{FOOT} {FOOT}
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="container border-top mt-4"> <div class="container border-top mt-auto">
<footer class="pt-4"> <footer class="pt-4">
<div class="row"> <div class="row">
{FOOTER_LEFT} {FOOTER_LEFT}

View File

@ -4,5 +4,8 @@
{LOOP} {LOOP}
<li class="nav-item mb-2"><a href="{url}" class="nav-link p-0 text-muted">{text}</a></li> <li class="nav-item mb-2"><a href="{url}" class="nav-link p-0 text-muted">{text}</a></li>
{/LOOP} {/LOOP}
{ALT}
<li class="nav-item mb-2"></li>
{/ALT}
</ul> </ul>
</div> </div>

View File

@ -1,7 +1,7 @@
<div class="col-6 col-md-2 mb-3"> <div class="col-6 col-md-2 mb-3">
<h5>Dark Mode</h5> <h5>Dark Mode</h5>
<div class="material-switch px-4"> <div class="material-switch px-4">
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" /> <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>
</div> </div>

View File

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

View File

@ -1,39 +1,35 @@
{installer-nav} {installer-nav}
<br> <div class="container">
<br> <div class="row justify-content-center">
<form action="" method="post" class="form-horizontal"> <div class="col-md-10 pt-4">
<fieldset> <form action="" method="post" class="form-horizontal">
<div class="form-group"> <fieldset>
<label for="newUsername" class="col-lg-6 control-label">Username:</label> <div class="mb-3 col-md-4 offset-md-4">
<div class="col-lg-2"> <label for="newUsername" class="form-label">Username:</label>
<input class="form-control" type="text" name="newUsername" id="newUsername" value=""> <input class="form-control" type="text" name="newUsername" id="newUsername" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="userEmail" class="form-label">Email:</label>
<input class="form-control" type="email" name="userEmail" id="userEmail" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="userEmail2" class="form-label">Re-enter Email:</label>
<input class="form-control" type="email" name="userEmail2" id="userEmail2" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="userPassword" class="form-label">Password:</label>
<input class="form-control" type="password" name="userPassword" id="userPassword">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="userPassword2" class="form-label">Re-enter Password:</label>
<input class="form-control" type="password" name="userPassword2" id="userPassword2">
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Complete</button>
</div>
</form>
</div> </div>
</div> </div>
<div class="form-group"> </div>
<label for="userEmail" class="col-lg-6 control-label">Email:</label>
<div class="col-lg-2">
<input class="form-control" type="email" name="userEmail" id="userEmail" value="">
</div>
</div>
<div class="form-group">
<label for="userEmail2" class="col-lg-6 control-label">Re-enter Email:</label>
<div class="col-lg-2">
<input class="form-control" type="email" name="userEmail2" id="userEmail2" value="">
</div>
</div>
<div class="form-group">
<label for="userPassword" class="col-lg-6 control-label">Password:</label>
<div class="col-lg-2">
<input class="form-control" type="password" name="userPassword" id="userPassword">
</div>
</div>
<div class="form-group">
<label for="userPassword2" class="col-lg-6 control-label">Re-enter Password:</label>
<div class="col-lg-2">
<input class="form-control" type="password" name="userPassword2" id="userPassword2">
</div>
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button><br>
</form>

View File

@ -1,14 +1,16 @@
{installer-nav} {installer-nav}
<br> <div class="container">
<br> <div class="row justify-content-center">
<form action="" method="post" class="form-horizontal"> <div class="col-md-10">
<div class="form-group"> <div class="install-terms col-lg-8 mx-auto mt-4">
<center>
<div class="install-terms">
{TERMS} {TERMS}
</div> </div>
</center> <div class="text-center my-4">
<form method="post">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">I Agree</button><br>
</form>
</div>
</div>
</div> </div>
<input type="hidden" name="token" value="{TOKEN}"> </div>
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">I agree</button><br>
</form>

View File

@ -1,15 +1,23 @@
{installer-nav} {installer-nav}
<h2>Requirements</h2> <div class="container">
<ul> <div class="row justify-content-center">
<li>PHP version greater than 5.6</li> <div class="col-md-10">
<li>Session storage must be enabled</li> <h2 class="mt-4">Requirements</h2>
<li>PHP mail must be enabled.</li> <ul>
<li>Safe mode must be disabled.</li> <li>PHP version greater than 5.6</li>
<li>Rewrite rule must be on</li> <li>Session storage must be enabled</li>
<li>file uploads must be on</li> <li>PHP mail must be enabled.</li>
<li>mysql_pdo must be enabled</li> <li>Safe mode must be disabled.</li>
</ul> <li>Rewrite rule must be on</li>
<form action="" method="post" class="form-horizontal"> <li>file uploads must be on</li>
<input type="hidden" name="token" value="{TOKEN}"> <li>mysql_pdo must be enabled</li>
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Check</button><br> </ul>
</form> <div class="text-center">
<form action="" method="post" class="form-horizontal">
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Check</button><br>
</form>
</div>
</div>
</div>
</div>

View File

@ -1,3 +1,32 @@
<h1>Success</h1> <div class="container py-5">
<h3>The Tempus Project has been successfully installed. You can now log in and manage your site or jump straight in to building your new features!</h3> <div class="row justify-content-center">
<p>here there should be some basic info readout.</p> <div class="col-lg-8 text-center">
<!-- Success Icon -->
<div class="mb-4">
<i class="fa fa-check-circle text-success display-3"></i>
</div>
<!-- Title -->
<h1 class="display-5 fw-bold text-success">Success</h1>
<!-- Subtitle -->
<h3 class="mt-3">
The Tempus Project has been successfully installed.
</h3>
<p class="lead mt-3">
You can now log in and manage your site or jump straight into building your new features!
</p>
<!-- Info Readout Placeholder -->
<p class="mt-4 text-muted">
<em>Some plugins may need additional configuration and there are already some pre-made resources to get you started. (Both in the files and the Admin Panel)</em>
</p>
<!-- Call-to-Action Buttons -->
<div class="d-flex justify-content-center gap-3 mt-4">
<a href="/login" class="btn btn-success btn-lg">
<i class="fa fa-sign-in-alt me-2"></i> Log In
</a>
<a href="/dashboard" class="btn btn-outline-success btn-lg">
<i class="fa fa-cogs me-2"></i> Go to Dashboard
</a>
</div>
</div>
</div>
</div>

View File

@ -1,50 +1,44 @@
{installer-nav} {installer-nav}
<br> <div class="container">
<form action="" method="post" class="form-horizontal" enctype="multipart/form-data"> <div class="row justify-content-center">
<fieldset> <div class="col-md-10">
<div class="form-group"> <legend class="my-3 text-center">Configure</legend>
<label for="siteName" class="col-lg-6 control-label">Site Name:</label> <form action="" method="post" enctype="multipart/form-data">
<div class="col-lg-2"> <fieldset>
<input class="form-control" type="text" name="siteName" id="siteName" value=""> <div class="mb-3 col-md-4 offset-md-4">
</div> <label for="siteName" class="form-label">Site Name:</label>
<input class="form-control" type="text" name="siteName" id="siteName" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="logo" class="form-label">Logo (200 x 200px):</label>
<input class="form-control" type="file" name="logo" id="logo">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbPrefix" class="form-label">Database Table Prefix:</label>
<input class="form-control" type="text" name="dbPrefix" id="dbPrefix" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbHost" class="form-label">Database Host:</label>
<input class="form-control" type="text" name="dbHost" id="dbHost" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbName" class="form-label">Database Name:</label>
<input class="form-control" type="text" name="dbName" id="dbName" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbUsername" class="form-label">Database Username:</label>
<input class="form-control" type="text" name="dbUsername" id="dbUsername" value="">
</div>
<div class="mb-3 col-md-4 offset-md-4">
<label for="dbPassword" class="form-label">Database Password:</label>
<input class="form-control" type="password" name="dbPassword" id="dbPassword">
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center mb-3">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Save</button><br>
</div>
</form>
</div> </div>
<div class="form-group"> </div>
<label for="logo" class="col-lg-6 control-label">Logo (200 x 200px):</label> </div>
<div class="col-lg-3">
<input class="form-control" type="file" name="logo" id="logo">
</div>
</div>
<div class="form-group">
<label for="dbPrefix" class="col-lg-6 control-label">Database Table Prefix:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="dbPrefix" id="dbPrefix" value="">
</div>
</div>
<div class="form-group">
<label for="dbHost" class="col-lg-6 control-label">Database Host:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="dbHost" id="dbHost" value="">
</div>
</div>
<div class="form-group">
<label for="dbName" class="col-lg-6 control-label">Database Name:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="dbName" id="dbName" value="">
</div>
</div>
<div class="form-group">
<label for="dbUsername" class="col-lg-6 control-label">Database Username:</label>
<div class="col-lg-2">
<input class="form-control" type="text" name="dbUsername" id="dbUsername" value="">
</div>
</div>
<div class="form-group">
<label for="dbPassword" class="col-lg-6 control-label">Database Password:</label>
<div class="col-lg-2">
<input class="form-control" type="password" name="dbPassword" id="dbPassword">
</div>
</div>
</fieldset>
<input type="hidden" name="token" value="{TOKEN}">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Configure</button><br>
</form>

View File

@ -1,31 +1,37 @@
{installer-nav} {installer-nav}
<br> <div class="container">
<p>All models are required for proper installation of The Tempus Project. In this step, we will add the database tables required for these models. In the next step, you'll be able to select which plugins you would like installed.</p> <div class="row justify-content-center">
<br> <div class="col-md-10">
<form action="" method="post" class="form-horizontal"> <p class="my-4">All models are required for proper installation of The Tempus Project. In this step, we will add the database tables required for these models. In the next step, you'll be able to select which plugins you would like installed.</p>
<table class="table table-striped"> <form action="" method="post" class="form-horizontal">
<thead> <table class="table table-striped">
<tr> <thead>
<th style="width: 70%">Model Name</th> <tr>
<th style="width: 20%">Version</th> <th class="px-5" style="width: 70%">Model Name</th>
</tr> <th class="text-center" style="width: 20%">Version</th>
</thead> </tr>
<tbody> </thead>
{LOOP} <tbody>
<tr> {LOOP}
<td>{name}</td> <tr>
<td>{version}</td> <td class="px-5">{name}</td>
</tr> <td class="text-center">{version}</td>
{/LOOP} </tr>
{ALT} {/LOOP}
<tr> {ALT}
<td align="center" colspan="3"> <tr>
No models to install. <td class="text-center" colspan="3">
</td> No models to install.
</tr> </td>
{/ALT} </tr>
</tbody> {/ALT}
</table> </tbody>
<input type="hidden" name="token" value="{TOKEN}"> </table>
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button><br> <input type="hidden" name="token" value="{TOKEN}">
</form> <div class="text-center">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button>
</div>
</form>
</div>
</div>
</div>

View File

@ -1,12 +1,12 @@
<ul class="nav nav-tabs nav-justified" role="tablist" style="margin-top: 55px"> <ul class="nav nav-tabs justify-content-center" role="tablist">
<li class="nav-link {menu-Welcome}"><a href="#">Welcome</a></li> <li class="nav-item {menu-Welcome}"><a href="#" class="nav-link">Welcome</a></li>
<li class="nav-link {menu-Terms}"><a href="#">Terms</a></li> <li class="nav-item {menu-Terms}"><a href="#" class="nav-link">Terms</a></li>
<li class="nav-link {menu-Verify}"><a href="#">Verify</a></li> <li class="nav-item {menu-Verify}"><a href="#" class="nav-link">Verify</a></li>
<li class="nav-link {menu-Configure}"><a href="#">Configure</a></li> <li class="nav-item {menu-Configure}"><a href="#" class="nav-link">Configure</a></li>
<li class="nav-link {menu-Routing}"><a href="#">Routing</a></li> <li class="nav-item {menu-Routing}"><a href="#" class="nav-link">Routing</a></li>
<li class="nav-link {menu-Models}"><a href="#">Models</a></li> <li class="nav-item {menu-Models}"><a href="#" class="nav-link">Models</a></li>
<li class="nav-link {menu-Plugins}"><a href="#">Plugins</a></li> <li class="nav-item {menu-Plugins}"><a href="#" class="nav-link">Plugins</a></li>
<li class="nav-link {menu-Resources}"><a href="#">Resources</a></li> <li class="nav-item {menu-Resources}"><a href="#" class="nav-link">Resources</a></li>
<li class="nav-link {menu-User}"><a href="#">User</a></li> <li class="nav-item {menu-User}"><a href="#" class="nav-link">User</a></li>
<li class="nav-link {menu-Complete}"><a href="#">Complete</a></li> <li class="nav-item {menu-Complete}"><a href="#" class="nav-link">Complete</a></li>
</ul> </ul>

View File

@ -1,37 +1,45 @@
{installer-nav} {installer-nav}
<br> <div class="container">
<p>The Tempus Project was built to utilize all of the plugins provided with the installer. You can choose not to enable any one of them, but it may negatively impact the operation of your site..</p> <div class="row justify-content-center">
<br> <div class="col-md-10">
<form action="" method="post" class="form-horizontal"> <p class="my-4">
<table class="table table-striped"> The Tempus Project was built to utilize all of the plugins provided with the installer. You can choose not to enable any one of them, but it may negatively impact the operation of your site.
<thead> </p>
<tr> <form action="" method="post" class="form-horizontal">
<th style="width: 70%">Plugin Name</th> <table class="table table-striped">
<th style="width: 20%">Version</th> <thead>
<th style="width: 10%"> <tr>
<INPUT type="checkbox" onchange="checkAll(this)" name="check.m" value="P_[]" checked="checked"/> <th class="px-5" style="width: 70%">Plugin Name</th>
</th> <th class="text-center" style="width: 20%">Version</th>
</tr> <th class="text-center" style="width: 10%">
</thead> <INPUT type="checkbox" onchange="checkAll(this)" name="check.m" value="P_[]" checked="checked"/>
<tbody> </th>
{LOOP} </tr>
<tr> </thead>
<td>{name}</td> <tbody>
<td>{version}</td> {LOOP}
<td> <tr>
<input type="checkbox" value="{name}" name="P_[]" checked="checked"> <td class="px-5">{name}</td>
</td> <td class="text-center">{version}</td>
</tr> <td class="text-center">
{/LOOP} <input type="checkbox" value="{name}" name="P_[]" checked="checked">
{ALT} </td>
<tr> </tr>
<td align="center" colspan="3"> {/LOOP}
No models to install. {ALT}
</td> <tr>
</tr> <td align="center" colspan="3">
{/ALT} No models to install.
</tbody> </td>
</table> </tr>
<input type="hidden" name="token" value="{TOKEN}"> {/ALT}
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button><br> </tbody>
</form> </table>
<input type="hidden" name="token" value="{TOKEN}">
<div class="text-center mb-3">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install</button>
</div>
</form>
</div>
</div>
</div>

View File

@ -1,10 +1,16 @@
{installer-nav} {installer-nav}
<br> <div class="container">
<br> <div class="row justify-content-center">
<p>Some models such as groups will need additional database resources and configurations to function properly. In this step, we will install those features.</p> <div class="col-md-10">
<br> <p class="my-4">
<br> Some models such as groups will need additional database resources and configurations to function properly. In this step, we will install those features.
<form action="" method="post" class="form-horizontal"> </p>
<input type="hidden" name="token" value="{TOKEN}"> <form action="" method="post" class="">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install Resources</button><br> <input type="hidden" name="token" value="{TOKEN}">
</form> <div class="text-center my-3">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Install Resources</button>
</div>
</form>
</div>
</div>
</div>

View File

@ -1,14 +1,18 @@
{installer-nav} {installer-nav}
<br> <div class="container">
<br> <div class="row justify-content-center">
<p>The Tempus Project uses rewrites in htaccess files (Apache), or location directives (Nginx), to automatically route all incoming traffic through the app. In this step, we will help set-up and then test that the required configurations have been made.</p> <div class="col-md-10">
<h3>Apache Users</h3> <p class="mt-4">The Tempus Project uses rewrites in htaccess files (Apache), or location directives (Nginx), to automatically route all incoming traffic through the app. In this step, we will help set-up and then test that the required configurations have been made.</p>
<p>In this step, we will attempt to generate the appropriate files for Apache servers.</p> <h3>Apache Users</h3>
<h3>Nginx Users</h3> <p>In this step, we will attempt to generate the appropriate files for Apache servers.</p>
<p>If you are using Nginx, you will need to update your server's configuration manually. Please see the documentation, for convenience, an example configuration has been provided with TheTempusProject and can be found in the app/resources directory.</p> <h3>Nginx Users</h3>
<br> <p>If you are using Nginx, you will need to update your server's configuration manually. Please see the documentation, for convenience, an example configuration has been provided with TheTempusProject and can be found in the app/resources directory.</p>
<br> <form action="" method="post" class="form-horizontal">
<form action="" method="post" class="form-horizontal"> <input type="hidden" name="token" value="{TOKEN}">
<input type="hidden" name="token" value="{TOKEN}"> <div class="text-center">
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Generate</button><br> <button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Generate</button><br>
</form> </div>
</form>
</div>
</div>
</div>

View File

@ -1,11 +1,13 @@
{installer-nav} <div class="container">
<h1>Welcome to The Tempus Project Installer.</h1> <div class="row justify-content-center">
<p>This installer will guide you through the process of installing and configuring The Tempus Project. Do not forget to delete this file once you have completed installation.</p> <div class="col-md-10 text-center">
<br> {installer-nav}
<br> <h1 class="mt-4">Welcome to The Tempus Project Installer.</h1>
<br> <p>This installer will guide you through the process of installing and configuring The Tempus Project. Do not forget to delete this file once you have completed installation.</p>
<br> <form method="post">
<form action="" method="post" class="form-horizontal"> <input type="hidden" name="token" value="{TOKEN}">
<input type="hidden" name="token" value="{TOKEN}"> <button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Begin Installation</button><br>
<button class="btn btn-lg btn-primary center-block" type="submit" name="submit" value="submit">Begin Installation</button><br> </form>
</form> </div>
</div>
</div>

View File

@ -1,6 +1,10 @@
<ul class="nav nav-pills flex-column mb-auto">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> {LOOP}
<ul class="navbar-nav navbar-dark bg-dark flex-column"> <li class="nav-item">
{ADMIN_LINKS} <a href="{url}" class="text-white {linkClasses}" {linkAttributes}>
{text}
</a>
{duuuuuuuh}
</li>
{/LOOP}
</ul> </ul>
</nav>

View File

@ -0,0 +1,6 @@
<ul class="collapse list-unstyled ms-3 text-small shadow" id="{dropdownName}Dropdown">
{LOOP}
<li class="nav-item"><a href="{url}" class="nav-link text-white">{text}</a></li>
{/LOOP}
</ul>

View File

@ -1,14 +1,15 @@
<!-- User Dropdown -->
<div class="dropdown nav-item mx-2"> <div class="dropdown nav-item mx-2">
<a <a
href="#" href="#"
class="d-block dropdown-toggle nav-link" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
id="userDropdown" id="userDropdown"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false"> aria-expanded="false">
<span class="mr-3">{USERNAME}</span> <i class="fa fa-user"></i> <img src="{ROOT_URL}{LOGO}" alt="" width="32" height="32" class="rounded-circle me-2"> <strong class="mr-3">{USERNAME}</strong>
</a> </a>
<ul class="dropdown-menu text-small" aria-labelledby="userDropdown"> <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="userDropdown">
<li><a href="{ROOT_URL}usercp" class="dropdown-item"><i class="fa fa-fw fa-user"></i> Profile</a></li> <li><a href="{ROOT_URL}usercp" class="dropdown-item"><i class="fa fa-fw fa-user"></i> Profile</a></li>
{topNavRightDropdown} {topNavRightDropdown}
<li><a href="{ROOT_URL}usercp/settings" class="dropdown-item"><i class="fa fa-fw fa-gear"></i> Settings</a></li> <li><a href="{ROOT_URL}usercp/settings" class="dropdown-item"><i class="fa fa-fw fa-gear"></i> Settings</a></li>