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": {
|
||||
"@scala-js/vite-plugin-scalajs": "^1.0.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.23",
|
||||
"tailwindcss": "^3.3.1",
|
||||
"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.annotation.*
|
||||
import com.raquo.laminar.api.L.{*, given}
|
||||
|
||||
import org.scalajs.dom
|
||||
|
||||
|
|
@ -11,26 +12,49 @@ val javascriptLogo: String = js.native
|
|||
|
||||
@main
|
||||
def LiveChart(): Unit =
|
||||
dom.document.querySelector("#app").innerHTML = s"""
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<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>
|
||||
"""
|
||||
renderOnDomContentLoaded(
|
||||
dom.document.getElementById("app"),
|
||||
Main.appElement()
|
||||
)
|
||||
|
||||
setupCounter(dom.document.getElementById("counter"))
|
||||
end LiveChart
|
||||
object Main {
|
||||
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 =
|
||||
var counter = 0
|
||||
|
|
|
|||
176
style.css
176
style.css
|
|
@ -1,97 +1,101 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
/* :root { */
|
||||
/* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
|
||||
/* line-height: 1.5; */
|
||||
/* font-weight: 400; */
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
/* color-scheme: light dark; */
|
||||
/* color: rgba(255, 255, 255, 0.87); */
|
||||
/* background-color: #242424; */
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
/* font-synthesis: none; */
|
||||
/* text-rendering: optimizeLegibility; */
|
||||
/* -webkit-font-smoothing: antialiased; */
|
||||
/* -moz-osx-font-smoothing: grayscale; */
|
||||
/* -webkit-text-size-adjust: 100%; */
|
||||
/* } */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
/* a { */
|
||||
/* font-weight: 500; */
|
||||
/* color: #646cff; */
|
||||
/* text-decoration: inherit; */
|
||||
/* } */
|
||||
/* a:hover { */
|
||||
/* color: #535bf2; */
|
||||
/* } */
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
/* body { */
|
||||
/* margin: 0; */
|
||||
/* display: flex; */
|
||||
/* place-items: center; */
|
||||
/* min-width: 320px; */
|
||||
/* min-height: 100vh; */
|
||||
/* } */
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
/* h1 { */
|
||||
/* font-size: 3.2em; */
|
||||
/* line-height: 1.1; */
|
||||
/* } */
|
||||
|
||||
.logo {
|
||||
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);
|
||||
}
|
||||
/* #app { */
|
||||
/* max-width: 1280px; */
|
||||
/* margin: 0 auto; */
|
||||
/* padding: 2rem; */
|
||||
/* text-align: center; */
|
||||
/* } */
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
/* .logo { */
|
||||
/* 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 {
|
||||
color: #888;
|
||||
}
|
||||
/* .card { */
|
||||
/* padding: 2em; */
|
||||
/* } */
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
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;
|
||||
}
|
||||
/* .read-the-docs { */
|
||||
/* color: #888; */
|
||||
/* } */
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
/* button { */
|
||||
/* border-radius: 8px; */
|
||||
/* 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) { */
|
||||
/* :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