Split home screen into two pages

I split the home screen into two pages so that the contents are visible on the screens without scrolling.
CSAFE-ISU · Oct 30, 2024 · 3b9a126 · 3b9a126
1 parent 1a52503
commit 3b9a126
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/R/app.R b/R/app.R
@@ -82,12 +82,26 @@ handwriterApp <- function(...){
                                                                                                            This tool is designed to assist forensic examiners by analyzing 
                                                                                                            handwritten documents. Whether you are a forensic document examiner, legal professional, 
                                                                                                            academic, or simply curious about how statistics are applied to handwriting, 
-                                                                                                           handwriter provides an automated way to evaluate handwriting samples."),
-                                                                                             shiny::br(),
-                                                                                             shiny::tags$h2("Choose the scenario that best describes your handwriting samples")), 
-
+                                                                                                           handwriter provides an automated way to evaluate handwriting samples.")), 
+                                                                                           shiny::br(),
+                                                                                           shiny::actionButton(class = "scenario-btn", "get_started", "Get Started"),
+                                                                                           shiny::br(),
+                                                                                           shiny::br()
+                                                                                         )
+                                                                         )
+                                                                       ),
+
+                                                                       shiny::tabPanel(
+                                                                         "Scenarios",
+                                                                         # NOTE: Because the actionButtons on the home page are placed inside cards, 
+                                                                         # placing the home page inside a module becomes quite complicated.
+                                                                         shiny::tags$div(id="indent-home",
+                                                                                         shiny::fluidPage(
+                                                                                           shiny::tags$h1("SCENARIOS"),
+                                                                                           shiny::tags$h2("Choose the scenario that best describes your handwriting samples"),
+
                                                                                            bslib::layout_column_wrap(
-                                                                                             width = 1/3,
+                                                                                             width = 1/2,
                                                                                              bslib::card(class="scenario",
                                                                                                          bslib::card_header(shiny::tags$h2("SCENARIO 1"),
                                                                                                                             shiny::tags$body(shiny::tags$i("Compare a questioned document to another handwritten document."))),
@@ -171,6 +185,16 @@ handwriterApp <- function(...){
     # NOTE: Because the actionButtons on the home page are placed inside cards, 
     # placing the home page inside a module becomes quite complicated.
 
+    # Switch to Scenarios tab
+    shiny::observeEvent(input$get_started, {
+      shiny::updateNavbarPage(session, "my-navbar", selected = "Scenarios")
+    })
+
+    # Switch to Scenario 1 tab
+    shiny::observeEvent(input$open_button, {
+      shiny::updateNavbarPage(session, "my-navbar", selected = "Scenario 1")
+    })
+
     # Switch to Scenario 1 tab
     shiny::observeEvent(input$open_button, {
       shiny::updateNavbarPage(session, "my-navbar", selected = "Scenario 1")

diff --git a/inst/extdata/styles.css b/inst/extdata/styles.css
@@ -181,7 +181,10 @@
   background-color: white;
   border: 1px solid var(--dk-grey);
   padding: 14px;
-  margin: 25px;
+  margin-left: 50px;
+  margin-right: 50px;
+  margin-top: 15px;
+  margin-bottom: 15px;
   border-radius: 0.5rem;
 }