Skip to content

Commit 57795ea

Browse files
degamidegami
committed
fixes, dark frontend also in vue_theme
1 parent f1e7989 commit 57795ea

File tree

10 files changed

+209
-161
lines changed

10 files changed

+209
-161
lines changed

‎app/base/abstracts/Controllers/FrontendPage.php‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,17 @@ public function __construct(
8787
$this->regions[$region] = [];
8888
}
8989

90-
$this->getAssets()->addJs("
91-
cookieStore.get('darkmode').then(function(data){
92-
if (data?.value) {
93-
\$('body').addClass('dark-mode');
94-
} else {
95-
\$('body').removeClass('dark-mode');
96-
}
97-
});
98-
");
90+
if (!str_starts_with($this->getRouteName(), 'admin.')) {
91+
$this->getAssets()->addJs("
92+
cookieStore.get('darkmode').then(function(data){
93+
if (data?.value) {
94+
\$('body').addClass('dark-mode');
95+
} else {
96+
\$('body').removeClass('dark-mode');
97+
}
98+
});
99+
");
100+
}
99101

100102
// 'content' is reserved for Plates
101103
unset($this->regions['content']);

‎app/base/blocks/DarkModeSwitcher.php‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -64,22 +64,31 @@ public function renderHTML(?BasePage $current_page = null, array $data = []): st
6464
],
6565
]]);
6666

67-
return "<div class=\"darkmode-switch\">" . __('Dark Mode') . ' ' . $label."</div><script type=\"text/javascript\">
68-
(function(\$){
69-
cookieStore.get('darkmode').then(function(data){
70-
\$('#darkmode-selector').prop('checked', data?.value);
71-
});
72-
\$('#darkmode-selector').change(function(evt) {
73-
if (\$(this).prop('checked')) {
74-
\$.cookie('darkmode', \$(this).prop('checked') ? true : null, { expires: 365, path: '/' });
75-
\$('body').addClass('dark-mode');
76-
} else {
77-
\$.removeCookie('darkmode', {path: '/'});
78-
\$('body').removeClass('dark-mode');
79-
}
80-
});
81-
})(jQuery)
82-
</script>";
67+
$script = $this->getApp()->containerMake(TagElement::class, ['options' => [
68+
'tag' => 'script',
69+
'type' => 'text/javascript',
70+
'attributes' => [
71+
'class' => null,
72+
],
73+
'text' => "
74+
(function(\$){
75+
cookieStore.get('darkmode').then(function(data){
76+
\$('#darkmode-selector').prop('checked', data?.value);
77+
});
78+
\$('#darkmode-selector').change(function(evt) {
79+
if (\$(this).prop('checked')) {
80+
\$.cookie('darkmode', \$(this).prop('checked') ? true : null, { expires: 365, path: '/' });
81+
\$('body').addClass('dark-mode');
82+
} else {
83+
\$.removeCookie('darkmode', {path: '/'});
84+
\$('body').removeClass('dark-mode');
85+
}
86+
});
87+
})(jQuery)
88+
",
89+
]]);
90+
91+
return "<div class=\"darkmode-switch\">" . __('Dark Mode') . ' ' . $label."</div>"; // . $script;
8392
} catch (Exception $e) {}
8493
return "";
8594
}

‎js/src/site.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,18 @@
2525
});
2626
}
2727
});
28+
29+
cookieStore.get('darkmode').then(function(data){
30+
$('#darkmode-selector').prop('checked', data?.value);
31+
});
32+
$('#darkmode-selector').change(function(evt) {
33+
if ($(this).prop('checked')) {
34+
$.cookie('darkmode', $(this).prop('checked') ? true : null, { expires: 365, path: '/' });
35+
$('body').addClass('dark-mode');
36+
} else {
37+
$.removeCookie('darkmode', {path: '/'});
38+
$('body').removeClass('dark-mode');
39+
}
40+
});
2841
});
2942
})(jQuery);

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"jquery.cycle2": "^2.1.7",
1818
"moment": "^2.24.0",
1919
"pretty-checkbox": "^3.0.3",
20-
"select2": "^4.1.0-rc.0"
20+
"select2": "^4.1.0-rc.0",
21+
"tiny-slider": "^2.9.4"
2122
},
2223
"devDependencies": {
2324
"del": "^8.0.0",

‎scss/partials/admin_ui.scss‎

Lines changed: 60 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -30,78 +30,73 @@
3030
}
3131
}
3232

