From 2c3106c5c13c64ecbdd1562d4c7629a191b14110 Mon Sep 17 00:00:00 2001 From: Hubert Van De Walle Date: Tue, 20 Oct 2020 15:56:24 +0200 Subject: [PATCH] Clean homepage html --- app/src/main/kotlin/views/BaseView.kt | 153 ++++++++++++-------------- 1 file changed, 73 insertions(+), 80 deletions(-) diff --git a/app/src/main/kotlin/views/BaseView.kt b/app/src/main/kotlin/views/BaseView.kt index 63f473a..7bdb077 100644 --- a/app/src/main/kotlin/views/BaseView.kt +++ b/app/src/main/kotlin/views/BaseView.kt @@ -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 = - """ -
-
-

Notes

- - Trash (3) - New - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
TitleUpdatedTags
Formula 1moments ago -
    -
  • #demo
    • -
-
Syntax highlighting2 hours ago -
    -
  • #features
    • -
  • #demo
    • -
-
report5 days ago -
    -
  • #study
    • -
  • #demo
    • -
-
-
-
- """.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" } } } }