monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-21 07:46:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

tabs fully functional

Browse source
This commit is contained in:
bhomie 2020-06-10 21:18:05 -07:00
parent e5dacc5ef2
commit 4e3674bc94
3 changed files with 54 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
public/css/style.scss
View file

@ -1495,6 +1495,18 @@ key {
}
}
}
.tabContainer{
position: relative;
.tabContent{
overflow: hidden;
height: auto;
max-height: 0px;
transition: max-height .5s ease-in-out;
&.reveal{
max-height: 100vh;
}
}
}
.buttons div.theme:hover{
transform: scale(1.1);

44
public/index.html
View file

@ -423,30 +423,30 @@
<div class="section themes">
<h1>theme</h1>
<div class='tabs'>
<button class="tab">preset</button>
<button class="tab">custom</button>
<button tab="preset" class="tab">preset</button>
<button tab="custom" class="tab">custom</button>
</div>
<div js-id="presetThemes" class="buttons">
<div class="tabContainer">
<div tabContent="custom" class="tabContent section customTheme">
<label class="text">background</label>
<input class="input colorPicker" type="color" value="#ff0000">
<label class="text">main</label>
<input class="input colorPicker" type="color" value="#00ff00">
<label class="text">caret</label>
<input class="input colorPicker" type="color" value="#ff00ff">
<label class="text">sub</label>
<input class="input colorPicker" type="color" value="#0000ff">
<label class="text">text</label>
<input class="input colorPicker" type="color" value="#f0f000">
<label class="text">error</label>
<input class="input colorPicker" type="color" value="#f000f0">
<label class="text">extra error</label>
<input class="input colorPicker" type="color" value="#00f0f0">
</div>
<div tabContent="preset" class="tabContent buttons">
</div>
</div>
<div js-id="customThemes" class="section customTheme">
<h1>enter the values for your own custom theme here</h1>
<label class="text">background</label>
<input class="input colorPicker" type="color" value="#ff0000">
<label class="text">main</label>
<input class="input colorPicker" type="color" value="#00ff00">
<label class="text">caret</label>
<input class="input colorPicker" type="color" value="#ff00ff">
<label class="text">sub</label>
<input class="input colorPicker" type="color" value="#0000ff">
<label class="text">text</label>
<input class="input colorPicker" type="color" value="#f0f000">
<label class="text">error</label>
<input class="input colorPicker" type="color" value="#f000f0">
<label class="text">extra error</label>
<input class="input colorPicker" type="color" value="#00f0f0">
</div>
</div>
</div>

20
public/js/settings.js
View file

@ -440,4 +440,24 @@ $(document).on("click",".pageSettings .section.tags .tagsList .tag .removeButton
let tagid = $(e.currentTarget).parent('.tag').attr('id');
let name = $(e.currentTarget).siblings('.title').text();
showEditTags('remove',tagid,name);
//theme tabs & custom theme
$(".tab").click(e => {
$('.tab').removeClass("active")
var $target = $(event.currentTarget)
$target.addClass("active")
if($target.attr("tab") == "preset") {
$('[tabContent="custom"]').removeClass("reveal")
setTimeout(() => {
$('[tabContent="preset"]').addClass("reveal")
}, 250);
} else {
$('[tabContent="preset"]').removeClass("reveal")
setTimeout(() => {
$('[tabContent="custom"]').addClass("reveal")
}, 250);
}
console.log($target.attr('tab'))
})