hubert/KotlinStarter
1
0
Fork 0
Code Releases Activity

Add some css

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-09-10 15:25:40 +02:00
parent 7fc979053e
commit 9fb5e43a0b
13 changed files with 2036 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.gitignore vendored
View File

@ -27,3 +27,15 @@ out/
*.iml *.iml
*.ipr *.ipr
*.iws *.iws
# Dependency directories
node_modules/
# yarn
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.yarn-integrity
yarn-debug.log*
yarn-error.log*

16
src/css/package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "css",
"version": "1.0.0",
"scripts": {
"css": "NODE_ENV=dev postcss build src/styles.pcss --output ../main/resources/assets/styles.css",
"css-purge": "NODE_ENV=production postcss build src/styles.pcss --output ../main/resources/assets/styles.css"
},
"dependencies": {
"autoprefixer": "^9.8.6",
"cssnano": "^4.1.10",
"postcss-cli": "^7.1.1",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.3",
"tailwindcss": "^1.5.1"
}
}

15
src/css/postcss.config.js Normal file
View File

@ -0,0 +1,15 @@
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('tailwindcss'),
require('autoprefixer'),
require('cssnano')({
preset: ['default', {
discardComments: {
removeAll: true,
},
}]
}),
]
}

23
src/css/src/button.pcss Normal file
View File

@ -0,0 +1,23 @@
.btn {
@apply font-semibold py-2 px-4 rounded;
&:focus {
@apply outline-none shadow-outline;
}
&:hover {
@apply font-extrabold;
}
}
.btn-purple {
@apply bg-purple-400 text-gray-800;
&:focus {
@apply bg-purple-600;
}
&:hover {
@apply bg-purple-600;
}
}

17
src/css/src/inputs.pcss Normal file
View File

@ -0,0 +1,17 @@
.input {
@apply bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight;
&:focus {
@apply outline-none bg-white border-purple-500;
}
}
.input-label {
@apply block text-gray-500 font-bold mb-1 pr-4;
}
@screen md {
.input-label {
@apply text-right mb-0;
}
}

11
src/css/src/styles.pcss Normal file
View File

@ -0,0 +1,11 @@
/*noinspection CssUnknownTarget*/
@import "tailwindcss/base";
/*noinspection CssUnknownTarget*/
@import "tailwindcss/components";
@import "button.pcss";
@import "inputs.pcss";
/*noinspection CssUnknownTarget*/
@import "tailwindcss/utilities";

17
src/css/tailwind.config.js Normal file
View File

@ -0,0 +1,17 @@
module.exports = {
purge: {
content: [
'../main/resources/views/**/*.twig'
]
},
theme: {},
variants: {
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
},
plugins: [
],
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
}

1885
src/css/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

4
src/main/kotlin/starter/Server.kt
View File

@ -4,7 +4,9 @@ import io.javalin.Javalin
class Server(private val views: Views, private val conf: StarterConfig) { class Server(private val views: Views, private val conf: StarterConfig) {
fun run() { fun run() {
val app = Javalin.create().start(7000) val app = Javalin.create {
it.addStaticFiles("/assets")
}.start(7000)
app.get("/") { ctx -> app.get("/") { ctx ->
ctx.result(views.index(conf.dependencies, conf.inputs)) ctx.result(views.index(conf.dependencies, conf.inputs))

1
src/main/resources/assets/styles.css Normal file
View File

File diff suppressed because one or more lines are too long

20
src/main/resources/views/#macros.twig Normal file
View File

@ -0,0 +1,20 @@
{% macro dependency(dependency) %}
<label class="m-2">
<input name="{{ dependency.name }}"
type="checkbox"{% if dependency.default %} checked{% endif %}>
<span>{{ dependency.name }}</span>
</label>
{% endmacro %}
{% macro input(input) %}
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="input-label" for="{{ input.name }}">
{{ input.display }}
</label>
</div>
<div class="md:w-2/3">
<input name="{{ input.name }}" id="{{ input.name }}" class="input"{% if input.value %} value="{{ input.value }}"{% endif %}>
</div>
</div>
{% endmacro %}

3
src/main/resources/views/@base.twig
View File

@ -3,10 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<title>Kotlin Starter</title> <title>Kotlin Starter</title>
</head> </head>
<body> <body>
<main class="container mx-auto">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</main>
</body> </body>
</html> </html>

25
src/main/resources/views/index.twig
View File

@ -1,30 +1,19 @@
{% extends "views/@base" %} {% extends "views/@base" %}
{% macro dependency(dependency) %} {% import "views/#macros" %}
<label>
<input name="{{ dependency.name }}" type="checkbox"{% if dependency.default %} checked{% endif %}>
<span>{{ dependency.name }}</span>
</label>
{% endmacro %}
{% macro input(input) %}
<label>
<span>{{ input.display }}</span>
<input name="{{ input.name }}" type="text"{% if input.value %} value="{{ input.value }}"{% endif %}>
</label>
{% endmacro %}
{% block content %} {% block content %}
<h1>Kotlin Starter</h1> <h1 class="text-2xl font-bold text-purple-800 mb-4">Kotlin Starter</h1>
<form method="post"> <form method="post" class="w-full max-w-sm mx-auto">
{% for input in inputs %} {% for input in inputs %}
{{ input(input) }} {{ input(input) }}
{% endfor %} {% endfor %}
<br> <hr>
<div class="flex flex-wrap">
{% for dependency in dependencies %} {% for dependency in dependencies %}
{{ dependency(dependency) }} {{ dependency(dependency) }}
{% endfor %} {% endfor %}
<br> </div>
<button type="submit">Submit</button> <button type="submit" class="w-full btn btn-purple">Submit</button>
</form> </form>
{% endblock %} {% endblock %}