Put the button where people expect it

viz/app.R

@@ -99,14 +99,7 @@ ui <- fluidPage(
                 div(id="loc2"),
                     htmlOutput("secondarylochtml"))
                 ),
-  absolutePanel(top = 25, right = 10, id="control2",
-                materialSwitch("controlswitch", value=TRUE, right=TRUE,
-                               inline=TRUE, status="info")),
-  absolutePanel(bottom = 26, right = 10, id="loading",
-                p("Loading...")),
-  absolutePanel(bottom=26, right=10, left=10, top=10, id="infopanel",
-                infotext),
-  absolutePanel(bottom=10, left=10, id="infobuttoncontainer",
+  absolutePanel(top=10, right=10, id="infobuttoncontainer",
     prettyToggle("mapinfobutton", 
                  label_on = HTML("<span class='shortcut'>I</span>nfo"),
                  label_off = HTML("<span class='shortcut'>I</span>nfo"),
@@ -115,9 +108,18 @@ ui <- fluidPage(
                  animation = "pulse",
                  inline = TRUE,
                  status_on = "danger",
-                 status_off = "info",
+                 status_off = "primary",
                  value = TRUE)
-  )
+  ),
+  absolutePanel(top = 40, right = 7.5, id="control2", title="Toggle panel",
+                prettySwitch("controlswitch", value=TRUE, label = NULL,
+                             slim = FALSE,
+                               inline=TRUE, status="info",
+                             fill=FALSE, bigger=FALSE)),
+  absolutePanel(bottom = 26, right = 10, id="loading",
+                p("Loading...")),
+  absolutePanel(bottom=26, right=10, left=10, top=10, id="infopanel",
+                infotext)
 )
 
 # Define server logic

viz/extras.R

@@ -22,7 +22,7 @@ html, body {
   font-weight: bold;
   margin: 0;
 }
-#mapcontrol, #infobuttoncontainer, #infopanel {
+#mapcontrol, #infopanel {
   background-color: rgba(255, 255, 255, 0.8);
   border-radius: 5px;
   box-shadow: 0 0 15px rgba(0,0,0,0.2);
@@ -54,8 +54,9 @@ html, body {
   background-color: #84e1e1;
 }
 #infobuttoncontainer {
-  margin-bottom: 16px;
+  padding: 6px 8px;
   z-index: 1002;
+  font: 14px/16px Arial, Helvetica, sans-serif;
 }
 #infobuttoncontainer .shiny-input-container,
 #infobuttoncontainer div div {
@@ -144,6 +145,9 @@ kbd:hover {
 .btn.radiobtn {
     text-align: left;
 }
+#control2 .state label {
+    width: 0px;
+}
 "
 
 attribhtml <- '