V1.1 - optimising for mobile and highlighting key text

ui.R

@@ -74,7 +74,12 @@ ui <- fluidPage(
                 tags$li(tags$a(href = "#clustering", tags$strong("Clustering to group similar seasons together")))
         ),
         tags$li(tags$a(href = "#conclusion", tags$strong("Conclusion")))
-        )
+        ),
+      div(
+        style = "display: flex; justify-content: space-between; align-items: center; margin-top: 20px;",
+        p(style = "margin: 0;", paste0(name)),
+        p(style = "margin: 0;", date)
+      )
   ),
   
   br(),
@@ -91,8 +96,7 @@ ui <- fluidPage(
       tags$h2(paste0("Motivation"), style = "font-weight: bold; text-align: center;"),
       p(style = "margin-top: 5px; white-space: normal;", HTML(motivation_one)),
       p(style = "margin-top: 5px;", paste0(motivation_two)),
-      p(style = "margin-top: 5px;", paste0(motivation_three)),
-      p(style = "margin-top: 20px;", paste0(date))
+      p(style = "margin-top: 5px;", paste0(motivation_three))
     )
   ),
   
@@ -128,36 +132,26 @@ ui <- fluidPage(
                ),
                
                tags$article(
-                 div(class="time_plot text-article", `data-width`="1",`data-index`="0",
-                     p(strong(" Spanish teams European performance "),
+                 lapply(seq_along(league_names), function(i) {
+                   div(
+                     class = "time_plot text-article",
+                     `data-width` = "1",
+                     `data-index` = i - 1,
+                     p(
+                       tags$u(
+                         paste0(
+                           " ",
+                           league_names[i],
+                           " teams European performance "
+                         )
+                       ),
                        br(),
-                       europe_s_top_6_leagues_european_performance_since_1999_2000_one)),
-                 
-                 div(class="time_plot text-article", `data-width`="1",`data-index`="1",
-                     p(strong(" English teams European performance "),
-                       br(),
-                       europe_s_top_6_leagues_european_performance_since_1999_2000_two)),
-                 
-                 div(class="time_plot text-article", `data-width`="1",`data-index`="2",
-                     p(strong(" German teams European performance "),
-                       br(),
-                       europe_s_top_6_leagues_european_performance_since_1999_2000_three)),
-                 
-                 div(class="time_plot text-article", `data-width`="1",`data-index`="3",
-                     p(strong(" Italian teams European performance "),
-                       br(),
-                       europe_s_top_6_leagues_european_performance_since_1999_2000_four)),
-                 
-                 div(class="time_plot text-article", `data-width`="1",`data-index`="4",
-                     p(strong(" French teams European performance "),
-                       br(),
-                       europe_s_top_6_leagues_european_performance_since_1999_2000_five)),
-                 
-                 div(class="time_plot text-article", `data-width`="1",`data-index`="5",
-                     p(strong(" Portuguese teams European performance "),
-                       br(),
-                       europe_s_top_6_leagues_european_performance_since_1999_2000_six))
-               ))
+                       HTML(performance_text[[i]])
+                     )
+                   )
+                 })
+               )
+               )
   ),
   
   br(),
@@ -209,36 +203,20 @@ ui <- fluidPage(
                ),
                
                tags$article(
-                 div(class="league_averages_plot text-article", `data-width`="1",`data-index`="0",
-                     p(strong(" Spanish teams European performance "),
+                 lapply(seq_along(league_names), function(i) {
+                   div(
+                     class = "league_averages_plot text-article",
+                     `data-width` = "1",
+                     `data-index` = i - 1,
+                     p(
+                       tags$u(paste0(" ", league_names[i], " league characteristics ")),
                        br(),
-                       characteristics_of_leagues_since_1999_2000_one)),
-                 
-                 div(class="league_averages_plot text-article", `data-width`="1",`data-index`="1",
-                     p(strong(" English teams European performance "),
-                       br(),
-                       characteristics_of_leagues_since_1999_2000_two)),
-                 
-                 div(class="league_averages_plot text-article", `data-width`="1",`data-index`="2",
-                     p(strong(" German teams European performance "),
-                       br(),
-                       characteristics_of_leagues_since_1999_2000_three)),
-                 
-                 div(class="league_averages_plot text-article", `data-width`="1",`data-index`="3",
-                     p(strong(" Italian teams European performance "),
-                       br(),
-                       characteristics_of_leagues_since_1999_2000_four)),
-                 
-                 div(class="league_averages_plot text-article", `data-width`="1",`data-index`="4",
-                     p(strong(" French teams European performance "),
-                       br(),
-                       characteristics_of_leagues_since_1999_2000_five)),
-                 
-                 div(class="league_averages_plot text-article", `data-width`="1",`data-index`="5",
-                     p(strong(" Portuguese teams European performance "),
-                       br(),
-                       characteristics_of_leagues_since_1999_2000_six))
-               ))
+                       HTML(characteristics[[i]])
+                     )
+                   )
+                 })
+               )
+           )
   ),
   
   br(),
