From 97ea331c519ee2324c5d3b0910975387d359f063 Mon Sep 17 00:00:00 2001 From: Hubert Van De Walle Date: Sat, 22 Aug 2020 01:37:23 +0200 Subject: [PATCH] Landing page + css.. --- app/src/main/kotlin/views/BaseView.kt | 99 +++++++++++++++++-- .../kotlin/views/components/NoteListHeader.kt | 22 ++--- css/src/other.pcss | 16 ++- css/src/search.pcss | 35 +++++++ css/src/styles.pcss | 9 +- 5 files changed, 159 insertions(+), 22 deletions(-) create mode 100644 css/src/search.pcss diff --git a/app/src/main/kotlin/views/BaseView.kt b/app/src/main/kotlin/views/BaseView.kt index d2605a5..baf1d3f 100644 --- a/app/src/main/kotlin/views/BaseView.kt +++ b/app/src/main/kotlin/views/BaseView.kt @@ -2,16 +2,103 @@ 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 kotlinx.html.h1 +import org.intellij.lang.annotations.Language class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver) { fun renderHome(jwtPayload: JwtPayload?) = renderPage(title = "Home", jwtPayload = jwtPayload) { - div("centered container mx-auto flex justify-center items-center") { - div("bg-gray-800 md:w-1/3 w-full rounded-lg m-4 p-6 text-center") { - h1("text-3xl") { +"SimpleNotes" } - div("text-teal-400") { +"Welcome" } - div("text-gray-200") { +"TODO" } + section("text-center my-2 p-2") { + h1("text-5xl") { +"Access your notes anywhere" } + } + + div("container mx-auto flex flex-wrap justify-center content-center") { + + unsafe { + @Language("html") + val html = """ +
+
+

Notes

+ + Trash (3) + New + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
TitleUpdatedTags
Formula 1moments ago + +
Syntax highlighting2 hours ago + +
report5 days ago + +
+
+
+ """.trimIndent() + + +html + } + + welcome() + + } + } + + @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") { + 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" } + } + } } } } diff --git a/app/src/main/kotlin/views/components/NoteListHeader.kt b/app/src/main/kotlin/views/components/NoteListHeader.kt index cf8c96a..9baa8fa 100644 --- a/app/src/main/kotlin/views/components/NoteListHeader.kt +++ b/app/src/main/kotlin/views/components/NoteListHeader.kt @@ -18,19 +18,19 @@ fun DIV.noteListHeader(numberOfDeletedNotes: Int, query: String = "") { ) { +"New" } } } - form(method = post, classes = "mb-4 flex space-x-2") { - val colors = "bg-gray-800 border-gray-700 focus:border-teal-500 text-white" - input( - name = "search", - classes = "$colors rounded w-2/3 border appearance-none focus:outline-none text-base flex-1 p-2" - ) { + form(method = post, classes = "md:space-x-2") { + id = "search" + input(name = "search") { attributes["value"] = query } - button(type = submit, classes = "btn btn-green") { - +"search" - } - a(href = "/notes", classes = "btn btn-red inline-block text-center") { - +"clear" + span { + id = "buttons" + button(type = submit) { + +"search" + } + a(href = "/notes") { + +"clear" + } } } } diff --git a/css/src/other.pcss b/css/src/other.pcss index f9a55ea..924bccf 100644 --- a/css/src/other.pcss +++ b/css/src/other.pcss @@ -6,6 +6,20 @@ } &:hover { - @apply bg-teal-800 text-white; + @apply bg-teal-800 text-white; + } +} + +@screen md { + .flipped { + perspective: 1000px; + } + + .flipped-left > * { + transform: rotateY(25deg); + } + + .flipped-right > * { + transform: rotateY(-25deg); } } diff --git a/css/src/search.pcss b/css/src/search.pcss new file mode 100644 index 0000000..3dc98a6 --- /dev/null +++ b/css/src/search.pcss @@ -0,0 +1,35 @@ +#search { + @apply mb-4 flex flex-wrap; + + [name="search"] { + @apply bg-gray-800 border-gray-700 text-white rounded w-full border appearance-none text-base p-2 mb-2; + + &:focus { + @apply border-teal-500 outline-none; + } + } + + #buttons { + @apply flex flex-1 justify-between mb-2; + + button { + @apply flex-1 btn btn-green; + } + + a { + @apply ml-2 flex-1 btn btn-red inline-block text-center; + } + } +} + +@screen md { + #search { + [name="search"] { + @apply mb-0 /* @formatter:off */ w-2/3 /* @formatter:on */ flex-1; + } + + #buttons { + @apply mb-0; + } + } +} diff --git a/css/src/styles.pcss b/css/src/styles.pcss index 4efb7fc..f3d8e0e 100644 --- a/css/src/styles.pcss +++ b/css/src/styles.pcss @@ -5,12 +5,13 @@ @import "tailwindcss/components"; @import "./button.pcss"; -@import "./note.pcss"; -@import "./pagination.pcss"; -@import "./other.pcss"; +@import "./hljs.pcss"; @import "./navbar.pcss"; @import "./note-table.pcss"; -@import "./hljs.pcss"; +@import "./note.pcss"; +@import "./other.pcss"; +@import "./pagination.pcss"; +@import "./search.pcss"; /*noinspection CssUnknownTarget*/ @import "tailwindcss/utilities";