added shinybrowser package to get user screen width to adjust font si…

…ze. made sidebar width smaller. fixed weird action button formatting.
noaa-nwfsc · Jan 2, 2025 · aa5f8e4 · aa5f8e4
1 parent 4604489
commit aa5f8e4
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 80 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -73,6 +73,7 @@ Imports:
     servr,
     sf (>= 1.0-0),
     shiny (>= 1.7.4),
+    shinybrowser,
     shinycssloaders,
     shinyjs,
     shinyWidgets,

diff --git a/inst/ShinyFiles/MainApp/fleetUI.R b/inst/ShinyFiles/MainApp/fleetUI.R
@@ -6,10 +6,10 @@ saveFleetUI <- function(id) {
 
   tagList(
     downloadLink(ns('downloadplotHIDE'), label = ''),
-    actionButton(ns('downloadplot'), label = 'Save plot to folder',
+    actionButton(ns('downloadplot'), label = HTML('Save plot to<br> folder'),
                  class = "btn-primary"),
     downloadLink(ns('downloadTableHIDE'), label = ''),
-    actionButton(ns('downloadTable'), label = 'Save table to folder as csv',
+    actionButton(ns('downloadTable'), label = HTML("Save table to folder<br> as csv"),
                  class = "btn-primary")
   )
 }
@@ -19,19 +19,21 @@ plotSaveUI <- function(id) {
 
   tagList(
     downloadLink(ns('downloadPlotHIDE'), label = ''),
-    actionButton(ns('save_plot'), label = 'Save plot to folder',
+    actionButton(ns('save_plot'), label = HTML('Save plot to<br> folder'),
                  class = "btn-primary",
-                 width = "49%"))
+                width = "49%"
+               ))
 }
 
 tableSaveUI <- function(id) {
   ns <- NS(id)
 
   tagList(
     downloadLink(ns('downloadTableHIDE'), label = ''),
-    actionButton(ns('save_table'), label = 'Save table to folder as csv',
+    actionButton(ns('save_table'), label = HTML("Save table to <br>folder as csv"),
                  class = "btn-primary",
-                 width = "50%")
+                 width = "49%"
+               )
   )
 }
 

diff --git a/inst/ShinyFiles/MainApp/fleet_helpers.R b/inst/ShinyFiles/MainApp/fleet_helpers.R
@@ -1,3 +1,12 @@
+### themes for different screen size -- only adjusting the font_scale
+small_theme <- bslib::bs_theme(primary = "#41729F", secondary = "#AACDE5", 
+                               info = "#274472",
+                               font_scale = 0.9,
+                               preset = "cerulean")
+big_theme <- bslib::bs_theme(primary = "#41729F", secondary = "#AACDE5", 
+                             info = "#274472",
+                             font_scale = 1.1,
+                             preset = "cerulean")
 
 date_select <- function(dat) {
 

diff --git a/inst/ShinyFiles/MainApp/map_viewer_app.R b/inst/ShinyFiles/MainApp/map_viewer_app.R
@@ -18,7 +18,7 @@ map_viewer_serv <- function(id, dat, spatdat, project) {
 
     output$var_select <- renderUI({
       bslib::page_sidebar(
-        sidebar = bslib::sidebar( width = 550,
+        sidebar = bslib::sidebar( width = 350,
 
           selectInput(ns("avd"), "Area ID variable (primary data)",
                       choices = colnames(dat$dataset), selected = "ZoneID"),

diff --git a/inst/ShinyFiles/MainApp/server.R b/inst/ShinyFiles/MainApp/server.R
@@ -9,6 +9,8 @@ source("zone_closure_Server.R", local = TRUE)
 source("run_policy_UI.R", local = TRUE)
 source("run_policy_server.R", local = TRUE)
 
+
+
 # default global search value
 if(!exists("default_search")) {default_search <- ""}
 
@@ -22,6 +24,14 @@ fs_exist <- exists("folderpath", where = ".GlobalEnv")
 server = function(input, output, session) {
   options(shiny.maxRequestSize = 8000*1024^2)
 
+  observe(session$setCurrentTheme(
+    if (isTRUE(shinybrowser::get_width() > 1500)) big_theme else small_theme
+  ))
+
+ #  observe({
+ # as.numeric(str(shinybrowser::get_width()))
+ #  })
+  # 
   #Disable buttons
   toggle_inputs <- function(input_list, enable_inputs = TRUE){
     # Toggle elements
@@ -1100,7 +1110,8 @@ server = function(input, output, session) {
 
   output$load_manage_proj_ui <- renderUI({
       actionButton('load_manage_proj', 'Manage Projects', class = "btn-secondary", 
-                   style = "padding-left:20px; padding-right: 20px;")
+                   #style = "padding-left:20px; padding-right: 20px;"
+                   )
   })
 
   # Manage Projects
@@ -5857,9 +5868,9 @@ server = function(input, output, session) {
           tags$br(),
 
           actionButton("mod_add", "Save model and add new model", 
-                       style="color: #fff; background-color: #337ab7; border-color: #800000;"),
+                       class = "btn-primary"),
 
-          tags$br(), tags$br(),
+          tags$br(), 
 
           uiOutput('mod_run_bttn')
         )
@@ -5923,7 +5934,7 @@ server = function(input, output, session) {
           uiOutput('mod_run_custom_ui'),
 
           actionButton("mod_submit", "Run model(s)",
-                       style = "color: #fff; background-color: #6EC479; border-color:#000000;")
+                       class = "btn-primary")
         )
       }
     })