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

458
ui.R
View File

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