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

153
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.domain.security.JwtPayload
import kotlinx.html.*
import kotlinx.html.div
import org.intellij.lang.annotations.Language
import kotlinx.html.ThScope.col
class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver) {
fun renderHome(jwtPayload: JwtPayload?) = renderPage(
@ -21,93 +20,87 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
div("container mx-auto flex flex-wrap justify-center content-center") {
unsafe {
@Language("html")
val html =
"""
<div aria-label="demo" class="md:order-1 order-2 flipped p-4 my-10 w-full md:w-1/2">
<div class="flex justify-between mb-4">
<h1 class="text-2xl underline">Notes</h1>
<span>
<span class="btn btn-teal pointer-events-none">Trash (3)</span>
<span class="ml-2 btn btn-green pointer-events-none">New</span>
</span>
</div>
<form class="md:space-x-2" id="search">
<input aria-label="demo-search" name="search" disabled="" value="tag:&quot;demo&quot;">
<span id="buttons">
<button type="button" disabled="" class="btn btn-green pointer-events-none">search</button>
<span class="btn btn-red pointer-events-none">clear</span>
</span>
</form>
<div class="overflow-x-auto">
<table id="notes">
<thead>
<tr>
<th scope="col" class="w-1/2">Title</th>
<th scope="col" class="w-1/4">Updated</th>
<th scope="col" class="w-1/4">Tags</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-blue-200 font-semibold underline">Formula 1</span></td>
<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
div("md:order-1 order-2 flipped p-4 my-10 w-full md:w-1/2") {
attributes["aria-label"] = "demo"
div("flex justify-between mb-4") {
h1("text-2xl underline") { +"Notes" }
span {
span("btn btn-teal pointer-events-none") { +"Trash (3)" }
span("ml-2 btn btn-green pointer-events-none") { +"New" }
}
}
form(classes = "md:space-x-2") {
id = "search"
input {
attributes["aria-label"] = "demo-search"
attributes["name"] = "search"
attributes["disabled"] = ""
attributes["value"] = "tag:\"demo\""
}
span {
id = "buttons"
button(type = ButtonType.button, classes = "btn btn-green pointer-events-none") {
attributes["disabled"] = ""
+"search"
}
span("btn btn-red pointer-events-none") { +"clear" }
}
}
div("overflow-x-auto") {
demoTable()
}
}
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 } }
}
}
}
}
}
}
}
}
@Suppress("NOTHING_TO_INLINE")
private inline fun DIV.welcome() {
div("w-full my-auto md:w-1/2 md:order-2 order-1 text-center") {
div("m-4 rounded-lg p-6") {
p("text-teal-400") {
h2("text-3xl text-teal-400 underline") { +"Features:" }
ul("list-disc text-lg list-inside") {
li { +"Markdown support" }
li { +"Full text search" }
li { +"Structured search" }
li { +"Code highlighting" }
li { +"Fast and lightweight" }
li { +"No tracking" }
li { +"Works without javascript" }
li { +"Data export" }
}
h2("text-3xl text-teal-400 underline") { +"Features:" }
ul("list-disc text-lg list-inside") {
li { +"Markdown support" }
li { +"Full text search" }
li { +"Structured search" }
li { +"Code highlighting" }
li { +"Fast and lightweight" }
li { +"No tracking" }
li { +"Works without javascript" }
li { +"Data export" }
}
}
}