projects/fipamo
1
0
Fork 0
Code Issues 24 Pull requests Projects 1 Releases 22 Packages Wiki Activity

themes setting tabbed styled

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

68
public/assets/css/dash/settings.css
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"] {

16
public/assets/scripts/dash/app/controllers/SettingsIndex.js
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) {

51
resources/views/back/settings.blade.php
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/>
@foreach($themes as $theme)
@if($theme['name'] == $currentTheme)
<button id="{{ $theme['name'] }}" class="theme-select" data-enabled="true">
<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>
@else
<button href="#" id="{{ $theme['name'] }}" class="theme-select" data-enabled="false">
<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>
@endif
@endforeach
</div>
<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 for="{{ $theme['name'] }}">{{ $theme['display-name'] }}</span>
</button>
@else
<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 for="{{ $theme['name'] }}">{{ $theme['display-name'] }}</span>
</button>
@endif
@endforeach
</section>
</section>
</article>