Update app.R

app.R

@@ -16,230 +16,183 @@ library(leaflet)     # <-- For OpenStreetMap-based map
 # =============================
 ui <- dashboardPage(
   skin = "black",
+  
+  # =======================
+  #       HEADER
+  # =======================
   dashboardHeader(
     title = span(
       style = "font-weight: 600; font-size: 13px;",
       a(
-        href = "http://www.globalleadershipproject.net", 
-        "GlobalLeadershipProject.net", 
+        href   = "http://www.globalleadershipproject.net",
+        "GlobalLeadershipProject.net",
         target = "_blank",
-        style = "color: white; text-decoration: underline;"
+        style  = "color: white; text-decoration: underline;"
       )
     )
   ),
+  
+  # =======================
+  #      SIDEBAR
+  # =======================
   dashboardSidebar(
     sidebarMenu(
       menuItem("Map Type", tabName = "cartogramTab", icon = icon("globe"))
     ),
+    
     div(
       style = "margin: 15px;",
       selectInput(
-        inputId = "indexChoice",
-        label = "Select Representation Index:",
-        choices = c("Overall", "RepresentationGap", "Ethnicity",
-                    "Gender", "Religion", "Language"),
+        inputId  = "indexChoice",
+        label    = "Select Representation Index:",
+        choices  = c("Overall", "RepresentationGap", "Ethnicity",
+                     "Gender", "Religion", "Language"),
         selected = "Overall"
       )
     ),
     
-    # ---- Minimal "Share" button HTML + JS inlined ----
+    # ---- “Share” button ----
     tags$div(
       style = "text-align: left; margin: 1em 0 1em 2em;",
       HTML('
-        <button id="share-button" 
+        <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>
+                  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>
+            <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>
       '),
-      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);
+      
+      tags$script(HTML("
+        (function () {
+          const shareBtn = document.getElementById('share-button');
+          function showCopyNotification () {
+            const n = document.createElement('div');
+            n.innerText          = 'Copied to clipboard';
+            n.style.position     = 'fixed';
+            n.style.bottom       = '20px';
+            n.style.right        = '20px';
+            n.style.background   = 'rgba(0,0,0,0.8)';
+            n.style.color        = '#fff';
+            n.style.padding      = '8px 12px';
+            n.style.borderRadius = '4px';
+            n.style.zIndex       = '9999';
+            document.body.appendChild(n);
+            setTimeout(() => n.remove(), 2000);
+          }
+          shareBtn.addEventListener('click', () => {
+            const url   = window.location.href;
+            const title = document.title || 'Check this out!';
+            if (navigator.share) {
+              navigator.share({ title, text: '', url }).catch(console.log);
+            } else if (navigator.clipboard && navigator.clipboard.writeText) {
+              navigator.clipboard.writeText(url).then(showCopyNotification);
+            } else {
+              const ta = document.createElement('textarea');
+              ta.value = url;
+              document.body.appendChild(ta);
+              ta.select();
+              try { document.execCommand('copy'); showCopyNotification(); }
+              catch { alert('Please copy this link:\\n' + url); }
+              document.body.removeChild(ta);
             }
-            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);
-                  });
-                } 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);
-                }
-              }
-            });
-          })();
-        ")
-      )
+          });
+        })();
+      "))
     )
-    # ---- End: Minimal Share button snippet ----
+    # ---- /Share button ----
   ),