@@ -246,8 +224,8 @@ ui <- fluidPage(
   
   tags$header(class="colourheader3",
               tags$div(class="paddeddiv",style="position: relative;",
-                       p(style="margin-top: 5px;",paste0(characteristics_of_leagues_extra_one)),
-                       p(style="margin-top: 5px;",paste0(characteristics_of_leagues_extra_two))
+                       p(style="margin-top: 5px;",HTML(characteristics_of_leagues_extra_one)),
+                       p(style="margin-top: 5px;",HTML(characteristics_of_leagues_extra_two))
               )
   ),
   
@@ -272,21 +250,26 @@ ui <- fluidPage(
                ),
                
                tags$article(
-                 div(class="basic_profiling_plot text-article", `data-width`="1",`data-index`="0",
-                     p(strong(" Characteristics of worst performing European seasons "),
+                 lapply(seq_along(basic_profiling_titles), function(i) {
+                   div(
+                     class = "basic_profiling_plot text-article",
+                     `data-width` = "1",
+                     `data-index` = i - 1,
+                     p(
+                       tags$u(
+                         paste0(
+                           " ",
+                           basic_profiling_titles[i],
+                           " "
+                         )
+                       ),
                        br(),
-                       characteristics_of_leagues_grouped_by_performance_one)),
-                 
-                 div(class="basic_profiling_plot text-article", `data-width`="1",`data-index`="1",
-                     p(strong(" Characteristics of best performing European seasons "),
-                       br(),
-                       characteristics_of_leagues_grouped_by_performance_two)),
-                 
-                 div(class="basic_profiling_plot text-article", `data-width`="1",`data-index`="2",
-                     p(strong(" Characteristics of middle performing European seasons "),
-                       br(),
-                       characteristics_of_leagues_grouped_by_performance_three))
-               ))
+                       HTML(basic_profiling_text[[i]])
+                     )
+                   )
+                 })
+               )
+               )
   ),
   
   br(),
