PopEye theme improvments
This commit is contained in:
dignajar
parent
930dd9a01b
commit
6688d0bd49
8 changed files with 129 additions and 427 deletions
|
|
@ -1,338 +0,0 @@
|
|||
html {
|
||||
font-size: 0.9rem;
|
||||
background: #EFEFEF;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #EFEFEF;
|
||||
color: #1b1b1b;
|
||||
}
|
||||
|
||||
nav.paginator {
|
||||
background: #EFEFEF;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
ICONS
|
||||
*/
|
||||
|
||||
.fa {
|
||||
padding-right: 2px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
SIDEBAR
|
||||
*/
|
||||
|
||||
div.sidebar .nav-item a {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
color: #555;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
div.sidebar .nav-item a:hover {
|
||||
color: #0078D4;
|
||||
}
|
||||
|
||||
div.sidebar .nav-item h4 {
|
||||
font-size: 1.2em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
AUTOCOMPLETE SEARCH
|
||||
*/
|
||||
|
||||
.search-suggestion {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.search-suggestion-options {
|
||||
font-size: 0.9em;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
BOOTSTRAP Hacks
|
||||
*/
|
||||
|
||||
@media (min-width: 1300px) {
|
||||
.container {
|
||||
max-width: 1350px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* for small devices */
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
#jsmediaManagerButton,
|
||||
#jscategoryButton,
|
||||
#jsdescriptionButton {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 3px 5px 2px;
|
||||
margin: 0 1px;
|
||||
background: #eaeaea;
|
||||
background: rgba(0, 0, 0, .07);
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.list-group-sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
DASHBOARD
|
||||
*/
|
||||
|
||||
#dashboard ul.list-group.list-group-striped li {
|
||||
border: none;
|
||||
word-break: break-word;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#dashboard ul.list-group.list-group-striped li:nth-of-type(even) {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
#dashboard div.quick-links-icons {
|
||||
font-size: 3em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#dashboard a.quick-links {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
#dashboard a.quick-links:hover {
|
||||
text-decoration: none;
|
||||
color: #4586d4;
|
||||
}
|
||||
|
||||
#hello-message {
|
||||
padding: 10px 0;
|
||||
color: #777;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#hello-message span.oi {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-line {
|
||||
/* Set the colour of this series line */
|
||||
stroke: #4a90e2;
|
||||
/* Control the thikness of your lines */
|
||||
stroke-width: 2px;
|
||||
/* Create a dashed line with a pattern */
|
||||
}
|
||||
|
||||
.ct-series-a .ct-point {
|
||||
/* Colour of your points */
|
||||
stroke: #4a90e2;
|
||||
/* Size of your points */
|
||||
stroke-width: 8px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
ALERT
|
||||
*/
|
||||
|
||||
#alert {
|
||||
display: none;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
border-radius: 0px;
|
||||
border: 0;
|
||||
z-index: 1000;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #4586d4;
|
||||
border-left: 6px solid #abd1ff !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: #d44545;
|
||||
border-left: 6px solid #ff9c9c !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
PLUGINS
|
||||
*/
|
||||
|
||||
.plugin-form label {
|
||||
display: block;
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.plugin-form input[type="text"],
|
||||
.plugin-form textarea,
|
||||
.plugin-form select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .375rem .75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .25rem;
|
||||
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
||||
}
|
||||
|
||||
.plugin-form textarea {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.plugin-form span.tip {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
margin-top: .25rem;
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Manage > Content
|
||||
*/
|
||||
|
||||
td.child {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Manage > New Content
|
||||
*/
|
||||
|
||||
#jseditor {
|
||||
background: #fff;
|
||||
padding: 10px 5% !important;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
|
||||
#jseditorSidebar {
|
||||
display: none;
|
||||
height: calc(100% - 45px);
|
||||
width: 50%;
|
||||
max-width: 350px;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: 45px;
|
||||
right: 15px;
|
||||
background-color: #fff;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
#jseditorSidebar {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
right: 0;
|
||||
}
|
||||
#editorToolbarRight button {
|
||||
font-size: 0px !important;
|
||||
}
|
||||
#editorToolbarRight button span {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.contentTools .btn {
|
||||
font-size: 0px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.contentTools .btn span {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#jseditorSidebar nav {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
#jseditorSidebar nav a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#jseditorSidebar .nav-tabs .nav-link {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#jseditorSidebar .nav-link.active {
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid #ccc;
|
||||
}
|
||||
|
||||
#jsshadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(72, 72, 72, 0.7);
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
|
||||
img.profilePicture {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
|
||||
/* Switch button */
|
||||
|
||||
.switch-button {
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch-icon-published {
|
||||
color: #1cb11c;
|
||||
}
|
||||
|
||||
.switch-icon-draft {
|
||||
color: #b11c1c;
|
||||
}
|
||||
|
||||
.switch-icon-unlisted,
|
||||
.switch-icon-static,
|
||||
.switch-icon-sticky {
|
||||
color: #1c81b1;
|
||||
}
|
||||
|
|
@ -164,6 +164,31 @@ class HTML {
|
|||
return $language->currentLanguageShortVersion();
|
||||
}
|
||||
|
||||
public static function socialNetworks()
|
||||
{
|
||||
global $site;
|
||||
$socialNetworks = array(
|
||||
'instagram'=>'Instagram',
|
||||
'facebook'=>'Facebook',
|
||||
'twitter'=>'Twitter',
|
||||
'youtube'=>'YouTube',
|
||||
'github'=>'Github',
|
||||
'gitlab'=>'GitLab',
|
||||
'linkedin'=>'Linkedin',
|
||||
'codepen'=>'Codepen',
|
||||
'xing'=>'Xing',
|
||||
'mastodon'=>'Mastodon',
|
||||
'vk'=>'VK'
|
||||
);
|
||||
|
||||
foreach ($socialNetworks as $key=>$label) {
|
||||
if (!$site->{$key}()) {
|
||||
unset($socialNetworks[$key]);
|
||||
}
|
||||
}
|
||||
return $socialNetworks;
|
||||
}
|
||||
|
||||
// --- CHECK OLD
|
||||
|
||||
public static function charset($charset)
|
||||
|
|
@ -181,30 +206,6 @@ class HTML {
|
|||
return $base.$file;
|
||||
}
|
||||
|
||||
public static function socialNetworks()
|
||||
{
|
||||
global $site;
|
||||
$socialNetworks = array(
|
||||
'github'=>'Github',
|
||||
'gitlab'=>'GitLab',
|
||||
'twitter'=>'Twitter',
|
||||
'facebook'=>'Facebook',
|
||||
'instagram'=>'Instagram',
|
||||
'codepen'=>'Codepen',
|
||||
'linkedin'=>'Linkedin',
|
||||
'xing'=>'Xing',
|
||||
'mastodon'=>'Mastodon',
|
||||
'vk'=>'VK'
|
||||
);
|
||||
|
||||
foreach ($socialNetworks as $key=>$label) {
|
||||
if (!$site->{$key}()) {
|
||||
unset($socialNetworks[$key]);
|
||||
}
|
||||
}
|
||||
return $socialNetworks;
|
||||
}
|
||||
|
||||
public static function title()
|
||||
{
|
||||
global $site;
|
||||
|
|
|
|||
|
|
@ -158,6 +158,11 @@ class Page {
|
|||
return HTML_PATH_ROOT.PAGE_URI_FILTER.$key;
|
||||
}
|
||||
|
||||
public function url($absolute=true)
|
||||
{
|
||||
return $this->permalink($absolute);
|
||||
}
|
||||
|
||||
// Returns the previous page key
|
||||
public function previousKey()
|
||||
{
|
||||
|
|
@ -549,44 +554,6 @@ class Page {
|
|||
return '~1 '.$L->get('minute');
|
||||
}
|
||||
|
||||
// Returns relative time (e.g. "1 minute ago")
|
||||
// Based on http://stackoverflow.com/a/18602474
|
||||
// Modified for Bludit
|
||||
// $complete = false : short version
|
||||
// $complete = true : full version
|
||||
public function relativeTime($complete = false) {
|
||||
$current = new DateTime;
|
||||
$past = new DateTime($this->getValue('dateRaw'));
|
||||
$elapsed = $current->diff($past);
|
||||
|
||||
$elapsed->w = floor($elapsed->d / 7);
|
||||
$elapsed->d -= $elapsed->w * 7;
|
||||
|
||||
$string = array(
|
||||
'y' => 'year',
|
||||
'm' => 'month',
|
||||
'w' => 'week',
|
||||
'd' => 'day',
|
||||
'h' => 'hour',
|
||||
'i' => 'minute',
|
||||
's' => 'second',
|
||||
);
|
||||
|
||||
foreach($string as $key => &$value) {
|
||||
if($elapsed->$key) {
|
||||
$value = $elapsed->$key . ' ' . $value . ($elapsed->$key > 1 ? 's' : ' ');
|
||||
} else {
|
||||
unset($string[$key]);
|
||||
}
|
||||
}
|
||||
|
||||
if(!$complete) {
|
||||
$string = array_slice($string, 0 , 1);
|
||||
}
|
||||
|
||||
return $string ? implode(', ', $string) . ' ago' : 'Just now';
|
||||
}
|
||||
|
||||
// Returns the value from the field, false if the fields doesn't exists
|
||||
// If you set the $option as TRUE, the function returns an array with all the values of the field
|
||||
public function custom($field, $options=false)
|
||||
|
|
@ -638,5 +605,43 @@ class Page {
|
|||
return $list;
|
||||
}
|
||||
|
||||
/* Returns relative time (e.g. "1 minute ago") === Bludit v4
|
||||
Based on http://stackoverflow.com/a/18602474
|
||||
|
||||
@complete boolean TRUE full version, FALSE short version
|
||||
@return string Relative time, for example: 1 minute ago
|
||||
*/
|
||||
public function relativeTime($complete=false) {
|
||||
$current = new DateTime;
|
||||
$past = new DateTime($this->getValue('dateRaw'));
|
||||
$elapsed = $current->diff($past);
|
||||
|
||||
$elapsed->w = floor($elapsed->d / 7);
|
||||
$elapsed->d -= $elapsed->w * 7;
|
||||
|
||||
$string = array(
|
||||
'y' => 'year',
|
||||
'm' => 'month',
|
||||
'w' => 'week',
|
||||
'd' => 'day',
|
||||
'h' => 'hour',
|
||||
'i' => 'minute',
|
||||
's' => 'second',
|
||||
);
|
||||
|
||||
foreach ($string as $key => &$value) {
|
||||
if ($elapsed->$key) {
|
||||
$value = $elapsed->$key . ' ' . $value . ($elapsed->$key > 1 ? 's' : ' ');
|
||||
} else {
|
||||
unset($string[$key]);
|
||||
}
|
||||
}
|
||||
|
||||
if (!$complete) {
|
||||
$string = array_slice($string, 0 , 1);
|
||||
}
|
||||
|
||||
return $string ? implode(', ', $string) . ' ago' : 'Just now';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,19 @@
|
|||
|
||||
/* COMMON */
|
||||
a {
|
||||
color: #495057;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0a58ca;
|
||||
}
|
||||
|
||||
.page-date {
|
||||
color: #0a58ca;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* VIDEO EMBED RESPONSIVE */
|
||||
.video-embed {
|
||||
overflow:hidden;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@
|
|||
<!-- Include CSS Bootstrap file from Bludit Core -->
|
||||
<?php echo HTML::cssBootstrap(); ?>
|
||||
|
||||
<!-- Include CSS Bootstrap ICONS file from Bludit Core -->
|
||||
<?php echo HTML::cssBootstrapIcons(); ?>
|
||||
|
||||
<!-- Include CSS Styles from this theme -->
|
||||
<?php echo HTML::css('css/style.css'); ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<footer class="footer bg-dark">
|
||||
<div class="container">
|
||||
<p class="m-0 text-center text-white text-uppercase"><?php echo $site->footer(); ?><span class="ms-5 text-warning">Powered by<img class="mini-logo" src="<?php echo DOMAIN_THEME_IMG.'favicon.png'; ?>"/><a target="_blank" class="text-white" href="https://www.bludit.com">Bludit</a></span></p>
|
||||
</div>
|
||||
</footer>
|
||||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||||
<div class="container">
|
||||
<ul class="bd-footer-links ps-0 mb-3">
|
||||
<li class="d-inline-block"><a href="#">GitHub</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="#">Twitter</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="#">Facebook</a></li>
|
||||
<li class="d-inline-block ms-3"><a href="#">About</a></li>
|
||||
</ul>
|
||||
<p class="mb-0">Design for Bludit v4.0</p>
|
||||
<p class="mb-0">Running over Bludit CMS</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -33,16 +33,18 @@
|
|||
<!-- Pages -->
|
||||
<div class="list-group list-group-flush">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<div href="#" class="list-group-item list-group-item-action pt-3 pb-3" aria-current="true">
|
||||
<div class="list-group-item pt-3 pb-3" aria-current="true">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<!-- Print page's title -->
|
||||
<h5 class="mb-1"><?php echo $page->title() ?></h5>
|
||||
<a href="<?php echo $page->url() ?>">
|
||||
<h5 class="mb-1"><?php echo $page->title() ?></h5>
|
||||
</a>
|
||||
<!-- Print page's date -->
|
||||
<small>3 days ago</small>
|
||||
<small class="page-date"><?php echo $page->relativeTime() ?></small>
|
||||
</div>
|
||||
|
||||
<!-- Print page's description -->
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<p class="mb-1 form-text">Some placeholder content in a paragraph.</p>
|
||||
|
||||
<!-- Print page's tags -->
|
||||
<?php
|
||||
|
|
@ -63,30 +65,30 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Pagination -->
|
||||
<?php if (Paginator::numberOfPages() > 1) : ?>
|
||||
<nav class="paginator">
|
||||
<ul class="pagination flex-wrap justify-content-center">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-center">
|
||||
|
||||
<!-- Previous button -->
|
||||
<?php if (Paginator::showPrev()) : ?>
|
||||
<li class="page-item me-2">
|
||||
<a class="page-link" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1">◀ <?php echo $L->get('Previous'); ?></a>
|
||||
</li>
|
||||
<!-- Older pages -->
|
||||
<?php if (Paginator::showNext()) : ?>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="<?php echo Paginator::nextPageUrl() ?>">◀ <?php echo $L->get('Previus'); ?></a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Home button -->
|
||||
<li class="page-item <?php if (Paginator::currentPage() == 1) echo 'disabled' ?>">
|
||||
<a class="page-link" href="<?php echo HTML::siteUrl() ?>"><?php echo $L->get('Home'); ?></a>
|
||||
<a class="page-link" href="<?php echo $site->url() ?>"><?php echo $L->get('Home'); ?></a>
|
||||
</li>
|
||||
|
||||
<!-- Next button -->
|
||||
<?php if (Paginator::showNext()) : ?>
|
||||
<li class="page-item ms-2">
|
||||
<a class="page-link" href="<?php echo Paginator::nextPageUrl() ?>"><?php echo $L->get('Next'); ?> ►</a>
|
||||
</li>
|
||||
<!-- Newer pages -->
|
||||
<?php if (Paginator::showPrev()) : ?>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><?php echo $L->get('Next'); ?> ►</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endif ?>
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
<nav class="navbar sticky-top navbar-light bg-light">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Sticky top</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="<?php echo $site->url() ?>"><?php echo $site->title() ?></a>
|
||||
<div class="d-flex">
|
||||
<?php foreach (HTML::socialNetworks() as $key=>$name) {
|
||||
echo '<span class="p-2"><i class="me-2 bi bi-'.$key.'"></i>'.$name.'</span>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Loading…
Reference in a new issue