monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-02 12:00:10 +08:00
Code Issues Projects Releases Packages Wiki Activity

added a spacer between all and favourite themes

Browse source
This commit is contained in:
Jack 2020-08-26 21:38:26 +01:00
parent c3b846da02
commit ec3f355fdd
3 changed files with 39 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
public/css/style.scss
View file

@ -2386,6 +2386,20 @@ key {
}
}
@media only screen and (max-width: 1000px) {
#centerContent {
.pageSettings .section.themes .buttons,
.pageSettings .section.language .buttons,
.pageSettings .section.layout .buttons,
.pageSettings .section.keymapLayout .buttons,
.pageSettings .section.fontFamily .buttons,
.pageSettings .section.funbox .buttons,
.pageSettings .section.keymapStyle .buttons {
grid-template-columns: 1fr 1fr 1fr;
}
}
}
@media only screen and (max-width: 800px) {
#centerContent {
#top {
@ -2424,7 +2438,7 @@ key {
"text text"
"buttons buttons";
.text {
& > .text {
margin-bottom: 1rem;
}
}
@ -2433,6 +2447,18 @@ key {
#commandLineInput {
width: 400px !important;
}
#centerContent {
.pageSettings .section.themes .buttons,
.pageSettings .section.language .buttons,
.pageSettings .section.layout .buttons,
.pageSettings .section.keymapLayout .buttons,
.pageSettings .section.fontFamily .buttons,
.pageSettings .section.funbox .buttons,
.pageSettings .section.keymapStyle .buttons {
grid-template-columns: 1fr 1fr;
}
}
}
.keymap {

5
public/index.html
View file

@ -2156,7 +2156,10 @@
<div class="button saveCustomThemeButton">save</div>
</div>
</div>
<div tabContent="preset" class="tabContent buttons"></div>
<div tabContent="preset" class="tabContent">
<div class="favThemes buttons"></div>
<div class="allThemes buttons"></div>
</div>
</div>
</div>
<div class="sectionSpacer"></div>

10
public/js/settings.js
View file

@ -276,15 +276,19 @@ async function fillSettingsPage() {
}
function refreshThemeButtons() {
let themesEl = $(".pageSettings .section.themes .buttons").empty();
let favThemesEl = $(
".pageSettings .section.themes .favThemes.buttons"
).empty();
let themesEl = $(".pageSettings .section.themes .allThemes.buttons").empty();
getSortedThemesList().then((themes) => {
//first show favourites
if (config.favThemes.length > 0) {
favThemesEl.css({ paddingBottom: "1rem" });
themes.forEach((theme) => {
if (config.favThemes.includes(theme.name)) {
let activeTheme = config.theme === theme.name ? "active" : "";
themesEl.append(
favThemesEl.append(
`<div class="theme button" theme='${theme.name}' style="color:${
theme.textColor
};background:${theme.bgColor}">
@ -294,6 +298,8 @@ function refreshThemeButtons() {
);
}
});
} else {
favThemesEl.css({ paddingBottom: "0" });
}
//then the rest
themes.forEach((theme) => {