slt/template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'fix/mobile-menu-colors'

Browse Source 
First approach to fix #702 in the temaplte by reducing complexity
This commit is contained in:
Christian Wolf 2022-04-15 17:23:29 +02:00
commit fc1a8c12bf
22 changed files with 269 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.buildpath
View File

@ -1,5 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<buildpath>
<buildpathentry kind="con" path="org.eclipse.php.core.LANGUAGE"/>
<buildpathentry kind="src" path=""/>
</buildpath>

28
.project
View File

@ -1,28 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>template</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.eclipse.wst.common.project.facet.core.builder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.eclipse.wst.validation.validationbuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.eclipse.dltk.core.scriptbuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>org.eclipse.php.core.PHPNature</nature>
<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
</natures>
</projectDescription>

2
.settings/org.eclipse.php.core.prefs
View File

@ -1,2 +0,0 @@
eclipse.preferences.version=1
include_path=0;/template

7
.settings/org.eclipse.wst.common.project.facet.core.xml
View File

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<faceted-project>
<fixed facet="php.component"/>
<fixed facet="php.core.component"/>
<installed facet="php.core.component" version="1"/>
<installed facet="php.component" version="5.6"/>
</faceted-project>

12
res/templateDetails.tmpl.xml
View File

@ -64,22 +64,34 @@
<field name="topbgcolor3" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_TOP_LIGHT'></field>
</fieldset>
<fieldset name='TPL_SLT_COLORS_MAIN'>
<field type="spacer" name="menu-colors" label="Top-menu colors" />
<!--<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field>-->
<field name="mainfgcolor" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_MAIN'></field>
<field name="mainlicolor" type='color' default='#222' label='TPL_SLT_LINK_COLOR_MAIN'></field>
<field name="mainbgcolortop" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_MAIN_TOP'></field>
<field name="mainbgcolorbot" type='color' default='#fff' label='TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM'></field>
<field type="spacer" name="menu-colors" label="Menu colors" />
<field name="fgcolor1" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_1'></field>
<field name="licolor1" type='color' default='#222' label='TPL_SLT_LINK_COLOR_1'></field>
<field name="bgcolor1" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_1' format='rgba'></field>
<field type="spacer" name="spacer1" hr="true" />
<field name="fgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_2'></field>
<field name="licolor2" type='color' default='#222' label='TPL_SLT_LINK_COLOR_2'></field>
<field name="bgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_2' format='rgba'></field>
<field type="spacer" name="spacer2" hr="true" />
<field name="fgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_3'></field>
<field name="licolor3" type='color' default='#222' label='TPL_SLT_LINK_COLOR_3'></field>
<field name="bgcolor3" type='color' default='#888' label='TPL_SLT_BACKGROUND_COLOR_3' format='rgba'></field>
<field type="spacer" name="effect-colors" label="Effect coloring" />
<field name="fgeffect" type="color" default="#000" label="TPL_SLT_FOREGROUND_EFFECT_COLOR"></field>
<field name="bgeffect" type="color" default="#eee" label="TPL_SLT_BACKGROUND_EFFECT_COLOR"></field>
<field type="spacer" name="spacer3" hr="true" />
<field name="fgeffecthdr" type="color" default="#000" label="TPL_SLT_FOREGROUND_EFFECT_HEADER_COLOR"></field>
<field name="bgeffecthdr" type="color" default="#ccc" label="TPL_SLT_BACKGROUND_EFFECT_HEADER_COLOR"></field>
<field type="spacer" name="side-images" label="Side configuration" />
<field name="bgcolorside" type='color' default='#ebebeb' label='TPL_SLT_BACKGROUND_COLOR_AT_SIDES'></field>
<field name="imgleft" type='media' directory='' label='TPL_SLT_LEFT_BACKGROUND_IMAGE'></field>
<field name="imgright" type='media' directory='' label='TPL_SLT_RIGHT_BACKGROUND_IMAGE'></field>

21
slt.xml
View File

