Bootstrap 5 cont
This commit is contained in:
Joey Kimsey
@ -11,6 +11,10 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.context-main-bg {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
/* Base styles for the switch container */
|
/* Base styles for the switch container */
|
||||||
.material-switch {
|
.material-switch {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -86,22 +86,34 @@ $(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
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const toggleButton = document.getElementById('dark-mode-toggle');
|
const toggleButton = document.getElementById('dark-mode-toggle');
|
||||||
|
const enableButton = document.getElementById('dark-mode-toggle-button');
|
||||||
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');
|
if ( enableButton ) {
|
||||||
} else {
|
enableButton.innerText = 'Disable Now';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
console.error( 'darkMode disabled');
|
if ( enableButton ) {
|
||||||
|
enableButton.addEventListener('click', function () {
|
||||||
|
if (darkModeStylesheet.disabled) {
|
||||||
|
darkModeStylesheet.disabled = false;
|
||||||
|
localStorage.setItem('darkMode', 'enabled');
|
||||||
|
enableButton.innerText = 'Disable Now';
|
||||||
|
} else {
|
||||||
|
darkModeStylesheet.disabled = true;
|
||||||
|
localStorage.setItem('darkMode', 'disabled');
|
||||||
|
enableButton.innerText = 'Enable Now';
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
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');
|
||||||
|
|||||||
@ -30,6 +30,7 @@ class BlogLoader extends DefaultLoader {
|
|||||||
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'));
|
Components::set('SIDEBARABOUT', Views::simpleView('blog.about'));
|
||||||
|
Components::set('BLOGFEATURES', '');
|
||||||
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">' );
|
||||||
|
|||||||
@ -74,57 +74,11 @@
|
|||||||
|
|
||||||
<!-- Leading Content -->
|
<!-- Leading Content -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
|
{BLOGFEATURES}
|
||||||
<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 what’s most interesting in this post’s contents.</p>
|
|
||||||
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-2">
|
|
||||||
<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="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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="pt-4">
|
<div class="pt-4">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h3 class="pb-4 mb-4 fst-italic border-bottom">
|
<h3 class="pb-4 mb-4 fst-italic border-bottom">
|
||||||
{SITENAME} Blog
|
{SITENAME} Blog
|
||||||
</h3>
|
</h3>
|
||||||
@ -136,7 +90,7 @@
|
|||||||
<!-- Sidebar Content -->
|
<!-- Sidebar Content -->
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="position-sticky" style="top: 2rem;">
|
<div class="position-sticky" style="top: 2rem;">
|
||||||
<div class="p-4 mb-3 bg-light rounded">
|
<div class="p-4">
|
||||||
{SIDEBARABOUT}
|
{SIDEBARABOUT}
|
||||||
</div>
|
</div>
|
||||||
<div class="p-4">
|
<div class="p-4">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<div class="p-4 mb-3 bg-light rounded">
|
<div class="p-4 mb-3 rounded context-main-bg">
|
||||||
<h4 class="fst-italic">About</h4>
|
<h4 class="fst-italic">About</h4>
|
||||||
<p class="mb-0">
|
<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.
|
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.
|
||||||
|
|||||||
7
app/plugins/blog/views/largeFeature.html
Normal file
7
app/plugins/blog/views/largeFeature.html
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<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 what’s most interesting in this post’s contents.</p>
|
||||||
|
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,4 +1,4 @@
|
|||||||
<div class="card panel-info">
|
<div class="card context-main-bg">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Recent Posts</h3>
|
<h3 class="card-title">Recent Posts</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
31
app/plugins/blog/views/smallFeature.html
Normal file
31
app/plugins/blog/views/smallFeature.html
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
|
||||||
|
<div class="row mb-2">
|
||||||
|
<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="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>
|
||||||
@ -1,10 +1,14 @@
|
|||||||
<form action="" method="post" class="form-horizontal">
|
<form action="" method="post" class="text-center mx-auto mt-4" style="max-width: 600px;">
|
||||||
<div class="form-group center-block">
|
<div class="mb-3">
|
||||||
<div class="col-lg-8 col-lg-offset-2">
|
<textarea
|
||||||
<textarea class="form-control" name="comment" maxlength="2000" rows="4" cols="50" id="comment"></textarea>
|
class="form-control"
|
||||||
</div>
|
name="comment"
|
||||||
|
maxlength="2000"
|
||||||
|
rows="4"
|
||||||
|
id="comment"
|
||||||
|
placeholder="Write your comment here..."></textarea>
|
||||||
</div>
|
</div>
|
||||||
<button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary center-block">Comment</button>
|
<button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary">Comment</button>
|
||||||
<input type="hidden" name="token" value="{TOKEN}">
|
<input type="hidden" name="token" value="{TOKEN}">
|
||||||
<input type="hidden" name="contentId" value="{CONTENT_ID}">
|
<input type="hidden" name="contentId" value="{CONTENT_ID}">
|
||||||
</form>
|
</form>
|
||||||
@ -1,10 +1,10 @@
|
|||||||
<div class="card panel-info widget comments">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header bg-secondary">
|
||||||
<span class="fa fa-fw fa-comment"></span>
|
|
||||||
<h3 class="card-title">Comments</h3>
|
<h class="card-title"><span class="fa fa-fw fa-comment"></span> Comments</h3>
|
||||||
<span class="label label-primary">{count}</span>
|
<span class="label label-primary">{count}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body context-main-bg">
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
{LOOP}
|
{LOOP}
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<ul class="nav nav-tabs justify-content-center" role="tablist">
|
<ul class="nav nav-tabs justify-content-center" role="tablist">
|
||||||
{LOOP}
|
{LOOP}
|
||||||
<li class="nav-item"><a href="{url}" class="nav-link">{name}</a></li>
|
<li class="nav-item context-main-bg mx-1"><a href="{url}" class="nav-link context-main">{name}</a></li>
|
||||||
{/LOOP}
|
{/LOOP}
|
||||||
</ul>
|
</ul>
|
||||||
Reference in New Issue
Block a user