diff --git a/site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelsPage.kt b/site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelsPage.kt index 5ee2ca94..f961fc18 100644 --- a/site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelsPage.kt +++ b/site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelsPage.kt @@ -1,64 +1,33 @@ package energy.lux.frontend.domains.zenmo.pages.models import androidx.compose.runtime.Composable -import com.varabyte.kobweb.compose.css.TextAlign import com.varabyte.kobweb.compose.ui.Modifier -import com.varabyte.kobweb.compose.ui.modifiers.gap -import com.varabyte.kobweb.compose.ui.modifiers.textAlign -import com.varabyte.kobweb.compose.ui.toAttrs -import com.varabyte.kobweb.silk.components.layout.SimpleGrid -import com.varabyte.kobweb.silk.components.layout.numColumns +import com.varabyte.kobweb.compose.ui.modifiers.alignSelf import energy.lux.frontend.components.widgets.SectionContainer -import energy.lux.frontend.domains.lux.core.model.subdomain.amersfoort -import energy.lux.frontend.domains.lux.core.model.subdomain.demoEnergyHubModel -import energy.lux.frontend.domains.lux.core.model.subdomain.demoNeighbourhoodModel -import energy.lux.frontend.domains.lux.core.model.subdomain.empowered -import energy.lux.frontend.domains.lux.pages.application_fields.LuxApplicationArea -import energy.lux.frontend.domains.lux.pages.application_fields.components.LUX_DEMO_SECTION_ID +import energy.lux.frontend.core.services.localization.LocalizedText +import energy.lux.frontend.core.services.localization.localizedUrl +import energy.lux.frontend.domains.lux.sections.nav_header.luxModelsMenuItem import energy.lux.frontend.domains.lux.widgets.headings.HeaderText -import energy.lux.frontend.domains.zenmo.components.PlaceholderText import energy.lux.frontend.domains.zenmo.components.layouts.ZenmoPageLayout import energy.lux.frontend.domains.zenmo.sections.nav_header.zenmoModelsMenuItem +import energy.lux.frontend.domains.zenmo.widgets.MoreInfoLink import energy.lux.frontend.pages.SiteGlobals -import org.jetbrains.compose.web.css.cssRem -import org.jetbrains.compose.web.dom.P -import web.window.window - -val DEMO_MODEL_URL_PREFIX = "${window.location.protocol}//${SiteGlobals.LUX_DOMAIN}/" -val zenmoShowcasedModels: List = listOf( - ShowcasedModel( - demoNeighbourhoodModel.copy( - url = "$DEMO_MODEL_URL_PREFIX${LuxApplicationArea.LUX_ENERGY_HUB.url}#${LUX_DEMO_SECTION_ID}", - ) - ), - ShowcasedModel( - demoEnergyHubModel.copy( - url = "$DEMO_MODEL_URL_PREFIX${LuxApplicationArea.LUX_ENERGY_HUB.url}#${LUX_DEMO_SECTION_ID}", - ) - ), - ShowcasedModel(empowered), - ShowcasedModel(amersfoort), -) +import org.jetbrains.compose.web.css.AlignSelf @Composable fun ModelsPage() { ZenmoPageLayout(zenmoModelsMenuItem.route.label) { SectionContainer { - HeaderText(enText = "Interactive Energy Models", nlText = "Interactieve Energiemodellen") - P( - Modifier - .textAlign(TextAlign.Center) - .constrainedWidth().toAttrs() - ) { - PlaceholderText(repeat = 2) - } - SimpleGrid( - numColumns(base = 1, md = 2), - modifier = Modifier.gap(2.5.cssRem) - .constrainedWidth(), - ) { - zenmoShowcasedModels.forEach { ModelCard(it) } - } + HeaderText(enText = "Interactive energy models", nlText = "Interactieve energiemodellen") + ShowcaseModelsGrid() + MoreInfoLink( + url = localizedUrl(SiteGlobals.LUX_DOMAIN, luxModelsMenuItem.route.path), + text = LocalizedText( + en = "See more models", + nl = "Bekijk meer modellen" + ), + modifier = Modifier.alignSelf(AlignSelf.FlexEnd), + ) } } } \ No newline at end of file diff --git a/site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelCard.kt b/site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcaseModelsGrid.kt similarity index 76% rename from site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelCard.kt rename to site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcaseModelsGrid.kt index 65885baa..f4689707 100644 --- a/site/src/jsMain/kotlin/domains/zenmo/pages/models/ModelCard.kt +++ b/site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcaseModelsGrid.kt @@ -4,10 +4,9 @@ import androidx.compose.runtime.Composable import com.varabyte.kobweb.compose.css.functions.max import com.varabyte.kobweb.compose.foundation.layout.Column import com.varabyte.kobweb.compose.ui.Modifier -import com.varabyte.kobweb.compose.ui.modifiers.borderRadius -import com.varabyte.kobweb.compose.ui.modifiers.fillMaxWidth -import com.varabyte.kobweb.compose.ui.modifiers.height -import com.varabyte.kobweb.compose.ui.modifiers.margin +import com.varabyte.kobweb.compose.ui.modifiers.* +import com.varabyte.kobweb.silk.components.layout.SimpleGrid +import com.varabyte.kobweb.silk.components.layout.numColumns import com.varabyte.kobweb.silk.components.navigation.Link import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant @@ -20,7 +19,7 @@ import org.jetbrains.compose.web.css.vh import org.jetbrains.compose.web.dom.P @Composable -fun ModelCard(showcased: ShowcasedModel) { +private fun ModelCard(showcased: ShowcasedModel) { Link( path = showcased.model.url, variant = UndecoratedLinkVariant.then(UncoloredLinkVariant), @@ -40,4 +39,15 @@ fun ModelCard(showcased: ShowcasedModel) { P { LangText(showcased.description) } } } +} + +@Composable +fun ShowcaseModelsGrid() { + SimpleGrid( + numColumns(base = 1, md = 2), + modifier = Modifier.gap(2.5.cssRem) + .constrainedWidth(), + ) { + zenmoShowcasedModels.forEach { ModelCard(it) } + } } \ No newline at end of file diff --git a/site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcasedModel.kt b/site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcasedModel.kt index 78722404..a96db2ca 100644 --- a/site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcasedModel.kt +++ b/site/src/jsMain/kotlin/domains/zenmo/pages/models/ShowcasedModel.kt @@ -5,10 +5,5 @@ import energy.lux.frontend.domains.lux.core.TwinModelCard data class ShowcasedModel( val model: TwinModelCard, - val description: LocalizedText = LocalizedText( - nl = """ - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. - """.trimIndent(), - ), + val description: LocalizedText, ) \ No newline at end of file diff --git a/site/src/jsMain/kotlin/domains/zenmo/pages/models/zenmoShowcasedModels.kt b/site/src/jsMain/kotlin/domains/zenmo/pages/models/zenmoShowcasedModels.kt new file mode 100644 index 00000000..f877bc51 --- /dev/null +++ b/site/src/jsMain/kotlin/domains/zenmo/pages/models/zenmoShowcasedModels.kt @@ -0,0 +1,72 @@ +package energy.lux.frontend.domains.zenmo.pages.models + +import energy.lux.frontend.core.services.localization.LocalizedText +import energy.lux.frontend.domains.lux.core.model.subdomain.amersfoort +import energy.lux.frontend.domains.lux.core.model.subdomain.demoEnergyHubModel +import energy.lux.frontend.domains.lux.core.model.subdomain.demoNeighbourhoodModel +import energy.lux.frontend.domains.lux.core.model.subdomain.empowered +import energy.lux.frontend.domains.lux.pages.application_fields.LuxApplicationArea +import energy.lux.frontend.domains.lux.pages.application_fields.components.LUX_DEMO_SECTION_ID +import energy.lux.frontend.pages.SiteGlobals +import web.window.window + +private val DEMO_MODEL_URL_PREFIX = "${window.location.protocol}//${SiteGlobals.LUX_DOMAIN}/" +val zenmoShowcasedModels: List = listOf( + ShowcasedModel( + model = demoNeighbourhoodModel.copy( + url = "$DEMO_MODEL_URL_PREFIX${LuxApplicationArea.LUX_ENERGY_HUB.url}#${LUX_DEMO_SECTION_ID}", + ), + description = LocalizedText( + en = """ + In residential areas, peak load on the electricity grid can be strongly reduced through targeted + management. This means: connecting more houses with the same grid capacity. + """.trimIndent(), + nl = """ + In woonwijken kan de piekbelasting van het elekctriciteitsnet sterk afnemen als daar gericht op wordt + gestuurd. Dat betekent: met dezelfde netcapaciteit meer huizen aansluiten. + """.trimIndent() + ), + ), + ShowcasedModel( + model = demoEnergyHubModel.copy( + url = "$DEMO_MODEL_URL_PREFIX${LuxApplicationArea.LUX_ENERGY_HUB.url}#${LUX_DEMO_SECTION_ID}", + ), + description = LocalizedText( + en = """ + In business parks, net congestion is the cause of great problems. Forming an energy hub can be the + solution. LUX Energy Hub lets you explore different scenario’s. + """.trimIndent(), + nl = """ + Op bedrijventerreinen zorgt netcongestie voor grote problemen. Samen een energiehub vormen kan de + oplossing zijn. LUX Energy Hub biedt je de mogelijkheid om verschillende scenario’s te verkennen. + """.trimIndent() + ) + ), + ShowcasedModel( + model = empowered, + description = LocalizedText( + en = """ + The EmPowerED project is developing a systems design toolbox that helps decision-makers understand the + complex interplay of social, legal, financial, and technical factors in local energy systems. + """.trimIndent(), + nl = """ + Het EmPowerED project is gericht op het ontwikkelen van een systems design toolbox die beleidsmakers + helpt om de complexe samenhang tussen sociale, wettelijke, financiële en technische factoren in lokale + energiesystemen te begrijpen. + """.trimIndent() + ) + ), + ShowcasedModel( + model = amersfoort, + description = LocalizedText( + en = """ + The municipality of Amersfoort was interested in the differences in energy dynamics per neighborhood + and used LUX Neighbourhood to explore some scenarios. + """.trimIndent(), + nl = """ + De gemeente Amersfoort was geïnteresseerd in de verschillen in energiedynamiek per wijk en heeft LUX + Woonwijk gebruikt om enkele scenario's te verkennen. + """.trimIndent() + ) + ), +) \ No newline at end of file diff --git a/site/src/jsMain/kotlin/domains/zenmo/pages/projects/ProjectRowCard.kt b/site/src/jsMain/kotlin/domains/zenmo/pages/projects/ProjectRowCard.kt index 6b43024d..f072a544 100644 --- a/site/src/jsMain/kotlin/domains/zenmo/pages/projects/ProjectRowCard.kt +++ b/site/src/jsMain/kotlin/domains/zenmo/pages/projects/ProjectRowCard.kt @@ -5,16 +5,11 @@ import com.varabyte.kobweb.compose.css.functions.clamp import com.varabyte.kobweb.compose.foundation.layout.Arrangement import com.varabyte.kobweb.compose.foundation.layout.Box import com.varabyte.kobweb.compose.foundation.layout.Column -import com.varabyte.kobweb.compose.foundation.layout.Row import com.varabyte.kobweb.compose.ui.Alignment import com.varabyte.kobweb.compose.ui.Modifier import com.varabyte.kobweb.compose.ui.modifiers.* import com.varabyte.kobweb.compose.ui.toAttrs import com.varabyte.kobweb.silk.components.graphics.Image -import com.varabyte.kobweb.silk.components.icons.mdi.MdiNorthEast -import com.varabyte.kobweb.silk.components.navigation.Link -import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant -import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant import com.varabyte.kobweb.silk.style.toModifier import com.zenmo.web.zenmo.theme.font.LabelTextStyle import com.zenmo.web.zenmo.theme.font.TextStyle @@ -22,6 +17,7 @@ import energy.lux.frontend.components.widgets.LangText import energy.lux.frontend.domains.lux.styles.ResponsiveFlexStyle import energy.lux.frontend.domains.lux.widgets.headings.SubHeaderText import energy.lux.frontend.domains.zenmo.pages.models.constrainedWidth +import energy.lux.frontend.domains.zenmo.widgets.MoreInfoLink import energy.lux.frontend.theme.SitePalette import org.jetbrains.compose.web.css.cssRem import org.jetbrains.compose.web.css.px @@ -76,24 +72,7 @@ private fun ProjectContent(item: ZenmoProject) { P { LangText(item.descriptionText) } - ProjectLink(item) - } - } -} - -@Composable -private fun ProjectLink(item: ZenmoProject) { - Link( - path = item.url, - variant = UncoloredLinkVariant.then(UndecoratedLinkVariant), - modifier = Modifier.color(SitePalette.light.primary), - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(0.25.cssRem), - ) { - LangText(en = "Learn more", nl = "Meer informatie") - MdiNorthEast(modifier = Modifier.fontSize(16.px)) + MoreInfoLink(item.url) } } } \ No newline at end of file diff --git a/site/src/jsMain/kotlin/domains/zenmo/widgets/MoreInfoLink.kt b/site/src/jsMain/kotlin/domains/zenmo/widgets/MoreInfoLink.kt new file mode 100644 index 00000000..578a4246 --- /dev/null +++ b/site/src/jsMain/kotlin/domains/zenmo/widgets/MoreInfoLink.kt @@ -0,0 +1,29 @@ +package energy.lux.frontend.domains.zenmo.widgets + +import androidx.compose.runtime.Composable +import com.varabyte.kobweb.compose.ui.Modifier +import com.varabyte.kobweb.compose.ui.modifiers.* +import com.varabyte.kobweb.silk.components.icons.mdi.MdiNorthEast +import com.varabyte.kobweb.silk.components.navigation.Link +import com.varabyte.kobweb.silk.components.navigation.UncoloredLinkVariant +import com.varabyte.kobweb.silk.components.navigation.UndecoratedLinkVariant +import com.varabyte.kobweb.silk.style.toModifier +import energy.lux.frontend.components.widgets.LangText +import energy.lux.frontend.core.services.localization.LocalizedText +import org.jetbrains.compose.web.css.* + +@Composable +fun MoreInfoLink( + url: String, + text: LocalizedText = LocalizedText(en = "Learn more", nl = "Meer informatie"), + modifier: Modifier = Modifier, +) { + Link( + path = url, + variant = UncoloredLinkVariant.then(UndecoratedLinkVariant), + modifier = MoreInfoLinkStyle.toModifier().then(modifier), + ) { + LangText(text) + MdiNorthEast(modifier = Modifier.fontSize(16.px)) + } +} \ No newline at end of file diff --git a/site/src/jsMain/kotlin/domains/zenmo/widgets/MoreInfoLinkStyle.kt b/site/src/jsMain/kotlin/domains/zenmo/widgets/MoreInfoLinkStyle.kt new file mode 100644 index 00000000..3d00548e --- /dev/null +++ b/site/src/jsMain/kotlin/domains/zenmo/widgets/MoreInfoLinkStyle.kt @@ -0,0 +1,40 @@ +package energy.lux.frontend.domains.zenmo.widgets + +import com.varabyte.kobweb.compose.css.Transition +import com.varabyte.kobweb.compose.css.TransitionProperty +import com.varabyte.kobweb.compose.ui.Modifier +import com.varabyte.kobweb.compose.ui.modifiers.alignItems +import com.varabyte.kobweb.compose.ui.modifiers.color +import com.varabyte.kobweb.compose.ui.modifiers.display +import com.varabyte.kobweb.compose.ui.modifiers.gap +import com.varabyte.kobweb.compose.ui.modifiers.transform +import com.varabyte.kobweb.compose.ui.modifiers.transition +import com.varabyte.kobweb.silk.style.CssStyle +import energy.lux.frontend.theme.SitePalette +import org.jetbrains.compose.web.css.AlignItems +import org.jetbrains.compose.web.css.DisplayStyle +import org.jetbrains.compose.web.css.cssRem +import org.jetbrains.compose.web.css.ms +import org.jetbrains.compose.web.css.px + +val MoreInfoLinkStyle = CssStyle { + base { + Modifier + .display(DisplayStyle.Flex) + .alignItems(AlignItems.Center) + .color(SitePalette.light.primary) + .gap(0.25.cssRem) + } + + cssRule(" .material-icons") { + Modifier + .transition( + Transition.of(TransitionProperty.All, 200.ms), + ) + } + + cssRule(":hover .material-icons") { + Modifier + .transform { translateX(3.px) } + } +} \ No newline at end of file