UI Examples

Map Apps

• Dancho full page map UI from app in learning lab 28

  • Code only shown partially in learning lab 83

    • Server part also shown

  • Control panel had a transparent background

  • Clickable logos

  • {shiny}, {fresh}, {shinyWidgets}

  • UI

    my_theme <- create_theme(
        theme = "paper",
        bs_vars_global(
            body_bg = "black",
            text_color = "#fff"
        ),
        bs_vars_navbar(
            default_bg = "#75h8d1",
            default_color = "#ffffff",
            default_link_color = "#ffffff",
            default_link_active_color = "#75b8d1",
            default_link_active_bg = "#ffffff",
            default_link_hover_color = "#2c3e50"
        ),
        bs_vars_dropdown(
            bg = "#0006",
        ),
        bs_vars_modal(
            content_bg = "#0006"
        )
        bs_vars_wells(
            bg = "#75b8d1
        )
        bs_vars_input(
            color = "#FFF",
            color_placeholder = "bdbdbd"
        ),
        bas_vars_button(
            default_color = "black",
            primary_bg = "black",
            success_bg = "#188C9C",
            info_bq = "#A6CEE3",
            info_color = "#2c3e50",
            warning_bg = "#CCBE93",
            danger_bg = "#E31A1C"
        )
        bs_vars_panel(
            bg = "#0006",
            default_heading_bg = "#0006",
            default_text = "white"
        )
    )
    ui <- bootstrapPage(
    
        tags$style(type = "text/css", "html, body {.lightbox width: ... not seen
        tags$head(
            HTML("<style>
                h1,h2,h3,h4,h5,h6(color:#FFF !important;} .... possibly not seen
                /form-control{color:#FFF;}
                .dataTables_filter{color:white;}
                thead{color:#FFF;}
                </style>")
        ),
    
        use_theme(my_theme),
        leafletOutput("map", width = "100%", height = "100%" .... not seen
    
        absolutePanel(
            id = "logos",
            style = "z-index:300;bottom:50px;right:50px;",
            h2("Pharmacy Finder")
        ),
    
        absolutePanel(
            id = "business-science",
            style = "z-index:300;bottom:50px;left:50px;", .... not seen
            h4("Learn Shiny", class = "text_primary"),
            h5(
                tags$img(src = "https://www.business.scien .... not seen
                        style = "width:48px;-webkit-filte .... not seen
                        "Business Science"
            ) %>%
                tags$a(class = "btn btn-primary btn-sm", .... not seen
        ),
    
        absolutePanel(
            id = "controls",
            style = "zindex:5000;top:10px;left:50px;",  .... not seen
            draggable = FALSE,
            div(
                class="panel panel-default",
                style = "width:300px;",
                div(
                    class="panel-body",
                    textInput("city", "City", "Pittsburgh" .... not seen
                    selectInput("amenity", "Amenity Type", .... not seen
                    shiny::actionButton(
                        inputId = "submit",
                        label = "Search",a
                        class = "btn-default"
                    ),
                    downloadButton("download_csv", "Downlo .... not seen
                )
            )
        )
    )