From db8fa8679d66b164f16d5ec03ee14d2159f4a9f7 Mon Sep 17 00:00:00 2001 From: Thomas Charlon <2394508+ThomasChln@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:17:18 -0500 Subject: [PATCH 1/4] Update test-f7Grid.R --- tests/testthat/test-f7Grid.R | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/testthat/test-f7Grid.R b/tests/testthat/test-f7Grid.R index 211d1fd3..440be969 100644 --- a/tests/testthat/test-f7Grid.R +++ b/tests/testthat/test-f7Grid.R @@ -5,4 +5,7 @@ test_that("grid works", { grid <- f7Grid(cols = 2, gap = FALSE) expect_identical(grid$attribs$class, "grid grid-cols-2") + + grid <- f7Grid(cols = 2, medium_cols = 4) + expect_identical(grid$attribs$class, "grid grid-cols-2 medium-grid-cols-4") }) From c9075e0be8956d52b802178878bed10253dda701 Mon Sep 17 00:00:00 2001 From: Thomas Charlon <2394508+ThomasChln@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:20:14 -0500 Subject: [PATCH 2/4] Update f7Grid.R --- R/f7Grid.R | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/R/f7Grid.R b/R/f7Grid.R index 56099bc5..3c09850f 100644 --- a/R/f7Grid.R +++ b/R/f7Grid.R @@ -5,11 +5,17 @@ #' @param ... Row content. #' @param cols Columns number. Numeric between 1 and 20. #' @param gap Whether to display gap between columns. TRUE by default. +#' @param medium_cols Columns number for large screens. Numeric between 1 and 20. #' #' @author David Granjon, \email{dgranjon@@ymail.com} #' @export -f7Grid <- function(..., cols, gap = TRUE) { +f7Grid <- function(..., cols, gap = TRUE, medium_cols = NULL) { cl <- sprintf("grid grid-cols-%s", cols) + + if (!is.null(medium_cols)) { + cl <- paste(cl, sprintf("medium-grid-cols-%s", medium_cols)) + } + if (gap) cl <- paste(cl, "grid-gap") shiny::tags$div(class = cl, ...) } From 8eb3f9587d734f37c8445aa77253a28a9dbcc5c0 Mon Sep 17 00:00:00 2001 From: Thomas Charlon <2394508+ThomasChln@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:22:00 -0500 Subject: [PATCH 3/4] Update f7Grid.Rd --- man/f7Grid.Rd | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/man/f7Grid.Rd b/man/f7Grid.Rd index 11d98bf1..8e61771e 100644 --- a/man/f7Grid.Rd +++ b/man/f7Grid.Rd @@ -4,7 +4,7 @@ \alias{f7Grid} \title{Framework7 grid container} \usage{ -f7Grid(..., cols, gap = TRUE) +f7Grid(..., cols, gap = TRUE, medium_cols = NULL) } \arguments{ \item{...}{Row content.} @@ -12,6 +12,8 @@ f7Grid(..., cols, gap = TRUE) \item{cols}{Columns number. Numeric between 1 and 20.} \item{gap}{Whether to display gap between columns. TRUE by default.} + +\item{medium_cols}{Columns number for large screens. Numeric between 1 and 20.} } \description{ Grid container for elements From 1846ca94406795c5eddfd51772c56061c2b5c178 Mon Sep 17 00:00:00 2001 From: Thomas Charlon Date: Sat, 30 Nov 2024 13:27:51 -0500 Subject: [PATCH 4/4] responsive f7Grid --- R/f7Grid.R | 21 +++++++++++++++++---- man/f7Grid.Rd | 7 +++++-- tests/testthat/test-f7Grid.R | 18 ++++++++++++++++-- 3 files changed, 38 insertions(+), 8 deletions(-) diff --git a/R/f7Grid.R b/R/f7Grid.R index 3c09850f..91dc1e80 100644 --- a/R/f7Grid.R +++ b/R/f7Grid.R @@ -5,17 +5,30 @@ #' @param ... Row content. #' @param cols Columns number. Numeric between 1 and 20. #' @param gap Whether to display gap between columns. TRUE by default. -#' @param medium_cols Columns number for large screens. Numeric between 1 and 20. +#' @param responsiveCl Class for responsive behavior. +#' The format must be `` such as ``, ``. +#' SIZE must be one of \code{c("xsmall", "small", "medium", "large", "xlarge")}. +#' NCOLS has to be between 1 and 20. #' #' @author David Granjon, \email{dgranjon@@ymail.com} #' @export -f7Grid <- function(..., cols, gap = TRUE, medium_cols = NULL) { +f7Grid <- function(..., cols, gap = TRUE, responsiveCl = NULL) { + cl <- sprintf("grid grid-cols-%s", cols) - if (!is.null(medium_cols)) { - cl <- paste(cl, sprintf("medium-grid-cols-%s", medium_cols)) + if (!is.null(responsiveCl)) { + # Format must be: like, , + tmp <- strsplit(responsiveCl, "-")[[1]] + breakpoint <- tmp[1] + ncols <- as.numeric(tmp[2]) + stopifnot( + ncols >= 1 && ncols <= 20, + breakpoint %in% c("xsmall", "small", "medium", "large", "xlarge") + ) + cl <- paste(cl, sprintf("%s-grid-cols-%s", breakpoint, ncols)) } if (gap) cl <- paste(cl, "grid-gap") + shiny::tags$div(class = cl, ...) } diff --git a/man/f7Grid.Rd b/man/f7Grid.Rd index 8e61771e..304f9b7d 100644 --- a/man/f7Grid.Rd +++ b/man/f7Grid.Rd @@ -4,7 +4,7 @@ \alias{f7Grid} \title{Framework7 grid container} \usage{ -f7Grid(..., cols, gap = TRUE, medium_cols = NULL) +f7Grid(..., cols, gap = TRUE, responsiveCl = NULL) } \arguments{ \item{...}{Row content.} @@ -13,7 +13,10 @@ f7Grid(..., cols, gap = TRUE, medium_cols = NULL) \item{gap}{Whether to display gap between columns. TRUE by default.} -\item{medium_cols}{Columns number for large screens. Numeric between 1 and 20.} +\item{responsiveCl}{Class for responsive behavior. +The format must be \verb{} such as \verb{}, \verb{}. +SIZE must be one of \code{c("xsmall", "small", "medium", "large", "xlarge")}. +NCOLS has to be between 1 and 20.} } \description{ Grid container for elements diff --git a/tests/testthat/test-f7Grid.R b/tests/testthat/test-f7Grid.R index 440be969..7764dd35 100644 --- a/tests/testthat/test-f7Grid.R +++ b/tests/testthat/test-f7Grid.R @@ -6,6 +6,20 @@ test_that("grid works", { grid <- f7Grid(cols = 2, gap = FALSE) expect_identical(grid$attribs$class, "grid grid-cols-2") - grid <- f7Grid(cols = 2, medium_cols = 4) - expect_identical(grid$attribs$class, "grid grid-cols-2 medium-grid-cols-4") + + # responsiveCl + grid <- f7Grid(cols = 2, responsiveCl = 'xsmall-1') + expect_identical(grid$attribs$class, "grid grid-cols-2 xsmall-grid-cols-1 grid-gap") + + grid <- f7Grid(cols = 2, responsiveCl = 'small-2') + expect_identical(grid$attribs$class, "grid grid-cols-2 small-grid-cols-2 grid-gap") + + grid <- f7Grid(cols = 2, responsiveCl = 'medium-4') + expect_identical(grid$attribs$class, "grid grid-cols-2 medium-grid-cols-4 grid-gap") + + grid <- f7Grid(cols = 2, responsiveCl = 'large-6') + expect_identical(grid$attribs$class, "grid grid-cols-2 large-grid-cols-6 grid-gap") + + grid <- f7Grid(cols = 2, responsiveCl = 'xlarge-8') + expect_identical(grid$attribs$class, "grid grid-cols-2 xlarge-grid-cols-8 grid-gap") })