hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Landing page + css..

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-08-22 01:37:23 +02:00
parent 4c4ca2dd98
commit 97ea331c51
5 changed files with 159 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 = """
<div class="md:order-1 order-2 flipped flipped-left 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>
<a href="#" class="underline font-semibold">Trash (3)</a>
<a href="#" class="ml-2 btn btn-green">New</a>
</span>
</div>
<form class="md:space-x-2" id="search">
<input name="search" disabled="" value="tag:&quot;demo&quot;">
<span id="buttons"><button disabled="">search</button><a href="#">clear</a></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><a href="#" class="text-blue-200 font-semibold underline">Formula 1</a></td>
<td class="text-center">moments ago</td>
<td>
<ul class="inline flex flex-wrap justify-center">
<li class="mx-2 my-1"><a href="#" class="tag">#demo</a></li>
</ul>
</td>
</tr>
<tr>
<td><a href="#" class="text-blue-200 font-semibold underline">Syntax highlighting</a></td>
<td class="text-center">2 hours ago</td>
<td>
<ul class="inline flex flex-wrap justify-center">
<li class="mx-2 my-1"><a href="#" class="tag">#features</a></li>
<li class="mx-2 my-1"><a href="#" class="tag">#demo</a></li>
</ul>
</td>
</tr>
<tr>
<td><a href="#" class="text-blue-200 font-semibold underline">report</a></td>
<td class="text-center">5 days ago</td>
<td>
<ul class="inline flex flex-wrap justify-center">
<li class="mx-2 my-1"><a href="#" class="tag">#study</a></li>
<li class="mx-2 my-1"><a href="#" class="tag">#demo</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
""".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" }
}
}
}
}
}

22
app/src/main/kotlin/views/components/NoteListHeader.kt
View File

@ -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"
}
}
}
}

16
css/src/other.pcss
View File

@ -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);
}
}

35
css/src/search.pcss Normal file
View File

@ -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;
}
}
}

9
css/src/styles.pcss
View File

@ -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";