From a23107fd6b9851f33e7c664ef620be2ecfe029a9 Mon Sep 17 00:00:00 2001 From: Jack Date: Thu, 28 May 2020 00:35:41 +0100 Subject: [PATCH] reworked the whole settings page --- public/css/style.scss | 128 +++++++++++++++++++++++++++++------------- public/index.html | 8 +-- public/js/settings.js | 20 +++---- 3 files changed, 103 insertions(+), 53 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index c339fbe9c..1b8ef2ba7 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -290,7 +290,7 @@ a:hover { grid-auto-flow: row; /* grid-template-rows: 2rem auto 1rem; */ height: 100%; - gap: 1rem; + gap: 2rem; /* margin-top: 1rem; */ /* margin-bottom: 1rem; */ align-items: center; @@ -431,7 +431,6 @@ a:hover { display: grid; grid-auto-flow: column; grid-template-columns: auto 1fr auto; - margin-bottom: 1rem; z-index: 2; align-items: center; gap: 0.5rem; @@ -897,62 +896,113 @@ key { .pageSettings{ display: grid; - grid-template-columns: 1fr 1fr; + // grid-template-columns: 1fr 1fr; gap: 2rem; .tip{ color: var(--sub-color); } .section{ display: grid; - gap: .5rem; - grid-template-rows: auto 1fr auto; + // gap: .5rem; + grid-template-areas: "title title" + "text buttons"; + grid-template-columns: 2fr 1fr; + align-items: center; h1{ font-size: 1rem; line-height: 1rem; color: var(--sub-color); margin: 0; + grid-area: title; } - .button{ - color: var(--sub-color); - cursor: pointer; - transition: .25s; - padding: .2rem .5rem; - border-radius: var(--roundness); - &:hover{ - color: var(--main-color); - } - &.active{ - color: var(--main-color); - } - &:focus{ - background: var(--sub-color); - color: var(--bg-color); - border: none; - outline: none; - } + p{ + grid-area: text; } + // .button{ + // color: var(--sub-color); + // cursor: pointer; + // transition: .25s; + // padding: .2rem .5rem; + // border-radius: var(--roundness); + // &:hover{ + // color: var(--main-color); + // } + // &.active{ + // color: var(--main-color); + // } + // &:focus{ + // background: var(--sub-color); + // color: var(--bg-color); + // border: none; + // outline: none; + // } + // } .buttons{ + margin-left: 2rem; display: grid; grid-auto-flow: column; - gap: 1rem; - width: min-content; - width: -moz-min-content; - } - .themes, .languages{ - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - // gap: 1rem; - .theme, .language{ - // padding: 1rem 2rem; - text-align: center; + grid-template-columns: 1fr 1fr; + gap: .5rem; + grid-area: buttons; + .button{ color: var(--sub-color); - transition: .25s; cursor: pointer; - &:hover{ - color: var(--main-color); - } + transition: .25s; + padding: .2rem .5rem; + border-radius: var(--roundness); + + background: rgba(0,0,0,.1); + text-align: center; + -webkit-user-select: none; + display: grid; + align-content: center; + height: min-content; + height: -moz-min-content; &.active{ - color: var(--main-color); + background: var(--sub-color); + color: var(--bg-color); + } + &:hover,&:focus{ + color: var(--sub-color); + background: var(--main-color); + outline: none; + } + } + } + &.fontSize .buttons{ + grid-template-columns: 1fr 1fr 1fr 1fr; + } + &.themes, &.languages{ + grid-template-columns: 1fr; + grid-template-areas: "title" + "buttons"; + gap: .5rem; + .buttons{ + margin-left: 0; + grid-auto-flow: dense; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: .5rem; + .theme, .language{ + color: var(--sub-color); + cursor: pointer; + transition: .25s; + padding: .2rem .5rem; + border-radius: var(--roundness); + + background: rgba(0,0,0,.1); + text-align: center; + -webkit-user-select: none; + display: grid; + align-content: center; + &.active{ + background: var(--sub-color); + color: var(--bg-color); + } + &:hover,&:focus{ + color: var(--sub-color); + background: var(--main-color); + } } } } diff --git a/public/index.html b/public/index.html index 7f6f5f640..7e918911c 100644 --- a/public/index.html +++ b/public/index.html @@ -284,14 +284,14 @@
2
-
+

languages

-
+
-
+

theme

-
+
diff --git a/public/js/settings.js b/public/js/settings.js index dee79167d..e659c3954 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -1,11 +1,11 @@ function updateSettingsPage(){ - let themesEl = $(".pageSettings .section .themes").empty(); + let themesEl = $(".pageSettings .section.themes .buttons").empty(); themesList.forEach(theme => { themesEl.append(`
${theme.replace('_', ' ')}
`); }) - let langEl = $(".pageSettings .section .languages").empty(); + let langEl = $(".pageSettings .section.languages .buttons").empty(); Object.keys(words).forEach(language => { langEl.append(`
${language.replace('_', ' ')}
`); }) @@ -31,8 +31,8 @@ function updateSettingsPage(){ } function setActiveThemeButton() { - $(`.pageSettings .section .themes .theme`).removeClass('active'); - $(`.pageSettings .section .themes .theme[theme=${config.theme}]`).addClass('active'); + $(`.pageSettings .section.themes .theme`).removeClass('active'); + $(`.pageSettings .section.themes .theme[theme=${config.theme}]`).addClass('active'); } function setActiveFontSizeButton() { @@ -41,8 +41,8 @@ function setActiveFontSizeButton() { } function setActiveLanguageButton() { - $(`.pageSettings .section .languages .language`).removeClass('active'); - $(`.pageSettings .section .languages .language[language=${config.language}]`).addClass('active'); + $(`.pageSettings .section.languages .language`).removeClass('active'); + $(`.pageSettings .section.languages .language[language=${config.language}]`).addClass('active'); } function setSettingsButton(buttonSection,tf) { @@ -131,23 +131,23 @@ $(".pageSettings .section.keyTips .buttons .button.off").click(e => { }) //themes -$(document).on("mouseover",".pageSettings .section .themes .theme", (e) => { +$(document).on("mouseover",".pageSettings .section.themes .theme", (e) => { let theme = $(e.currentTarget).attr('theme'); previewTheme(theme); }) -$(document).on("click",".pageSettings .section .themes .theme", (e) => { +$(document).on("click",".pageSettings .section.themes .theme", (e) => { let theme = $(e.currentTarget).attr('theme'); setTheme(theme); setActiveThemeButton(); }) -$(document).on("mouseleave",".pageSettings .section .themes", (e) => { +$(document).on("mouseleave",".pageSettings .section.themes", (e) => { setTheme(config.theme); }) //languages -$(document).on("click",".pageSettings .section .languages .language", (e) => { +$(document).on("click",".pageSettings .section.languages .language", (e) => { let language = $(e.currentTarget).attr('language'); changeLanguage(language); showNotification('Language changed', 1000);