Skip to content

Commit

Permalink
Merge pull request joomla#46 from joomla/cassiopeia/4-0-dev-frontend-…
Browse files Browse the repository at this point in the history
…metismenu-and-html-structure

Add Metismenu to Cassiopeia, rework Cassiopeia's HTML structure, use relative CSS sizes
  • Loading branch information
richard67 authored Aug 30, 2020
2 parents 7f2362c + b73b055 commit 6b6dbba
Show file tree
Hide file tree
Showing 23 changed files with 445 additions and 130 deletions.
1 change: 1 addition & 0 deletions language/en-GB/joomla.ini
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,7 @@ JGLOBAL_SUBHEADING_DESC="Optional text to show as a subheading."
JGLOBAL_TITLE="Title"
JGLOBAL_TITLE_ASC="Title ascending"
JGLOBAL_TITLE_DESC="Title descending"
JGLOBAL_TOGGLE_DROPDOWN="Toggle Dropdown"
JGLOBAL_TYPE_OR_SELECT_CATEGORY="Type or Select a Category"
JGLOBAL_TYPE_OR_SELECT_SOME_OPTIONS="Type or select some options"
JGLOBAL_TYPE_OR_SELECT_SOME_TAGS="Type or select some tags"
Expand Down
18 changes: 18 additions & 0 deletions templates/cassiopeia/html/mod_custom/banner.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?php
/**
* @package Joomla.Site
* @subpackage mod_custom
*
* @copyright Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;
?>


<div class="mod-custom custom banner-overlay" <?php if ($params->get('backgroundimage')) : ?> style="background-image:url(<?php echo $params->get('backgroundimage'); ?>)"<?php endif; ?> >
<div class="overlay">
<?php echo $module->content; ?>
</div>
</div>
114 changes: 114 additions & 0 deletions templates/cassiopeia/html/mod_menu/metismenu.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<?php
/**
* @package Joomla.Site
* @subpackage mod_menu
*
* @copyright Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\WebAsset\WebAssetManager;
use Joomla\Utilities\ArrayHelper;

/** @var WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->registerAndUseScript('metismenu', 'mm-horizontal.js', [], [], ['metismenujs']);

$id = '';

if ($tagId = $params->get('tag_id', ''))
{
$id = ' id="' . $tagId . '"';
}

?>
<ul<?php echo $id; ?> class="mod-menu mod-menu_metismenu metismenu mod-list <?php echo $class_sfx; ?>">

<?php foreach ($list as $i => &$item)
{
$itemParams = $item->getParams();
$class = 'metismenu-item item-' . $item->id;

if ($item->id == $default_id)
{
$class .= ' default';
}

if ($item->id == $active_id || ($item->type === 'alias' && $itemParams->get('aliasoptions') == $active_id))
{
$class .= ' current';
}

if (in_array($item->id, $path))
{
$class .= ' active';
}
elseif ($item->type === 'alias')
{
$aliasToId = $itemParams->get('aliasoptions');

if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
{
$class .= ' active';
}

elseif (in_array($aliasToId, $path))
{
$class .= ' alias-parent-active';
}
}

if ($item->type === 'separator')
{
$class .= ' divider';
}

if ($item->deeper)
{
$class .= ' deeper';
}

if ($item->parent)
{
$class .= ' parent';
}

echo '<li class="' . $class . '">';

switch ($item->type) :
case 'separator':
case 'component':
case 'heading':
case 'url':
require ModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
break;

default:
require ModuleHelper::getLayoutPath('mod_menu', 'default_url');
break;
endswitch;

switch (true) :
// The next item is deeper.
case $item->deeper:
echo '<a class="has-arrow mm-collapsed" href="#" role="button" aria-haspopup="true" aria-expanded="false"><span class="sr-only">' . Text::_('JGLOBAL_TOGGLE_DROPDOWN') . '</span></a>';
echo '<ul class="mm-collapse">';
break;

// The next item is shallower.
case $item->shallower:
echo '</li>';
echo str_repeat('</ul></li>', $item->level_diff);
break;

// The next item is on the same level.
default:
echo '</li>';
break;
endswitch;
}
?></ul>
75 changes: 39 additions & 36 deletions templates/cassiopeia/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -104,40 +104,41 @@
. $hasClass;
echo ($this->direction == 'rtl' ? ' rtl' : '');
?>">
<div class="grid-child container-header full-width <?php echo $stickyHeader; ?>">
<header class="header">
<header class="header container-header full-width <?php echo $stickyHeader; ?>">
<div class="grid-child">
<div class="navbar-brand">
<a href="<?php echo $this->baseurl; ?>/">
<?php echo $logo; ?>
</a>
<?php if ($this->params->get('siteDescription')) : ?>
<div class="site-description"><?php echo htmlspecialchars($this->params->get('siteDescription')); ?></div>
<?php endif; ?>
</div>
</div>
<?php if ($this->countModules('menu') || $this->countModules('search')) : ?>
<nav class="grid-child navbar navbar-expand-lg">
<div class="navbar-brand">
<a href="<?php echo $this->baseurl; ?>/">
<?php echo $logo; ?>
</a>
<?php if ($this->params->get('siteDescription')) : ?>
<div class="site-description"><?php echo htmlspecialchars($this->params->get('siteDescription')); ?></div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="<?php echo Text::_('TPL_CASSIOPEIA_TOGGLE'); ?>">
<span class="fas fa-bars" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<?php if ($this->countModules('menu')) : ?>
<jdoc:include type="modules" name="menu" style="none" />
<?php endif; ?>
<?php if ($this->countModules('search')) : ?>
<div class="form-inline">
<jdoc:include type="modules" name="search" style="none" />
</div>
<?php endif; ?>
</div>

<?php if ($this->countModules('menu') || $this->countModules('search')) : ?>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="<?php echo Text::_('TPL_CASSIOPEIA_TOGGLE'); ?>">
<span class="fas fa-bars" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<jdoc:include type="modules" name="menu" style="none" />
<?php if ($this->countModules('search')) : ?>
<div class="form-inline">
<jdoc:include type="modules" name="search" style="none" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>

</nav>
<?php if ($this->countModules('banner')) : ?>
<div class="grid-child container-banner">
<jdoc:include type="modules" name="banner" style="html5" />
</div>
<?php endif; ?>
<?php endif; ?>
</header>
</div>
<?php if ($this->countModules('banner')) : ?>
<div class="container-banner full-width">
<jdoc:include type="modules" name="banner" style="none" />
</div>
<?php endif; ?>

<?php if ($this->countModules('top-a')) : ?>
<div class="grid-child container-top-a">
Expand Down Expand Up @@ -186,14 +187,16 @@
<?php endif; ?>

<?php if ($this->countModules('footer') || ($this->params->get('backTop') == 1)) : ?>
<footer class="grid-child container-footer footer">
<jdoc:include type="modules" name="footer" style="none" />
<?php if ($this->params->get('backTop') == 1) : ?>
<a href="#top" id="back-top" class="back-top">
<span class="fas fa-arrow-up" aria-hidden="true"></span>
<span class="sr-only"><?php echo Text::_('TPL_CASSIOPEIA_BACKTOTOP'); ?></span>
</a>
<?php endif; ?>
<footer class="container-footer footer full-width">
<div class="grid-child">
<jdoc:include type="modules" name="footer" style="none" />
<?php if ($this->params->get('backTop') == 1) : ?>
<a href="#top" id="back-top" class="back-top">
<span class="fas fa-arrow-up" aria-hidden="true"></span>
<span class="sr-only"><?php echo Text::_('TPL_CASSIOPEIA_BACKTOTOP'); ?></span>
</a>
<?php endif; ?>
</div>
</footer>
<?php endif; ?>

Expand Down
8 changes: 8 additions & 0 deletions templates/cassiopeia/js/mm-horizontal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
document.addEventListener("DOMContentLoaded", function(event) {
const allMenus = document.querySelectorAll('ul.mod-menu_metismenu');

allMenus.forEach(menu => {
// eslint-disable-next-line no-new, no-undef
new MetisMenu(menu);
});
});
5 changes: 2 additions & 3 deletions templates/cassiopeia/scss/blocks/_alerts.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
// Alerts

.j-main-container {

.alert {
margin: 10px;
margin: .75rem;
}

}
Expand All @@ -16,7 +15,7 @@

from {
opacity: 0;
transform: translateY(-15px);
transform: translateY(-1rem);
}

to {
Expand Down
21 changes: 21 additions & 0 deletions templates/cassiopeia/scss/blocks/_banner.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,25 @@
margin: auto;
}

.banner-overlay {
height: 70vh;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top,center;
background-size: cover;

.overlay {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #fff;
background-color: rgba(0,0,0,.5);

h2 {
font-size: 3rem;
}
}
}
}
7 changes: 1 addition & 6 deletions templates/cassiopeia/scss/blocks/_css-grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,13 @@
". bot-b bot-b bot-b bot-b ."
". footer footer footer footer ."
". debug debug debug debug .";
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 270px)) [main-end] minmax(0, 1fr) [full-end];
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 16.875rem)) [main-end] minmax(0, 1fr) [full-end];
grid-gap: 0 $cassiopeia-grid-gutter;

> [class^="container-"],
> [class*=" container-"] {
width: auto;
max-width: none;
margin: 0 0 $cassiopeia-grid-gutter;
}

.container-component,
Expand Down Expand Up @@ -63,10 +62,6 @@
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 25%)) [main-end] minmax(0, 1fr) [full-end];
}
}

.container-banner {
padding: 0 ($cassiopeia-grid-gutter / 2);
}
}

.container-header {
Expand Down
4 changes: 2 additions & 2 deletions templates/cassiopeia/scss/blocks/_demo-styling.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ $inverted-color: rgba(255, 255, 255, .9);
text-align: center;

.demo-title {
font-size: 20px;
font-size: $h2-font-size;
color: theme-color("primary");
}

.fa-joomla {
font-size: 32px;
font-size: $h1-font-size;
color: theme-color("primary");
}

Expand Down
11 changes: 9 additions & 2 deletions templates/cassiopeia/scss/blocks/_footer.scss
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
// Footer

.footer {
padding: 2.5rem ($cassiopeia-grid-gutter / 2);
color: #fff;
background: $cassiopeia-template-color;

a {
color: #fff;
}

.back-top {
align-self: flex-end;
height: 40px;
padding: 8px 11px;
color: #fff;
background: $cassiopeia-template-color;
color: $cassiopeia-template-color;
background: #fff;
border-radius: 3px;

@include margin("right", 5px);
Expand Down
6 changes: 3 additions & 3 deletions templates/cassiopeia/scss/blocks/_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
background-color: $white-offset;

&.input-xlarge {
max-width: 350px;
max-width: 21.875rem;
}

&.input-xxlarge {
max-width: 550px;
max-width: 34.375rem;
}

&.input-full {
Expand All @@ -19,7 +19,7 @@
}

.spacer hr {
width: 380px;
width: 23.75rem;
}

.custom-select {
Expand Down
Loading

0 comments on commit 6b6dbba

Please sign in to comment.