Update app.R

app.R

@@ -52,22 +52,36 @@
   ui <- dashboardPage(
     # -- Header
     dashboardHeader(
-    title = span(
-      style = "font-weight: 600; font-size: 16px;",
-      a(
-        href = "http://aidevlab.org", 
-        "aidevlab.org", 
-        target = "_blank",
-        style = "font-family: 'OCR A Std', monospace; color: white; text-decoration: underline;"
-      )
-     )
+      title = span(
+        style = "font-weight: 600; font-size: 18px;",
+        a(
+          href = "http://aidevlab.org", 
+          "aidevlab.org", 
+          target = "_blank",
+          style = "font-family: 'OCR A Std', monospace; color: white; text-decoration: underline;"
+        )
+      ),
+      titleWidth = 250
     ),
     
     # -- Sidebar
     dashboardSidebar(
+      width = 250,
+      tags$style(HTML("
+        @media (max-width: 768px) {
+          .sidebar-toggle { 
+            padding: 15px !important;
+          }
+          .sidebar-toggle .icon-bar {
+            width: 25px !important;
+            height: 3px !important;
+          }
+        }
+      ")),
       sidebarMenu(
         id = "tabs",
-        menuItem("Wealth Map", tabName = "mapTab", icon = icon("map")),
+        menuItem("Wealth Map", tabName = "mapTab", icon = icon("map"), 
+                 selected = TRUE),
         menuItem("Improvement Data", tabName = "improvementTab", icon = icon("table")),
         menuItem("Trends Over Time", tabName = "trendTab", icon = icon("chart-line"))
       ),
@@ -75,187 +89,337 @@
       conditionalPanel(
         condition = "input.tabs == 'mapTab'",
         br(),
-        # Replaces the old selectInput for time periods with a slider that can animate
-        sliderInput(
-          inputId   = "time_index", 
-          label     = "Select Time Period (Years):",
-          min       = 1, 
-          max       = length(time_periods), 
-          value     = 1,
-          step      = 1,
-          animate   = animationOptions(interval = 3000, loop = TRUE)
+        # Larger, more touch-friendly time period slider
+        div(
+          style = "padding: 0 15px;",
+          sliderInput(
+            inputId   = "time_index", 
+            label     = tags$span(style = "font-size: 16px;", "Select Time Period:"),
+            min       = 1, 
+            max       = length(time_periods), 
+            value     = 1,
+            step      = 1,
+            animate   = animationOptions(interval = 3000, loop = TRUE),
+            width     = "100%"
+          )
         ),
         # Show the currently selected year range clearly
-        strong("Currently Selected: "),
-        textOutput("current_year_range", inline = TRUE),
-        br(), br(),
+        div(
+          style = "padding: 0 15px; margin-bottom: 20px;",
+          strong(style = "font-size: 16px;", "Selected Period:"),
+          textOutput("current_year_range", inline = TRUE)
+        ),
         
-        selectInput("color_palette", "Select Color Palette:",
-                    choices = c("Viridis" = "viridis", 
-                                "Plasma" = "plasma", 
-                                "Magma"  = "magma",
-                                "Inferno"= "inferno",
-                                "Spectral (Brewer)" = "Spectral"),
-                    selected = "plasma"),
-        sliderInput("opacity", "Map Opacity:", min = 0.2, max = 1, value = 0.8, step = 0.1)
+        div(
+          style = "padding: 0 15px;",
+          selectInput(
+            "color_palette", 
+            tags$span(style = "font-size: 16px;", "Color Palette:"),
+            choices = c("Viridis" = "viridis", 
+                        "Plasma" = "plasma", 
+                        "Magma"  = "magma",
+                        "Inferno"= "inferno",
+                        "Spectral (Brewer)" = "Spectral"),
+            selected = "plasma",
+            width = "100%"
+          )
+        ),
+        div(
+          style = "padding: 0 15px; margin-bottom: 20px;",
+          sliderInput(
+            "opacity", 
+            tags$span(style = "font-size: 16px;", "Map Opacity:"), 
+            min = 0.2, 
+            max = 1, 
+            value = 0.8, 
+            step = 0.1,
+            width = "100%"
+          )
+        )
       ),
-    # ---- Here is the minimal "Share" button HTML + JS inlined in Shiny ----
-    # We wrap it in tags$div(...) and tags$script(HTML(...)) so it is recognized
-    # by Shiny. You can adjust the styling or placement as needed.
-    tags$div(
-      style = "text-align: left; margin: 1em 0 1em 2em;",
-      HTML('
-        <button id="share-button" 
-                style="
-                  display: inline-flex;
-                  align-items: center;
-                  justify-content: center;
-                  gap: 8px; 
-                  padding: 5px 10px;
-                  font-size: 16px;
-                  font-weight: normal;
-                  color: #000;
-                  background-color: #fff;
-                  border: 1px solid #ddd;
-                  border-radius: 6px;
-                  cursor: pointer;
-                  box-shadow: 0 1.5px 0 #000;
-                ">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
-               stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="18" cy="5" r="3"></circle>
-            <circle cx="6" cy="12" r="3"></circle>
-            <circle cx="18" cy="19" r="3"></circle>
-            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
-            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
-          </svg>
-          <strong>Share</strong>
-        </button>
-      '),
-      # Insert the JS as well
-      tags$script(
-        HTML("
-          (function() {
-            const shareBtn = document.getElementById('share-button');
-            // Reusable helper function to show a small “Copied!” message
-            function showCopyNotification() {
-              const notification = document.createElement('div');
-              notification.innerText = 'Copied to clipboard';
-              notification.style.position = 'fixed';
-              notification.style.bottom = '20px';
-              notification.style.right = '20px';
-              notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
-              notification.style.color = '#fff';
-              notification.style.padding = '8px 12px';
-              notification.style.borderRadius = '4px';
-              notification.style.zIndex = '9999';
-              document.body.appendChild(notification);
-              setTimeout(() => { notification.remove(); }, 2000);
-            }
-            shareBtn.addEventListener('click', function() {
-              const currentURL = window.location.href;
-              const pageTitle  = document.title || 'Check this out!';
-              // If browser supports Web Share API
-              if (navigator.share) {
-                navigator.share({
-                  title: pageTitle,
-                  text: '',
-                  url: currentURL
-                })
-                .catch((error) => {
-                  console.log('Sharing failed', error);
-                });
-              } else {
-                // Fallback: Copy URL
-                if (navigator.clipboard && navigator.clipboard.writeText) {
-                  navigator.clipboard.writeText(currentURL).then(() => {
-                    showCopyNotification();
-                  }, (err) => {
-                    console.error('Could not copy text: ', err);
+      # Share button with improved mobile styling
+      tags$div(
+        style = "text-align: center; margin: 20px 0;",
+        HTML('
+          <button id="share-button" 
+                  style="
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 10px; 
+                    padding: 12px 20px;
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: #000;
+                    background-color: #fff;
+                    border: 1px solid #ddd;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    box-shadow: 0 2px 0 #000;
+                    width: 80%;
+                  ">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
+                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="18" cy="5" r="3"></circle>
+              <circle cx="6" cy="12" r="3"></circle>
+              <circle cx="18" cy="19" r="3"></circle>
+              <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+              <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+            </svg>
+            <strong>Share</strong>
+          </button>
+        '),
+        # Insert the JS as well
+        tags$script(
+          HTML("
+            (function() {
+              const shareBtn = document.getElementById('share-button');
+              // Reusable helper function to show a small \"Copied!\" message
+              function showCopyNotification() {
+                const notification = document.createElement('div');
+                notification.innerText = 'Copied to clipboard';
+                notification.style.position = 'fixed';
+                notification.style.bottom = '20px';
+                notification.style.left = '50%';
+                notification.style.transform = 'translateX(-50%)';
+                notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+                notification.style.color = '#fff';
+                notification.style.padding = '10px 16px';
+                notification.style.borderRadius = '6px';
+                notification.style.zIndex = '9999';
+                notification.style.fontSize = '16px';
+                document.body.appendChild(notification);
+                setTimeout(() => { notification.remove(); }, 2000);
+              }
+              shareBtn.addEventListener('click', function() {
+                const currentURL = window.location.href;
+                const pageTitle  = document.title || 'Check this out!';
+                // If browser supports Web Share API (most mobile browsers)
+                if (navigator.share) {
+                  navigator.share({
+                    title: pageTitle,
+                    text: '',
+                    url: currentURL
+                  })
+                  .catch((error) => {
+                    console.log('Sharing failed', error);
                   });
                 } else {
-                  // Double fallback for older browsers
-                  const textArea = document.createElement('textarea');
-                  textArea.value = currentURL;
-                  document.body.appendChild(textArea);
-                  textArea.select();
-                  try {
-                    document.execCommand('copy');
-                    showCopyNotification();
-                  } catch (err) {
-                    alert('Please copy this link:\\n' + currentURL);
+                  // Fallback: Copy URL
+                  if (navigator.clipboard && navigator.clipboard.writeText) {
+                    navigator.clipboard.writeText(currentURL).then(() => {
+                      showCopyNotification();
+                    }, (err) => {
+                      console.error('Could not copy text: ', err);
+                    });
+                  } else {
+                    // Double fallback for older browsers
+                    const textArea = document.createElement('textarea');
+                    textArea.value = currentURL;
+                    document.body.appendChild(textArea);
+                    textArea.select();
+                    try {
+                      document.execCommand('copy');
+                      showCopyNotification();
+                    } catch (err) {
+                      alert('Please copy this link:\\n' + currentURL);
+                    }
+                    document.body.removeChild(textArea);
                   }
-                  document.body.removeChild(textArea);
                 }
-              }
-            });
-          })();
-        ")
+              });
+            })();
+          ")
+        )
       )
-    )
-    # ---- End: Minimal Share button snippet ----
     ),
     
     # -- Body
     dashboardBody(
       tags$head(
+        # Viewport meta tag for proper mobile scaling
+        tags$meta(name = "viewport", content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"),
         tags$link(rel = "stylesheet", href = "https://fonts.cdnfonts.com/css/ocr-a-std"),
-        # Make the "play" button whiter/brighter
+        # Additional mobile-friendly styles
         tags$style(HTML("
-        body {
-          font-family: 'OCR A Std', monospace !important;
-        }
-        .slider-animate-button {
-          background-color: #ffffff !important;
-          color: #000000 !important;
-          border: 2px solid #000000 !important;
-          border-radius: 5px !important;
-          padding: 5px 10px !important;
-          top: 10px !important;
-        }
-      "))
+          body {
+            font-family: 'OCR A Std', monospace !important;
+          }
+          
+          .slider-animate-button {
+            background-color: #ffffff !important;
+            color: #000000 !important;
+            border: 2px solid #000000 !important;
+            border-radius: 6px !important;
+            padding: 8px 15px !important;
+            font-size: 18px !important;
+            top: 5px !important;
+          }
+          
+          /* Mobile-friendly boxes and layouts */
+          @media (max-width: 768px) {
+            .box {
+              margin-bottom: 20px !important;
+              border-radius: 8px !important;
+            }
+            
+            .box-header {
+              padding: 15px !important;
+            }
+            
+            .box-title {
+              font-size: 18px !important;
+            }
+            
+            .box-body {
+              padding: 15px !important;
+            }
+            
+            .nav-tabs-custom .nav-tabs li a {
+              padding: 15px !important;
+              font-size: 16px !important;
+            }
+            
+            /* Increase button sizes for touch */
+            .btn {
+              padding: 12px 18px !important;
+              font-size: 16px !important;
+            }
+            
+            /* Larger inputs and form controls */
+            .form-control {
+              height: 45px !important;
+              font-size: 16px !important;
+            }
+            
+            /* Improve DataTable mobile view */
+            .dataTables_wrapper .dataTables_length,
+            .dataTables_wrapper .dataTables_filter,
+            .dataTables_wrapper .dataTables_info,
+            .dataTables_wrapper .dataTables_paginate {
+              text-align: center !important;
+              float: none !important;
+              margin-bottom: 10px !important;
+            }
+            
+            /* Make sure text doesn't overflow on small screens */
+            p, h1, h2, h3, h4, h5, h6 {
+              word-wrap: break-word !important;
+            }
+          }
+          
+          /* Ensure value boxes stack nicely */
+          .small-box {
+            border-radius: 8px !important;
+            margin-bottom: 20px !important;
+          }
+          
+          .small-box .icon {
+            font-size: 70px !important;
+          }
+          
+          @media (max-width: 768px) {
+            .small-box h3 {
+              font-size: 24px !important;
+            }
+            
+            .small-box p {
+              font-size: 16px !important;
+            }
+            
+            .small-box .icon {
+              display: none !important;
+            }
+          }
+          
+          /* Make leaflet controls more touch friendly */
+          .leaflet-touch .leaflet-control-layers,
+          .leaflet-touch .leaflet-bar {
+            border: 2px solid rgba(0,0,0,0.2) !important;
+          }
+          
+          .leaflet-touch .leaflet-control-zoom-in,
+          .leaflet-touch .leaflet-control-zoom-out {
+            font-size: 18px !important;
+            width: 34px !important;
+            height: 34px !important;
+            line-height: 34px !important;
+          }
+          
+          /* Ensure plots are responsive */
+          .shiny-plot-output {
+            width: 100% !important;
+            max-width: 100% !important;
+          }
+        "))
       ),
       tabItems(
         # ---------- MAP TAB ----------
         tabItem(
           tabName = "mapTab",
           fluidRow(
-            # Value Boxes across the top for key stats
-            valueBoxOutput("highest_iwi_vb", width = 4),
-            valueBoxOutput("lowest_iwi_vb", width = 4),
-            valueBoxOutput("avg_iwi_vb", width = 4)
+            column(
+              width = 12,
+              # Value Boxes - will stack on mobile
+              div(
+                class = "row",
+                div(class = "col-sm-4 col-xs-12", valueBoxOutput("highest_iwi_vb", width = NULL)),
+                div(class = "col-sm-4 col-xs-12", valueBoxOutput("lowest_iwi_vb", width = NULL)),
+                div(class = "col-sm-4 col-xs-12", valueBoxOutput("avg_iwi_vb", width = NULL))
+              )
+            )
           ),
           fluidRow(
-            # Map
-            box(
-              title = span("Wealth Map of Africa",
-                           style = "font-family: 'OCR A Std', monospace; font-size: 18px;"),
-              width = 8, solidHeader = TRUE, status = "primary",
-              leafletOutput("map", height = "550px"),
-              p("Click anywhere on the map to view the time-series of IWI for that specific location (shown below).")
-            ),
-            # Histogram
-            box(
-              title = span("IWI Distribution (Selected Period)", 
-                           style = "font-family: 'OCR A Std', monospace; font-size: 14px;"),
-              width = 4, solidHeader = TRUE, status = "info",
-              plotOutput("iwi_histogram", height = "250px"),
-              p("This histogram shows the distribution of the International Wealth Index (IWI) values for the selected time period across Africa."),
-              br(),
-              strong("Note:"),
-              " Wealth estimates for areas without human settlements have been excluded from the analysis.",
-              br(),br(),
-              p(HTML("<a href='https://doi.org/10.24963/ijcai.2023/684' target='_blank'>[Paper PDF]</a>"))
+            # Map - full width on mobile
+            column(
+              width = 12,
+              div(
+                class = "row",
+                div(
+                  class = "col-md-8 col-sm-12",
+                  box(
+                    title = span("Wealth Map of Africa",
+                                 style = "font-family: 'OCR A Std', monospace; font-size: 18px;"),
+                    width = NULL, solidHeader = TRUE, status = "primary",
+                    leafletOutput("map", height = "450px"),
+                    p(style = "padding-top: 10px; font-size: 14px;", 
+                      "Tap anywhere on the map to view the time-series of IWI for that location.")
+                  )
+                ),
+                # Histogram - will position below map on mobile
+                div(
+                  class = "col-md-4 col-sm-12",
+                  box(
+                    title = span("IWI Distribution", 
+                                 style = "font-family: 'OCR A Std', monospace; font-size: 16px;"),
+                    width = NULL, solidHeader = TRUE, status = "info",
+                    plotOutput("iwi_histogram", height = "200px"),
+                    p(style = "font-size: 14px;", 
+                      "Distribution of International Wealth Index values for the selected time period."),
+                    strong(style = "font-size: 14px;", "Note:"),
+                    span(style = "font-size: 14px;", 
+                         " Areas without human settlements are excluded."),
+                    div(
+                      style = "margin-top: 10px;",
+                      p(HTML("<a href='https://doi.org/10.24963/ijcai.2023/684' target='_blank' style='font-size: 14px;'>[Paper PDF]</a>"))
+                    )
+                  )
+                )
+              )
             )
           ),
           # Time series at clicked location
           fluidRow(
-            box(
-              title = span("Time Series at Clicked Location",
-                           style = "font-family: 'OCR A Std', monospace; font-size: 14px;"),
-              width = 12, solidHeader = TRUE, status = "warning",
-              plotOutput("clicked_ts_plot", height = "300px"),
-              p("Click on the map to see the full IWI time-series (1990–2019) for that location.")
+            column(
+              width = 12,
+              box(
+                title = span("Time Series at Tapped Location",
+                             style = "font-family: 'OCR A Std', monospace; font-size: 16px;"),
+                width = NULL, solidHeader = TRUE, status = "warning",
+                plotOutput("clicked_ts_plot", height = "250px"),
+                p(style = "font-size: 14px;", 
+                  "Tap on the map to see the IWI time-series (1990–2019) for that location.")
+              )
             )
           )
         ),
@@ -264,17 +428,25 @@
         tabItem(
           tabName = "improvementTab",
           fluidRow(
-            box(
-              width = 12, 
-              title = span("Poverty Improvement by State",
-                           style = "font-family: 'OCR A Std', monospace; font-size: 18px;"),
-              status = "primary", solidHeader = TRUE,
-              p("This table shows the estimated improvement in mean IWI between 1990–1992 and 2017–2019 for each province in Africa. 
-               The 'Improvement' column indicates the change in IWI over this period. You can sort or filter the table, 
-               and use the download button to export the data."),
-              downloadButton("download_data", "Download CSV", icon = icon("download")),
-              br(), br(),
-              DTOutput("improvement_table")
+            column(
+              width = 12,
+              box(
+                width = NULL, 
+                title = span("Poverty Improvement by State",
+                             style = "font-family: 'OCR A Std', monospace; font-size: 18px;"),
+                status = "primary", solidHeader = TRUE,
+                p(style = "font-size: 14px;", "This table shows the estimated improvement in mean IWI between 1990–1992 and 2017–2019 for each province in Africa."),
+                div(
+                  style = "margin: 15px 0;",
+                  downloadButton("download_data", "Download CSV", 
+                                 style = "width: 100%; padding: 12px; font-size: 16px;")
+                ),
+                # Mobile-optimized table
+                div(
+                  style = "overflow-x: auto;", 
+                  DTOutput("improvement_table")
+                )
+              )
             )
           )
         ),
@@ -283,14 +455,17 @@
         tabItem(
           tabName = "trendTab",
           fluidRow(
-            box(
-              width = 12, 
-              title = span("Average Wealth Index Across Africa Over Time",
-                           style = "font-family: 'OCR A Std', monospace; font-size: 18px;"),
-              status = "success", solidHeader = TRUE,
-              p("This chart aggregates the mean IWI across all of Africa in each of the ten time periods. 
-               It provides a high-level view of how wealth (as measured by IWI) has changed over time."),
-              plotOutput("trend_plot", height = "400px")
+            column(
+              width = 12,
+              box(
+                width = NULL, 
+                title = span("Average Wealth Index Over Time",
+                             style = "font-family: 'OCR A Std', monospace; font-size: 18px;"),
+                status = "success", solidHeader = TRUE,
+                p(style = "font-size: 14px;", 
+                  "Mean IWI across Africa over the ten time periods, showing how wealth has changed over time."),
+                plotOutput("trend_plot", height = "350px")
+              )
             )
           )
         )
@@ -298,6 +473,7 @@
     )
   )
   
+  
   # ------------------------------
   # 4. Server
   # ------------------------------