Skip to content

Commit 99dc3e3

Browse files
moallemimoallemi
committed
[WEB] First attempt to refresh the page look
1 parent 256f81e commit 99dc3e3

File tree

6 files changed

+65
-13
lines changed

6 files changed

+65
-13
lines changed

‎server/src/main/resources/images/apps/golchin.png‎

-38 KB
Loading

‎web/build.gradle.kts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ plugins {
44

55
dependencies {
66
implementation(kotlin("stdlib-js"))
7+
implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.7.2")
78
implementation(project(":shared"))
89
}
910

10-
1111
kotlin {
1212
js {
1313
useCommonJs()

‎web/src/main/kotlin/Application.kt‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,54 @@
11
import kotlinx.coroutines.GlobalScope
22
import kotlinx.coroutines.flow.collect
33
import kotlinx.coroutines.launch
4+
import kotlinx.html.TagConsumer
5+
import kotlinx.html.h5
6+
import kotlinx.html.js.a
7+
import kotlinx.html.js.div
8+
import kotlinx.html.js.img
9+
import kotlinx.html.js.p
10+
import me.moallemi.kmpshowcase.shared.domain.model.App
11+
import me.moallemi.kmpshowcase.shared.domain.model.Links
412
import me.moallemi.kmpshowcase.shared.presentation.AppListViewModel
513
import org.koin.core.KoinComponent
614
import org.koin.core.inject
15+
import org.w3c.dom.HTMLElement
716

817
class Application : KoinComponent {
918

1019
private val appListViewModel: AppListViewModel by inject()
1120

12-
fun load(result: (String) -> Unit) {
21+
fun load(result: (List<App>) -> Unit) {
1322
GlobalScope.launch {
1423
appListViewModel.apps.collect {
15-
result(it.toString())
24+
result(it)
1625
}
1726
}
1827
appListViewModel.load()
1928
}
29+
}
2030

31+
fun TagConsumer<HTMLElement>.createCard(app: App) {
32+
div(classes = "card kmp-card") {
33+
img(src = app.bannerUrl, classes = "card-img-top")
34+
div(classes = "card-body") {
35+
h5(classes = "card-title") { +app.name }
36+
p(classes = "card-text") { +app.summary }
37+
div {
38+
createCardLinks(app.links)
39+
}
40+
}
41+
}
42+
}
43+
44+
fun TagConsumer<HTMLElement>.createCardLinks(links: Links?) = links?.let {
45+
links.website?.let { link ->
46+
a(href = link, target = "_blank", classes = "btn btn-primary") { +"Website" }
47+
}
48+
links.googlePlay?.let { link ->
49+
a(href = link, target = "_blank", classes = "btn btn-primary") { +"Google Play" }
50+
}
51+
links.appStore?.let { link ->
52+
a(href = link, target = "_blank", classes = "btn btn-primary") { +"App Store" }
53+
}
2154
}

‎web/src/main/kotlin/main.kt‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import kotlinx.browser.document
2+
import kotlinx.html.dom.append
23
import me.moallemi.kmpshowcase.shared.di.initKoinJs
34

45
fun main() {
56
initKoinJs()
67

78
val app = Application()
8-
app.load {
9-
document.body?.textContent = it
9+
app.load { apps ->
10+
document.getElementById("root")
11+
?.append {
12+
apps.onEach(::createCard)
13+
}
1014
}
1115
}

‎web/src/main/resources/index.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Kotlin Multiplatform Showcase</title>
6-
</head>
7-
<body>
8-
<div id="root"></div>
9-
<script src="app.js"></script>
10-
</body>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
7+
<link rel="stylesheet" href="style.css">
8+
9+
<title>Kotlin Multiplatform Showcase</title>
10+
</head>
11+
<body class="container">
12+
<nav class="navbar sticky-top navbar-light bg-light">
13+
<a class="navbar-brand" href="/">Kotlin Multiplatform Showcase</a>
14+
</nav>
15+
<div id="root" class="card-columns"></div>
16+
<script src="app.js"></script>
17+
18+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
19+
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
20+
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
21+
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
22+
</body>
1123
</html>

‎web/src/main/resources/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.kmp-card img {
2+
padding: 20px;
3+
}

0 commit comments

Comments
 (0)