Enhance UI and functionality for admin dashboard and user management
- Update `_base_context` to include `active_nav` for dynamic navigation highlighting. - Revamp `base.html` to improve header layout and navigation links for better user experience. - Redesign `dashboard.html` to include statistics for new and edited articles, enhancing visibility of content changes. - Improve `users.html` layout for user management, adding detailed user roles and status indicators. - Update CSS styles for a cohesive design across the application, introducing new color variables and layout adjustments.
This commit is contained in:
smueller
@@ -10,17 +10,24 @@ LINE = "=" * 78
|
||||
SUBLINE = "-" * 78
|
||||
|
||||
FONT = "Arial, Helvetica, sans-serif"
|
||||
# Thomas-Krenn.AG Corporate Design (Orange + Anthrazit)
|
||||
COLOR_TK_ORANGE = "#ED6B06"
|
||||
COLOR_TK_ORANGE_DARK = "#C95605"
|
||||
COLOR_TK_ORANGE_LIGHT = "#FFF4ED"
|
||||
COLOR_TK_GRAY_DARK = "#4A4A4A"
|
||||
COLOR_TK_GRAY = "#6B6B6B"
|
||||
COLOR_TK_GRAY_LIGHT = "#F5F5F5"
|
||||
COLOR_TEXT = "#1A1A1A"
|
||||
COLOR_MUTED = "#5C6670"
|
||||
COLOR_HEADING = "#003366"
|
||||
COLOR_LINK = "#0055A4"
|
||||
COLOR_BORDER = "#D7DEE8"
|
||||
COLOR_BG = "#EEF2F7"
|
||||
COLOR_MUTED = COLOR_TK_GRAY
|
||||
COLOR_HEADING = COLOR_TK_GRAY_DARK
|
||||
COLOR_LINK = COLOR_TK_ORANGE
|
||||
COLOR_BORDER = "#E0E0E0"
|
||||
COLOR_BG = COLOR_TK_GRAY_LIGHT
|
||||
COLOR_WHITE = "#FFFFFF"
|
||||
COLOR_ACCENT_NEW = "#1F7A4D"
|
||||
COLOR_ACCENT_NEW_BG = "#E8F6EE"
|
||||
COLOR_ACCENT_EDIT = "#0055A4"
|
||||
COLOR_ACCENT_EDIT_BG = "#E8F1FA"
|
||||
COLOR_ACCENT_NEW = COLOR_TK_ORANGE
|
||||
COLOR_ACCENT_NEW_BG = COLOR_TK_ORANGE_LIGHT
|
||||
COLOR_ACCENT_EDIT = COLOR_TK_GRAY_DARK
|
||||
COLOR_ACCENT_EDIT_BG = "#EEEEEE"
|
||||
|
||||
|
||||
class DisplayOptions(TypedDict):
|
||||
@@ -204,18 +211,18 @@ def create_html(
|
||||
<td align="center" style="padding:28px 16px;font-family:{FONT};">
|
||||
<table role="presentation" width="680" cellpadding="0" cellspacing="0" border="0" style="width:680px;max-width:680px;background:{COLOR_WHITE};border:1px solid {COLOR_BORDER};font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="height:5px;background:{COLOR_LINK};font-size:0;line-height:0;"> </td>
|
||||
<td style="height:5px;background:{COLOR_TK_ORANGE};font-size:0;line-height:0;"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="background:{COLOR_HEADING};padding:30px 36px 28px;font-family:{FONT};">
|
||||
<p style="margin:0;font-family:{FONT};font-size:11px;line-height:16px;letter-spacing:1.2px;text-transform:uppercase;color:#A9C6E8;">Interner Newsletter</p>
|
||||
<td style="background:{COLOR_TK_GRAY_DARK};padding:30px 36px 28px;font-family:{FONT};">
|
||||
<p style="margin:0;font-family:{FONT};font-size:11px;line-height:16px;letter-spacing:1.2px;text-transform:uppercase;color:{COLOR_TK_ORANGE};">Interner Newsletter</p>
|
||||
<h1 style="margin:10px 0 0;font-family:{FONT};font-size:28px;line-height:34px;font-weight:bold;color:{COLOR_WHITE};">Thomas-Krenn Wiki Update</h1>
|
||||
<p style="margin:10px 0 0;font-family:{FONT};font-size:14px;line-height:21px;color:#D9E8F8;">{escape(ORG_NAME)}</p>
|
||||
<p style="margin:10px 0 0;font-family:{FONT};font-size:14px;line-height:21px;color:#CCCCCC;">{escape(ORG_NAME)}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:28px 36px 0;font-family:{FONT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:{COLOR_BG};border-left:4px solid {COLOR_LINK};font-family:{FONT};">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:{COLOR_TK_ORANGE_LIGHT};border-left:4px solid {COLOR_TK_ORANGE};font-family:{FONT};">
|
||||
<tr>
|
||||
<td style="padding:18px 20px;font-family:{FONT};font-size:15px;line-height:24px;color:{COLOR_TEXT};">
|
||||
<p style="margin:0 0 10px;font-family:{FONT};font-size:15px;line-height:24px;">Liebe Kolleginnen und Kollegen,</p>
|
||||
@@ -237,7 +244,7 @@ def create_html(
|
||||
{summary}
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:32px auto 0;font-family:{FONT};">
|
||||
<tr>
|
||||
<td align="center" style="background:{COLOR_HEADING};padding:14px 28px;font-family:{FONT};">
|
||||
<td align="center" style="background:{COLOR_TK_ORANGE};padding:14px 28px;font-family:{FONT};">
|
||||
<a href="{WIKI_HOME_URL}" style="font-family:{FONT};font-size:14px;line-height:20px;font-weight:bold;color:{COLOR_WHITE};text-decoration:none;">Zum Thomas-Krenn-Wiki →</a>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -258,12 +265,37 @@ def create_html(
|
||||
|
||||
|
||||
OUTLOOK_FONT = "Arial, sans-serif"
|
||||
OUTLOOK_TEXT = "#000000"
|
||||
OUTLOOK_MUTED = "#666666"
|
||||
OUTLOOK_LINK = "#0563C1"
|
||||
OUTLOOK_HEADING = "#003366"
|
||||
OUTLOOK_BORDER = "#DDDDDD"
|
||||
OUTLOOK_WHITE = "#FFFFFF"
|
||||
OUTLOOK_TEXT = COLOR_TEXT
|
||||
OUTLOOK_MUTED = COLOR_TK_GRAY
|
||||
OUTLOOK_LINK = COLOR_TK_ORANGE
|
||||
OUTLOOK_HEADING = COLOR_TK_GRAY_DARK
|
||||
OUTLOOK_BORDER = COLOR_BORDER
|
||||
OUTLOOK_WHITE = COLOR_WHITE
|
||||
OUTLOOK_ORANGE = COLOR_TK_ORANGE
|
||||
OUTLOOK_GRAY_DARK = COLOR_TK_GRAY_DARK
|
||||
|
||||
|
||||
def _outlook_td_attrs(
|
||||
bg: str = OUTLOOK_WHITE,
|
||||
*,
|
||||
colspan: int | None = None,
|
||||
width: str | None = None,
|
||||
valign: str | None = None,
|
||||
extra_style: str = "",
|
||||
) -> str:
|
||||
"""Tabellen-Zelle mit Outlook-Dunkelmodus-Schutz (data-ogsb/data-ogsc)."""
|
||||
parts = [
|
||||
f'bgcolor="{bg}"',
|
||||
f'style="background-color:{bg} !important;color:{OUTLOOK_TEXT} !important;{extra_style}"',
|
||||
f'data-ogsb="{bg}"',
|
||||
]
|
||||
if colspan:
|
||||
parts.insert(0, f'colspan="{colspan}"')
|
||||
if width:
|
||||
parts.append(f'width="{width}"')
|
||||
if valign:
|
||||
parts.append(f'valign="{valign}"')
|
||||
return " ".join(parts)
|
||||
|
||||
|
||||
def _outlook_font(
|
||||
@@ -276,14 +308,23 @@ def _outlook_font(
|
||||
inner = escape(text)
|
||||
if bold:
|
||||
inner = f"<b>{inner}</b>"
|
||||
return f'<font face="Arial" color="{color}" size="{size}">{inner}</font>'
|
||||
|
||||
|
||||
def _outlook_link(title: str, url: str) -> str:
|
||||
return (
|
||||
f'<a href="{escape(url)}">'
|
||||
f'<font face="Arial" color="{OUTLOOK_LINK}" size="2">{escape(title)}</font>'
|
||||
f"</a>"
|
||||
f'<span style="color:{color} !important;" data-ogsc="{color}">'
|
||||
f'<font face="Arial" color="{color}" size="{size}">{inner}</font>'
|
||||
f"</span>"
|
||||
)
|
||||
|
||||
|
||||
def _outlook_link(title: str, url: str, *, bold: bool = True) -> str:
|
||||
weight = "<b>" if bold else ""
|
||||
weight_end = "</b>" if bold else ""
|
||||
return (
|
||||
f'<a href="{escape(url)}" '
|
||||
f'style="color:{OUTLOOK_LINK} !important;text-decoration:none !important;mso-style-priority:100 !important;">'
|
||||
f'<span style="color:{OUTLOOK_LINK} !important;" data-ogsc="{OUTLOOK_LINK}">'
|
||||
f'<font face="Arial" color="{OUTLOOK_LINK}" size="2">'
|
||||
f"{weight}{escape(title)}{weight_end}"
|
||||
f"</font></span></a>"
|
||||
)
|
||||
|
||||
|
||||
@@ -303,19 +344,20 @@ def create_outlook_html(
|
||||
|
||||
if not new_articles and not edited_articles:
|
||||
body_rows = f"""<tr>
|
||||
<td bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:12px 0;">
|
||||
<td {_outlook_td_attrs(colspan=2, extra_style="padding:12px 0;")}>
|
||||
{_outlook_font("Im gewählten Zeitraum wurden keine passenden Wiki-Änderungen gefunden.", color=OUTLOOK_MUTED)}
|
||||
</td>
|
||||
</tr>"""
|
||||
else:
|
||||
body_rows = "\n".join(
|
||||
[
|
||||
_outlook_section("Neue Artikel", new_articles, display, "Keine neuen Artikel im Zeitraum."),
|
||||
_outlook_section("Neue Artikel", new_articles, display, "Keine neuen Artikel im Zeitraum.", kind="new"),
|
||||
_outlook_section(
|
||||
"Bearbeitete Artikel",
|
||||
edited_articles,
|
||||
display,
|
||||
"Keine bearbeiteten Artikel im Zeitraum.",
|
||||
kind="edited",
|
||||
),
|
||||
]
|
||||
)
|
||||
@@ -331,7 +373,7 @@ def create_outlook_html(
|
||||
|
||||
total = len(new_articles) + len(edited_articles)
|
||||
summary_row = f"""<tr>
|
||||
<td bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:16px 0 0;border-top:1px solid {OUTLOOK_BORDER};">
|
||||
<td {_outlook_td_attrs(colspan=2, extra_style=f"padding:16px 0 0;border-top:1px solid {OUTLOOK_BORDER};")}>
|
||||
{_outlook_font("Zusammenfassung: ", color=OUTLOOK_HEADING, bold=True, size="1")}
|
||||
{_outlook_font(f"{len(new_articles)} neu · {len(edited_articles)} bearbeitet · {total} gesamt", color=OUTLOOK_MUTED, size="1")}
|
||||
</td>
|
||||
@@ -343,41 +385,55 @@ def create_outlook_html(
|
||||
<meta charset="utf-8">
|
||||
<meta name="ProgId" content="Word.Document">
|
||||
<meta name="Generator" content="Microsoft Word 15">
|
||||
<meta name="color-scheme" content="light only">
|
||||
<meta name="supported-color-schemes" content="light">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="supported-color-schemes" content="light dark">
|
||||
<title>{subject}</title>
|
||||
<!--[if mso]>
|
||||
<style type="text/css">
|
||||
body, table, td, p, a, font, span, strong {{ font-family: Arial, sans-serif !important; }}
|
||||
a {{ color: {OUTLOOK_LINK} !important; }}
|
||||
body, table, td, p, font, span, strong {{ font-family: Arial, sans-serif !important; }}
|
||||
a, span.MsoHyperlink, span.MsoHyperlinkFollowed {{
|
||||
color: {OUTLOOK_LINK} !important;
|
||||
text-decoration: none !important;
|
||||
}}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<style type="text/css">
|
||||
:root {{ color-scheme: light dark; supported-color-schemes: light dark; }}
|
||||
body {{ background-color: {OUTLOOK_WHITE} !important; color: {OUTLOOK_TEXT} !important; }}
|
||||
a, a:link, a:visited, a:hover, a:active {{
|
||||
color: {OUTLOOK_LINK} !important;
|
||||
text-decoration: none !important;
|
||||
}}
|
||||
</style>
|
||||
</head>
|
||||
<body bgcolor="{OUTLOOK_WHITE}" style="margin:0;padding:16px;background-color:{OUTLOOK_WHITE};">
|
||||
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="{OUTLOOK_WHITE}" style="width:600px;background-color:{OUTLOOK_WHITE};">
|
||||
<body bgcolor="{OUTLOOK_WHITE}" style="margin:0;padding:16px;background-color:{OUTLOOK_WHITE} !important;color:{OUTLOOK_TEXT} !important;" data-ogsb="{OUTLOOK_WHITE}">
|
||||
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="{OUTLOOK_WHITE}" style="width:600px;background-color:{OUTLOOK_WHITE} !important;" data-ogsb="{OUTLOOK_WHITE}">
|
||||
<tr>
|
||||
<td bgcolor="{OUTLOOK_HEADING}" style="background-color:{OUTLOOK_HEADING};padding:16px 20px;">
|
||||
{_outlook_font("Interner Newsletter", color="#A9C6E8", size="1")}<br>
|
||||
<td {_outlook_td_attrs(bg=OUTLOOK_ORANGE, extra_style="height:5px;font-size:0;line-height:0;")}> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td {_outlook_td_attrs(bg=OUTLOOK_GRAY_DARK, extra_style="padding:16px 20px;")}>
|
||||
{_outlook_font("Interner Newsletter", color=OUTLOOK_ORANGE, size="1")}<br>
|
||||
{_outlook_font("Thomas-Krenn Wiki Update", color=OUTLOOK_WHITE, size="5", bold=True)}<br>
|
||||
{_outlook_font(ORG_NAME, color="#D9E8F8", size="2")}
|
||||
{_outlook_font(ORG_NAME, color="#CCCCCC", size="2")}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:20px;">
|
||||
<td {_outlook_td_attrs(extra_style="padding:20px;")}>
|
||||
<p style="margin:0 0 8px;">{_outlook_font("Liebe Kolleginnen und Kollegen,")}</p>
|
||||
<p style="margin:0 0 12px;">{_outlook_font(intro)}</p>
|
||||
<p style="margin:0 0 16px;">{_outlook_font(f"Erstellt am: {created_at}", color=OUTLOOK_MUTED, size="1")}</p>
|
||||
{category_block}
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE} !important;" data-ogsb="{OUTLOOK_WHITE}">
|
||||
{body_rows}
|
||||
{summary_row}
|
||||
<tr>
|
||||
<td bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:20px 0 0;">
|
||||
<a href="{WIKI_HOME_URL}"><font face="Arial" color="{OUTLOOK_LINK}" size="2"><b>Zum Thomas-Krenn-Wiki →</b></font></a>
|
||||
<td {_outlook_td_attrs(colspan=2, extra_style="padding:20px 0 0;")}>
|
||||
{_outlook_link("Zum Thomas-Krenn-Wiki →", WIKI_HOME_URL)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:16px 0 0;border-top:1px solid {OUTLOOK_BORDER};">
|
||||
<td {_outlook_td_attrs(colspan=2, extra_style=f"padding:16px 0 0;border-top:1px solid {OUTLOOK_BORDER};")}>
|
||||
{_outlook_font(f"Automatisch erstellter interner Newsletter · Nur für den Gebrauch bei {ORG_NAME}", color=OUTLOOK_MUTED, size="1")}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -412,10 +468,10 @@ def _outlook_article_rows(items: list[dict[str, Any]], display: DisplayOptions)
|
||||
meta_html = f"<br>{_outlook_font(meta, color=OUTLOOK_MUTED, size='1')}"
|
||||
rows.append(
|
||||
f"""<tr>
|
||||
<td width="28" valign="top" bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:8px 8px 10px 0;border-bottom:1px solid {OUTLOOK_BORDER};">
|
||||
<td {_outlook_td_attrs(width="28", valign="top", extra_style=f"padding:8px 8px 10px 0;border-bottom:1px solid {OUTLOOK_BORDER};")}>
|
||||
{_outlook_font(f"{idx}.")}
|
||||
</td>
|
||||
<td valign="top" bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:8px 0 10px;border-bottom:1px solid {OUTLOOK_BORDER};">
|
||||
<td {_outlook_td_attrs(valign="top", extra_style=f"padding:8px 0 10px;border-bottom:1px solid {OUTLOOK_BORDER};")}>
|
||||
{_outlook_link(title, url)}{meta_html}
|
||||
</td>
|
||||
</tr>"""
|
||||
@@ -428,15 +484,17 @@ def _outlook_section(
|
||||
items: list[dict[str, Any]],
|
||||
display: DisplayOptions,
|
||||
empty_text: str,
|
||||
kind: str = "edited",
|
||||
) -> str:
|
||||
accent = OUTLOOK_ORANGE if kind == "new" else OUTLOOK_GRAY_DARK
|
||||
header = f"""<tr>
|
||||
<td colspan="2" bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:18px 0 8px;border-bottom:2px solid {OUTLOOK_HEADING};">
|
||||
{_outlook_font(f"{heading} ({len(items)})", color=OUTLOOK_HEADING, size="3", bold=True)}
|
||||
<td {_outlook_td_attrs(colspan=2, extra_style=f"padding:18px 0 8px;border-bottom:2px solid {accent};")}>
|
||||
{_outlook_font(f"{heading} ({len(items)})", color=accent, size="3", bold=True)}
|
||||
</td>
|
||||
</tr>"""
|
||||
if not items:
|
||||
return header + f"""<tr>
|
||||
<td colspan="2" bgcolor="{OUTLOOK_WHITE}" style="background-color:{OUTLOOK_WHITE};padding:8px 0;">
|
||||
<td {_outlook_td_attrs(colspan=2, extra_style="padding:8px 0;")}>
|
||||
{_outlook_font(empty_text, color=OUTLOOK_MUTED)}
|
||||
</td>
|
||||
</tr>"""
|
||||
@@ -593,7 +651,7 @@ def _html_item_row(idx: int, item: dict[str, Any], display: DisplayOptions, acce
|
||||
<tr>
|
||||
<td style="width:26px;vertical-align:top;font-family:{FONT};font-size:13px;line-height:20px;font-weight:bold;color:{accent};">{idx}.</td>
|
||||
<td style="vertical-align:top;font-family:{FONT};">
|
||||
<a href="{url}" style="font-family:{FONT};font-size:15px;line-height:22px;font-weight:bold;color:{COLOR_LINK};text-decoration:underline;">{title}</a>
|
||||
<a href="{url}" style="font-family:{FONT};font-size:15px;line-height:22px;font-weight:bold;color:{COLOR_LINK};text-decoration:none;">{title}</a>
|
||||
{meta_html}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user