added tailwind
This commit is contained in:
efim
parent
fd7ddd9588
commit
a25d915bb5
File diff suppressed because it is too large
Load Diff
|
|
@ -10,6 +10,9 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@scala-js/vite-plugin-scalajs": "^1.0.0",
|
"@scala-js/vite-plugin-scalajs": "^1.0.0",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
|
"postcss": "^8.4.23",
|
||||||
|
"tailwindcss": "^3.3.1",
|
||||||
"vite": "^4.3.0"
|
"vite": "^4.3.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -2,6 +2,7 @@ package industries.sunshine.planningpoker
|
||||||
|
|
||||||
import scala.scalajs.js
|
import scala.scalajs.js
|
||||||
import scala.scalajs.js.annotation.*
|
import scala.scalajs.js.annotation.*
|
||||||
|
import com.raquo.laminar.api.L.{*, given}
|
||||||
|
|
||||||
import org.scalajs.dom
|
import org.scalajs.dom
|
||||||
|
|
||||||
|
|
@ -11,26 +12,49 @@ val javascriptLogo: String = js.native
|
||||||
|
|
||||||
@main
|
@main
|
||||||
def LiveChart(): Unit =
|
def LiveChart(): Unit =
|
||||||
dom.document.querySelector("#app").innerHTML = s"""
|
renderOnDomContentLoaded(
|
||||||
<div>
|
dom.document.getElementById("app"),
|
||||||
<a href="https://vitejs.dev" target="_blank">
|
Main.appElement()
|
||||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
)
|
||||||
</a>
|
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
|
|
||||||
<img src="$javascriptLogo" class="logo vanilla" alt="JavaScript logo" />
|
|
||||||
</a>
|
|
||||||
<h1>Hello Scala.js and Vite!</h1>
|
|
||||||
<div class="card">
|
|
||||||
<button id="counter" type="button"></button>
|
|
||||||
</div>
|
|
||||||
<p class="read-the-docs">
|
|
||||||
Click on the Vite logo to learn more
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
"""
|
|
||||||
|
|
||||||
setupCounter(dom.document.getElementById("counter"))
|
object Main {
|
||||||
end LiveChart
|
def appElement(): Element = {
|
||||||
|
div(
|
||||||
|
className := "w-screen h-screen flex flex-col justify-center items-center bg-green-100",
|
||||||
|
div( // container for row of pictures
|
||||||
|
className := "flex flex-row w-1/2 justify-center",
|
||||||
|
a(className := "flex-initial",
|
||||||
|
href := "https://vitejs.dev", target := "_blank",
|
||||||
|
img(src := "/vite.svg", className := "", alt := "Vite logo"),
|
||||||
|
),
|
||||||
|
a(className := "flex-initial",
|
||||||
|
href := "https://developer.mozilla.org/en-US/docs/Web/JavaScript", target := "_blank",
|
||||||
|
img(src := javascriptLogo, className := "", alt := "JavaScript logo"),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
div(
|
||||||
|
className := "flex-initial",
|
||||||
|
h1("Hello Laminar and Vite and stuff and other stuff!"),
|
||||||
|
),
|
||||||
|
div(className := "bg-blue-400 flex-initial rounded-lg border-2 border-slate-500 p-1 m-1",
|
||||||
|
counterButton(),
|
||||||
|
),
|
||||||
|
p(className := "flex-initial",
|
||||||
|
"Click on the Vite logo to learn more",
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
def counterButton(): Element = {
|
||||||
|
val counter = Var(0)
|
||||||
|
button(
|
||||||
|
tpe := "button",
|
||||||
|
"count is ",
|
||||||
|
child.text <-- counter,
|
||||||
|
onClick --> { event => counter.update(c => c + 1) },
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
def setupCounter(element: dom.Element): Unit =
|
def setupCounter(element: dom.Element): Unit =
|
||||||
var counter = 0
|
var counter = 0
|
||||||
|
|
|
||||||
176
style.css
176
style.css
|
|
@ -1,97 +1,101 @@
|
||||||
:root {
|
@tailwind base;
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
@tailwind components;
|
||||||
line-height: 1.5;
|
@tailwind utilities;
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
/* :root { */
|
||||||
color: rgba(255, 255, 255, 0.87);
|
/* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
|
||||||
background-color: #242424;
|
/* line-height: 1.5; */
|
||||||
|
/* font-weight: 400; */
|
||||||
|
|
||||||
font-synthesis: none;
|
/* color-scheme: light dark; */
|
||||||
text-rendering: optimizeLegibility;
|
/* color: rgba(255, 255, 255, 0.87); */
|
||||||
-webkit-font-smoothing: antialiased;
|
/* background-color: #242424; */
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
/* font-synthesis: none; */
|
||||||
font-weight: 500;
|
/* text-rendering: optimizeLegibility; */
|
||||||
color: #646cff;
|
/* -webkit-font-smoothing: antialiased; */
|
||||||
text-decoration: inherit;
|
/* -moz-osx-font-smoothing: grayscale; */
|
||||||
}
|
/* -webkit-text-size-adjust: 100%; */
|
||||||
a:hover {
|
/* } */
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
/* a { */
|
||||||
margin: 0;
|
/* font-weight: 500; */
|
||||||
display: flex;
|
/* color: #646cff; */
|
||||||
place-items: center;
|
/* text-decoration: inherit; */
|
||||||
min-width: 320px;
|
/* } */
|
||||||
min-height: 100vh;
|
/* a:hover { */
|
||||||
}
|
/* color: #535bf2; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
h1 {
|
/* body { */
|
||||||
font-size: 3.2em;
|
/* margin: 0; */
|
||||||
line-height: 1.1;
|
/* display: flex; */
|
||||||
}
|
/* place-items: center; */
|
||||||
|
/* min-width: 320px; */
|
||||||
|
/* min-height: 100vh; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
#app {
|
/* h1 { */
|
||||||
max-width: 1280px;
|
/* font-size: 3.2em; */
|
||||||
margin: 0 auto;
|
/* line-height: 1.1; */
|
||||||
padding: 2rem;
|
/* } */
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
/* #app { */
|
||||||
height: 6em;
|
/* max-width: 1280px; */
|
||||||
padding: 1.5em;
|
/* margin: 0 auto; */
|
||||||
will-change: filter;
|
/* padding: 2rem; */
|
||||||
transition: filter 300ms;
|
/* text-align: center; */
|
||||||
}
|
/* } */
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.vanilla:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
/* .logo { */
|
||||||
padding: 2em;
|
/* height: 6em; */
|
||||||
}
|
/* padding: 1.5em; */
|
||||||
|
/* will-change: filter; */
|
||||||
|
/* transition: filter 300ms; */
|
||||||
|
/* } */
|
||||||
|
/* .logo:hover { */
|
||||||
|
/* filter: drop-shadow(0 0 2em #646cffaa); */
|
||||||
|
/* } */
|
||||||
|
/* .logo.vanilla:hover { */
|
||||||
|
/* filter: drop-shadow(0 0 2em #f7df1eaa); */
|
||||||
|
/* } */
|
||||||
|
|
||||||
.read-the-docs {
|
/* .card { */
|
||||||
color: #888;
|
/* padding: 2em; */
|
||||||
}
|
/* } */
|
||||||
|
|
||||||
button {
|
/* .read-the-docs { */
|
||||||
border-radius: 8px;
|
/* color: #888; */
|
||||||
border: 1px solid transparent;
|
/* } */
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
/* button { */
|
||||||
:root {
|
/* border-radius: 8px; */
|
||||||
color: #213547;
|
/* border: 1px solid transparent; */
|
||||||
background-color: #ffffff;
|
/* padding: 0.6em 1.2em; */
|
||||||
}
|
/* font-size: 1em; */
|
||||||
a:hover {
|
/* font-weight: 500; */
|
||||||
color: #747bff;
|
/* font-family: inherit; */
|
||||||
}
|
/* background-color: #1a1a1a; */
|
||||||
button {
|
/* cursor: pointer; */
|
||||||
background-color: #f9f9f9;
|
/* transition: border-color 0.25s; */
|
||||||
}
|
/* } */
|
||||||
}
|
/* button:hover { */
|
||||||
|
/* border-color: #646cff; */
|
||||||
|
/* } */
|
||||||
|
/* button:focus, */
|
||||||
|
/* button:focus-visible { */
|
||||||
|
/* outline: 4px auto -webkit-focus-ring-color; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
/* @media (prefers-color-scheme: light) { */
|
||||||
|
/* :root { */
|
||||||
|
/* color: #213547; */
|
||||||
|
/* background-color: #ffffff; */
|
||||||
|
/* } */
|
||||||
|
/* a:hover { */
|
||||||
|
/* color: #747bff; */
|
||||||
|
/* } */
|
||||||
|
/* button { */
|
||||||
|
/* background-color: #f9f9f9; */
|
||||||
|
/* } */
|
||||||
|
/* } */
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./main.js",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx,scala}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue