From 08e883533fb9b1ba5abbede64c9322dea4b12de2 Mon Sep 17 00:00:00 2001 From: C0d3v Date: Sat, 7 Feb 2026 18:53:10 +0100 Subject: [PATCH] Rework and fix css and style --- ui.R | 458 +++++++++++++++++++++++++++++------------------------------ 1 file changed, 224 insertions(+), 234 deletions(-) diff --git a/ui.R b/ui.R index 0ff8d2b..3c124b5 100644 --- a/ui.R +++ b/ui.R @@ -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)