@@ -354,8 +337,8 @@ ui <- fluidPage(
   tags$header(id = "regression", class="colourheader2",
               tags$div(class="paddeddiv",style="position: relative;",
                        tags$h2(paste0("Regression analysis"), style = "font-weight: bold; text-align: center;"),
-                       p(style="margin-top: 5px;",paste0(regression_analysis_one)),
-                       p(style="margin-top: 5px;",paste0(regression_analysis_two)),
+                       p(style="margin-top: 5px;",HTML(regression_analysis_one)),
+                       p(style="margin-top: 5px;",HTML(regression_analysis_two)),
                        tags$button(
                          class = "btn btn-light mt-3 detail-toggle-btn-black",
                          type = "button",
@@ -381,7 +364,7 @@ ui <- fluidPage(
   tags$header(id = "regression_current_year", class="colourheader3",
               tags$div(class="paddeddiv",style="position: relative;",
                        tags$h2(paste0("Regression analysis on league characteristics and same season's European performance"), style = "font-weight: bold; text-align: center;"),
-                       p(style = "margin-top: 5px;", paste0(on_league_characteristics_and_same_season_s_european_performance_one))
+                       p(style = "margin-top: 5px;", HTML(on_league_characteristics_and_same_season_s_european_performance_one))
               )
   ),
   
@@ -396,21 +379,26 @@ ui <- fluidPage(
                ),
                
                tags$article(
-                 div(class="regression_current_year_plot text-article", `data-width`="1",`data-index`="0",
-                     p(strong(" Using all variables (R2 = 0.069) "),
+                 lapply(seq_along(regression_current_year_titles), function(i) {
+                   div(
+                     class = "regression_current_year_plot text-article",
+                     `data-width` = "1",
+                     `data-index` = i - 1,
+                     p(
+                       tags$u(
+                         paste0(
+                           " ",
+                           regression_current_year_titles[i],
+                           " "
+                         )
+                       ),
                        br(),
-                       on_league_characteristics_and_same_season_s_european_performance_two)),
-                 
-                 div(class="regression_current_year_plot text-article", `data-width`="1",`data-index`="1",
-                     p(strong(" Using principle components (R2 = 0.049) "),
-                       br(),
-                       on_league_characteristics_and_same_season_s_european_performance_three)),
-                 
-                 div(class="regression_current_year_plot text-article", `data-width`="1",`data-index`="2",
-                     p(strong(" Using competitive indices (R2 = 0.040) "),
-                       br(),
-                       on_league_characteristics_and_same_season_s_european_performance_four))
-               ))
+                       HTML(regression_current_year_text[[i]])
+                     )
+                   )
+                 })
+               )
+               )
   ),
   
   br(),
@@ -420,7 +408,7 @@ ui <- fluidPage(
   tags$header(id = "regression_next_year", class="colourheader3",
               tags$div(class="paddeddiv",style="position: relative;",
                        tags$h2(paste0("Regression analysis on league characteristics and next season's European performance"), style = "font-weight: bold; text-align: center;"),
-                       p(style = "margin-top: 5px;", paste0(on_league_characteristics_and_next_season_s_european_performance_one))
+                       p(style = "margin-top: 5px;", HTML(on_league_characteristics_and_next_season_s_european_performance_one))
               )
   ),
   
@@ -435,21 +423,26 @@ ui <- fluidPage(
                ),
                
                tags$article(
-                 div(class="regression_next_year_plot text-article", `data-width`="1",`data-index`="0",
-                     p(strong(" Using all variables (R2 = 0.128) "),
+                 lapply(seq_along(regression_next_year_titles), function(i) {
+                   div(
+                     class = "regression_next_year_plot text-article",
+                     `data-width` = "1",
+                     `data-index` = i - 1,
+                     p(
+                       tags$u(
+                         paste0(
+                           " ",
+                           regression_next_year_titles[i],
+                           " "
+                         )
+                       ),
                        br(),
-                       on_league_characteristics_and_next_season_s_european_performance_two)),
-                 
-                 div(class="regression_next_year_plot text-article", `data-width`="1",`data-index`="1",
-                     p(strong(" Using principle components (R2 = 0.112) "),
-                       br(),
-                       on_league_characteristics_and_next_season_s_european_performance_three)),
-                 
-                 div(class="regression_next_year_plot text-article", `data-width`="1",`data-index`="2",
-                     p(strong(" Using competitive indices (R2 = 0.090) "),
-                       br(),
-                       on_league_characteristics_and_next_season_s_european_performance_four))
-               ))
+                       HTML(regression_next_year_text[[i]])
+                     )
+                   )
+                 })
+               )
+               )
   ),
   
   br(),
@@ -459,7 +452,7 @@ ui <- fluidPage(
   tags$header(id = "regression_competition", class="colourheader3",
               tags$div(class="paddeddiv",style="position: relative;",
                        tags$h2(paste0("Regression analysis on league characteristics and same season's European performance by competition"), style = "font-weight: bold; text-align: center;"),
-                       p(style = "margin-top: 5px;", paste0(on_league_characteristics_and_same_season_s_european_performance_by_co_one))
+                       p(style = "margin-top: 5px;", HTML(on_league_characteristics_and_same_season_s_european_performance_by_co_one))
               )
   ),
   
@@ -474,21 +467,26 @@ ui <- fluidPage(
                ),
                
                tags$article(
-                 div(class="regression_competition_plot text-article", `data-width`="1",`data-index`="0",
-                     p(strong(" Using all variables (R2 = 0.099) "),
+                 lapply(seq_along(regression_competition_titles), function(i) {
+                   div(
+                     class = "regression_competition_plot text-article",
+                     `data-width` = "1",
+                     `data-index` = i - 1,
+                     p(
+                       tags$u(
+                         paste0(
+                           " ",
+                           regression_competition_titles[i],
+                           " "
+                         )
+                       ),
                        br(),
-                       on_league_characteristics_and_same_season_s_european_performance_by_co_two)),
-                 
-                 div(class="regression_competition_plot text-article", `data-width`="1",`data-index`="1",
-                     p(strong(" Using principle components (R2 = 0.049) "),
-                       br(),
-                       on_league_characteristics_and_same_season_s_european_performance_by_co_three)),
-                 
-                 div(class="regression_competition_plot text-article", `data-width`="1",`data-index`="2",
-                     p(strong(" Using competitive indices (R2 = 0.042) "),
-                       br(),
-                       on_league_characteristics_and_same_season_s_european_performance_by_co_four))
-               ))
+                       HTML(regression_competition_text[[i]])
+                     )
+                   )
+                 })
+               )
+               )
   ),
   
   br(),
