Add Styling to right card

This commit is contained in:
2025-12-14 14:03:30 +01:00
parent 361c56fa36
commit bfd329bdf8

View File

@@ -55,18 +55,47 @@ auswahlmöglichkeiten <- crime_json %>%
#User interface definitions #User interface definitions
ui <- function() { ui <- function() {
page_fillable( page_fillable(
h1("Kriminalstatistik Hamburg",
style = "color: #006400;",
class = "ms-4 display-4"),# ms-4 sorgt für den Abstand links
navset_card_tab( navset_card_tab(
nav_panel("Karte", nav_panel("Karte",
page_sidebar( page_sidebar(
layout_columns( layout_columns(
leafletOutput("hhmap"), leafletOutput("hhmap"),
card( card(
div(
# h3 oder div dient als Block-Element und richtet seinen Inhalt (das span) rechtsbündig aus
style = "text-align: right; width: 100%; ",
# Der Text wird in ein span verpackt und erhält die Border.
# Ein span nimmt nur den Platz ein, den der Inhalt benötigt (inline).
tags$span(
"2024",
style = "
border: 1px solid rgba(40,70,94,0.1);
border-radius: 5px;
padding: 5px 10px 5px 10px;
background-color: #eeeeee;
"
# padding ist der abstand an leerer Fläche in der reihenfolge top right bottom left
# farbe rgba ist die exakte Farbe der Trennlinien und Card-Umrandungen aus der App
)
),
div(
class = "d-flex align-items-end gap-2",
h5(strong("Bezirk:"), style = "margin-bottom: 0;"),
textOutput("txt_map_selection_bezirk"), textOutput("txt_map_selection_bezirk"),
),
div(
class = "d-flex align-items-end gap-2",
h5(strong("Stadtteil:"), style = "margin-bottom: 0;"),
textOutput("txt_map_selection_stadtteil"), textOutput("txt_map_selection_stadtteil"),
"2024", ),
tableOutput("tbl_2024"), plotOutput("grph_top3"),
#tableOutput("tbl_2024"),
), ),
col_widths = c(7, 5), col_widths = c(8, 4),
), ),
sidebar = sidebar( sidebar = sidebar(
radioButtons( radioButtons(