@ -1,21 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<updates>
<update>
<name>Joomla Template</name>
<description>Template for the SLT for the Joomla! CMS</description>
<element>slt</element>
<type>template</type>
<version>0.0.1</version>
<!-- <infourl title="Joomla!">http://www.joomla.org/</infourl> -->
<downloads>
<downloadurl type="full" format="tar">http://localhost/slt-update/slt1.tar</downloadurl>
</downloads>
<!--<tags>
<tag>stable</tag>
</tags>-->
<maintainer>Christian Wolf</maintainer>
<!-- <maintainerurl>http://sammoffatt.com.au</maintainerurl> -->
<!-- <section>Testing</section> -->
<!-- <targetplatform name="joomla" version="1.6"/> -->
</update>
</updates>

4
slt/.stylelintrc.json
View File

@ -6,6 +6,8 @@
],
"rules": {
"indentation": 4,
"selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$"
"selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$",
"string-quotes": "single",
"declaration-colon-newline-after": null
}
}

1
slt/css/components/_index.scss
View File

@ -6,3 +6,4 @@
@use 'verbandstag';
@use 'vereine';
@use 'contact-list';
@use 'read-more';

9
slt/css/components/_read-more.scss Normal file
View File

@ -0,0 +1,9 @@
.readmore > .btn {
color: var(--color-menu, #000);
background-color: var(--color-menu-background, #eee);
&:hover {
color: var(--color-menu-active, #000);
background-color: var(--color-menu-background-active, #ccc);
}
}

8
slt/css/core/_core.scss
View File

@ -6,6 +6,7 @@ body {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-side-background, #fff);
/* padding: 0px 20px 10px 20px; */
padding: 0;
@ -23,6 +24,13 @@ a {
text-decoration: none;
}
a,
a:hover,
a:active,
a:visited {
color: var(--color-main-link, #000);
}
p {
text-align: justify;
hyphens: auto;

33
slt/css/core/_default-classes.scss
View File

@ -21,10 +21,35 @@ li.row-fluid {
padding-bottom: 0;
}
.row-striped .row-fluid:nth-child(n),
.list-striped li:nth-child(n),
.table-striped tbody > tr:nth-child(n) > td {
background-color: initial;
// .row-striped .row-fluid:nth-child(n),
// .list-striped li:nth-child(n),
// .table-striped tbody > tr:nth-child(n) > td {
// background-color: initial;
// }
.table-striped {
> thead > tr {
color: var(--color-effect-header, #000);
background-color: var(--color-effect-background-header, #aaa);
}
}
.list-striped li:nth-child(odd),
.row-striped .row-fluid:nth-child(odd),
.table-striped > tbody > tr:nth-child(odd) {
color: var(--color-effect, #000);
background-color: var(--color-effect-background, #ccc);
}
.list-striped li:hover,
.row-striped .row-fluid:hover,
.table-striped > tbody > tr:hover {
color: var(--color-effect-header, #000);
background-color: var(--color-effect-background-header, #aaa);
}
.table-hover > tbody > tr:hover > * {
color: unset;
}
.well {

192
slt/css/dynamic-styles.css.php
View File

@ -25,165 +25,53 @@ header("Cache-Control: must-revalidate, max-age=$offset, public");
$leftImageValue = empty($params['imgleft'])
? 'none'
: "url(\"" . JPATH_BASE . '/' . $params['imgleft'] . "\")";
: "url(\"" . JPATH_BASE . $params['imgleft'] . "\")";
$rightImageValue = empty($params['imgright'])
? 'none'
: "url(\"" . JPATH_BASE . '/' . $params['imgright'] . "\")";
: "url(\"" . JPATH_BASE . $params['imgright'] . "\")";
?>
<?php if ($params['titlepage'] === '1') { ?>
#left-menu
{
display: none;
}
<?php } ?>
<?php if ($params['titlepage'] === '1') {
echo "#left-menu { display: none; }\n";
} ?>
body
{
background-color: <?php echo $params['bgcolorside']; ?>;
:root {
--color-fg-top: <?php echo $params['topfgcolor1']; ?>;
--color-bg-top: <?php echo $params['topbgcolor1']; ?>;
--color-fg-top-dark: <?php echo $params['topfgcolor2']; ?>;
--color-bg-top-dark: <?php echo $params['topbgcolor2']; ?>;
--color-fg-top-light: <?php echo $params['topfgcolor3']; ?>;
--color-bg-top-light: <?php echo $params['topbgcolor3']; ?>;
--color-main: <?php echo $params['mainfgcolor']; ?>;
--color-main-link: <?php echo $params['mainlicolor']; ?>;
--color-page-bg-top: <?php echo $params['mainbgcolortop']; ?>;
--color-page-bg-bottom: <?php echo $params['mainbgcolorbot']; ?>;
--color-menu: <?php echo $params['fgcolor1']; ?>;
--color-menu-background: <?php echo $params['bgcolor1']; ?>;
--color-menu-active: <?php echo $params['fgcolor2']; ?>;
--color-menu-background-active: <?php echo $params['bgcolor2']; ?>;
--color-effect: <?php echo $params['fgeffect']; ?>;
--color-effect-background: <?php echo $params['bgeffect']; ?>;
--color-effect-header: <?php echo $params['fgeffecthdr']; ?>;
--color-effect-background-header: <?php echo $params['bgeffecthdr']; ?>;
--color-side-background: <?php echo $params['bgcolorside']; ?>;
--image-left-side: <?php echo $leftImageValue; ?>;
--image-right-side: <?php echo $rightImageValue; ?>;
}
a, a:hover, a:active, a:visited
{
color: <?php echo $params['mainlicolor']; ?>;
}
<?php // Stop execution here, the rest is for debugging
#page-bg
{
background-image: linear-gradient(to bottom, <?php echo $params[
'mainbgcolortop'
] .
',' .
$params['mainbgcolorbot']; ?>);
color: <?php echo $params['mainfgcolor']; ?>;
}
exit(); ?>
#mobile-menu li > a {
background-color: <?php echo $params['bgcolor2']; ?>;
color: <?php echo $params['licolor2']; ?>;
}
#mobile-menu li.current > a {
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['licolor3']; ?>;
}
ul.mod-menu {
background-color: <?php echo $params['bgcolor1']; ?>;
color: <?php echo $params['fgcolor1']; ?>;
}
#mobile-menu {
background-color: <?php echo $params['bgcolor1']; ?>;
color: <?php echo $params['fgcolor1']; ?>;
}
ul.mod-menu li.current > a,
ul.mod-menu li.current:hover > a
{
background-color: <?php echo $params['bgcolor2']; ?>;
color: <?php echo $params['licolor2']; ?>;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.mod-menu__sub > li > a:hover,
ul.mod-menu__sub > li > a:focus
{
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['licolor3']; ?>;
}
#topmenu,
#topmenu > ul.mod-menu {
background-color: <?php echo $params['topbgcolor1']; ?>;
color: <?php echo $params['topfgcolor1']; ?>;
}
#topmenu .mod-menu__sub > li.current
{
background-color: <?php echo $params['topbgcolor2']; ?>;
color: <?php echo $params['topfgcolor2']; ?>;
}
#topmenu .mod-menu__sub {
background-color: <?php echo $params['topbgcolor3']; ?>;
color: <?php echo $params['topfgcolor3']; ?>;
}
#topmenu .nav > li:hover,
#topmenu .nav > li:focus,
#topmenu .nav > li.active,
#topmenu .mod-menu__sub > li:hover,
#topmenu .mod-menu__sub > li:focus
{
background-color: <?php echo $params['topbgcolor2']; ?>;
color: <?php echo $params['topfgcolor2']; ?>;
}
#left-side-image
{
background-image: <?php echo $leftImageValue; ?>;
}
#right-side-image
{
background-image: <?php echo $rightImageValue; ?>;
}
.list-striped li:nth-child(odd),
.row-striped .row-fluid:nth-child(odd),
.table-striped > tbody > tr:nth-child(odd)
{
background-color: <?php echo $params['bgcolor2']; ?>;
color: <?php echo $params['fgcolor2']; ?>;
}
.row-striped .row-fluid:nth-child(odd) a,
.table-striped > tbody > tr:nth-child(odd) a
{
color: <?php echo $params['licolor2']; ?>;
}
.list-striped li:hover,
.row-striped .row-fluid:hover,
.table-striped > tbody > tr:hover
{
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['fgcolor3']; ?>;
}
.row-striped .row-fluid:hover a,
.table-striped > tbody > tr:hover a
{
color: <?php echo $params['licolor3']; ?>;
}
.table-striped > thead > tr
{
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['fgcolor3']; ?>;
}
table.alternating tr:nth-child(even) {
background-color: <?php echo $params['bgcolor2']; ?>;
color: <?php echo $params['fgcolor2']; ?>;
}
table.alternating tr:nth-child(even) a
{
color: <?php echo $params['licolor2']; ?>;
}
table.alternating tr:nth-child(1) {
background-color: <?php echo $params['bgcolor3']; ?>;
color: <?php echo $params['fgcolor3']; ?>;
}
table.alternating tr:nth-child(1) a {
color: <?php echo $params['licolor3']; ?>;
}
.readmore > .btn
{
color: <?php echo $params['fgcolor1']; ?>;
background-color: <?php echo $params['bgcolor1']; ?>;
}
.readmore > .btn:hover
{
color: <?php echo $params['fgcolor3']; ?>;
background-color: <?php echo $params['bgcolor3']; ?>;
:root {
--color-effect: blue;
--color-effect-background: red;
--color-effect-header: yellow;
--color-effect-background-header: green;
}

19
slt/css/layout/_alternating-table.scss Normal file
View File

@ -0,0 +1,19 @@
.alternating {
tr:nth-child(even) {
color: var(--color-effect, #000);
background-color: var(--color-effect-background, #ccc);
a {
color: inherit;
}
}
tr:nth-child(1) {
color: var(--color-effect-header, #000);
background-color: var(--color-effect-background-header, #aaa);
a {
color: inherit;
}
}
}

1
slt/css/layout/_index.scss
View File

@ -9,3 +9,4 @@
@use 'main-content';
@use 'blog';
@use 'mobile-table';
@use 'alternating-table';

48
slt/css/layout/_menu.scss
View File

@ -1,37 +1,47 @@
@use '../abstract' as abstract;
.nav {
font-size: inherit;
a {
color: inherit;
}
}
.mod-menu__sub {
font-size: small;
> li > a {
@include abstract.for-desktop {
display: block;
}
}
}
.nav,
.mod-menu__sub {
padding: 0;
> li {
display: block;
}
}
> .mod-menu__sub {
.nav {
font-size: inherit;
color: var(--color-menu, #000);
background-color: var(--color-menu-background, #eee);
a {
color: inherit;
}
li.current > a {
color: var(--color-menu-active, #000);
background-color: var(--color-menu-background-active, #ccc);
}
li > a:hover,
li > a:focus {
color: var(--color-menu-active, #000);
background-color: var(--color-menu-background-active, #ccc);
}
.mod-menu__sub {
font-size: small;
padding-left: 10px;
margin-left: 10px;
/* border-left: solid gray 1px; */
/* TODO */
> li > a {
@include abstract.for-desktop {
display: block;
}
}
}
}

37
slt/css/layout/_mobile-menu.scss
View File

@ -23,10 +23,31 @@
padding-right: 0;
}
li > a {
li {
> a {
margin: 5px 0;
padding: 10px;
display: block;
color: var(--color-menu, #000);
background-color: var(--color-menu-background, #eee);
}
&.current > a {
color: var(--color-menu-active, #000);
background-color: var(--color-menu-background-active, #ccc);
}
margin-left: 5px;
margin-right: 5px;
ul {
border: none;
}
> ul.nav {
margin-left: -5px;
margin-right: -5px;
}
}
.nav {
@ -41,20 +62,6 @@
flex-direction: column;
}
li {
margin-left: 5px;
margin-right: 5px;
}
li > ul.nav {
margin-left: -5px;
margin-right: -5px;
}
li ul {
border: none;
}
> ul.mod-menu {
background-color: initial;
color: initial;

3
slt/css/layout/_mobile-table.scss
View File

@ -16,8 +16,9 @@ table:not(.no-responsive-table) {
border-style: none;
border-bottom-style: solid;
border-width: 1px;
border-color: var(--color-mobile-table-border, #000);
&:nth-child(2) {
&:nth-child(1) {
border-top-style: solid;
}

5
slt/css/layout/_page-layout.scss
View File

@ -36,6 +36,11 @@
#page-bg {
display: none;
background-image: linear-gradient(
to bottom,
var(--color-page-bg-top, #eee),
var(--color-page-bg-bottom, #fff)
);
@include abstract.for-desktop {
display: block;

2
slt/css/layout/_side-images.scss
View File

@ -15,9 +15,11 @@
#left-side-image {
left: 0;
background-image: var(--image-left-side, none);
}
#right-side-image {
right: 0;
background-image: var(--image-right-side, none);
}
}

50
slt/css/layout/_topmenu.scss
View File

@ -1,5 +1,17 @@
@use '../abstract/' as abstract;
#topmenu-div {
@include abstract.for-desktop {
position: sticky;
top: 0;
width: 100%;
z-index: 1;
}
color: var(--color-fg-top, #fff);
background-color: var(--color-bg-top, #000);
}
#topmenu {
display: none;
font-weight: bold;
@ -38,6 +50,8 @@
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
color: var(--color-fg-top, #fff);
background-color: var(--color-bg-top, #000);
@include abstract.for-desktop {
padding: 0 10px;
@ -70,6 +84,13 @@
background-color: inherit;
}
&:hover,
&:focus,
&.active {
color: var(--color-fg-top-dark, #000);
background-color: var(--color-bg-top-dark, #aaa);
}
> .mod-menu__sub {
position: absolute;
display: none;
@ -80,6 +101,10 @@
padding: 0;
}
color: var(--color-fg-top-light, #000);
background-color: var(--color-bg-top-light, #ddd);
box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
> li {
@include abstract.for-desktop {
padding: 0 5px;
@ -94,18 +119,26 @@
}
}
&:hover,
&:focus,
&.active {
color: var(--color-fg-top-dark, #000);
background-color: var(--color-bg-top-dark, #aaa);
}
&:hover > a {
text-decoration: none;
}
&.current {
color: var(--color-fg-top-dark, #000);
background-color: var(--color-bg-top-dark, #aaa);
}
}
}
&:hover > .mod-menu__sub {
display: block;
@include abstract.for-desktop {
box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
}
}
}
}
@ -152,15 +185,6 @@
}
}
#topmenu-div {
@include abstract.for-desktop {
position: sticky;
top: 0;
width: 100%;
z-index: 1;
}
}
a.facebook {
img {
display: none;

8
slt/css/style.scss
View File

@ -1,7 +1,7 @@
@use "abstract";
@use "core";
@use "layout";
@use "components";
@use 'abstract';
@use 'core';
@use 'layout';
@use 'components';
/*
* Debug

13
slt/language/en-GB/en-GB.tpl_slt.ini
View File

@ -12,16 +12,23 @@ TPL_SLT_FOREGROUND_COLOR_MAIN="Foreground color of main text"
TPL_SLT_BACKGROUND_COLOR_MAIN_TOP="Background color at top of gradient"
TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM="Background color at bottom of gradient"
TPL_SLT_BACKGROUND_COLOR_1="Background color of menu"
TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry"
TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry"
TPL_SLT_FOREGROUND_COLOR_1="Foreground color of menu"
TPL_SLT_FOREGROUND_COLOR_2="Foreground color of selected menu entry"
TPL_SLT_FOREGROUND_COLOR_3="Foreground color of active menu entry"
TPL_SLT_LINK_COLOR_1="Foreground link color of menu"
TPL_SLT_LINK_COLOR_2="Foreground link color of selected menu entry"
TPL_SLT_LINK_COLOR_3="Foreground link color of active menu entry"
TPL_SLT_BACKGROUND_COLOR_1="Background color of menu"
TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry"
TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry"
TPL_SLT_FOREGROUND_EFFECT_COLOR="Foreground effect color"
TPL_SLT_BACKGROUND_EFFECT_COLOR="Background effect color"
TPL_SLT_FOREGROUND_EFFECT_HEADER_COLOR="Foreground effect color for headers"
TPL_SLT_BACKGROUND_EFFECT_HEADER_COLOR="Background effect color for headers"
TPL_SLT_BACKGROUND_COLOR_AT_SIDES="Background Color at the Sides"
TPL_SLT_LEFT_BACKGROUND_IMAGE="Left background image"
TPL_SLT_RIGHT_BACKGROUND_IMAGE="Right background image"