@@ -498,9 +496,9 @@ ui <- fluidPage(
   tags$header(id = "clustering", class="colourheader2",
               tags$div(class="paddeddiv",style="position: relative;",
                        tags$h2(paste0("Clustering to group similar seasons together"), style = "font-weight: bold; text-align: center;"),
-                       p(style = "margin-top: 5px;", paste0(clustering_to_group_similar_seasons_together_one)),
-                       p(style = "margin-top: 5px;", paste0(clustering_to_group_similar_seasons_together_two)),
-                       p(style = "margin-top: 5px;", paste0(clustering_to_group_similar_seasons_together_three))
+                       p(style = "margin-top: 5px;", HTML(clustering_to_group_similar_seasons_together_one)),
+                       p(style = "margin-top: 5px;", HTML(clustering_to_group_similar_seasons_together_two)),
+                       p(style = "margin-top: 5px;", HTML(clustering_to_group_similar_seasons_together_three))
               )
   ),
   
@@ -515,21 +513,26 @@ ui <- fluidPage(
                ),
                
                tags$article(
-                 div(class="clustering_plot text-article", `data-width`="1",`data-index`="0",
-                     p(strong(" Elite competition with wider league separation "),
+                 lapply(seq_along(clustering_titles), function(i) {
+                   div(
+                     class = "clustering_plot text-article",
+                     `data-width` = "1",
+                     `data-index` = i - 1,
+                     p(
+                       tags$u(
+                         paste0(
+                           " ",
+                           clustering_titles[i],
+                           " "
+                         )
+                       ),
                        br(),
-                       radar_plots_for_clusters_one)),
-                 
-                 div(class="clustering_plot text-article", `data-width`="1",`data-index`="1",
-                     p(strong(" Elite dominance across the league "),
-                       br(),
-                       radar_plots_for_clusters_two)),
-                 
-                 div(class="clustering_plot text-article", `data-width`="1",`data-index`="2",
-                     p(strong(" Most competitive league profile "),
-                       br(),
-                       radar_plots_for_clusters_three))
-               ))
+                       HTML(clustering_text[[i]])
+                     )
+                   )
+                 })
+               )
+               )
   ),
   
   br(),
@@ -537,7 +540,7 @@ ui <- fluidPage(
   
   tags$header(class="colourheader3",
               tags$div(class="paddeddiv",style="position: relative;",
-                       p(style = "margin-top: 5px;", paste0(radar_plots_for_clusters_overall))
+                       p(style = "margin-top: 5px;", HTML(radar_plots_for_clusters_overall))
               )
   ),
   
@@ -559,9 +562,7 @@ ui <- fluidPage(
                            overall_conclusion_two,
                            overall_conclusion_three,
                            overall_conclusion_four,
-                           overall_conclusion_five,
-                           overall_conclusion_six,
-                           overall_conclusion_seven
+                           overall_conclusion_five
                          ),
                          function(x) {
                            p(
@@ -631,19 +632,6 @@ ui <- fluidPage(
               )
   ),
   
-  br(),
-  br(),
-  
-  #### ending section ####
-  
-  tags$header(class="colourheader",
-              style="background:#010056 ; color:white;",
-              tags$div(class="paddeddiv",style="position: relative;",
-                       tags$h1(paste0(title)),
-                       tags$h3(name),
-                       tags$h3(date))
-              ),
-  
   
   #### expandable/collapsable text function ####