From 3a6bbf59d5f6ebe1a09a513f8737dd6e76e08fd5 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Fri, 3 Dec 2021 17:44:21 +0100 Subject: [PATCH] Restructured styles to be compatible to stylelint requirements --- slt/css/.htaccess | 24 ++++ slt/css/dynamic-styles.css.php | 188 ++++++++++++++++++++++++++++ slt/css/layout/_index.scss | 1 - slt/css/layout/_leftmenu.scss | 2 +- slt/css/layout/_main-content.scss | 4 +- slt/css/layout/_mobile-menu.scss | 8 +- slt/css/layout/_rightcolumn.scss | 11 -- slt/css/layout/_side-images.scss | 14 +-- slt/index.php | 199 +++--------------------------- slt/js/mobile.js | 8 +- 10 files changed, 241 insertions(+), 218 deletions(-) create mode 100644 slt/css/.htaccess create mode 100644 slt/css/dynamic-styles.css.php delete mode 100644 slt/css/layout/_rightcolumn.scss diff --git a/slt/css/.htaccess b/slt/css/.htaccess new file mode 100644 index 0000000..425e041 --- /dev/null +++ b/slt/css/.htaccess @@ -0,0 +1,24 @@ + + +# Caching + +# 2 Stunden für Textdateien + +Header set Cache-Control "public, max-age=3600, must-revalidate" + + + + + + +# Expires-Header aktivieren + ExpiresActive On + +# Typunabhängige Standard-Ablaufzeit setzen + ExpiresDefault "access plus 1 hour" + +# Typabhängige Ablaufzeit für JPEG-Dateien (jpeg, jpg, jpe) +# ExpiresByType image/jpeg "access plus 1 year" + +# Weitere Dateitypen... + diff --git a/slt/css/dynamic-styles.css.php b/slt/css/dynamic-styles.css.php new file mode 100644 index 0000000..2176146 --- /dev/null +++ b/slt/css/dynamic-styles.css.php @@ -0,0 +1,188 @@ +initialise(); +$params = JFactory::getApplication()->getTemplate(true)->params; + +header("content-type: text/css"); + +// duration of cached content (1 hour) +$offset = 60 * 60 ; +// cache control to process +header("Cache-Control: must-revalidate, max-age=$offset, public"); + +// expiration header format +// $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT"; +// send cache expiration header to broswer +// header($ExpStr); + +$leftImageValue = (empty($params['imgleft']) ? "none" : "url(\"" . JPATH_BASE. "/" . $params['imgleft'] . "\")") ; +$rightImageValue = (empty($params['imgright']) ? "none" : "url(\"" . JPATH_BASE . "/" . $params['imgright'] . "\")") +// $leftImageValue = (empty($params['imgleft']) ? "none" : "url(\"" . $this->baseurl . "/" . $params['imgleft'] . "\")") ; +// $rightImageValue = (empty($params['imgright']) ? "none" : "url(\"" . $this->baseurl . "/" . $params['imgright'] . "\")") + +?> + + +#left-menu +{ + display: none; +} + + +body +{ + background-color: ; +} + +a, a:hover, a:active, a:visited +{ + color: ; +} + +#page-bg +{ + background-image: linear-gradient(to bottom, ); + color: ; +} + +#mobile-menu li > a { + background-color: ; + color: ; +} + +#mobile-menu li.current > a { + background-color: ; + color: ; +} + +ul.menu { + background-color: ; + color: ; +} + +#mobile-menu { + background-color: ; + color: ; +} + +ul.menu li.current > a, +ul.menu li.current:hover > a +{ + background-color: ; + color: ; +} + +ul.nav > li > a:hover, +ul.nav > li > a:focus, +ul.nav-child > li > a:hover, +ul.nav-child > li > a:focus +{ + background-color: ; + color: ; +} + +#topmenu, +#topmenu > ul.menu { + background-color: ; + color: ; +} + +#topmenu .nav-child > li.current + +{ + background-color: ; + color: ; +} + +#topmenu .nav-child { + background-color: ; + color: ; +} + +#topmenu .nav > li:hover, +#topmenu .nav > li:focus, +#topmenu .nav > li.active, +#topmenu .nav-child > li:hover, +#topmenu .nav-child > li:focus +{ + background-color: ; + color: ; +} + +#left-side-image +{ + background-image: ; +} + +#right-side-image +{ + background-image: ; +} + +.list-striped li:nth-child(odd), +.row-striped .row-fluid:nth-child(odd), +.table-striped > tbody > tr:nth-child(odd) +{ + background-color: ; + color: ; +} +.row-striped .row-fluid:nth-child(odd) a, +.table-striped > tbody > tr:nth-child(odd) a +{ + color: ; +} +.list-striped li:hover, +.row-striped .row-fluid:hover, +.table-striped > tbody > tr:hover +{ + background-color: ; + color: ; +} +.row-striped .row-fluid:hover a, +.table-striped > tbody > tr:hover a +{ + color: ; +} +.table-striped > thead > tr +{ + background-color: ; + color: ; +} + +table.alternating tr:nth-child(even) { + background-color: ; + color: ; +} +table.alternating tr:nth-child(even) a +{ + color: ; +} +table.alternating tr:nth-child(1) { + background-color: ; + color: ; +} +table.alternating tr:nth-child(1) a { + color: ; +} +.readmore > .btn +{ + color: ; + background-color: ; +} +.readmore > .btn:hover +{ + color: ; + background-color: ; +} diff --git a/slt/css/layout/_index.scss b/slt/css/layout/_index.scss index c432f2f..3365e33 100644 --- a/slt/css/layout/_index.scss +++ b/slt/css/layout/_index.scss @@ -1,7 +1,6 @@ @use "page-layout"; @use "topmenu"; @use "leftmenu"; -@use "rightcolumn"; @use "footer"; @use "mobile-menu"; @use "menu"; diff --git a/slt/css/layout/_leftmenu.scss b/slt/css/layout/_leftmenu.scss index 65d2a33..1d8c87a 100644 --- a/slt/css/layout/_leftmenu.scss +++ b/slt/css/layout/_leftmenu.scss @@ -1,6 +1,6 @@ @use "../abstract" as abstract; -#left_menu { +#left-menu { display: none; @include abstract.for-desktop { diff --git a/slt/css/layout/_main-content.scss b/slt/css/layout/_main-content.scss index 88e787f..475f3c2 100644 --- a/slt/css/layout/_main-content.scss +++ b/slt/css/layout/_main-content.scss @@ -8,7 +8,7 @@ } } -#main_column { +#main-column { margin: 15px; @include abstract.for-desktop { @@ -18,7 +18,7 @@ } } -#main_content { +#main-content { @include abstract.for-desktop { flex: 1 1 auto; } diff --git a/slt/css/layout/_mobile-menu.scss b/slt/css/layout/_mobile-menu.scss index d1dc9ea..c84bc03 100644 --- a/slt/css/layout/_mobile-menu.scss +++ b/slt/css/layout/_mobile-menu.scss @@ -1,11 +1,11 @@ @use "../abstract" as abstract; -#mobile_menu, +#mobile-menu, #content { margin: 0 15px; } -#mobile_menu { +#mobile-menu { margin-top: 10px; display: none; @@ -61,7 +61,7 @@ } } -#mobile_menu_switch { +#mobile-menu-switch { flex: 0 0 auto; text-align: right; @@ -70,7 +70,7 @@ } } -#btn_mobile_menu { +#btn-mobile-menu { padding: 10px 30px 0 0; width: 40px; box-sizing: initial; diff --git a/slt/css/layout/_rightcolumn.scss b/slt/css/layout/_rightcolumn.scss deleted file mode 100644 index 8754bbd..0000000 --- a/slt/css/layout/_rightcolumn.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "../abstract" as abstract; - -#right_column { - display: none; - - @include abstract.for-desktop { - flex: 1 1 15%; - display: block; - margin: 15px 5px 15px 0; - } -} diff --git a/slt/css/layout/_side-images.scss b/slt/css/layout/_side-images.scss index 80459df..96c0374 100644 --- a/slt/css/layout/_side-images.scss +++ b/slt/css/layout/_side-images.scss @@ -1,8 +1,8 @@ @use "../abstract" as abstract; @include abstract.for-desktop { - #left_side-image, - #right_side-image { + #left-side-image, + #right-side-image { position: fixed; height: 100vh; width: calc((100% - 980px) / 2); @@ -13,17 +13,11 @@ opacity: 0.5; } - #left_side-image { + #left-side-image { left: 0; } - #right_side-image { + #right-side-image { right: 0; } } - -#left_side, -#right_side { - background-repeat: no-repeat; - background-size: cover; -} diff --git a/slt/index.php b/slt/index.php index 4942c2a..9689300 100644 --- a/slt/index.php +++ b/slt/index.php @@ -2,8 +2,11 @@ // No direct access. defined('_JEXEC') or die; +use Joomla\CMS\Uri\Uri; + JHTML::_('behavior.framework', true); $app = JFactory::getApplication(); +$doc = JFactory::getDocument(); // Add JavaScript Frameworks JHtml::_('bootstrap.framework'); @@ -21,10 +24,10 @@ JHtml::_('jquery.framework'); // Add Stylesheets JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto', 'relative' => false)); // JHtml::_('stylesheet', 'media/jui/css/icomoon.css', array('version' => 'auto', 'relative' => false)); -JHtml::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true)); +JHtml::_('stylesheet', 'style.css', array('version' => 'auto', 'relative' => true)); -$doc = JFactory::getDocument(); $doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css'); +$doc->addStyleSheet($this->baseurl.'/templates/slt/css/dynamic-styles.css.php?Itemid=' . $app->input->getInt('Itemid')); // Add Javascript for mobile menu JHtml::_('script', 'mobile.js', array('version' => 'auto', 'relative' => true)); @@ -35,11 +38,6 @@ JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true // Check for a custom js file JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true)); -$params = $this->params; - -$leftImageValue = (empty($this->params{'imgleft'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgleft'} . "\")") ; -$rightImageValue = (empty($this->params{'imgright'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgright'} . "\")") ; - ?> '; ?> @@ -50,172 +48,6 @@ $rightImageValue = (empty($this->params{'imgright'}) ? "none" : "url(\"" . $this - - - - @@ -228,7 +60,7 @@ print_r($this->params);
-
+
@@ -238,26 +70,23 @@ print_r($this->params);
-
'40px', 'id' => 'btn_mobile_menu'), true);?>
-
+
'40px', 'id' => 'btn-mobile-menu'), true);?>
+
-
+
-
-
-
+
+
+
-
- +
@@ -268,7 +97,7 @@ print_r($this->params);
-
+
diff --git a/slt/js/mobile.js b/slt/js/mobile.js index 9f31a14..d34a22a 100644 --- a/slt/js/mobile.js +++ b/slt/js/mobile.js @@ -1,13 +1,13 @@ jQuery(function($){ - $('#btn_mobile_menu').click(function(){ - $('#mobile_menu').toggle({ + $('#btn-mobile-menu').click(function(){ + $('#mobile-menu').toggle({ duration: '400', easing: 'linear', complete: function(){ - $('#mobile_menu').toggleClass('visible'); - $('#mobile_menu').css('display',''); + $('#mobile-menu').toggleClass('visible'); + $('#mobile-menu').css('display',''); } });