themes setting tabbed styled

the themes tab has been brought into alignment with the new design, so
the only thing that remains is redoing responsive styles for the
settings page

whew
This commit is contained in:
ro 2024-05-26 14:38:46 -06:00
parent f53716dba9
commit a5cf8816f0
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
3 changed files with 94 additions and 41 deletions

View file

@ -251,17 +251,62 @@ section#site-features > div.site-maintenance {
color: var(--primary);
}
section[class="member-settings"] > div[class="theme"] button[data-enabled="true"] {
color: var(--white);
background: var(--secondary-highlight);
/*
SITE FEATURES TAB
*/
section#site-themes > button {
background: var(--secondary);
display: inline-block;
border-radius: 3px;
padding: 3px;
width: 83%;
margin-right: 5px;
width: 250px;
height: 200px;
margin: 10px 0;
}
section[class="member-settings"] > div[class="theme"] a {
section#site-themes > button > div {
height: 145px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
top: -10px;
position: relative;
border-radius: 3px;
}
section#site-themes > button[data-enabled="true"] > div {
background: var(--secondary-highlight);
color: var(--secondary);
}
section#site-themes > button[data-enabled="true"] label {
color: var(--primary);
}
section#site-themes > button[data-enabled="false"] > div {
background: var(--primary);
color: var(--secondary);
}
section#site-themes > button[data-enabled="false"] label {
color: var(--secondary);
}
section#site-themes > button[data-enabled="true"] > svg {
fill: var(--primary);
position: relative;
top: 5px;
}
section#site-themes > button[data-enabled="false"] > svg {
fill: var(--primary);
position: relative;
top: 5px;
}
section#site-themes > a {
background: var(--secondary-highlight);
display: inline-block;
width: 15%;
@ -269,15 +314,8 @@ section[class="member-settings"] > div[class="theme"] a {
text-align: center;
vertical-align: top;
top: 13px;
position: relative;
}
section[class="member-settings"] > div[class="theme"] button[data-enabled="false"] {
color: var(--primary);
background: var(--secondary);
display: block;
border-radius: 3px;
padding: 3px;
position: absolute;
z-index: 30;
}
section[class="data-settings"] {

View file

@ -170,9 +170,19 @@ export default class SettingsIndex {
e.preventDefault();
let themes = document.querySelectorAll('.theme-select');
for (var i = 0, length = themes.length; i < length; i++) {
e.target.id == themes[i].id
? themes[i].setAttribute('data-enabled', 'true')
: themes[i].setAttribute('data-enabled', 'false');
let theme = e.target.id;
if (e.target.id == '') {
theme = e.target.getAttribute('for');
}
if (theme == themes[i].id) {
themes[i].setAttribute('data-enabled', 'true');
document.getElementById('label-' + themes[i].id).innerHTML =
'ACTIVE THEME';
} else {
themes[i].setAttribute('data-enabled', 'false');
document.getElementById('label-' + themes[i].id).innerHTML =
'INACTIVE THEME';
}
}
}
handleMailOptions(e) {

View file

@ -43,7 +43,7 @@
</div>
</section>
<section id="site-features" class="section-tab show">
<section id="site-features" class="section-tab hide">
<div class="features-mail">
<label>SYSTEM EMAIL</label>
<div>
@ -142,28 +142,33 @@
</div>
</div>
</section>
<section id="site-themes" class="section-tab hide">
MEMBER THEMES
<div class="theme">
<label>Themes</label><br/>
<section id="site-themes" class="section-tab show">
@foreach($themes as $theme)
@if($theme['name'] == $currentTheme)
<!--
<a target="_blank" href='/theme'>Edit</a>
-->
<button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
<div for="{{ $theme['name'] }}">
<label id="label-{{ $theme['name'] }}">ACTIVE THEME</label>
</div>
<svg id="nav-menu-icon" class="icon">
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
</svg>
<span>{{ $theme['display-name'] }}</span>
</button><a target="_blank" href='/theme'>Edit</a>
<span for="{{ $theme['name'] }}">{{ $theme['display-name'] }}</span>
</button>
@else
<button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
<button id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
<div for="{{ $theme['name'] }}">
<label id="label-{{ $theme['name'] }}">INACTIVE THEME</label>
</div>
<svg id="nav-menu-icon" class="icon">
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-palette"/>
</svg>
<span>{{ $theme['display-name'] }}</span>
<span for="{{ $theme['name'] }}">{{ $theme['display-name'] }}</span>
</button>
@endif
@endforeach
</div>
</section>
</section>
</article>