Html + css improvements

This commit is contained in:
Hubert Van De Walle 2020-08-22 18:57:33 +02:00
parent 5573dd45d6
commit f73a9d0b96
4 changed files with 20 additions and 20 deletions

View File

@ -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:&quot;demo&quot;">
<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" }

View File

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

View File

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

View File

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