+  
+  # =======================
+  #        BODY
+  # =======================
   dashboardBody(
     tags$head(
       tags$link(
         href = "https://fonts.googleapis.com/css2?family=OCR+A+Extended&display=swap",
-        rel = "stylesheet"
+        rel  = "stylesheet"
       ),
       tags$style(HTML("
-        /* Force OCR A Extended font across the entire UI and all HTML elements */
-        html, body, h1, h2, h3, h4, h5, h6, p, div, span, label, input, button, select,
-        .box, .content-wrapper, .main-sidebar, .main-header .navbar, .main-header .logo,
-        .sidebar-menu, .sidebar-menu li a, .sidebar-menu .fa {
+        /* -------- Base typography & theme -------- */
+        html, body, h1, h2, h3, h4, h5, h6, p, div, span, label, input, button,
+        select, .box, .content-wrapper, .main-sidebar, .main-header .navbar,
+        .main-header .logo, .sidebar-menu, .sidebar-menu li a, .sidebar-menu .fa {
           font-family: 'OCR A Extended', monospace !important;
         }
+        .main-header .navbar      { background: linear-gradient(to right,#3b6978,#204051)!important; }
+        .main-header .logo        { background:#1b2a2f!important; color:#fff!important;
+                                     border-bottom:none; font-size:18px; font-weight:600; }
+        .main-sidebar             { background-color:#1b2a2f!important; }
+        .sidebar-menu>li.active>a,
+        .sidebar-menu>li:hover>a  { background:#344e5c!important; border-left-color:#78cdd7!important;
+                                     color:#fff!important; }
+        .sidebar-menu .fa         { color:#78cdd7!important; }
+        .sidebar-menu>li>a        { color:#b8c7ce!important; font-size:15px; font-weight:500; }
+        .box                      { border-top:none!important; box-shadow:0 4px 8px rgba(0,0,0,.1);
+                                     border-radius:6px; }
+        .box.box-solid>.box-header{ background:#204051; color:#fff; border-radius:6px 6px 0 0; }
+        .box .box-body            { padding:0!important; }
+        .small, small             { font-size:75%; }
+        .map-container            { height:70vh; width:100%; }
+        @media (max-width:768px)  { .map-container{height:50vh;} }
         
-        /* Header gradient background */
-        .main-header .navbar {
-          background: linear-gradient(to right, #3b6978, #204051) !important;
-        }
-        /* Logo area (left corner of the header) */
-        .main-header .logo {
-          background: #1b2a2f !important;
-          color: #ffffff !important;
-          border-bottom: none;
-          font-size: 18px;
-          font-weight: 600;
-        }
-        /* Sidebar background */
-        .main-sidebar {
-          background-color: #1b2a2f !important;
-        }
-        /* Active or hovered tab in the sidebar */
-        .sidebar-menu > li.active > a,
-        .sidebar-menu > li:hover > a {
-          background-color: #344e5c !important;
-          border-left-color: #78cdd7 !important;
-          color: #ffffff !important;
-        }
-        
-        /* Sidebar menu item icons */
-        .sidebar-menu .fa {
-          color: #78cdd7 !important;
-        }
-        
-        /* Sidebar menu item text */
-        .sidebar-menu > li > a {
-          color: #b8c7ce !important;
-          font-size: 15px;
-          font-weight: 500;
-        }
-        
-        /* Customize the boxes */
-        .box {
-          border-top: none !important;
-          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-          border-radius: 6px;
-        }
-        .box.box-solid > .box-header {
-          background-color: #204051;
-          color: #fff;
-          border-radius: 6px 6px 0 0;
-        }
-        /* Plot box spacing */
-        .box .box-body {
-          padding: 0 !important;
-        }
-        /* Footer text styling (plot captions, etc.) */
-        .small, small {
-          font-size: 75%;
-        }
-        /* Responsive map container */
-        .map-container {
-          height: 70vh;  
-          width: 100%;
-        }
-        @media (max-width: 768px) {
-          .map-container {
-            height: 50vh;  
-          }
+        /* -------- Mobile font bump -------- */
+        @media (max-width:768px){
+          html, body            { font-size:18px!important; line-height:1.4!important; }
+          .sidebar-menu>li>a    { font-size:18px!important; }
+          .sidebar-menu .fa     { font-size:20px!important; }
+          .main-header .logo    { font-size:22px!important; }
+          .box.box-solid>.box-header,
+          .box>.box-header>.box-title { font-size:20px!important; }
+          input, select, button { font-size:18px!important; }
+          .leaflet-popup-content,
+          .leaflet-tooltip      { font-size:16px!important; }
         }
       "))
     ),
+    
     tabItem(
       tabName = "cartogramTab",
+      
       fluidRow(
         column(
           width = 9,
           box(
-            width = NULL,
-            title = strong("Country-level Representation"),
+            width       = NULL,
+            title       = strong("Country-level Representation"),
             solidHeader = TRUE,
-            div(
-              class = "map-container",
-              leafletOutput("cartogramPlot", width = "100%", height = "100%")
-            )
+            div(class = "map-container",
+                leafletOutput("cartogramPlot", width = "100%", height = "100%"))
           )
         ),
-        
         column(
           width = 3,
           box(
-            width = NULL,
-            title = strong("Selected Country Data"),
+            width       = NULL,
+            title       = strong("Selected Country Data"),
             solidHeader = TRUE,
             uiOutput("selectedCountryData"),
-            style = "overflow-y: auto;"  # Scroll if content overflows
+            style = "overflow-y: auto;"
           )
         )
       ),
@@ -248,30 +201,24 @@ ui <- dashboardPage(
         column(
           width = 9,
           box(
-            width = NULL,
-            title = strong("Citation"),
+            width       = NULL,
+            title       = strong("Citation"),
             solidHeader = TRUE,
-            
             tags$p(
-              "John Gerring, Connor T. Jerzak, Erzen Öncel. 
-               The Composition of Descriptive Representation. ",
-              em("American Political Science Review,"), " 118(2): 784–801, 2024.",
+              "John Gerring, Connor T. Jerzak, Erzen Öncel. ",
+              "The Composition of Descriptive Representation. ",
+              em("American Political Science Review,"), " 118(2): 784–801, 2024. ",
               tags$a(
-                href = "https://www.cambridge.org/core/services/aop-cambridge-core/content/view/7EAEA1CA4C553AB9D76054D1FA9C0840/S0003055423000680a.pdf/the-composition-of-descriptive-representation.pdf",
-                "PDF",
-                target = "_blank"
-              ),
-              " | ",
+                href   = "https://www.cambridge.org/core/services/aop-cambridge-core/content/view/7EAEA1CA4C553AB9D76054D1FA9C0840/S0003055423000680a.pdf/the-composition-of-descriptive-representation.pdf",
+                "PDF",   target = "_blank"
+              ), " | ",
               tags$a(
-                href = "https://connorjerzak.com/wp-content/uploads/2024/07/CompositionBib.txt",
-                "BibTeX",
-                target = "_blank"
-              ),
-              " | ",
+                href   = "https://connorjerzak.com/wp-content/uploads/2024/07/CompositionBib.txt",
+                "BibTeX", target = "_blank"
+              ), " | ",
               tags$a(
-                href = "https://www.youtube.com/watch?v=nnfDj1NdOMo",
-                "YouTube",
-                target = "_blank"
+                href   = "https://www.youtube.com/watch?v=nnfDj1NdOMo",
+                "YouTube", target = "_blank"
               )
             )
           )
@@ -281,6 +228,7 @@ ui <- dashboardPage(
   )
 )
 
+
 # =============================
 #          SERVER
 # =============================
@@ -453,4 +401,3 @@ server <- function(input, output, session) {
 #   Launch the Shiny App
 # =============================
 shinyApp(ui = ui, server = server)
-