Merge pull request #12 from reflejar/dev

Dev
reflejar · Dec 18, 2023 · 0bb2f8e · 0bb2f8e
2 parents 3fec95e + fd87a9e
commit 0bb2f8e
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 64 deletions.
diff --git a/apps/testeos/app.R b/apps/testeos/app.R
@@ -59,7 +59,30 @@ hover_markers=lapply(amb$Tooltip, htmltools::HTML)
 
 
 
-style <- "
+style <- HTML("
+  .material-switch > label:before {
+      background: rgb(0, 0, 0);
+      box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
+      border-radius: 45px;
+      content: '';
+      height: 28px;
+      margin-top: -13.5px;
+      position:absolute;
+      opacity: 0.3;
+      transition: all 0.4s ease-in-out;
+      width: 46px;
+  }
+
+
+
+
+  .label-danger{
+  background-color: #F1405D;
+  }
+  .label-primary{
+  background-color: #D8D87C;
+  }
+
   .hexbin-hexagon {
   	stroke: #000;
   	stroke-width: .5px;
@@ -101,9 +124,33 @@ style <- "
   }`
     
   
-"
+")
+
+style_hidden <-HTML( "
 
-style_hidden <- "
+   .material-switch > label:before {
+      background: rgb(0, 0, 0);
+      box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
+      border-radius: 45px;
+      content: '';
+      height: 28px;
+      margin-top: -13.5px;
+      position:absolute;
+      opacity: 0.3;
+      transition: all 0.4s ease-in-out;
+      width: 46px;
+  }
+  
+
+
+
+  .label-danger{
+  background-color: #F1405D;
+  }
+  .label-primary{
+  background-color: #D8D87C;
+  }
+  
   .hexbin-hexagon {
     display:none
   }
@@ -139,16 +186,16 @@ style_hidden <- "
   background-color: rgba(255,0,0, 0.6);
   }`
   
-"
+")
 # Define UI
 ui <- fluidPage(
   tags$head(tags$style(style)),
   tags$link(
     rel = "stylesheet", 
     href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap"
   ),
-  materialSwitch(inputId = "switch1", label = "Testeos Humanos", status = "danger",value=T),
-  materialSwitch(inputId = "switch2", label = "Testeos Ambientales", status = "primary",value=F),
+  materialSwitch(inputId = "switch1", label = "Testeos Humanos", status = "danger",value=T,right = T),
+  materialSwitch(inputId = "switch2", label = "Testeos Ambientales", status = "primary",value=F,right=T),
   uiOutput("style"),
   leafletOutput("map", width = "80%", height = "600px")
 )

diff --git a/apps/testeos/ui.R b/apps/testeos/ui.R
@@ -6,42 +6,6 @@ library(shinyWidgets)
 library(sfarrow)
 library(arrow)
 
-style <- "
-  .hexbin-hexagon {
-  	stroke: #000;
-  	stroke-width: .5px;
-  }
-  
-  .hexbin-container:hover .hexbin-hexagon {
-  	transition: 200ms;
-  	stroke: black;
-  	stroke-width: 2px;
-  	stroke-opacity: 1;
-  }
-  
-  .hexbin-tooltip {
-  	padding: 8px;
-  	border-radius: 4px;
-  	border: 1px solid black;
-  	background-color: white;
-  }
-"
-
-style_hidden <- "
-  .hexbin-hexagon {
-    display:none
-  }
-  
-  .hexbin-container:hover .hexbin-hexagon {
-    display:none
-
-  }
-  
-  .hexbin-tooltip {
-    display:none
-
-  }
-"
 
 shinyUI(fluidPage(
   # includeCSS("bootstrap.min.css", rel = 'stylesheet'),
@@ -51,7 +15,7 @@ shinyUI(fluidPage(
   tags$head(
     tags$meta(name="viewport", content="width=device-width, initial-scale=1"),
     tags$link(rel = 'stylesheet', type = 'text/css', href = 'https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css'),
-    tags$style(style),
+    tags$link(rel="stylesheet", href = 'custom.css'),
     tags$link(rel="icon", type="image/x-icon", href = 'favicon.ico'),
     tags$link(rel = "stylesheet", href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap"),
     tags$title("PIS")
@@ -99,7 +63,7 @@ shinyUI(fluidPage(
 
           tags$div(
             materialSwitch(inputId = "switch1", label = "Testeos Humanos", status = "danger",value=T, right = T),
-            materialSwitch(inputId = "switch2", label = "Testeos Ambientales", status = "primary",value=T, right = T),
+            materialSwitch(inputId = "switch2", label = "Testeos Ambientales", status = "primary",value=F, right = T),
             class="mt-3 mb-5 text-white"
           ),
           tags$img(alt="Línea", src="img/linea.svg", class="mt-5 mb-3"),

diff --git a/assets/custom.css b/assets/custom.css
@@ -0,0 +1,70 @@
+.shiny-input-container {
+  width: 300px;
+  max-width: 100%;
+  margin-bottom: 10px;
+}
+
+.material-switch>label.switch:before {
+  background: rgb(0, 0, 0);
+  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 45px;
+  content: '';
+  height: 24px;
+  margin-top: -13.5px;
+  position:absolute;
+  opacity: 0.3;
+  transition: all 0.4s ease-in-out;
+  width: 44px;
+}
+
+
+.bg-danger {
+  background-color: #F1405D!important;
+}
+.bg-primary {
+  background-color: #D8D87C!important;
+}
+
+.marker-cluster-small {
+  background-color: rgba(	255,193,0, 0.6);
+  }
+  .marker-cluster-small div {
+  background-color: rgba(255,154,0, 0.6);
+  }
+
+  .marker-cluster-medium {
+  background-color: rgba(255,154,0, 0.6);
+  }
+  .marker-cluster-medium div {
+  background-color: rgba(255,77,0, 0.6);
+  }
+
+  .marker-cluster-large {
+  background-color: rgba(255,77,0, 0.6);
+  }
+  .marker-cluster-large div {
+  background-color: rgba(255,0,0, 0.6);
+  }
+
+
+
+/* CSS para pantallas más pequeñas */
+@media (max-width: 768px) {
+    .responsive-map {
+      height: 400px; /* Ajusta la altura según tus necesidades */
+    }
+  }
+
+  /* CSS para pantallas medianas */
+  @media (min-width: 769px) and (max-width: 1200px) {
+    .responsive-map {
+      height: 500px; /* Ajusta la altura según tus necesidades */
+    }
+  }
+
+  /* CSS para pantallas más grandes */
+  @media (min-width: 1201px) {
+    .responsive-map {
+      height: 600px; /* Ajusta la altura según tus necesidades */
+    }
+  }
diff --git a/assets/pis-shiny.css b/assets/pis-shiny.css