Millicool/shiny-app
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Rework and fix css and style

Browse Source
This commit is contained in:
C0d3v
2026-02-07 18:53:10 +01:00
parent cee19cefe0
commit 08e883533f
1 changed files with 224 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
ui.R
View File

@@ -9,15 +9,106 @@ ui <- function() {
tags$head(
tags$style(
HTML("
body {
background-color: #f4f7f9;
/*
width: 1920px;
height: 1000px;
*/
transform-origin: 0 0;
/*
overflow: hidden;
position: absolute;
*/
}
.html-fill-container > .html-fill-item.bslib-mb-spacing {
border-style: none;
box-shadow: none;
}
.bslib-card .card-header {
background: #f4f7f9;
padding-bottom: 20px;
border: none;
}
.nav.nav-tabs.card-header-tabs {
display: flex;
gap: 20px;
}
.nav-item, .nav-item:focus {
background: var(--bs-card-color);
outline: none;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
overflow: hidden;
will-change: transform, box-shadow;
}
.nav-item:hover {
outline: none;
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
transform: translateY(-4px);
transition: 0.3s;
}
.nav-link.active {
outline: none;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.tab-content > .active.html-fill-container {
background: #f4f7f9;
margin: 0;
padding: 0;
}
.bslib-sidebar-layout > .sidebar {
height: 100%;
outline: none;
border-right: none;
padding-bottom: 20px;
padding-right: 10px;
}
.sidebar-content.bslib-gap-spacing {
height: 100%;
background: #fff;
border-radius: 0 12px 12px 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.main.bslib-gap-spacing.html-fill-container {
outline: none;
padding-top: 0;
padding-bottom: 20px;
padding-left: 10px;
}
.bslib-grid-item.bslib-gap-spacing.html-fill-container {
background: #fff;
border-radius: 12px;
border: 10px solid white;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
overflow: hidden;
}
.bslib-card .card-body {
padding: 0;
}
#grph_top3 {
height: 100% !important;
}
.leaflet .legend {
opacity: 1;
background: white;
}
.selectize-input {
border-radius: 12px;
border: 1px solid #e2e8f0;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.02);
padding: 10px 15px;
}
.selectize-input.focus {
border-radius: 12px;
}
.selectize-dropdown-content .option {
border-bottom: 1px solid #dee2e6; /* Die Trennlinie */
padding: 8px 10px; /* Abstand zwischen Text und Linie */
border-bottom: 1px solid #dee2e6;
padding: 8px 10px;
}
.legend {
background: white !important; /* Der Hintergrund der Legenden-Box */
opacity: 1 !important; /* Die Box selbst ist nicht transparent */
}
/* Erzwingt den Dropdown-Pfeil auch bei Multiple Inputs */
.selectize-control.multi .selectize-input:after {
content: ' ';
display: block;
@@ -31,235 +122,134 @@ ui <- function() {
border-width: 5px 5px 0 5px;
border-color: #333 transparent transparent transparent;
}
/* Platz für den Pfeil lassen, damit Text nicht darunter rutscht */
.selectize-control.multi .selectize-input {
padding-right: 35px !important;
}
/* 1. GRUND-LAYOUT */
body {
background-color: #f4f7f9 !important; /* Ganz leichtes Blaugrau für Tiefe */
transform-origin: 0 0; /* Align to top-left for math accuracy */
width: 1920px; /* Match your dev monitor */
height: 1000px;
overflow: hidden;
position: absolute;
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header {
display: none;
}
.shiny-plot-output {
width: inherit !important;
height: inherit !important;
max-width: none !important;
}
#app-container {
width: 1920px;
height: 1080px;
}
/* 2. DIE KARTE (HHMAP) */
#hhmap {
border-radius: 20px !important;
box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
border: 5px solid white !important;
overflow: hidden !important;
}
/* NAVSET CARD TABS (Modern & Fluid) */
/* Match the outer card to your existing 20px radius */
.card.bslib-card.bslib-navset {
border-radius: 20px !important;
border: none !important;
}
/* The Header area where tabs sit */
.card-header.bslib-nav-tabs-spacer {
background-color: transparent !important;
border-bottom: 1px solid #f0f0f0 !important;
padding: 10px 15px !important;
}
/* Force the card body to hide all overflow (Vertical and Horizontal) */
.card-body {
overflow: hidden !important;
display: flex;
flex-direction: column;
}
/* Ensure the plotly container doesn't create internal scrolling */
.js-plotly-plot, .plot-container {
overflow: hidden !important;
}
/* Target the specific plot ID to be extra safe */
#grph_top3 {
overflow: hidden !important;
}
/* Individual Tab Styling - Rounded and Clean */
.nav-tabs .nav-link {
border: none !important;
border-radius: 12px !important; /* Slightly smaller than card for nested look */
margin-right: 8px;
color: #495057 !important; /* Muted grey */
padding: 8px 18px !important;
font-weight: 500;
background-color: transparent;
}
/* Active Tab - No movement, just color change */
.nav-tabs .nav-link.active {
background-color: #f4f7f9 !important; /* Matches your body background */
color: #1a1a1a !important;
font-weight: 600;
}
/* Clean up the tab content area */
.tab-content {
padding: 15px !important;
}
/* 3. ALLE CARDS (Diagramme & Container) */
.card {
border-radius: 20px !important;
border: none !important;
box-shadow: 0 10px 30px rgba(149, 157, 165, 0.15) !important;
background-color: #ffffff !important;
transition: box-shadow 0.3s ease;
}
/* 4. SIDEBAR & INPUTS */
.sidebar {
background-color: #ffffff !important;
border-right: none !important;
box-shadow: 5px 0 25px rgba(0,0,0,0.03) !important;
border-radius: 0 25px 25px 0 !important;
}
.selectize-input {
border-radius: 12px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.02) !important;
padding: 10px 15px !important;
}
.selectize-input.focus {
border-color: #3182bd !important;
box-shadow: 0 0 0 3px rgba(49, 130, 189, 0.1) !important;
}
/* 5. BUTTONS (Falls du welche hast) */
.btn {
border-radius: 12px !important;
font-weight: 600 !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
transition: background-color 0.2s, box-shadow 0.2s !important;
}
.btn:active {
transform: scale(0.98); /* Drück-Effekt */
}
/* 1. Das gesamte Accordion-Container-Design */
.accordion {
border: none !important;
background: transparent !important;
}
/* 2. Die einzelnen Accordion-Items (die 'Streifen') */
.accordion-item {
border: none !important;
margin-bottom: 15px !important; /* Abstand zwischen den Elementen für den Schweb-Effekt */
border-radius: 15px !important; /* Abgerundete Ecken für jedes Item */
box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; /* Weicher Schatten */
overflow: hidden;
background-color: #ffffff !important;
transition: box-shadow 0.2s ease;
}
.accordion-item:hover {
transform: none !important;
box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}
/* Erzeugt dauerhafte Fettschrift für alle Accordion-Titel */
.accordion-button {
font-weight: 600 !important; /* Extra fett */
font-size: 16px !important;
color: #1a1a1a !important;
background-color: #ffffff !important;
border: none !important;
box-shadow: none !important;
}
/* Wenn das Accordion ausgeklappt ist */
.accordion-button:not(.collapsed) {
font-weight: 600 !important;
background-color: #fcfcfc !important;
color: #000000 !important;
}
/* 4. Der Inhaltsbereich (wenn es offen ist) */
.accordion-body {
padding: 20px !important;
font-size: 14px;
line-height: 1.6;
color: #555;
background-color: #ffffff !important;
border-top: 1px solid #f0f0f0 !important; /* Dezente Trennung zum Header */
}
/* Speziell für geschachtelte Accordions (die inneren Ebenen) */
.accordion .accordion {
margin-top: 10px;
padding: 10px;
background-color: #fcfcfc !important; /* Leichter Kontrast zur äußeren Card */
border-radius: 15px;
}
/* Den Text in den Unterpunkten etwas eleganter machen */
.accordion-body p {
color: #444;
line-height: 1.7;
font-size: 15px;
padding: 5px;
}
.accordion-button h4 {
font-weight: 600 !important;
margin: 0 !important;
transition: color 0.2s ease; /* Macht den Farbwechsel beim Klicken weicher */
color: #1a1a1a !important;
}
/* Den aktiven Header der Unterpunkte hervorheben */
.accordion-button:not(.collapsed) h4 {
color: #2b74a9 !important;
}
/* 4. Der Hover-Effekt (Damit es beim Drüberfahren reagiert) */
.accordion-button:hover,
.accordion-button:hover h4 {
color: #666666 !important; /* Ein weiches Dunkelgrau beim Hovern */
}
.accordion-scroll-container {
/* This says: Max height is 70% of the screen height */
max-height: 65vh !important;
/* Scrollbar only appears when content is too long */
overflow-y: auto !important;
overflow-x: hidden !important;
/* Smoothness */
padding-right: 5px;
/* Adds a little 'breathing room' at the bottom so the last
panel isn't hugging the edge of the card */
padding-bottom: 50px !important;
/* Ensures the container stays fluid */
display: block;
}
.accordion-scroll-container::-webkit-scrollbar-thumb {
background: #e2e8f0; /* Very soft grey */
border: 2px solid #ffffff; /* Gives it a 'floating' look */
border-radius: 10px;
}
")
"
)
# /* 1. Das gesamte Accordion-Container-Design */
# .accordion {
# border: none !important;
# background: transparent !important;
# }
# /* 2. Die einzelnen Accordion-Items (die 'Streifen') */
# .accordion-item {
# border: none !important;
# margin-bottom: 15px !important; /* Abstand zwischen den Elementen für den Schweb-Effekt */
# border-radius: 15px !important; /* Abgerundete Ecken für jedes Item */
# box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; /* Weicher Schatten */
# overflow: hidden;
# background-color: #ffffff !important;
# transition: box-shadow 0.2s ease;
# }
# .accordion-item:hover {
# transform: none !important;
# box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
# }
# /* Erzeugt dauerhafte Fettschrift für alle Accordion-Titel */
# .accordion-button {
# font-weight: 600 !important; /* Extra fett */
# font-size: 16px !important;
# color: #1a1a1a !important;
# background-color: #ffffff !important;
# border: none !important;
# box-shadow: none !important;
# }
# /* Wenn das Accordion ausgeklappt ist */
# .accordion-button:not(.collapsed) {
# font-weight: 600 !important;
# background-color: #fcfcfc !important;
# color: #000000 !important;
# }
# /* 4. Der Inhaltsbereich (wenn es offen ist) */
# .accordion-body {
# padding: 20px !important;
# font-size: 14px;
# line-height: 1.6;
# color: #555;
# background-color: #ffffff !important;
# border-top: 1px solid #f0f0f0 !important; /* Dezente Trennung zum Header */
# }
# /* Speziell für geschachtelte Accordions (die inneren Ebenen) */
# .accordion .accordion {
# margin-top: 10px;
# padding: 10px;
# background-color: #fcfcfc !important; /* Leichter Kontrast zur äußeren Card */
# border-radius: 15px;
# }
# /* Den Text in den Unterpunkten etwas eleganter machen */
# .accordion-body p {
# color: #444;
# line-height: 1.7;
# font-size: 15px;
# padding: 5px;
# }
# .accordion-button h4 {
# font-weight: 600 !important;
# margin: 0 !important;
# transition: color 0.2s ease; /* Macht den Farbwechsel beim Klicken weicher */
# color: #1a1a1a !important;
# }
# /* Den aktiven Header der Unterpunkte hervorheben */
# .accordion-button:not(.collapsed) h4 {
# color: #2b74a9 !important;
# }
# /* 4. Der Hover-Effekt (Damit es beim Drüberfahren reagiert) */
# .accordion-button:hover,
# .accordion-button:hover h4 {
# color: #666666 !important; /* Ein weiches Dunkelgrau beim Hovern */
# }
# .accordion-scroll-container {
# /* This says: Max height is 70% of the screen height */
# max-height: 65vh !important;
# /* Scrollbar only appears when content is too long */
# overflow-y: auto !important;
# overflow-x: hidden !important;
# /* Smoothness */
# padding-right: 5px;
# /* Adds a little 'breathing room' at the bottom so the last
# panel isn't hugging the edge of the card */
# padding-bottom: 50px !important;
# /* Ensures the container stays fluid */
# display: block;
# }
# .accordion-scroll-container::-webkit-scrollbar-thumb {
# background: #e2e8f0; /* Very soft grey */
# border: 2px solid #ffffff; /* Gives it a 'floating' look */
# border-radius: 10px;
# }
# ")
)
),
tags$script(HTML("
$(document).on('shiny:connected', function() {
var targetWidth = 1920;
var targetHeight = 1000;
function scaleApp() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
// Calculate both ratios
var widthRatio = windowWidth / targetWidth;
var heightRatio = windowHeight / targetHeight;
// Use the smaller ratio to ensure the app fits entirely
var scale = Math.min(widthRatio, heightRatio);
$('body').css({
'transform': 'scale(' + scale + ')',
'width': targetWidth + 'px',
'height': targetHeight + 'px'
});
}
$(window).on('resize', scaleApp);
scaleApp();
});"
)),
# tags$script(HTML("
# $(document).on('shiny:connected', function() {
# var targetWidth = 1920;
# var targetHeight = 1000;
# function scaleApp() {
# var windowWidth = $(window).width();
# var windowHeight = $(window).height();
#
# // Calculate both ratios
# var widthRatio = windowWidth / targetWidth;
# var heightRatio = windowHeight / targetHeight;
#
# // Use the smaller ratio to ensure the app fits entirely
# var scale = Math.min(widthRatio, heightRatio);
#
# $('body').css({
# 'transform': 'scale(' + scale + ')',
# 'width': targetWidth + 'px',
# 'height': targetHeight + 'px'
# });
# }
# $(window).on('resize', scaleApp);
# scaleApp();
# });"
# )),
navset_card_tab(
nav_panel("Karte",
page_sidebar(
@@ -289,9 +279,9 @@ ui <- function() {
style = "font-weight: 600; margin-top: 0px; margin-bottom: 25px; letter-spacing: -0.5px;"
),
uiOutput("txt_map_selection_bezirk"),
uiOutput("txt_map_selection_stadtteil"),
plotlyOutput("grph_top3", width = "484px", height = "667px")
)
uiOutput("txt_map_selection_stadtteil")
),
plotlyOutput("grph_top3"),
),
col_widths = breakpoints(
sm = c(12, 12), # Auf kleinen Bildschirmen: untereinander (100% Breite)