hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Clean homepage html

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-10-20 15:56:24 +02:00
parent 4effa8231a
commit 2c3106c5c1
1 changed files with 73 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
app/src/main/kotlin/views/BaseView.kt
View File

@ -3,8 +3,7 @@ package be.simplenotes.app.views
import be.simplenotes.app.utils.StaticFileResolver import be.simplenotes.app.utils.StaticFileResolver
import be.simplenotes.domain.security.JwtPayload import be.simplenotes.domain.security.JwtPayload
import kotlinx.html.* import kotlinx.html.*
import kotlinx.html.div import kotlinx.html.ThScope.col
import org.intellij.lang.annotations.Language
class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver) { class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver) {
fun renderHome(jwtPayload: JwtPayload?) = renderPage( fun renderHome(jwtPayload: JwtPayload?) = renderPage(
@ -21,74 +20,70 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
div("container mx-auto flex flex-wrap justify-center content-center") { div("container mx-auto flex flex-wrap justify-center content-center") {
unsafe { div("md:order-1 order-2 flipped p-4 my-10 w-full md:w-1/2") {
@Language("html") attributes["aria-label"] = "demo"
val html = div("flex justify-between mb-4") {
""" h1("text-2xl underline") { +"Notes" }
<div aria-label="demo" class="md:order-1 order-2 flipped p-4 my-10 w-full md:w-1/2"> span {
<div class="flex justify-between mb-4"> span("btn btn-teal pointer-events-none") { +"Trash (3)" }
<h1 class="text-2xl underline">Notes</h1> span("ml-2 btn btn-green pointer-events-none") { +"New" }
<span> }
<span class="btn btn-teal pointer-events-none">Trash (3)</span> }
<span class="ml-2 btn btn-green pointer-events-none">New</span> form(classes = "md:space-x-2") {
</span> id = "search"
</div> input {
<form class="md:space-x-2" id="search"> attributes["aria-label"] = "demo-search"
<input aria-label="demo-search" name="search" disabled="" value="tag:&quot;demo&quot;"> attributes["name"] = "search"
<span id="buttons"> attributes["disabled"] = ""
<button type="button" disabled="" class="btn btn-green pointer-events-none">search</button> attributes["value"] = "tag:\"demo\""
<span class="btn btn-red pointer-events-none">clear</span> }
</span> span {
</form> id = "buttons"
<div class="overflow-x-auto"> button(type = ButtonType.button, classes = "btn btn-green pointer-events-none") {
<table id="notes"> attributes["disabled"] = ""
<thead> +"search"
<tr> }
<th scope="col" class="w-1/2">Title</th> span("btn btn-red pointer-events-none") { +"clear" }
<th scope="col" class="w-1/4">Updated</th> }
<th scope="col" class="w-1/4">Tags</th> }
</tr> div("overflow-x-auto") {
</thead> demoTable()
<tbody> }
<tr> }
<td><span class="text-blue-200 font-semibold underline">Formula 1</span></td> welcome()
<td class="text-center">moments ago</td> }
<td>
<ul class="inline flex flex-wrap justify-center">
<li class="mx-2 my-1"><span class="tag disabled">#demo</span ></li>
</ul>
</td>
</tr>
<tr>
<td><span class="text-blue-200 font-semibold underline">Syntax highlighting</span></td>
<td class="text-center">2 hours ago</td>
<td>
<ul class="inline flex flex-wrap justify-center">
<li class="mx-2 my-1"><span class="tag disabled">#features</span></li>
<li class="mx-2 my-1"><span class="tag disabled">#demo</span></li>
</ul>
</td>
</tr>
<tr>
<td><span class="text-blue-200 font-semibold underline">report</span></td>
<td class="text-center">5 days ago</td>
<td>
<ul class="inline flex flex-wrap justify-center">
<li class="mx-2 my-1"><span class="tag disabled">#study</span></li>
<li class="mx-2 my-1"><span class="tag disabled">#demo</span></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
""".trimIndent()
+html
} }
welcome() @Suppress("NOTHING_TO_INLINE")
private inline fun DIV.demoTable() {
table {
id = "notes"
thead {
tr {
th(scope = col, classes = "w-1/2") { +"Title" }
th(scope = col, classes = "w-1/4") { +"Updated" }
th(scope = col, classes = "w-1/4") { +"Tags" }
}
}
tbody {
listOf(
Triple("Formula 1", "moments ago", arrayOf("#demo")),
Triple("Syntax highlighting", "2 hours ago", arrayOf("#features", "#demo")),
Triple("report", "5 days ago", arrayOf("#study", "#demo")),
).forEach { (title, ago, tags) ->
tr {
td { span("text-blue-200 font-semibold underline") { +title } }
td("text-center") { +ago }
td {
ul("inline flex flex-wrap justify-center") {
tags.forEach { tag ->
li("mx-2 my-1") { span("tag disabled") { +tag } }
}
}
}
}
}
}
} }
} }
@ -96,7 +91,6 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
private inline fun DIV.welcome() { private inline fun DIV.welcome() {
div("w-full my-auto md:w-1/2 md:order-2 order-1 text-center") { div("w-full my-auto md:w-1/2 md:order-2 order-1 text-center") {
div("m-4 rounded-lg p-6") { div("m-4 rounded-lg p-6") {
p("text-teal-400") {
h2("text-3xl text-teal-400 underline") { +"Features:" } h2("text-3xl text-teal-400 underline") { +"Features:" }
ul("list-disc text-lg list-inside") { ul("list-disc text-lg list-inside") {
li { +"Markdown support" } li { +"Markdown support" }
@ -112,4 +106,3 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
} }
} }
} }
}