responsive and refactor styles

m3dev · Jun 20, 2024 · e58a36a · e58a36a
1 parent 4e91b70
commit e58a36a
Show file tree

Hide file tree

Showing 16 changed files with 362 additions and 247 deletions.
diff --git a/torisetsu/src/jsMain/kotlin/App.kt b/torisetsu/src/jsMain/kotlin/App.kt
@@ -0,0 +1,40 @@
+import androidx.compose.runtime.*
+import components.pages.QuizPage
+import components.pages.ResultPage
+import components.pages.TopPage
+import core.ComposeQuiz
+import core.ComposeResult
+import core.Quiz
+import core.Result
+
+@Composable
+fun App() {
+    var resultId by remember { mutableStateOf(0) }
+    var currentPage by remember { mutableStateOf(Page.RESULT) }
+    val quiz: Quiz by remember { mutableStateOf(ComposeQuiz()) }
+    val result: Result by remember { mutableStateOf(ComposeResult()) }
+
+
+    when (currentPage) {
+        Page.TOP -> TopPage(
+            onClickStart = { currentPage = Page.QUIZ }
+        )
+
+        Page.QUIZ -> QuizPage(
+            quiz = quiz,
+            onClickFinish = { nextId: Int ->
+                resultId = nextId
+                currentPage = Page.RESULT
+            }
+        )
+
+        Page.RESULT -> ResultPage(
+            diagnosis = result.getDiagnosis(resultId),
+            onClickBack = {
+                quiz.reset()
+                resultId = 0
+                currentPage = Page.TOP
+            }
+        )
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/Main.kt b/torisetsu/src/jsMain/kotlin/Main.kt
@@ -1,15 +1,6 @@
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import components.pages.QuizPage
-import components.pages.ResultPage
-import components.pages.TopPage
-import core.ComposeQuiz
-import core.ComposeResult
-import core.Quiz
-import core.Result
+import org.jetbrains.compose.web.css.Style
 import org.jetbrains.compose.web.renderComposable
+import style.GlobalStyle
 
 enum class Page {
     TOP,
@@ -19,33 +10,7 @@ enum class Page {
 
 fun main() {
     renderComposable(rootElementId = "root") {
-        var resultId by remember { mutableStateOf(0) }
-        var currentPage by remember { mutableStateOf(Page.TOP) }
-        val quiz: Quiz by remember { mutableStateOf(ComposeQuiz()) }
-        val result: Result by remember { mutableStateOf(ComposeResult()) }
-
-        when (currentPage) {
-            Page.TOP -> TopPage(
-                onClickStart = { currentPage = Page.QUIZ }
-            )
-
-            Page.QUIZ -> QuizPage(
-                quiz = quiz,
-                onClickFinish = { nextId: Int ->
-                    resultId = nextId
-                    currentPage = Page.RESULT
-                }
-            )
-
-            Page.RESULT -> ResultPage(
-                diagnosis = result.getDiagnosis(resultId),
-                onClickBack = {
-                    quiz.reset()
-                    resultId = 0
-                    currentPage = Page.TOP
-                }
-            )
-        }
-
+        Style(GlobalStyle)
+        App()
     }
 }
diff --git a/torisetsu/src/jsMain/kotlin/components/base/Button.kt b/torisetsu/src/jsMain/kotlin/components/base/Button.kt
@@ -1,7 +1,6 @@
 package components.base
 
 import androidx.compose.runtime.Composable
-import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Button
 
 enum class ButtonSize {
@@ -17,29 +16,9 @@ fun Button(
 ) {
     Button(
         attrs = {
-            style {
-                when (size) {
-                    ButtonSize.NORMAL -> {
-                        padding(16.px, 36.px)
-                        borderRadius(16.px)
-                        fontSize(32.px)
-                    }
-
-                    ButtonSize.LARGE -> {
-                        padding(40.px, 100.px)
-                        borderRadius(40.px)
-                        fontSize(60.px)
-                    }
-                }
-                backgroundImage("linear-gradient(#5772FF, #0054DD)")
-                color(Color.white)
-                fontWeight(700)
-                property(
-                    "box-shadow",
-                    "0px 5.13px 5.13px 0px #F9F7F340 inset, 0px -5.13px 5.13px 0px #00000040 inset"
-                )
-            }
+            classes(ButtonStyle.rootElm)
             onClick { onClick() }
+            attr("data-size", size.name.lowercase())
         }
     ) {
         content()

diff --git a/torisetsu/src/jsMain/kotlin/components/base/ButtonStyle.kt b/torisetsu/src/jsMain/kotlin/components/base/ButtonStyle.kt
@@ -0,0 +1,47 @@
+package components.base
+
+import org.jetbrains.compose.web.css.*
+import style.GlobalStyle
+import style.data
+import style.forMobile
+
+object ButtonStyle : StyleSheet(GlobalStyle) {
+    val rootElm by style {
+        data("size", "normal") {
+            padding(16.px, 36.px)
+            borderRadius(16.px)
+            fontSize(32.px)
+        }
+
+
+        data("size", "large") {
+            padding(40.px, 100.px)
+            borderRadius(40.px)
+            fontSize(60.px)
+        }
+
+        forMobile {
+            data("size", "normal") {
+                padding(16.px, 36.px)
+                borderRadius(12.px)
+                fontSize(24.px)
+            }
+
+            data("size", "large") {
+                padding(20.px, 50.px)
+                borderRadius(20.px)
+                fontSize(32.px)
+            }
+        }
+
+
+
+        backgroundImage("linear-gradient(#5772FF, #0054DD)")
+        color(Color.white)
+        fontWeight(700)
+        property(
+            "box-shadow",
+            "0px 5.13px 5.13px 0px #F9F7F340 inset, 0px -5.13px 5.13px 0px #00000040 inset"
+        )
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/base/Card.kt b/torisetsu/src/jsMain/kotlin/components/base/Card.kt
@@ -1,24 +1,13 @@
 package components.base
 
 import androidx.compose.runtime.Composable
-import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 
 @Composable
 fun Card(
     content: @Composable() () -> Unit
 ) {
-    Div(
-        attrs = {
-            style {
-                padding(32.px)
-                backgroundColor(rgb(255, 255, 255))
-                borderRadius(16.px)
-                property("box-shadow", "0px 4px 4px rgba(0, 0, 0, 0.25), 0px 8px 6px rgba(0, 0, 0, 0.10)")
-
-            }
-        }
-    ) {
+    Div(attrs = { classes(CardStyle.rootElm) }) {
         content()
     }
 }
diff --git a/torisetsu/src/jsMain/kotlin/components/base/CardStyle.kt b/torisetsu/src/jsMain/kotlin/components/base/CardStyle.kt
@@ -0,0 +1,18 @@
+package components.base
+
+import org.jetbrains.compose.web.css.*
+import style.GlobalStyle
+import style.forMobile
+
+object CardStyle : StyleSheet(GlobalStyle) {
+    val rootElm by style {
+        padding(32.px)
+        backgroundColor(rgb(255, 255, 255))
+        borderRadius(16.px)
+        property("box-shadow", "0px 4px 4px rgba(0, 0, 0, 0.25), 0px 8px 6px rgba(0, 0, 0, 0.10)")
+
+        forMobile {
+            padding(24.px)
+        }
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/base/PageLayout.kt b/torisetsu/src/jsMain/kotlin/components/base/PageLayout.kt
@@ -1,69 +1,36 @@
 package components.base
 
 import androidx.compose.runtime.Composable
-import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Img
+import org.jetbrains.compose.web.dom.Main
 
 @Composable
 fun PageLayout(
     content: @Composable() () -> Unit
 ) {
     return Div(
-        attrs = {
-            style {
-                padding(32.px, 12.px)
-                display(DisplayStyle.Flex)
-                flexDirection(FlexDirection.Column)
-                alignItems(AlignItems.Center)
-            }
-        }
+        attrs = { classes(PageLayoutStyle.rootElm) }
     ) {
         Div(
-            attrs = {
-                style {
-                    width(649.px)
-                    maxWidth(100.percent)
-                    display(DisplayStyle.Flex)
-                    alignItems(AlignItems.Center)
-                    flexDirection(FlexDirection.Column)
-                }
-            }
+            attrs = { classes(PageLayoutStyle.wrapper) }
         ) {
             Div(
-                attrs = {
-                    style {
-                        display(DisplayStyle.Flex)
-                        flexDirection(FlexDirection.Row)
-                        gap(60.px)
-                    }
-                }
+                attrs = { classes(PageLayoutStyle.header) }
             ) {
                 Img(
                     src = "./images/service_logo.svg",
                     alt = "エンジニア トリ診断",
-                    attrs = {
-                        style {
-                            width(150.px)
-                        }
-                    }
+                    attrs = { classes(PageLayoutStyle.titleLogo) }
                 )
                 Img(
                     src = "./images/m3_logo_en.svg",
                     alt = "M3 Inc.",
-                    attrs = {
-                        style {
-                            width(160.px)
-                        }
-                    })
+                    attrs = { classes(PageLayoutStyle.m3Logo) }
+                )
             }
-            Div(
-                attrs = {
-                    style {
-                        marginTop(40.px)
-                        width(100.percent)
-                    }
-                }
+            Main(
+                attrs = { classes(PageLayoutStyle.main) }
             ) {
                 content()
             }

diff --git a/torisetsu/src/jsMain/kotlin/components/base/PageLayoutStyle.kt b/torisetsu/src/jsMain/kotlin/components/base/PageLayoutStyle.kt
@@ -0,0 +1,35 @@
+package components.base
+
+import org.jetbrains.compose.web.css.*
+import style.GlobalStyle
+
+object PageLayoutStyle : StyleSheet(GlobalStyle) {
+    val rootElm by style {
+        padding(32.px, 24.px)
+        display(DisplayStyle.Flex)
+        flexDirection(FlexDirection.Column)
+        alignItems(AlignItems.Center)
+    }
+    val wrapper by style {
+        width(649.px)
+        maxWidth(100.percent)
+        display(DisplayStyle.Flex)
+        alignItems(AlignItems.Center)
+        flexDirection(FlexDirection.Column)
+    }
+    val header by style {
+        display(DisplayStyle.Flex)
+        flexDirection(FlexDirection.Row)
+        gap(60.px)
+    }
+    val titleLogo by style {
+        width(150.px)
+    }
+    val m3Logo by style {
+        width(160.px)
+    }
+    val main by style {
+        marginTop(40.px)
+        width(100.percent)
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/base/XShareButton.kt b/torisetsu/src/jsMain/kotlin/components/base/XShareButton.kt
@@ -3,7 +3,6 @@ package components.base
 import androidx.compose.runtime.Composable
 import org.jetbrains.compose.web.attributes.ATarget
 import org.jetbrains.compose.web.attributes.target
-import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.A
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Img
@@ -15,38 +14,15 @@ fun XShareButton() {
         href = "https://twitter.com/intent/tweet?text=私のトリタイプはハシビロコウです！&url=https://example.com&hashtags=トリタイプ診断",
         attrs = {
             target(ATarget.Blank)
-            style {
-                backgroundColor(rgb(0, 0, 0))
-                color(Color.white)
-                padding(20.px, 32.px)
-                borderRadius(999.px)
-                textDecoration("none")
-                width(160.px)
-                display(DisplayStyle.Flex)
-                alignItems(AlignItems.Center)
-                gap(10.px)
-                justifyContent(JustifyContent.Center)
-            }
+            classes(XShareButtonStyle.rootElm)
         }
-
     ) {
         Img(
             src = "/icons/x_icon.svg",
-            attrs = {
-                style {
-                    width(20.px)
-                    flexShrink(0)
-                    property("aspect-ratio", "1")
-                }
-            }
-
+            attrs = { classes(XShareButtonStyle.icon) }
         )
         Div(
-            attrs = {
-                style {
-                    flexShrink(0)
-                }
-            }
+            attrs = { classes(XShareButtonStyle.text) }
         ) {
             Text("Xでシェア")
         }