shinyMobile icon indicating copy to clipboard operation
shinyMobile copied to clipboard

Add capability to manipulate CSS for Split-Layout and Split-Tabs modes

Open moldach opened this issue 3 years ago • 0 comments

I'm trying to integrating HTML, CSS into {shinyMobile} and I've noticed you cannot edit CSS for the Split-Layout and Split-Tabs modes (however, you can with the Single-Layout mode.

To create a simple and reproducible example, I've taken corresponding HTML and CSS code from this CodePen example placing these files radio.css and radio.html into the www/ directory:

Then I create a simply app.R:

library(shiny)

ui <- fluidPage(
    includeHTML("www/radio.html"),  # include HTML
    includeCSS("www/radio.css"),    # include CSS
  )

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

01

When trying to do the same inside shinyMobile the background remains black:

ui <- f7Page(
    includeHTML("www/radio.html"),  # include HTML
    includeCSS("www/radio.css"),    # include CSS
  )

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

works

However, this doesn't work when I try it in Split-Layout (below) or Split-Tabs mode (the latter was tested but is not shown):

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "My app",
    options = list(
      theme = "aurora",
      dark = TRUE,
      filled = FALSE,
      color = "#007aff",
      touch = list(
        tapHold = TRUE,
        tapHoldDelay = 750,
        iosTouchRipple = FALSE
      ),
      iosTranslucentBars = FALSE,
      navbar = list(
        iosCenterTitle = TRUE,
        hideNavOnPageScroll = TRUE
      ),
      toolbar = list(
        hideNavOnPageScroll = FALSE
      ),
      pullToRefresh = FALSE
    ),
    f7SplitLayout(
      sidebar = f7Panel(
        title = "Sidebar",
        side = "left",
        theme = "light",
        f7PanelMenu(
          id = "menu",
          f7PanelItem(
            tabName = "tab1",
            title = "Tab 1",
            icon = f7Icon("equal_circle"),
            active = TRUE
          )
        ),
        uiOutput("selected_tab"),
        effect = "reveal"
      ),
      navbar = f7Navbar(
        title = "Split Layout",
        hairline = FALSE,
        shadow = TRUE
      ),
      # main content
      f7Items(
        f7Item(
          includeHTML("www/radio.html"),  # include HTML
          includeCSS("www/radio.css"),    # include CSS
          tabName = "tab1",
        )
      )
    )
  ),
  server = function(input, output, session) {

  }
)

broken

moldach avatar Feb 27 '21 19:02 moldach