improve layout

RinteRface · Nov 13, 2023 · d9e6f98 · d9e6f98
1 parent c2bd877
commit d9e6f98
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 59 deletions.
diff --git a/inst/nextui-2.0.0/nextui.js b/inst/nextui-2.0.0/nextui.js
diff --git a/inst/showcase/app.R b/inst/showcase/app.R
@@ -18,6 +18,7 @@ ui <- nextui_page(
   card(
     shadow = "sm",
     card_header(
+      className = "flex gap-4 justify-evenly",
       mod_poke_info_ui("poke_info_1")
     ),
     divider(),
@@ -26,9 +27,8 @@ ui <- nextui_page(
       mod_poke_stats_ui("poke_stats_1"),
       p(class = "font-extrabold text-2xl uppercase", "Moves"),
       accordion(
-        "accordion",
+        "moves_accordion",
         variant = "bordered",
-        selectionMode = "multiple",
         isCompact = TRUE,
         value = JS("['1']"),
         accordion_item(

diff --git a/inst/showcase/modules/mod_poke_evolve.R b/inst/showcase/modules/mod_poke_evolve.R
@@ -18,7 +18,7 @@ mod_poke_evolve_server <- function(id, selected, is_shiny) {
         # Check that the evolution belongs to the first 151 pkmns ...
         if (evol$id <= 151) {
           tags$div(
-            tags$p("Evolves From"),
+            tags$p("Evolves from:"),
             avatar(
               size = "xs",
               src = if (is_shiny()) {

diff --git a/inst/showcase/modules/mod_poke_info.R b/inst/showcase/modules/mod_poke_info.R
@@ -1,6 +1,10 @@
 mod_poke_info_ui <- function(id) {
   ns <- NS(id)
-  uiOutput(ns("poke_infos"))
+  tagList(
+    uiOutput(ns("poke_infos")),
+    uiOutput(ns("poke_face")),
+    uiOutput(ns("poke_descr"))
+  )
 }
 
 mod_poke_info_server <- function(id, selected, is_shiny) {
@@ -9,43 +13,53 @@ mod_poke_info_server <- function(id, selected, is_shiny) {
 
     mod_poke_evolve_server("poke_evolve_1", selected, is_shiny)
 
-    # generate the profile cards (as many as the number of selected pokemons)
     output$poke_infos <- renderUI({
       req(!is.null(selected()))
 
+      pokemon <- selected()
+      div(
+        class = "flex flex-col gap-2 justify-center basis-1/3",
+        chip(startContent = icon("paw"), sprintf("Shape: %s", pokemon$shape)),
+        chip(startContent = icon("house"), sprintf("Habitat: %s", pokemon$habitat))
+      )
+    })
+
+    output$poke_face <- renderUI({
+      req(!is.null(selected()))
+
       pokemon <- selected()
 
       div(
-        class = "flex flex-row gap-4 justify-evenly",
-        div(
-          class = "flex flex-col gap-2 justify-center basis-1/3",
-          chip(startContent = icon("paw"), sprintf("Shape: %s", pokemon$shape)),
-          chip(startContent = icon("house"), sprintf("Habitat: %s", pokemon$habitat))
-        ),
-        div(
-          class = "flex flex-col basis-1/3",
-          mod_poke_evolve_ui(ns("poke_evolve_1")),
-          avatar(
-            isBordered = TRUE,
-            src = if (!is_shiny()) {
-              pokemon$sprites$front_default
-            } else {
-              pokemon$sprites$front_shiny
-            },
-            className = "w-40 h-40 text-large",
-            size = "lg"
-          )
-        ),
-        div(
-          class = "flex flex-col gap-2  justify-center basis-1/3",
-          snippet(
-            variant = "bordered",
-            symbol = "",
-            lapply(strsplit(pokemon$description, "\n")[[1]], span),
-            hideCopyButton = TRUE
-          )
+        class = "flex flex-col gap-2 basis-2/3",
+        mod_poke_evolve_ui(ns("poke_evolve_1")),
+        avatar(
+          isBordered = TRUE,
+          src = if (!is_shiny()) {
+            pokemon$sprites$front_default
+          } else {
+            pokemon$sprites$front_shiny
+          },
+          className = "w-40 h-40 text-large",
+          size = "lg"
         )
       )
     })
+
+    output$poke_descr <- renderUI({
+      req(!is.null(selected()))
+
+      pokemon <- selected()
+
+      div(
+        class = "basis-1/3",
+        snippet(
+          variant = "bordered",
+          symbol = "",
+          lapply(strsplit(pokemon$description, "\n")[[1]], span),
+          hideCopyButton = TRUE
+        )
+      )
+    })
+
   })
 }
diff --git a/inst/showcase/modules/mod_poke_location.R b/inst/showcase/modules/mod_poke_location.R
@@ -10,7 +10,7 @@ mod_poke_location_server <- function(id, selected) {
     output$poke_locations <- renderUI({
       req(!is.null(selected()))
 
-      locations <- selected()$locations
+      locations <- unique(selected()$locations)
 
       if (is.null(locations)) {
         "This pokemon cannot be found in the wild."

diff --git a/inst/showcase/modules/mod_poke_stats.R b/inst/showcase/modules/mod_poke_stats.R
@@ -85,9 +85,9 @@ process_pokemon_stats <- function(stats) {
 mod_poke_stats_ui <- function(id) {
   ns <- NS(id)
   div(
-    class = "flex flex-row gap-4 justify-center",
+    class = "flex gap-4 justify-evenly",
     div(
-      class = "flex flex-col gap-4 basis-1/3",
+      class = "flex flex-col gap-4 basis-1/2",
       p(class = "font-extrabold text-2xl uppercase my-2", "General"),
       uiOutput(ns("basic_stats")),
       p(class = "font-extrabold text-2xl uppercase my-2", icon("location-dot"), " Location"),
@@ -96,9 +96,9 @@ mod_poke_stats_ui <- function(id) {
       mod_poke_type_ui(ns("poke_type_1"))
     ),
     div(
-      class = "flex flex-col gap-4 basis-2/3",
+      class = "flex flex-col gap-4 basis-1/2",
       div(
-        class = "flex flex-row gap-4",
+        class = "flex gap-4",
         p(
           class = "font-extrabold text-2xl uppercase",
           badge(
@@ -138,12 +138,13 @@ mod_poke_stats_server <- function(id, selected) {
         lapply(other_stats_names(), function(stat) {
           listbox_item(
             key = stat,
-            startContent = switch(stat,
-                                  "height" = icon("up-down"),
-                                  "weight" = icon("weight-scale"),
-                                  "base_happiness" = icon("face-smile"),
-                                  "capture_rate" = icon("house"),
-                                  "growth_rate" = icon("up-long")
+            startContent = switch(
+              stat,
+              "height" = icon("up-down"),
+              "weight" = icon("weight-scale"),
+              "base_happiness" = icon("face-smile"),
+              "capture_rate" = icon("bowling-ball"),
+              "growth_rate" = icon("up-long")
             ),
             stat,
             endContent = selected()$other_stats[[stat]]

diff --git a/inst/showcase/modules/mod_poke_type.R b/inst/showcase/modules/mod_poke_type.R
@@ -48,7 +48,7 @@ mod_poke_type_server <- function(id, selected) {
 
       types <- selected()$types
 
-      lapply(seq_along(types), FUN = function(i) {
+      items <- lapply(seq_along(types), FUN = function(i) {
         type_name <- types[[i]]$name
         type_slot <- types[[i]]$slot
 
@@ -75,25 +75,39 @@ mod_poke_type_server <- function(id, selected) {
 
         poke_color <- get_type_colors(type_name)
 
-        table(
-          removeWrapper = TRUE,
-          data.frame(
-            Damages = c("2X", "1/2", "0"),
-            `Damages from` = c(
-              paste(double_damage_from, collapse = ", "),
-              paste(half_damage_from, collapse = ", "),
-              paste(no_damage_from, collapse = ", ")
-            ),
-            `Damages to` = c(
-              paste(double_damage_to, collapse = ", "),
-              paste(half_damage_to, collapse = ", "),
-              paste(no_damage_to, collapse = ", ")
+        accordion_item(
+          key = i,
+          title = type_name,
+          table(
+            removeWrapper = TRUE,
+            isStriped = TRUE,
+            data.frame(
+              Damages = c("2X", "1/2", "0"),
+              `Damages from` = c(
+                paste(double_damage_from, collapse = ", "),
+                paste(half_damage_from, collapse = ", "),
+                paste(no_damage_from, collapse = ", ")
+              ),
+              `Damages to` = c(
+                paste(double_damage_to, collapse = ", "),
+                paste(half_damage_to, collapse = ", "),
+                paste(no_damage_to, collapse = ", ")
+              )
             )
           )
         )
 
       })
 
+      accordion(
+        "type_accordion",
+        variant = "bordered",
+        selectionMode = "multiple",
+        isCompact = TRUE,
+        value = JS("['1', '2']"),
+        items
+      )
+
     })
   })
 }
diff --git a/js/src/output.css b/js/src/output.css
@@ -1352,6 +1352,10 @@ video {
   flex-basis: 0px;
 }
 
+.basis-1\/2 {
+  flex-basis: 50%;
+}
+
 .basis-1\/3 {
   flex-basis: 33.333333%;
 }