selfhosted
/
zer0bin
mirror of https://github.com/zer0bin-dev/zer0bin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 💄 Fade for hiding and colors

This commit is contained in:
ThatOneCalculator 2022-04-03 23:43:06 -07:00
parent bd718fadde
commit 8d6e3b6378
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/index.pug
View File

@ -29,7 +29,7 @@ html(lang='en')
button#save-button.btn(aria-label='Save')
button#markdown-button.btn(aria-label='Markdown')
button#single-view-button.btn(aria-label='Single View')
//- .fireBody(style='display: none')
//- .fireBody(style='visibility: hidden')
//- - var parts = 20;
//- - while (parts--) {
//- .particle
@ -38,8 +38,8 @@ html(lang='en')
button#copy-button.btn(aria-label='Copy')
a(href='https://github.com/zer0bin-dev/zer0bin' aria-label='GitHub repo')
button#github-button.btn(aria-label='GitHub')
span.viewcounter.noselect#viewcounter-label(style='display: none') Views: 
span.viewcounter.noselect#viewcounter-count(style='display: none')
span.viewcounter.noselect#viewcounter-label(style='visibility: hidden; display: none') Views: 
span.viewcounter.noselect#viewcounter-count(style='visibility: hidden; display: none')
.hide-button-wrapper
button#hide-button.btn(aria-label='Hide')
@ -47,6 +47,6 @@ html(lang='en')
.scrollbar-container
.wrapper
.line-numbers.noselect
pre#code-view-pre(style='display: none')
pre#code-view-pre(style='visibility: hidden')
code#code-view
textarea#text-area(spellcheck='false' autofocus='' name='value' aria-label='Paste input area' disabled='' style='display: none')
textarea#text-area(spellcheck='false' autofocus='' name='value' aria-label='Paste input area' disabled='' style='visibility: hidden')

10
frontend/src/index.ts
View File

@ -43,11 +43,13 @@ const singleViewButton = <HTMLButtonElement>(
)
function hide(element: HTMLElement) {
element.style.display = "none"
element.style.visibility = "hidden"
element.style.opacity = "0"
}
function show(element: HTMLElement) {
element.style.display = null
element.style.visibility = "visible"
element.style.opacity = "1"
}
function disable(element: HTMLButtonElement) {
@ -125,6 +127,8 @@ function newPaste() {
hide(codeViewPre)
hide(viewCounterLabel)
hide(viewCounter)
viewCounterLabel.style.display = "none"
viewCounter.style.display = "none"
}
function addMessage(message: string) {
@ -170,6 +174,8 @@ function viewPaste(content: string, views: string, singleView: boolean) {
show(codeViewPre)
show(viewCounterLabel)
show(viewCounter)
viewCounterLabel.style.display = null
viewCounter.style.display = null
viewCounter.textContent = views

2
frontend/style/style.scss
View File

@ -133,6 +133,7 @@ textarea {
background-color: $bg_surface;
border-bottom-left-radius: 10px;
z-index: 10;
transition: opacity 0.2s, visibility 0.2s;
}
.buttons {
display: flex;
@ -171,6 +172,7 @@ a {
&:disabled {
color: $muted;
}
transition: all 0.2s ease-in;
}
.btn[disabled] {
color: $muted;