33-
/* Container per lo switch */
3433
.switch {
3534
vertical-align: middle;
3635
position: relative;
3736
display: inline-block;
3837
width: 50px;
3938
height: 24px;
4039
margin: 0;
41-
}
42-
43-
/* Nasconde il checkbox */
44-
.switch input {
45-
opacity: 0;
46-
width: 0;
47-
height: 0;
48-
}
49-
50-
/* Stile per lo slider */
51-
.slider {
52-
position: absolute;
53-
cursor: pointer;
54-
top: 0;
55-
left: 0;
56-
right: 0;
57-
bottom: 0;
58-
background-color: #ccc;
59-
transition: .4s;
60-
border-radius: 24px;
61-
}
62-
63-
.slider:before {
64-
position: absolute;
65-
content: "";
66-
height: 18px;
67-
width: 18px;
68-
left: 3px;
69-
bottom: 3px;
70-
background-color: white;
71-
transition: .4s;
72-
border-radius: 50%;
73-
}
74-
75-
/* Colore quando è selezionato */
76-
input:checked + .slider {
77-
background-color: #2196F3;
78-
}
79-
80-
input:checked + .slider:before {
81-
transform: translateX(26px);
82-
}
83-
84-
/* Effetto focus */
85-
input:focus + .slider {
86-
box-shadow: 0 0 1px #2196F3;
87-
}
88-
89-
/* Testo per lo stato On/Off */
90-
.switch .slider::after {
91-
content: "OFF";
92-
color: white;
93-
position: absolute;
94-
right: 10px;
95-
top: 50%;
96-
transform: translateY(-50%);
97-
font-size: 10px;
98-
}
99-
100-
input:checked + .slider::after {
101-
content: "ON";
102-
left: 10px;
103-
right: auto;
104-
}
40+
41+
& input {
42+
opacity: 0;
43+
width: 0;
44+
height: 0;
45+
46+
&:checked + .slider {
47+
background-color: #2196F3;
48+
}
49+
50+
&:checked + .slider:before {
51+
transform: translateX(26px);
52+
}
53+
54+
/* Effetto focus */
55+
&:focus + .slider {
56+
box-shadow: 0 0 1px #2196F3;
57+
}
58+
59+
&:checked + .slider::after {
60+
content: "ON";
61+
left: 10px;
62+
right: auto;
63+
}
64+
}
65+
66+
.slider {
67+
position: absolute;
68+
cursor: pointer;
69+
top: 0;
70+
left: 0;
71+
right: 0;
72+
bottom: 0;
73+
background-color: #ccc;
74+
transition: .4s;
75+
border-radius: 24px;
76+
77+
&:before {
78+
position: absolute;
79+
content: "";
80+
height: 18px;
81+
width: 18px;
82+
left: 3px;
83+
bottom: 3px;
84+
background-color: white;
85+
transition: .4s;
86+
border-radius: 50%;
87+
}
88+
89+
&::after {
90+
content: "OFF";
91+
color: white;
92+
position: absolute;
93+
right: 10px;
94+
top: 50%;
95+
transform: translateY(-50%);
96+
font-size: 10px;
97+
}
98+
}
99+
}
105100

106101
.darkmode-switch {
107102
margin: 0 10px;

‎scss/site.scss‎

Lines changed: 68 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@use "partials/dark-mode.scss" as *;
66
@use "../node_modules/select2/src/scss/core";
77
@use '../node_modules/pretty-checkbox/src/pretty-checkbox.scss';
8+
@use '../node_modules/tiny-slider/dist/tiny-slider.css';
89

910
// Fonts
1011
@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,600");
@@ -168,77 +169,78 @@ ul.breadcrumbs {
168169
width: 50px;
169170
height: 24px;
170171
margin: 0;
171-
}
172-
173-
/* Nasconde il checkbox */
174-
.switch input {
175-
opacity: 0;
176-
width: 0;
177-
height: 0;
178-
}
179-
180-
/* Stile per lo slider */
181-
.slider {
182-
position: absolute;
183-
cursor: pointer;
184-
top: 0;
185-
left: 0;
186-
right: 0;
187-
bottom: 0;
188-
background-color: #ccc;
189-
transition: .4s;
190-
border-radius: 24px;
191-
}
192-
193-
.slider:before {
194-
position: absolute;
195-
content: "";
196-
height: 18px;
197-
width: 18px;
198-
left: 3px;
199-
bottom: 3px;
200-
background-color: white;
201-
transition: .4s;
202-
border-radius: 50%;
203-
}
204-
205-
/* Colore quando è selezionato */
206-
input:checked + .slider {
207-
background-color: #2196F3;
208-
}
209-
210-
input:checked + .slider:before {
211-
transform: translateX(26px);
212-
}
213-
214-
/* Effetto focus */
215-
input:focus + .slider {
216-
box-shadow: 0 0 1px #2196F3;
217-
}
218-
219-
/* Testo per lo stato On/Off */
220-
.switch .slider::after {
221-
content: "OFF";
222-
color: white;
223-
position: absolute;
224-
right: 10px;
225-
top: 50%;
226-
transform: translateY(-50%);
227-
font-size: 10px;
228-
}
229-
230-
input:checked + .slider::after {
231-
content: "ON";
232-
left: 10px;
233-
right: auto;
234-
}
235-
172+
173+
& input {
174+
opacity: 0;
175+
width: 0;
176+
height: 0;
177+
178+
&:checked + .slider {
179+
background-color: #2196F3;
180+
}
181+
182+
&:checked + .slider:before {
183+
transform: translateX(26px);
184+
}
185+
186+
/* Effetto focus */
187+
&:focus + .slider {
188+
box-shadow: 0 0 1px #2196F3;
189+
}
190+
191+
&:checked + .slider::after {
192+
content: "ON";
193+
left: 10px;
194+
right: auto;
195+
}
196+
}
197+
198+
.slider {
199+
position: absolute;
200+
cursor: pointer;
201+
top: 0;
202+
left: 0;
203+
right: 0;
204+
bottom: 0;
205+
background-color: #ccc;
206+
transition: .4s;
207+
border-radius: 24px;
208+
209+
&:before {
210+
position: absolute;
211+
content: "";
212+
height: 18px;
213+
width: 18px;
214+
left: 3px;
215+
bottom: 3px;
216+
background-color: white;
217+
transition: .4s;
218+
border-radius: 50%;
219+
}
220+
221+
&::after {
222+
content: "OFF";
223+
color: white;
224+
position: absolute;
225+
right: 10px;
226+
top: 50%;
227+
transform: translateY(-50%);
228+
font-size: 10px;
229+
}
230+
}
231+
}
232+
236233
.darkmode-switch {
237234
margin: 0 10px;
238235
align-content: center;
239236
}
240237

241-
.post-footer {
238+
.post_footer {
242239
display: flex;
243240
justify-content: end;
241+
}
242+
243+
.gallery {
244+
max-width: 100%;
245+
overflow: scroll;
244246
}

0 commit comments

Comments
 (0)