Skip to content

Commit a23107f

Browse files
MiodecMiodec
committed
reworked the whole settings page
1 parent f93c3b3 commit a23107f

3 files changed

Lines changed: 102 additions & 52 deletions

File tree

‎public/css/style.scss‎

Lines changed: 88 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ a:hover {
290290
grid-auto-flow: row;
291291
/* grid-template-rows: 2rem auto 1rem; */
292292
height: 100%;
293-
gap: 1rem;
293+
gap: 2rem;
294294
/* margin-top: 1rem; */
295295
/* margin-bottom: 1rem; */
296296
align-items: center;
@@ -431,7 +431,6 @@ a:hover {
431431
display: grid;
432432
grid-auto-flow: column;
433433
grid-template-columns: auto 1fr auto;
434-
margin-bottom: 1rem;
435434
z-index: 2;
436435
align-items: center;
437436
gap: 0.5rem;
@@ -897,62 +896,113 @@ key {
897896

898897
.pageSettings{
899898
display: grid;
900-
grid-template-columns: 1fr 1fr;
899+
// grid-template-columns: 1fr 1fr;
901900
gap: 2rem;
902901
.tip{
903902
color: var(--sub-color);
904903
}
905904
.section{
906905
display: grid;
907-
gap: .5rem;
908-
grid-template-rows: auto 1fr auto;
906+
// gap: .5rem;
907+
grid-template-areas: "title title"
908+
"text buttons";
909+
grid-template-columns: 2fr 1fr;
910+
align-items: center;
909911
h1{
910912
font-size: 1rem;
911913
line-height: 1rem;
912914
color: var(--sub-color);
913915
margin: 0;
916+
grid-area: title;
914917
}
915-
.button{
916-
color: var(--sub-color);
917-
cursor: pointer;
918-
transition: .25s;
919-
padding: .2rem .5rem;
920-
border-radius: var(--roundness);
921-
&:hover{
922-
color: var(--main-color);
923-
}
924-
&.active{
925-
color: var(--main-color);
926-
}
927-
&:focus{
928-
background: var(--sub-color);
929-
color: var(--bg-color);
930-
border: none;
931-
outline: none;
932-
}
918+
p{
919+
grid-area: text;
933920
}
921+
// .button{
922+
// color: var(--sub-color);
923+
// cursor: pointer;
924+
// transition: .25s;
925+
// padding: .2rem .5rem;
926+
// border-radius: var(--roundness);
927+
// &:hover{
928+
// color: var(--main-color);
929+
// }
930+
// &.active{
931+
// color: var(--main-color);
932+
// }
933+
// &:focus{
934+
// background: var(--sub-color);
935+
// color: var(--bg-color);
936+
// border: none;
937+
// outline: none;
938+
// }
939+
// }
934940
.buttons{
941+
margin-left: 2rem;
935942
display: grid;
936943
grid-auto-flow: column;
937-
gap: 1rem;
938-
width: min-content;
939-
width: -moz-min-content;
940-
}
941-
.themes, .languages{
942-
display: grid;
943-
grid-template-columns: 1fr 1fr 1fr 1fr;
944-
// gap: 1rem;
945-
.theme, .language{
946-
// padding: 1rem 2rem;
947-
text-align: center;
944+
grid-template-columns: 1fr 1fr;
945+
gap: .5rem;
946+
grid-area: buttons;
947+
.button{
948948
color: var(--sub-color);
949-
transition: .25s;
950949
cursor: pointer;
951-
&:hover{
952-
color: var(--main-color);
950+
transition: .25s;
951+
padding: .2rem .5rem;
952+
border-radius: var(--roundness);
953+
954+
background: rgba(0,0,0,.1);
955+
text-align: center;
956+
-webkit-user-select: none;
957+
display: grid;
958+
align-content: center;
959+
height: min-content;
960+
height: -moz-min-content;
961+
&.active{
962+
background: var(--sub-color);
963+
color: var(--bg-color);
964+
}
965+
&:hover,&:focus{
966+
color: var(--sub-color);
967+
background: var(--main-color);
968+
outline: none;
953969
}
970+
}
971+
}
972+
&.fontSize .buttons{
973+
grid-template-columns: 1fr 1fr 1fr 1fr;
974+
}
975+
&.themes, &.languages{
976+
grid-template-columns: 1fr;
977+
grid-template-areas: "title"
978+
"buttons";
979+
gap: .5rem;
980+
.buttons{
981+
margin-left: 0;
982+
grid-auto-flow: dense;
983+
display: grid;
984+
grid-template-columns: 1fr 1fr 1fr 1fr;
985+
gap: .5rem;
986+
.theme, .language{
987+
color: var(--sub-color);
988+
cursor: pointer;
989+
transition: .25s;
990+
padding: .2rem .5rem;
991+
border-radius: var(--roundness);
992+
993+
background: rgba(0,0,0,.1);
994+
text-align: center;
995+
-webkit-user-select: none;
996+
display: grid;
997+
align-content: center;
954998
&.active{
955-
color: var(--main-color);
999+
background: var(--sub-color);
1000+
color: var(--bg-color);
1001+
}
1002+
&:hover,&:focus{
1003+
color: var(--sub-color);
1004+
background: var(--main-color);
1005+
}
9561006
}
9571007
}
9581008
}

‎public/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -284,14 +284,14 @@ <h1>font size</h1>
284284
<div class="button" fontsize="2" tabindex="0" onclick="this.blur();">2</div>
285285
</div>
286286
</div>
287-
<div class="section" style="grid-column: 1/3;">
287+
<div class="section languages">
288288
<h1>languages</h1>
289-
<div class="languages">
289+
<div class="buttons">
290290
</div>
291291
</div>
292-
<div class="section" style="grid-column: 1/3;">
292+
<div class="section themes">
293293
<h1>theme</h1>
294-
<div class="themes">
294+
<div class="buttons">
295295
</div>
296296
</div>
297297
</div>

‎public/js/settings.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
function updateSettingsPage(){
22

3-
let themesEl = $(".pageSettings .section .themes").empty();
3+
let themesEl = $(".pageSettings .section.themes .buttons").empty();
44
themesList.forEach(theme => {
55
themesEl.append(`<div class="theme" theme='${theme}'>${theme.replace('_', ' ')}</div>`);
66
})
77

8-
let langEl = $(".pageSettings .section .languages").empty();
8+
let langEl = $(".pageSettings .section.languages .buttons").empty();
99
Object.keys(words).forEach(language => {
1010
langEl.append(`<div class="language" language='${language}'>${language.replace('_', ' ')}</div>`);
1111
})
@@ -31,8 +31,8 @@ function updateSettingsPage(){
3131
}
3232

3333
function setActiveThemeButton() {
34-
$(`.pageSettings .section .themes .theme`).removeClass('active');
35-
$(`.pageSettings .section .themes .theme[theme=${config.theme}]`).addClass('active');
34+
$(`.pageSettings .section.themes .theme`).removeClass('active');
35+
$(`.pageSettings .section.themes .theme[theme=${config.theme}]`).addClass('active');
3636
}
3737

3838
function setActiveFontSizeButton() {
@@ -41,8 +41,8 @@ function setActiveFontSizeButton() {
4141
}
4242

4343
function setActiveLanguageButton() {
44-
$(`.pageSettings .section .languages .language`).removeClass('active');
45-
$(`.pageSettings .section .languages .language[language=${config.language}]`).addClass('active');
44+
$(`.pageSettings .section.languages .language`).removeClass('active');
45+
$(`.pageSettings .section.languages .language[language=${config.language}]`).addClass('active');
4646
}
4747

4848
function setSettingsButton(buttonSection,tf) {
@@ -131,23 +131,23 @@ $(".pageSettings .section.keyTips .buttons .button.off").click(e => {
131131
})
132132

133133
//themes
134-
$(document).on("mouseover",".pageSettings .section .themes .theme", (e) => {
134+
$(document).on("mouseover",".pageSettings .section.themes .theme", (e) => {
135135
let theme = $(e.currentTarget).attr('theme');
136136
previewTheme(theme);
137137
})
138138

139-
$(document).on("click",".pageSettings .section .themes .theme", (e) => {
139+
$(document).on("click",".pageSettings .section.themes .theme", (e) => {
140140
let theme = $(e.currentTarget).attr('theme');
141141
setTheme(theme);
142142
setActiveThemeButton();
143143
})
144144

145-
$(document).on("mouseleave",".pageSettings .section .themes", (e) => {
145+
$(document).on("mouseleave",".pageSettings .section.themes", (e) => {
146146
setTheme(config.theme);
147147
})
148148

149149
//languages
150-
$(document).on("click",".pageSettings .section .languages .language", (e) => {
150+
$(document).on("click",".pageSettings .section.languages .language", (e) => {
151151
let language = $(e.currentTarget).attr('language');
152152
changeLanguage(language);
153153
showNotification('Language changed', 1000);

0 commit comments

Comments
 (0)