monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-11-10 17:04:49 +08:00
Code Issues Projects Releases Packages Wiki Activity

changed the structure a bit,

Browse source 
showing active background size
This commit is contained in:
Jack 2021-04-04 19:54:01 +01:00
parent 803fc9689c
commit 137367e396
3 changed files with 89 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/js/settings.js
View file

@ -267,6 +267,10 @@ async function initGroups() {
"alwaysShowCPM",
UpdateConfig.setAlwaysShowCPM
);
groups.customBackgroundSize = new SettingsGroup(
"customBackgroundSize",
UpdateConfig.setCustomBackgroundSize
);
}
async function fillSettingsPage() {
@ -369,6 +373,10 @@ async function fillSettingsPage() {
})
.appendTo(fontsEl);
});
$(".pageSettings .section.customBackgroundSize input").val(
Config.customBackground
);
}
export let settingsFillPromise = fillSettingsPage();
@ -736,20 +744,39 @@ $(".pageSettings #updateAccountEmail").on("click", (e) => {
SimplePopups.list.updateEmail.show();
});
$(".pageSettings .section.customBackground .inputAndButton .save").on("click", (e) => {
UpdateConfig.setCustomBackground($(".pageSettings .section.customBackground .inputAndButton input").val())
});
$(".pageSettings .section.customBackground .inputAndButton .cover").on("click", (e) => {
UpdateConfig.setCustomBackgroundSize("cover");
});
$(".pageSettings .section.customBackground .inputAndButton .contain").on("click", (e) => {
UpdateConfig.setCustomBackgroundSize("contain");
});
$(".pageSettings .section.customBackground .inputAndButton input").keypress( (e) => {
if(e.keyCode == 13){
UpdateConfig.setCustomBackground($(".pageSettings .section.customBackground .inputAndButton input").val())
$(".pageSettings .section.customBackgroundSize .inputAndButton .save").on(
"click",
(e) => {
UpdateConfig.setCustomBackground(
$(
".pageSettings .section.customBackgroundSize .inputAndButton input"
).val()
);
}
});
);
$(".pageSettings .section.customBackgroundSize .inputAndButton .cover").on(
"click",
(e) => {
UpdateConfig.setCustomBackgroundSize("cover");
}
);
$(".pageSettings .section.customBackgroundSize .inputAndButton .contain").on(
"click",
(e) => {
UpdateConfig.setCustomBackgroundSize("contain");
}
);
$(".pageSettings .section.customBackgroundSize .inputAndButton input").keypress(
(e) => {
if (e.keyCode == 13) {
UpdateConfig.setCustomBackground(
$(
".pageSettings .section.customBackgroundSize .inputAndButton input"
).val()
);
}
}
);

30
src/sass/style.scss
View file

@ -2714,37 +2714,25 @@ key {
}
}
&.customBackground{
.inputAndButton{
display:grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
&.customBackgroundSize {
.inputAndButton {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0.5rem;
input{
margin-bottom: 0.5rem;
input {
grid-column: 1/3;
grid-row: 1/2;
}
.save{
grid-column:3/4;
grid-row:1/2;
.save {
grid-column: 3/4;
height: auto;
.fas{
.fas {
margin-right: 0rem;
vertical-align: sub;
}
}
.cover{
grid-column:1/2;
grid-row:2/3;
}
.contain{
grid-column:2/4;
grid-row:2/3;
}
}
}

53
static/index.html
View file

@ -2920,26 +2920,47 @@
</div>
</div>
</div>
<div class="section customBackground">
<div class="section customBackgroundSize">
<h1>custom background</h1>
<div class="text">
Set an image url to be a custom background image. Cover fits the image to cover the screen.
Contain fits the image to be fully visible.
Set an image url to be a custom background image. Cover fits
the image to cover the screen. Contain fits the image to be
fully visible.
</div>
<div class="inputAndButton">
<input type="text" placeholder="image url"
class="input"
tabindex="0"
>
<div
class="button save"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-save fa-fw"></i>
<div>
<div class="inputAndButton">
<input
type="text"
placeholder="image url"
class="input"
tabindex="0"
/>
<div
class="button save"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-save fa-fw"></i>
</div>
</div>
<div class="buttons">
<div
class="button"
customBackgroundSize="cover"
tabindex="0"
onclick="this.blur();"
>
cover
</div>
<div
class="button"
customBackgroundSize="contain"
tabindex="0"
onclick="this.blur();"
>
contain
</div>
</div>
<div class="button cover" onclick="this.blur();">cover</div>
<div class="button contain" onclick="this.blur();">contain</div>
</div>
</div>
<div class="section themes">