Stylize stats
This commit is contained in:
parent
50f53e747d
commit
9724a6a0b3
|
@ -118,12 +118,28 @@ fn main() {
|
|||
sycamore::render(|| {
|
||||
template! {
|
||||
div(class="wrapper") {
|
||||
p { (time_left.get()) }
|
||||
p { (total_errors.get()) }
|
||||
p { (error_count.get()) }
|
||||
p { (characters_typed.get()) }
|
||||
p { (cpm.get()) }
|
||||
p { (wpm.get()) }
|
||||
div(class="text-align-center") {
|
||||
div(class="inline card") {
|
||||
"Time Left"
|
||||
br {}
|
||||
(time_left.get())
|
||||
}
|
||||
div(class="inline incorrect card") {
|
||||
"Total Errors"
|
||||
br {}
|
||||
(total_errors.get())
|
||||
}
|
||||
div(class="inline card") {
|
||||
"CPM"
|
||||
br {}
|
||||
(((*cpm.get()).round() as u64))
|
||||
}
|
||||
div(class="inline card") {
|
||||
"WPM"
|
||||
br {}
|
||||
(((*wpm.get()).round() as u64))
|
||||
}
|
||||
}
|
||||
(if !*finished.get() {
|
||||
cloned!((value) => template! {
|
||||
div(id="quote") {
|
||||
|
|
|
@ -19,4 +19,21 @@
|
|||
|
||||
.text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0.1rem solid #d1d1d1;
|
||||
border-radius: .4rem;
|
||||
padding: .6rem 1.0rem .7rem;
|
||||
margin-bottom: 1.5rem;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.card + .card {
|
||||
margin-left: .75rem;
|
||||
}
|
Loading…
Reference in a new issue