Html + css improvements
This commit is contained in:
parent
5573dd45d6
commit
f73a9d0b96
@ -25,17 +25,17 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
|
||||
@Language("html")
|
||||
val html =
|
||||
"""
|
||||
<div aria-label="demo" class="md:order-1 order-2 flipped flipped-left p-4 my-10 w-full md:w-1/2">
|
||||
<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>
|
||||
<a href="#" class="underline font-semibold">Trash (3)</a>
|
||||
<a href="#" class="ml-2 btn btn-green">New</a>
|
||||
<span class="underline font-semibold">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:"demo"">
|
||||
<span id="buttons"><button disabled="">search</button><a href="#">clear</a></span>
|
||||
<span id="buttons"><button disabled="" class="pointer-events-none">search</button><span>clear</span></span>
|
||||
</form>
|
||||
<div class="overflow-x-auto">
|
||||
<table id="notes">
|
||||
@ -48,31 +48,31 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#" class="text-blue-200 font-semibold underline">Formula 1</a></td>
|
||||
<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"><a href="#" class="tag">#demo</a></li>
|
||||
<li class="mx-2 my-1"><span class="tag disabled">#demo</span ></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="text-blue-200 font-semibold underline">Syntax highlighting</a></td>
|
||||
<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"><a href="#" class="tag">#features</a></li>
|
||||
<li class="mx-2 my-1"><a href="#" class="tag">#demo</a></li>
|
||||
<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><a href="#" class="text-blue-200 font-semibold underline">report</a></td>
|
||||
<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"><a href="#" class="tag">#study</a></li>
|
||||
<li class="mx-2 my-1"><a href="#" class="tag">#demo</a></li>
|
||||
<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>
|
||||
@ -95,7 +95,7 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
|
||||
div("m-4 rounded-lg p-6") {
|
||||
p("text-teal-400") {
|
||||
h2("text-3xl text-teal-400 underline") { +"Features:" }
|
||||
ul("list-disc text-lg") {
|
||||
ul("list-disc text-lg list-inside") {
|
||||
li { +"Markdown support" }
|
||||
li { +"Full text search" }
|
||||
li { +"Structured search" }
|
||||
|
||||
@ -44,7 +44,7 @@ private fun FlowContent.tags(tags: List<String>) {
|
||||
ul("inline flex flex-wrap justify-center") {
|
||||
tags.forEach { tag ->
|
||||
li("mx-2 my-1") {
|
||||
span("tag") { +"#$tag" }
|
||||
span("tag disabled") { +"#$tag" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,10 @@
|
||||
&:hover {
|
||||
@apply bg-teal-800 text-white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
}
|
||||
|
||||
@screen md {
|
||||
@ -15,11 +19,7 @@
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.flipped-left > * {
|
||||
.flipped > * {
|
||||
transform: rotateY(25deg);
|
||||
}
|
||||
|
||||
.flipped-right > * {
|
||||
transform: rotateY(-25deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
@apply flex-1 btn btn-green;
|
||||
}
|
||||
|
||||
a {
|
||||
a, span {
|
||||
@apply ml-2 flex-1 btn btn-red inline-block text-center;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user