xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests 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); color: var(--primary);
} }
section[class="member-settings"] > div[class="theme"] button[data-enabled="true"] { /*
color: var(--white); SITE FEATURES TAB
background: var(--secondary-highlight); */
section#site-themes > button {
background: var(--secondary);
display: inline-block; display: inline-block;
border-radius: 3px; border-radius: 3px;
padding: 3px; padding: 3px;
width: 83%; width: 250px;
margin-right: 5px; 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); background: var(--secondary-highlight);
display: inline-block; display: inline-block;
width: 15%; width: 15%;
@ -269,15 +314,8 @@ section[class="member-settings"] > div[class="theme"] a {
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
top: 13px; top: 13px;
position: relative; position: absolute;
} z-index: 30;
section[class="member-settings"] > div[class="theme"] button[data-enabled="false"] {
color: var(--primary);
background: var(--secondary);
display: block;
border-radius: 3px;
padding: 3px;
} }
section[class="data-settings"] { 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(); e.preventDefault();
let themes = document.querySelectorAll('.theme-select'); let themes = document.querySelectorAll('.theme-select');
for (var i = 0, length = themes.length; i < length; i++) { for (var i = 0, length = themes.length; i < length; i++) {
e.target.id == themes[i].id let theme = e.target.id;
? themes[i].setAttribute('data-enabled', 'true') if (e.target.id == '') {
: themes[i].setAttribute('data-enabled', 'false'); 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) { handleMailOptions(e) {

51
resources/views/back/settings.blade.php
View file

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