narrow screens now have buttons vertically aligned

surveydown-dev · Sep 25, 2024 · ef351ca · ef351ca
1 parent 73e2439
commit ef351ca
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/R/ui.R b/R/ui.R
@@ -227,7 +227,8 @@ sd_question <- function(
             label      = markdown_to_html(label),
             choices    = list_name_md_to_html(option),
             direction  = direction,
-            selected   = character(0)
+            selected   = character(0),
+            class      = "narrow-screen-vertical"
         )
 
         output <- shiny::tagAppendChild(output, shiny::tags$script(shiny::HTML(sprintf("
@@ -244,7 +245,8 @@ sd_question <- function(
             choices    = list_name_md_to_html(option),
             direction  = direction,
             individual = individual,
-            justified = FALSE
+            justified  = FALSE,
+            class      = "narrow-screen-vertical"
         )
 
         output <- shiny::tagAppendChild(output, shiny::tags$script(shiny::HTML(sprintf("

diff --git a/inst/css/surveydown.css b/inst/css/surveydown.css
@@ -102,6 +102,13 @@ p, .form-group, .control-label {
   z-index: 2;
 }
 
+@media screen and (max-width: 767px) {
+  .radio-group-buttons .btn-group-container-sw,
+  .checkbox-group-buttons .btn-group-container-sw {
+    flex-direction: column;
+  }
+}
+
 /* Date range styling*/
 .shiny-date-range-input .input-group-addon {
   background: none;