Refactor screens into separate file

t4c/app.R

   div(class = "bottom-help-middle", span("Swipe Card", class = "bottom-help-middle-text"))
 )
 
+source(here::here("t4c/screens.R"), local = TRUE)
+
 ui <- fixedPage(
   includeCSS("devices.min.css"),
   includeCSS("t4c.css"),
   tags$link(rel = "stylesheet", type = "text/css", href = "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i"),
   tags$link(rel = "stylesheet", type = "text/css", href = "https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Coming+Soon"),
 
-  # h1("A Good Name and Logo"),
-  # p("This is a simple demo app..."),
-  # hr(),
   p(),
   phone_container(
-    div(
-      class = "overlay bg-moffitt-grey splash animated", id = "splash-overlay",
-      div(
-        class = "splash-body",
-        h1("Welcome!"),
-        p("Talking about cancer treatment options is hard, but we're here to help."),
-        actionButton("splash_next_screen", "Get Started", class = "btn-bottom-right btn-primary")
-      )
-    ),
-    div(
-      id = "app-intro",
-      class = "app-main bg-white animated slideOutRight",
-      h1(APP_TITLE, class = "app-title text-white bg-moffitt-blue"),
-      p(class = "help-text text-moffitt-grey",
-        "Guidance about how to approach the questions goes here."),
-      div(
-        id = "test-card-swipe-container",
-        style = "width: 100%; max-height: 275px; position: relative; height: 100%;",
-        shinyswiprUI(
-          "test_card_swipe_ui",
-          div(class = "swiperCard-header",
-              h4(class = "card-title text-white bg-moffitt-light-blue",
-                 "Try It Now"
-              )
-          ),
-          div(class = "swiperCard-body",
-              h4("An Example Question"),
-              p("Something to think about. Swipe", strong("left"), "if you feel X.",
-                "Swipe", strong("right"), "if you feel Y.")
-          )
-        ),
-        swipe_help_row_div
-      ),
-      shinyjs::hidden(div(
-        id = "test_swipe_success",
-        style = "font-size: 1.5em; text-align: center; width: 100%; padding: 50px",
-        p(icon("thumbs-o-up", class = "fa-3x text-moffitt-green"),
-          br(),
-          actionLink("app_intro_next", "Great, let's get started!")
-        )
-      ))
-    ),
-    div(
-        id = "app-main",
-        class = "app-main animated",
-        h1(APP_TITLE, class = "app-title text-white bg-moffitt-blue"),
-        p(HELP_TEXT, class = "help-text text-moffitt-grey"),
-        shinyswiprUI(
-            "card_swipe_ui",
-            div(class = "swiperCard-header",
-                h4(class = "card-title text-white bg-moffitt-light-blue",
-                   textOutput("question_category")
-                )
-            ),
-            div(class = "swiperCard-body",
-                h4(textOutput("question_topic")),
-                p(textOutput("question_text")),
-                uiOutput("question_story_link")
-            )
-        ),
-        swipe_help_row_div
-    ),
-    div(
-      id = "app-story",
-      class = "app-story animated fadeOutUp",
-      div(class = "close-button", actionLink("app_main_hide_story", NULL, icon("times", class = "fa-lg"))),
-      htmlOutput("question_story")
-    ),
-    div(
-      id = "app-results",
-      class = "app-main app-results bg-white animated slideOutRight",
-      h1(APP_TITLE, class = "app-title text-white bg-moffitt-blue"),
-      div(class = "app-results-body",
-          h2("Results", class = "help-text text-moffitt-grey"),
-          plotOutput("results_plot", height = "250px")
-      )
-    )
+    screens[["splash-overlay"]],
+    screens[["app-intro"]],
+    screens[["app-main"]],
+    screens[["app-story"]],
+    screens[["app-results"]]
   ),
   hr(),
   actionButton("toggle_splash", "Toggle Splash"),

t4c/screens.R

+screens <- list()
+screens[["splash-overlay"]] <- div(
+  class = "overlay bg-moffitt-grey splash animated", id = "splash-overlay",
+  div(
+    class = "splash-body",
+    h1("Welcome!"),
+    p("Talking about cancer treatment options is hard, but we're here to help."),
+    actionButton("splash_next_screen", "Get Started", class = "btn-bottom-right btn-primary")
+  )
+)
+screens[["app-intro"]] <- div(
+  id = "app-intro",
+  class = "app-main bg-white animated slideOutRight",
+  h1(APP_TITLE, class = "app-title text-white bg-moffitt-blue"),
+  p(class = "help-text text-moffitt-grey",
+    "Guidance about how to approach the questions goes here."),
+  div(
+    id = "test-card-swipe-container",
+    style = "width: 100%; max-height: 275px; position: relative; height: 100%;",
+    shinyswiprUI(
+      "test_card_swipe_ui",
+      div(class = "swiperCard-header",
+          h4(class = "card-title text-white bg-moffitt-light-blue",
+             "Try It Now"
+          )
+      ),
+      div(class = "swiperCard-body",
+          h4("An Example Question"),
+          p("Something to think about. Swipe", strong("left"), "if you feel X.",
+            "Swipe", strong("right"), "if you feel Y.")
+      )
+    ),
+    swipe_help_row_div
+  ),
+  shinyjs::hidden(div(
+    id = "test_swipe_success",
+    style = "font-size: 1.5em; text-align: center; width: 100%; padding: 50px",
+    p(icon("thumbs-o-up", class = "fa-3x text-moffitt-green"),
+      br(),
+      actionLink("app_intro_next", "Great, let's get started!")
+    )
+  ))
+)
+screens[["app-main"]] <- div(
+  id = "app-main",
+  class = "app-main animated",
+  h1(APP_TITLE, class = "app-title text-white bg-moffitt-blue"),
+  p(HELP_TEXT, class = "help-text text-moffitt-grey"),
+  shinyswiprUI(
+    "card_swipe_ui",
+    div(class = "swiperCard-header",
+        h4(class = "card-title text-white bg-moffitt-light-blue",
+           textOutput("question_category")
+        )
+    ),
+    div(class = "swiperCard-body",
+        h4(textOutput("question_topic")),
+        p(textOutput("question_text")),
+        uiOutput("question_story_link")
+    )
+  ),
+  swipe_help_row_div
+)
+screens[["app-story"]] <- div(
+  id = "app-story",
+  class = "app-story animated fadeOutUp",
+  div(class = "close-button", actionLink("app_main_hide_story", NULL, icon("times", class = "fa-lg"))),
+  htmlOutput("question_story")
+)
+screens[["app-results"]] <- div(
+  id = "app-results",
+  class = "app-main app-results bg-white animated slideOutRight",
+  h1(APP_TITLE, class = "app-title text-white bg-moffitt-blue"),
+  div(class = "app-results-body",
+      h2("Results", class = "help-text text-moffitt-grey"),
+      plotOutput("results_plot", height = "250px")
+  )
+)