üpdate slope plots styling

pharmaverse · Feb 5, 2025 · e760ab5 · e760ab5
1 parent 3d7058e
commit e760ab5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/inst/shiny/modules/slope_selector.R b/inst/shiny/modules/slope_selector.R
@@ -71,7 +71,7 @@ slope_selector_ui <- function(id) {
         selectInput(
           ns("plots_per_page"),
           "Plots per page:",
-          choices = c(1, 2, 4, 6, 8, 10),
+          choices = c(1, 2, 4, 8, 16),
           selected = 1
         )
       ),
@@ -89,8 +89,9 @@ slope_selector_ui <- function(id) {
     br(),
     # Plots display #
     uiOutput(ns("slope_plots_ui"), class = "slope-plots-container"),
+    br(),
     fluidRow(
-      class = "plot-widgets-container",
+      class = "plot-widgets-container-2",
       div(
         class = "plot-widget-group",
         actionButton(
@@ -131,6 +132,7 @@ slope_selector_server <- function(
   moduleServer(id, function(input, output, session) {
     log_trace("{id}: Attaching server")
 
+    ns <- session$ns
     #Get grouping columns for plots and tables
     slopes_groups <- reactive({
       req(mydata())
@@ -252,8 +254,8 @@ slope_selector_server <- function(
       )
 
       # disable buttons if necessary #
-      shinyjs::toggleState(id = "previous_page", condition = current_page() > 1)
-      shinyjs::toggleState(id = "next_page", condition = current_page() < num_pages)
+      shinyjs::toggleState(id = ns("previous_page"), condition = current_page() == 1)
+      shinyjs::toggleState(id = ns("next_page"), condition = current_page() == num_pages)
     })
 
     #' Rendering slope plots based on nca data.

diff --git a/inst/shiny/www/slope_selector.css b/inst/shiny/www/slope_selector.css
@@ -50,6 +50,19 @@
     max-width: 100vw;
   }
 
+  .plot-widgets-container-2 {
+    position: fixed; 
+    bottom: 0;
+    width: 80%;
+    background: white;
+    padding: 10px;
+    z-index: 1000;
+    border-top: 1px solid #ccc;
+    display: flex;
+    justify-content: space-around;
+    align-items: center; 
+}
+
   /* Style each group of widgets */
   .plot-widget-group {
     display: flex;
@@ -66,11 +79,14 @@
 
   .slope-plots-container {
     margin-top: 2em;
-    height: calc(80vh - 220px);
+    height: calc(100vh - 220px);
   }
 
   .slope-plots-container.multiple {
+    margin-top: 2em;
     display: grid;
-    grid-template-columns: 50% 50%;
+    grid-template-columns: repeat(auto-fit, minmax(33em, 1fr));
+    height: calc(100vh - 220px);
+    gap: 1rem;
   }
 }