diff --git a/dev/screenshots/header-demo.R b/dev/screenshots/header-demo.R new file mode 100644 index 0000000..7ac8efa --- /dev/null +++ b/dev/screenshots/header-demo.R @@ -0,0 +1,66 @@ +## Demo for the plotmodule header height fix. +## Left: plain PlotModuleUI. Right: PlotModuleUI(cards = TRUE), whose spliced +## nav bar drags bslib's .card-header min-height: 2.5rem into the header. +library(shiny) +devtools::load_all(quiet = TRUE) ## run from the package root + +ui <- bigPage( + title = "plotmodule header", + navbar = navbar(tags$b("plotmodule header height"), center = NULL, left = NULL), + sidebar = sidebar("Menu", sidebarItem("Demo", "demo-tab")), + settings = settings("Settings"), + bigTabs( + bigTabItem( + "demo-tab", + bslib::layout_columns( + col_widths = c(6, 6), + row_heights = list("400px"), + class = "p-3", + PlotModuleUI( + "plain", + title = "Plain header (cards = FALSE)", + info.text = "A normal plot module header.", + plotlib = "base", + download.fmt = c("png", "pdf"), + height = c(360, 800) + ), + PlotModuleUI( + "tabbed", + title = "Tabbed header (cards = TRUE)", + info.text = "Header with the spliced navset_card_pill nav bar.", + plotlib = c("base", "base"), + cards = TRUE, + card_names = c("Histogram", "Density"), + download.fmt = c("png", "pdf"), + height = c(360, 800) + ) + ) + ) + ) +) + +server <- function(input, output, session) { + PlotModuleServer("plain", + plotlib = "base", + func = function() { + hist(faithful$waiting, breaks = 20, col = "#3181de", border = "white", + main = "", xlab = "waiting time (min)") + } + ) + PlotModuleServer("tabbed", + plotlib = "base", card = 1, + func = function() { + hist(faithful$eruptions, breaks = 20, col = "#86A563", border = "white", + main = "", xlab = "eruption time (min)") + } + ) + PlotModuleServer("tabbed", + plotlib = "base", card = 2, + func = function() { + plot(density(faithful$eruptions), col = "#E45C00", lwd = 2, main = "", + xlab = "eruption time (min)") + } + ) +} + +shinyApp(ui, server, options = list(port = 8080, launch.browser = FALSE)) diff --git a/dev/screenshots/plotmodule-header-after.png b/dev/screenshots/plotmodule-header-after.png new file mode 100644 index 0000000..65eaa35 Binary files /dev/null and b/dev/screenshots/plotmodule-header-after.png differ diff --git a/dev/screenshots/plotmodule-header-before.png b/dev/screenshots/plotmodule-header-before.png new file mode 100644 index 0000000..854fbd1 Binary files /dev/null and b/dev/screenshots/plotmodule-header-before.png differ diff --git a/dev/screenshots/plotmodule-header-compare.png b/dev/screenshots/plotmodule-header-compare.png new file mode 100644 index 0000000..8858088 Binary files /dev/null and b/dev/screenshots/plotmodule-header-compare.png differ diff --git a/inst/assets/style.min.css b/inst/assets/style.min.css index fe3e212..f0734af 100644 --- a/inst/assets/style.min.css +++ b/inst/assets/style.min.css @@ -1 +1 @@ -html .cursor-pointer{cursor:pointer}html .bg-light-grey{background-color:#D2D2D2}html .bg-brand-blue{background-color:#004CA7}html .bg-pale-blue{background-color:#F7FAFD}html .bg-mid-blue{background-color:#3181DE}html .bg-light-blue{background-color:#6ABEEA}html .bg-dark-green{background-color:#86A563}html .bg-light-green{background-color:#ABD27E}html .bg-orange{background-color:#E45C00}html .bg-light-orange{background-color:#FFAE77}html .text-light-grey{color:#D2D2D2}html .text-mid-grey{color:#989898}html .text-mid-blue{color:#3181DE !important}html hr{background-color:#989898}html .w-8{width:8rem}html h4{font-weight:600;font-size:1.2em}#app.row{margin-left:0px;margin-right:0px}.bigdash-sidebar-shell{align-self:stretch;min-height:100%;height:auto;width:12rem;padding:0;padding-top:10px;border-right:1px solid #D2D2D2;background-color:aliceblue;position:relative}.sidebar-expanded{min-width:12rem}.sidebar-expanded>.sidebar{width:12rem;min-width:12rem;max-height:calc(100% - 300px);overflow-y:auto}.sidebar-label{font-size:22px;font-weight:700}.text-muted{color:#333 !important}.sidebar-help-title,[id$="sidebar-help-title"]{padding-top:10rem;margin-bottom:5px}.sidebar-help-content{padding:7px 0px}.sidebar-help-container,[id$="sidebar-help-container"]{width:11.5rem;font-size:12px;line-height:1.2em;background:url("img/mascotte-sc.png") no-repeat;background-size:5rem 5rem;background-position:3.5rem 5rem;position:absolute;bottom:5px}.sidebar-icon{margin-top:3px}.sidebar-collapsed{width:3rem;max-width:3rem}.sidebar-collapsed .sidebar-label{display:flex;flex-direction:column;align-items:center;margin-top:0;padding-top:.5rem}.sidebar-collapsed .sidebar-icon{order:-1;float:none;transform:rotate(180deg)}.sidebar-collapsed .sidebar-title{margin-top:1rem;writing-mode:vertical-rl;transform:rotate(180deg);max-height:calc(92vh - 8rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active-sidebar{border-left:0.3rem solid #E3A45A !important;background-color:#EFEFEF}.sidebar-menu{padding:.5rem 0rem .5rem 0.7rem;line-height:1.4rem;display:block;font-size:18px;font-weight:600;color:#333 !important}.sidebar-item{font-size:18px;font-weight:600;color:#333 !important}.sidebar-menu-item{padding:0 0.4rem 0 0.4rem;border-left:.3rem solid transparent;font-size:17px;line-height:1.1rem;font-weight:400;color:#333 !important}.tab-sidebar{border-left:.3rem solid transparent;padding:.4rem .7rem .5rem .4rem;display:block}.sidebar-menu-header.menu-promoted,hr.menu-promoted{display:none}.collapse.menu-promoted{display:block !important}.collapse.menu-promoted .sidebar-menu-item{padding:0;border-left:none;font-size:18px;font-weight:600}.sidebar-menu-header.menu-empty,hr.menu-empty,.collapse.menu-empty{display:none !important}.bigdash-settings-shell{align-self:stretch;min-height:100%;height:auto;width:12rem;padding:0;padding-top:10px;border-left:1px solid #D2D2D2;background-color:aliceblue}.settings-expanded{width:12rem;min-width:12rem;padding-left:3px}.settings-label{margin-top:0px;font-size:22px;font-weight:700}.settings-icon{float:right;margin-top:3px}.settings-collapsed{width:3rem;max-width:3rem}.settings-collapsed .settings-label{display:flex;flex-direction:column;align-items:center;margin-top:0;padding-top:.5rem}.settings-collapsed .settings-icon{order:-1;float:none;transform:rotate(180deg)}.settings-collapsed .settings-title{margin-top:1rem;writing-mode:vertical-rl;transform:rotate(180deg);max-height:calc(92vh - 8rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html,body{height:100%}html body{font-size:14px}.bigdash-page{min-height:100%;height:100%}.big-full-page{min-height:100vh}html .navbar{padding-top:2px;height:36px;border-bottom:2px solid #004CA7;padding-top:.25rem;padding-bottom:0}html .navbar-brand{padding-bottom:0}html .navbar .nav-link{padding-top:.25rem;padding-bottom:.25rem}html .navbar-custom{border-bottom:1px solid gray !important}html .navbar>.dropdown-toggle::after,html .nav-link.dropdown-toggle::after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f078";border-top:none;vertical-align:0}html .btn.dropdown-toggle::after{content:none}html .dropdown-menu.show{left:-7rem;background-color:#fff}html ul.nav.navbar-nav{display:inline-block !important}html ul.nav.navbar-nav>li{display:inline-block}html ul.nav.navbar-nav>li>a{padding:0px 6px 1px 6px;color:grey;background-color:#e7eaed;border-radius:5px;font-size:calc(100% - 12%)}html ul.nav.navbar-nav>li>a:hover ul.nav.navbar-nav>li>a:active{color:black;font-size:calc(100% - 20%)}html .nav-tabs{border:0}html .nav-tabs .nav-link{border:0;border-bottom:solid 0px;color:#b8b8b8;background-color:transparent}html .nav-tabs .nav-link.active{border-bottom:solid 1px;color:#000;background-color:transparent}html .big-tabs{line-height:1.1em}html .big-tab{padding:10px 15px}html div.dataTables_wrapper div.dataTables_filter{text-align:left}html div.dataTables_wrapper div.dataTables_filter input{width:350px;background-color:#F7FAFD}html table.dataTable{border-collapse:collapse !important}html table.dataTable td,html table.dataTable th{border-bottom:solid 1px #aaa !important;vertical-align:middle}html table.dataTable>thead>tr>th{font-size:13px;padding:0px 0px 4px 0px;line-height:1em}html table.dataTable>tbody>tr>td{font-size:13px;padding:5px}html .table.dataTable tbody td.active,html .table.dataTable tbody tr.active td{background-color:#e9ecef;color:black;font-weight:600}html table.dataTable>tbody>tr.selected>*{--dt-row-selected: 217, 229, 248, 0.8;--dt-row-selected-text: 0, 0, 0}html table.dataTable>tbody>tr.selected:hover>*{background-color:rgba(217,229,248,0.99)}html table.dataTable>tbody>tr:hover>*{background-color:#fff}html .popup-table div.dataTables_wrapper div.dataTables_filter{text-align:left;font-size:18px}html .popup-table div.dataTables_info{font-size:18px}html .popup-table table.dataTable>thead>tr>th{font-size:18px}html .popup-table table.dataTable>tbody>tr>td{font-size:16px;padding:7px}html .btn-success,html .btn-primary,html .btn-info,html .btn-warning,html .btn-danger,html .btn-dark,html .btn-secondary{color:white}html .btn-outline-primary:hover{color:white}html .btn-outline-primary-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-primary-hover:hover{border-color:#3181DE;color:#3181DE;background-color:transparent}html .btn-outline-info-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-info-hover:hover{border-color:#6ABEEA;color:#6ABEEA;background-color:transparent}html .btn-outline-danger-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-danger-hover:hover{border-color:#BF616A;color:#BF616A;background-color:transparent}html .btn-outline-warning-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-warning-hover:hover{border-color:#E3A45A;color:#E3A45A;background-color:transparent}html .btn-outline-dark-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-dark-hover:hover{border-color:#000;color:#000;background-color:transparent}html .btn-outline-success-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-success-hover:hover{border-color:#86A563;color:#86A563;background-color:transparent}html .btn{--bs-btn-border-radius: 6px;--bs-btn-padding-x: 1.2em;--bs-btn-padding-y: 0.6em}html .btn.btn-circle-xs{width:19px;height:19px;font-size:13px;line-height:0.1;padding:1px 0px;text-align:center}html .btn-circle-xs,html .btn-circle-xs:focus{background:#FFFFFF;color:#DDD;text-shadow:0 0 0px #ccc;border:0px;border-radius:3px !important}html .btn-circle-xs:hover{background-color:#fff;color:#444;border:0px;border-radius:3px}.tick{opacity:0;transition:opacity 0.5s ease-in-out}.show-tick .tick{opacity:1}.selectize-input{word-break:break-word}.selectize-dropdown .option{word-break:break-word}.hover-dropdown{position:relative;display:inline-flex;align-items:center;justify-content:center}.hover-dropdown-content{display:none;position:absolute;right:0;top:100%;background-color:#fff;font-size:0.95em;border:1px solid rgba(0,0,0,0.175);border-radius:0.375rem;z-index:1}.hover-dropdown-content .custom-item{color:black;padding:12px 16px;text-decoration:none;display:block}.hover-dropdown:hover .hover-dropdown-content{display:block}.hover-dropdown-button{font-size:25px;color:#3181DE}html .card{--bs-card-spacer-y: 0.6rem !important}html .card-header{border-bottom:0px !important;height:33px}html .card-footer{background-color:#F7FAFD;padding:2px 0 0 2px;height:3em !important;max-height:3em !important;min-height:3em !important;display:none}html .caption{font-size:13px;font-weight:400;line-height:1.1em;margin:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}html .caption:hover{overflow:auto}html .caption2{font-size:22px;font-weight:400;line-height:1.1em;padding:2rem 0rem 0rem 0rem}html .form-check.form-switch{font-size:1em;float:left}html .form-check-input:checked{background-color:#4081dc;border-color:#b8ddff}.nav-pills .nav-link{color:#888888}.nav-pills .nav-link.active{color:black;background-color:#FFFFFF}.dropdown-menu{margin:5px 1px !important}.dropdown-menu.show{font-size:1.1em;box-shadow:0px 0px 15px #444;left:-0% !important}.dropdown-menu .form-group{margin-bottom:0rem}.dropdown-items{margin:10px}.popover-body{border:1px solid;border-color:var(--bs-border-color-translucent);border-radius:.375rem}.btn-active{background-color:#fff !important;color:#444 !important;border:0px !important}.popover{max-width:500px;min-width:180px}html .modal-title{margin-right:auto;margin-left:auto;margin-top:-5px;margin-bottom:5px;font-size:2em;font-weight:600}html .modal-dialog{box-shadow:10px 10px 30px #999;display:flex !important;margin:auto}html .modal-dialog.modal-lg{width:640px;justify-content:center;align-items:center}html .modal-dialog.modal-sm{width:300px;justify-content:center;align-items:center}html .modal-footer .btn{margin-left:5px;margin-bottom:0;font-size:14px}html .modal-content{border:0}html .modal-content .well{font-size:1.3em;line-height:1.2em;width:100%}html .modal-backdrop{background-color:#FFF}html .modal-backdrop.show,html .modal-backdrop.in{opacity:0.85}html .modal-body{height:auto}html .plotmodule{padding:0px}html .plotmodule-header{padding:5px 6px 5px 12px;border-bottom:1px solid #ccc}html .plotmodule-header .card-header{height:auto;padding:0}html .plotmodule-title{font-size:16px;margin-top:-1px}html .plotmodule-info{padding:5px;font-size:15px;line-height:1.2em}html .plotmodule-references{padding-left:10px}html .popup-modal>div{margin-left:auto;margin-right:auto}html .popup-modal .modal-title{font-size:2.5em}html .popup-modal .modal-footer{display:none}html .popup-plot>div{margin-left:auto;margin-right:auto}html .tablemodule{padding:0px}html .tablemodule-header{padding:5px 6px 4px 12px;border-bottom:1px solid #ccc}html .tablemodule-title{font-size:16px;margin-top:-1px}html .tablemodule-info{padding:5px;font-size:15px;line-height:1.2em}html .popup-table{width:90%;margin-left:auto;margin-right:auto}html .popup-table>div{margin-left:auto;margin-right:auto}html .popup-table-caption{width:90%;margin-left:auto;margin-right:auto} +html .cursor-pointer{cursor:pointer}html .bg-light-grey{background-color:#D2D2D2}html .bg-brand-blue{background-color:#004CA7}html .bg-pale-blue{background-color:#F7FAFD}html .bg-mid-blue{background-color:#3181DE}html .bg-light-blue{background-color:#6ABEEA}html .bg-dark-green{background-color:#86A563}html .bg-light-green{background-color:#ABD27E}html .bg-orange{background-color:#E45C00}html .bg-light-orange{background-color:#FFAE77}html .text-light-grey{color:#D2D2D2}html .text-mid-grey{color:#989898}html .text-mid-blue{color:#3181DE !important}html hr{background-color:#989898}html .w-8{width:8rem}html h4{font-weight:600;font-size:1.2em}#app.row{margin-left:0px;margin-right:0px}.bigdash-sidebar-shell{align-self:stretch;min-height:100%;height:auto;width:12rem;padding:0;padding-top:10px;border-right:1px solid #D2D2D2;background-color:aliceblue;position:relative}.sidebar-expanded{min-width:12rem}.sidebar-expanded>.sidebar{width:12rem;min-width:12rem;max-height:calc(100% - 300px);overflow-y:auto}.sidebar-label{font-size:22px;font-weight:700}.text-muted{color:#333 !important}.sidebar-help-title,[id$="sidebar-help-title"]{padding-top:10rem;margin-bottom:5px}.sidebar-help-content{padding:7px 0px}.sidebar-help-container,[id$="sidebar-help-container"]{width:11.5rem;font-size:12px;line-height:1.2em;background:url("img/mascotte-sc.png") no-repeat;background-size:5rem 5rem;background-position:3.5rem 5rem;position:absolute;bottom:5px}.sidebar-icon{margin-top:3px}.sidebar-collapsed{width:3rem;max-width:3rem}.sidebar-collapsed .sidebar-label{display:flex;flex-direction:column;align-items:center;margin-top:0;padding-top:.5rem}.sidebar-collapsed .sidebar-icon{order:-1;float:none;transform:rotate(180deg)}.sidebar-collapsed .sidebar-title{margin-top:1rem;writing-mode:vertical-rl;transform:rotate(180deg);max-height:calc(92vh - 8rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active-sidebar{border-left:0.3rem solid #E3A45A !important;background-color:#EFEFEF}.sidebar-menu{padding:.5rem 0rem .5rem 0.7rem;line-height:1.4rem;display:block;font-size:18px;font-weight:600;color:#333 !important}.sidebar-item{font-size:18px;font-weight:600;color:#333 !important}.sidebar-menu-item{padding:0 0.4rem 0 0.4rem;border-left:.3rem solid transparent;font-size:17px;line-height:1.1rem;font-weight:400;color:#333 !important}.tab-sidebar{border-left:.3rem solid transparent;padding:.4rem .7rem .5rem .4rem;display:block}.sidebar-menu-header.menu-promoted,hr.menu-promoted{display:none}.collapse.menu-promoted{display:block !important}.collapse.menu-promoted .sidebar-menu-item{padding:0;border-left:none;font-size:18px;font-weight:600}.sidebar-menu-header.menu-empty,hr.menu-empty,.collapse.menu-empty{display:none !important}.bigdash-settings-shell{align-self:stretch;min-height:100%;height:auto;width:12rem;padding:0;padding-top:10px;border-left:1px solid #D2D2D2;background-color:aliceblue}.settings-expanded{width:12rem;min-width:12rem;padding-left:3px}.settings-label{margin-top:0px;font-size:22px;font-weight:700}.settings-icon{float:right;margin-top:3px}.settings-collapsed{width:3rem;max-width:3rem}.settings-collapsed .settings-label{display:flex;flex-direction:column;align-items:center;margin-top:0;padding-top:.5rem}.settings-collapsed .settings-icon{order:-1;float:none;transform:rotate(180deg)}.settings-collapsed .settings-title{margin-top:1rem;writing-mode:vertical-rl;transform:rotate(180deg);max-height:calc(92vh - 8rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html,body{height:100%}html body{font-size:14px}.bigdash-page{min-height:100%;height:100%}.big-full-page{min-height:100vh}html .navbar{padding-top:2px;height:36px;border-bottom:2px solid #004CA7;padding-top:.25rem;padding-bottom:0}html .navbar-brand{padding-bottom:0}html .navbar .nav-link{padding-top:.25rem;padding-bottom:.25rem}html .navbar-custom{border-bottom:1px solid gray !important}html .navbar>.dropdown-toggle::after,html .nav-link.dropdown-toggle::after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f078";border-top:none;vertical-align:0}html .btn.dropdown-toggle::after{content:none}html .dropdown-menu.show{left:-7rem;background-color:#fff}html ul.nav.navbar-nav{display:inline-block !important}html ul.nav.navbar-nav>li{display:inline-block}html ul.nav.navbar-nav>li>a{padding:0px 6px 0px 6px;color:grey;background-color:#e7eaed;border-radius:5px;font-size:calc(100% - 12%)}html ul.nav.navbar-nav>li>a:hover ul.nav.navbar-nav>li>a:active{color:black;font-size:calc(100% - 20%)}html .nav-tabs{border:0}html .nav-tabs .nav-link{border:0;border-bottom:solid 0px;color:#b8b8b8;background-color:transparent}html .nav-tabs .nav-link.active{border-bottom:solid 1px;color:#000;background-color:transparent}html .big-tabs{line-height:1.1em}html .big-tab{padding:10px 15px}html div.dataTables_wrapper div.dataTables_filter{text-align:left}html div.dataTables_wrapper div.dataTables_filter input{width:350px;background-color:#F7FAFD}html table.dataTable{border-collapse:collapse !important}html table.dataTable td,html table.dataTable th{border-bottom:solid 1px #aaa !important;vertical-align:middle}html table.dataTable>thead>tr>th{font-size:13px;padding:0px 0px 4px 0px;line-height:1em}html table.dataTable>tbody>tr>td{font-size:13px;padding:5px}html .table.dataTable tbody td.active,html .table.dataTable tbody tr.active td{background-color:#e9ecef;color:black;font-weight:600}html table.dataTable>tbody>tr.selected>*{--dt-row-selected: 217, 229, 248, 0.8;--dt-row-selected-text: 0, 0, 0}html table.dataTable>tbody>tr.selected:hover>*{background-color:rgba(217,229,248,0.99)}html table.dataTable>tbody>tr:hover>*{background-color:#fff}html .popup-table div.dataTables_wrapper div.dataTables_filter{text-align:left;font-size:18px}html .popup-table div.dataTables_info{font-size:18px}html .popup-table table.dataTable>thead>tr>th{font-size:18px}html .popup-table table.dataTable>tbody>tr>td{font-size:16px;padding:7px}html .btn-success,html .btn-primary,html .btn-info,html .btn-warning,html .btn-danger,html .btn-dark,html .btn-secondary{color:white}html .btn-outline-primary:hover{color:white}html .btn-outline-primary-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-primary-hover:hover{border-color:#3181DE;color:#3181DE;background-color:transparent}html .btn-outline-info-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-info-hover:hover{border-color:#6ABEEA;color:#6ABEEA;background-color:transparent}html .btn-outline-danger-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-danger-hover:hover{border-color:#BF616A;color:#BF616A;background-color:transparent}html .btn-outline-warning-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-warning-hover:hover{border-color:#E3A45A;color:#E3A45A;background-color:transparent}html .btn-outline-dark-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-dark-hover:hover{border-color:#000;color:#000;background-color:transparent}html .btn-outline-success-hover{background-color:transparent;border-color:#D2D2D2;color:#D2D2D2}html .btn-outline-success-hover:hover{border-color:#86A563;color:#86A563;background-color:transparent}html .btn{--bs-btn-border-radius: 6px;--bs-btn-padding-x: 1.2em;--bs-btn-padding-y: 0.6em}html .btn.btn-circle-xs{width:19px;height:19px;font-size:13px;line-height:0.1;padding:1px 0px;text-align:center}html .btn-circle-xs,html .btn-circle-xs:focus{background:#FFFFFF;color:#DDD;text-shadow:0 0 0px #ccc;border:0px;border-radius:3px !important}html .btn-circle-xs:hover{background-color:#fff;color:#444;border:0px;border-radius:3px}.tick{opacity:0;transition:opacity 0.5s ease-in-out}.show-tick .tick{opacity:1}.selectize-input{word-break:break-word}.selectize-dropdown .option{word-break:break-word}.hover-dropdown{position:relative;display:inline-flex;align-items:center;justify-content:center}.hover-dropdown-content{display:none;position:absolute;right:0;top:100%;background-color:#fff;font-size:0.95em;border:1px solid rgba(0,0,0,0.175);border-radius:0.375rem;z-index:1}.hover-dropdown-content .custom-item{color:black;padding:12px 16px;text-decoration:none;display:block}.hover-dropdown:hover .hover-dropdown-content{display:block}.hover-dropdown-button{font-size:25px;color:#3181DE}html .card{--bs-card-spacer-y: 0.6rem !important}html .card-header{border-bottom:0px !important;height:33px}html .card-footer{background-color:#F7FAFD;padding:2px 0 0 2px;height:3em !important;max-height:3em !important;min-height:3em !important;display:none}html .caption{font-size:13px;font-weight:400;line-height:1.1em;margin:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}html .caption:hover{overflow:auto}html .caption2{font-size:22px;font-weight:400;line-height:1.1em;padding:2rem 0rem 0rem 0rem}html .form-check.form-switch{font-size:1em;float:left}html .form-check-input:checked{background-color:#4081dc;border-color:#b8ddff}.nav-pills .nav-link{color:#888888}.nav-pills .nav-link.active{color:black;background-color:#FFFFFF}.dropdown-menu{margin:5px 1px !important}.dropdown-menu.show{font-size:1.1em;box-shadow:0px 0px 15px #444;left:-0% !important}.dropdown-menu .form-group{margin-bottom:0rem}.dropdown-items{margin:10px}.popover-body{border:1px solid;border-color:var(--bs-border-color-translucent);border-radius:.375rem}.btn-active{background-color:#fff !important;color:#444 !important;border:0px !important}.popover{max-width:500px;min-width:180px}html .modal-title{margin-right:auto;margin-left:auto;margin-top:-5px;margin-bottom:5px;font-size:2em;font-weight:600}html .modal-dialog{box-shadow:10px 10px 30px #999;display:flex !important;margin:auto}html .modal-dialog.modal-lg{width:640px;justify-content:center;align-items:center}html .modal-dialog.modal-sm{width:300px;justify-content:center;align-items:center}html .modal-footer .btn{margin-left:5px;margin-bottom:0;font-size:14px}html .modal-content{border:0}html .modal-content .well{font-size:1.3em;line-height:1.2em;width:100%}html .modal-backdrop{background-color:#FFF}html .modal-backdrop.show,html .modal-backdrop.in{opacity:0.85}html .modal-body{height:auto}html .plotmodule{padding:0px}html .plotmodule-header{padding:5px 6px 5px 12px;border-bottom:1px solid #ccc}html .plotmodule-header .card-header{height:auto;min-height:0;padding:0}html .plotmodule-title{font-size:16px;margin-top:-1px}html .plotmodule-info{padding:5px;font-size:15px;line-height:1.2em}html .plotmodule-references{padding-left:10px}html .popup-modal>div{margin-left:auto;margin-right:auto}html .popup-modal .modal-title{font-size:2.5em}html .popup-modal .modal-footer{display:none}html .popup-plot>div{margin-left:auto;margin-right:auto}html .tablemodule{padding:0px}html .tablemodule-header{padding:5px 6px 4px 12px;border-bottom:1px solid #ccc}html .tablemodule-title{font-size:16px;margin-top:-1px}html .tablemodule-info{padding:5px;font-size:15px;line-height:1.2em}html .popup-table{width:90%;margin-left:auto;margin-right:auto}html .popup-table>div{margin-left:auto;margin-right:auto}html .popup-table-caption{width:90%;margin-left:auto;margin-right:auto} diff --git a/scss/modules/_navbar.scss b/scss/modules/_navbar.scss index 589570d..13691cb 100644 --- a/scss/modules/_navbar.scss +++ b/scss/modules/_navbar.scss @@ -50,7 +50,7 @@ html { } ul.nav.navbar-nav > li > a { - padding: 0px 6px 1px 6px; + padding: 0px 6px 0px 6px; color: grey; background-color: #e7eaed; border-radius: 5px; diff --git a/scss/modules/_plotmodule.scss b/scss/modules/_plotmodule.scss index febefbd..23b07dd 100644 --- a/scss/modules/_plotmodule.scss +++ b/scss/modules/_plotmodule.scss @@ -14,8 +14,15 @@ html { // the gsub misses and card-header survives, nesting a full 33px card header // inside the header. Neutralise it here: class-order independent, unlike the // gsub. + // + // min-height matters as much as height: bslib's own + // `.bslib-card .card-header` sets min-height: 2.5rem, which height:auto does + // not defeat. Left in, it floors the spliced nav at 40px around a 24px pill + // bar, so any plot module built with cards = TRUE (the dynamic/static + // toggles) renders a ~51px header where a plain one is ~32px. .plotmodule-header .card-header { height: auto; + min-height: 0; padding: 0; } diff --git a/scss/modules/_settings.scss b/scss/modules/_settings.scss index 88cdc0c..1a0ba10 100644 --- a/scss/modules/_settings.scss +++ b/scss/modules/_settings.scss @@ -4,7 +4,6 @@ height: auto; width: 12rem; padding: 0; - padding-top: 10px; border-left: 1px solid $light-grey; background-color: aliceblue; } diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss index fe5bbaf..67a60c4 100644 --- a/scss/modules/_sidebar.scss +++ b/scss/modules/_sidebar.scss @@ -9,7 +9,6 @@ height: auto; width: 12rem; padding: 0; - padding-top: 10px; border-right: 1px solid $light-grey; background-color: aliceblue; position: relative;