+
+
+
- {/* Grid */}
+
{filtered.length === 0 ? (
-
+
No results match your filters.
-
) : (
filtered.map((s) => (
-
setOpen(s)}
- onKeyDown={(e) => onTileKey(e, s)}
- role="button"
- tabIndex={0}
- >
-
- {s.category}
- {s.chips}
-
-
{s.name}
-
-
- {s.regions.map((r) => (
-
- {renderRegionFooter(r)}
-
- ))}
-
- {/* {s.hc_url && (
-
-
- )} */}
-
+
+
+
+ {s.regions.map((r) => (
+
+ {renderRegionFooter(r)}
+
+ ))}
+
+
+ }
+ imageProps={{ src: s.icon ?? '#', alt: s.name }}
+ buttonProps={{ onClick: () => setOpen(s) }}
+ />
))
)}
- {/* Sleeve */}
+ {/* Sleeve / detail panel */}
{open && (
-
setOpen(null)} role="dialog" aria-modal="true">
+
setOpen(null)}
+ role="dialog"
+ aria-modal="true"
+ >
e.stopPropagation()}>
setOpen(null)}>×
-
+
+
{open.symbol}:
{open.name}
@@ -421,55 +231,58 @@ export default function OtcServicesColumns() {
{open.category === "Finance Services" || open.category === "Sites" ? (
-
- Go to {open.name}
-
+ />
) : (
-
- Discover Best Practices & Blueprints
-
- Release Notes
-
- Go to Help Center
-
+ />
)}
-
- )
- }
-
+ )}
+
);
-}
+}
\ No newline at end of file
diff --git a/src/components/PortfolioNavigator/styles.module.css b/src/components/PortfolioNavigator/styles.module.css
index 592785fe1d..e2bb7f5b9f 100644
--- a/src/components/PortfolioNavigator/styles.module.css
+++ b/src/components/PortfolioNavigator/styles.module.css
@@ -1,4 +1,4 @@
-:root{
+:root {
/* --bg: #f8fafc; */
/* --panel: #ffffff; */
/* --ink: #0f172a; */
@@ -11,8 +11,9 @@
--badge: #eef2ff;
--badge-ink: #3730a3;
--tile-radius: 4px;
- --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.06);
- --colW: 280px; /* base column width for smaller screens */
+ --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .06);
+ --colW: 280px;
+ /* base column width for smaller screens */
--card-bg: #fff;
--card-border: #ddd;
--text-base: #000;
@@ -21,151 +22,366 @@
--shadow-hover: rgba(0, 0, 0, 0.1);
}
-:root { --ifm-background-surface-color: #fbfbfb; }
-html[data-theme='dark'] { --ifm-background-surface-color: #1c1c1e; }
+:root {
+ --ifm-background-surface-color: #fbfbfb;
+}
+
+html[data-theme='dark'] {
+ --ifm-background-surface-color: #1c1c1e;
+}
+
+* {
+ box-sizing: border-box
+}
+
+body {
+ color: var(--ink)
+}
-*{box-sizing:border-box}
-body{color:var(--ink)}
+.otcWrap {
+ min-height: 100vh;
+ background: linear-gradient(#fff, var(--bg));
+ padding: 24px
+}
-.otcWrap{min-height:100vh;background:linear-gradient(#fff, var(--bg));padding:24px}
-.otcMax{max-width:1280px;margin:0 auto}
+.otcMax {
+ max-width: 1280px;
+ margin: 0 auto
+}
/* header */
-.header{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
-.titleBlock h1{margin:0;font-weight:700;font-size:clamp(24px,3vw,34px)}
-.titleBlock p{margin:.25rem 0 0;color:var(--muted)}
-.ctrls{display:flex;gap:12px;align-items:center}
+.header {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ justify-content: space-between
+}
+
+.titleBlock h1 {
+ margin: 0;
+ font-weight: 700;
+ font-size: clamp(24px, 3vw, 34px)
+}
+
+.titleBlock p {
+ margin: .25rem 0 0;
+ color: var(--muted)
+}
+
+.ctrls {
+ display: flex;
+ gap: 12px;
+ align-items: center
+}
/* search */
-.search{position:relative}
-.searchIcon{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.45}
-.search input{
- height:36px; /* ↑ was 34 */
- width:260px;max-width:58vw;padding:8px 10px 8px 28px;
- border:1px solid var(--line);border-radius:10px;outline:none;font-size:15px; /* ↑ was 14px */
+.search {
+ position: relative
+}
+
+.searchIcon {
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ opacity: .45
+}
+
+.search input {
+ height: 36px;
+ /* ↑ was 34 */
+ width: 260px;
+ max-width: 58vw;
+ padding: 8px 10px 8px 28px;
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ outline: none;
+ font-size: 15px;
+ /* ↑ was 14px */
}
-.search input:focus{border-color:#818cf8; box-shadow:0 0 0 3px rgba(129,140,248,.25)}
-.viewchip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #e0e7ff;color:#3730a3;padding:6px 10px;border-radius:999px;font-size:13px}
+.search input:focus {
+ border-color: #818cf8;
+ box-shadow: 0 0 0 3px rgba(129, 140, 248, .25)
+}
+
+.viewchip {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ background: #eef2ff;
+ border: 1px solid #e0e7ff;
+ color: #3730a3;
+ padding: 6px 10px;
+ border-radius: 999px;
+ font-size: 13px
+}
/* chips */
-.bucketsChips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
-.bucketsRegions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px }
+.bucketsChips {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ margin-top: 12px;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.bucketsRegions {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ margin-top: 12px;
+ align-items: center;
+ justify-content: flex-end;
+}
-.chip{background:var(--chip);color:var(--chip-ink);border:1px solid var(--line);padding:4px 10px;border-radius:999px;font-size:13px;cursor:pointer} /* ↑ was 12px */
-.chipActive{background:var(--chip-active);color:var(--chip-active-ink);border-color:var(--chip-active)}
+.chip {
+ background: var(--chip);
+ color: var(--chip-ink);
+ border: 1px solid var(--line);
+ padding: 4px 10px;
+ border-radius: 999px;
+ font-size: 13px;
+ cursor: pointer
+}
+
+/* ↑ was 12px */
+.chipActive {
+ background: var(--chip-active);
+ color: var(--chip-active-ink);
+ border-color: var(--chip-active)
+}
.flags {
background: transparent;
border: 0;
- padding: 7px 0 3px 0;
+ padding: 0px 0 3px 0;
box-shadow: none;
font-size: 11px;
line-height: 1;
}
.flags span {
- padding: 0 4px 0 0; /* Changed from left padding to right padding */
+ padding: 0 4px 0 0;
+ /* Changed from left padding to right padding */
}
/* Remove the .flag class since it's not being used */
/* columns (wrap on small screens; fixed 3 even columns on desktop) */
-.columns{
- display:grid; gap:10px; margin-top:10px;
+.columns {
+ display: grid;
+ gap: 10px;
+ margin-top: 10px;
grid-template-columns: repeat(auto-fit, minmax(var(--colW), 1fr));
- justify-content:stretch;
+ justify-content: stretch;
}
/* Desktop: exactly 9 columns per row (your current setting) */
@media (min-width: 1200px) {
.columns {
grid-template-columns: repeat(9, minmax(0, 1fr));
- gap:10px;
+ gap: 10px;
}
}
/* Column container — borderless & compact */
-.col{
- position:relative;
- background:transparent; /* remove panel */
- border:none; /* remove frame */
- border-radius:16px;
- overflow:hidden;
- box-shadow:none;
-}
-.col::before{content:""; position:absolute; inset:0; background:var(--stripe, transparent); opacity:0; pointer-events:none} /* hide stripe */
-.colHead{
- position:sticky; top:0;
- background:transparent; /* lighter header */
- border-bottom:1px solid var(--line);
- padding:6px 8px; font-weight:700; letter-spacing:.2px; color:var(--ink); z-index:1;
- font-size:16px; /* ↑ was 15px */
-}
-.colTitle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
-.colBody{display:flex; flex-direction:column; gap:8px; padding:8px 2px; min-height:100px}
-.empty{
- border:1px dashed var(--line); border-radius:12px; padding:14px;
- text-align:center; color:var(--muted); background:#fbfcfe;
-}
-
-html[data-theme='dark'] .empty{
- border:1px dashed var(--ifm-color-emphasis-200); border-radius:12px; padding:14px;
- text-align:center; color:var(--ifm-color-emphasis-400); background:var(--ifm-background-surface-color);
+.col {
+ position: relative;
+ background: transparent;
+ /* remove panel */
+ border: none;
+ /* remove frame */
+ border-radius: 16px;
+ overflow: hidden;
+ box-shadow: none;
+}
+
+.col::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: var(--stripe, transparent);
+ opacity: 0;
+ pointer-events: none
+}
+
+/* hide stripe */
+.colHead {
+ position: sticky;
+ top: 0;
+ background: transparent;
+ /* lighter header */
+ border-bottom: 1px solid var(--line);
+ padding: 6px 8px;
+ font-weight: 700;
+ letter-spacing: .2px;
+ color: var(--ink);
+ z-index: 1;
+ font-size: 16px;
+ /* ↑ was 15px */
+}
+
+.colTitle {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis
+}
+
+.colBody {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 8px 2px;
+ min-height: 100px
+}
+
+.empty {
+ border: 1px dashed var(--line);
+ border-radius: 12px;
+ padding: 14px;
+ text-align: center;
+ color: var(--muted);
+ background: #fbfcfe;
+}
+
+html[data-theme='dark'] .empty {
+ border: 1px dashed var(--ifm-color-emphasis-200);
+ border-radius: 12px;
+ padding: 14px;
+ text-align: center;
+ color: var(--ifm-color-emphasis-400);
+ background: var(--ifm-background-surface-color);
}
/* tile */
-.tile{
+.tile {
/* --accent: #e2e8f0; */
- background:var(--panel);
- border: 1px solid var(--card-border, var(--ifm-color-emphasis-200));border-radius:10px;
- padding:8px;display:flex;flex-direction:column;box-shadow:var(--shadow);
- cursor:pointer;position:relative;transition:transform .15s ease, box-shadow .15s ease;
+ background: var(--panel);
+ border: 1px solid var(--card-border, var(--ifm-color-emphasis-200));
+ border-radius: 10px;
+ padding: 8px;
+ display: flex;
+ flex-direction: column;
+ box-shadow: var(--shadow);
+ cursor: pointer;
+ position: relative;
+ transition: transform .15s ease, box-shadow .15s ease;
box-shadow: var(--shadow), inset 0 2px 0 var(--accent);
}
-html[data-theme='dark'] .tile{
+html[data-theme='dark'] .tile {
/* --accent: #e2e8f0; */
- background:var(--ifm-background-surface-color);
- border:1px solid var(--ifm-color-emphasis-200);border-radius:10px;
- padding:8px;display:flex;flex-direction:column;box-shadow:var(--shadow);
- cursor:pointer;position:relative;transition:transform .15s ease, box-shadow .15s ease;
+ background: var(--ifm-background-surface-color);
+ border: 1px solid var(--ifm-color-emphasis-200);
+ border-radius: 10px;
+ padding: 8px;
+ display: flex;
+ flex-direction: column;
+ box-shadow: var(--shadow);
+ cursor: pointer;
+ position: relative;
+ transition: transform .15s ease, box-shadow .15s ease;
box-shadow: var(--shadow), inset 0 2px 0 var(--accent);
}
.tile:hover {
- text-decoration: none;
- box-shadow:
+ text-decoration: none;
+ box-shadow:
0px 16px 64px 0px var(--shadow-hover, var(--telekom-shadow-raised-hover)),
0px 8px 16px 0px var(--shadow-hover, var(--telekom-shadow-raised-hover))
}
+
/* .tile:hover{transform:translateY(-2px);box-shadow:0 4px 4px rgba(0,0,0,.10), inset 0 4px 0 var(--accent)} */
-html[data-theme='dark'] .tile:hover{
- box-shadow:
- 0px 16px 64px 0px #e20074,
+html[data-theme='dark'] .tile:hover {
+ box-shadow:
+ 0px 16px 64px 0px #e20074,
0px 8px 16px 0px #e20074;
}
-.tileTop{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-bottom: 6px;}
-html[data-theme='dark'] .tileTop{display:flex;align-items:center;justify-content:space-between;gap:6px}
+.tileTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 6px;
+ padding-bottom: 6px;
+}
-.cat{text-transform:uppercase;font-size:11px;letter-spacing:.05em;opacity:.7} /* ↑ was 9px */
-.symbol{flex:1;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;line-height:1.1} /* ↑ was 12px */
+html[data-theme='dark'] .tileTop {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 6px
+}
-.tileBottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
-html[data-theme='dark'] .tileBottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
+.cat {
+ text-transform: uppercase;
+ font-size: 11px;
+ letter-spacing: .05em;
+ opacity: .7
+}
+/* ↑ was 9px */
+.symbol {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 800;
+ font-size: 15px;
+ line-height: 1.1
+}
+
+/* ↑ was 12px */
+
+.tileBottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 6px;
+ margin-top: 2px
+}
+
+html[data-theme='dark'] .tileBottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 6px;
+ margin-top: 2px
+}
+
+
+.name {
+ font-size: 18px;
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: center;
+}
-.name{font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;} /* ↑ was 9px */
+/* ↑ was 9px */
/* .ext{opacity:.5} */
-.badge{background:var(--badge);color:var(--badge-ink);padding:1px 6px;border-radius:999px;font-size:12px;border:1px solid #e0e7ff} /* ↑ was 10px */
+.badge {
+ background: var(--badge);
+ color: var(--badge-ink);
+ padding: 1px 6px;
+ border-radius: 999px;
+ font-size: 12px;
+ border: 1px solid #e0e7ff
+}
+
+/* ↑ was 10px */
/* External link icon — fixed, uniform size everywhere */
.ext {
- opacity: .6; /* keep your style */
+ opacity: .6;
+ /* keep your style */
display: inline-flex;
align-items: center;
justify-content: center;
@@ -179,28 +395,46 @@ html[data-theme='dark'] .tileBottom{display:flex;align-items:center;justify-cont
}
.ext svg {
- width: 12px !important; /* defeat global svg width/height */
+ width: 12px !important;
+ /* defeat global svg width/height */
height: 12px !important;
flex: 0 0 16px;
- stroke-width: 2; /* optional: consistent weight */
+ stroke-width: 2;
+ /* optional: consistent weight */
}
/* tooltip */
-.tile[data-tooltip]:hover::after{
- content:attr(data-tooltip);position:absolute;left:8px;right:8px;bottom:100%;
- transform:translateY(-6px);background:#0f172a;color:#fff;padding:8px 10px;
- border-radius:10px;white-space:normal;font-size:12px;box-shadow:var(--shadow);
+.tile[data-tooltip]:hover::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ left: 8px;
+ right: 8px;
+ bottom: 100%;
+ transform: translateY(-6px);
+ background: #0f172a;
+ color: #fff;
+ padding: 8px 10px;
+ border-radius: 10px;
+ white-space: normal;
+ font-size: 12px;
+ box-shadow: var(--shadow);
}
-.tile[data-tooltip]:hover::before{
- content:"";position:absolute;left:20px;bottom:100%;transform:translateY(2px);
- border:6px solid transparent;border-top-color:#0f172a
+
+.tile[data-tooltip]:hover::before {
+ content: "";
+ position: absolute;
+ left: 20px;
+ bottom: 100%;
+ transform: translateY(2px);
+ border: 6px solid transparent;
+ border-top-color: #0f172a
}
/* ===== Sleeve (drawer) ===== */
-.sleeveBackdrop{
+.sleeveBackdrop {
position: fixed;
inset: 0;
- background: rgba(2,6,23,.35);
+ background: rgba(2, 6, 23, .35);
display: grid;
place-items: stretch;
z-index: 60;
@@ -208,38 +442,62 @@ html[data-theme='dark'] .tileBottom{display:flex;align-items:center;justify-cont
animation: otcFadeIn .12s ease-out;
}
-@keyframes otcFadeIn { from { opacity: 0 } to { opacity: 1 } }
+@keyframes otcFadeIn {
+ from {
+ opacity: 0
+ }
-.sleeve{
- margin-left: auto; /* stick to right */
+ to {
+ opacity: 1
+ }
+}
+
+.sleeve {
+ margin-left: auto;
+ /* stick to right */
width: min(420px, 90vw);
height: 100%;
background: #fff;
border-left: 1px solid var(--line);
- box-shadow: -8px 0 24px rgba(0,0,0,.15);
- display: flex; flex-direction: column;
+ box-shadow: -8px 0 24px rgba(0, 0, 0, .15);
+ display: flex;
+ flex-direction: column;
transform: translateX(8px);
animation: otcSlideIn .16s ease-out forwards;
}
-html[data-theme='dark'] .sleeve{
- margin-left: auto; /* stick to right */
+html[data-theme='dark'] .sleeve {
+ margin-left: auto;
+ /* stick to right */
width: min(420px, 96vw);
height: 100%;
background: var(--ifm-background-surface-color);
border-left: 1px solid var(--ifm-color-emphasis-200);
box-shadow: -8px 0 24px var(--ifm-background-surface-color);
- display: flex; flex-direction: column;
+ display: flex;
+ flex-direction: column;
transform: translateX(8px);
animation: otcSlideIn .16s ease-out forwards;
}
-@keyframes otcSlideIn { from { transform: translateX(24px); opacity: .8 } to { transform: translateX(0); opacity: 1 } }
+@keyframes otcSlideIn {
+ from {
+ transform: translateX(24px);
+ opacity: .8
+ }
+
+ to {
+ transform: translateX(0);
+ opacity: 1
+ }
+}
-.sleeveClose{
+.sleeveClose {
position: absolute;
- top: 10px; right: 10px;
- width: 32px; height: 32px;
+ top: 10px;
+ right: 10px;
+ width: 32px;
+ height: 32px;
border-radius: 8px;
border: 1px solid var(--line);
background: #fff;
@@ -248,7 +506,7 @@ html[data-theme='dark'] .sleeve{
line-height: 1;
}
-.sleeveHeader{
+.sleeveHeader {
padding: 20px 18px 10px 18px;
border-bottom: 1px solid var(--line);
display: grid;
@@ -257,7 +515,7 @@ html[data-theme='dark'] .sleeve{
gap: 10px;
}
-html[data-theme='dark'] .sleeveHeader{
+html[data-theme='dark'] .sleeveHeader {
padding: 20px 18px 10px 18px;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
display: grid;
@@ -266,18 +524,19 @@ html[data-theme='dark'] .sleeveHeader{
gap: 10px;
}
-.sleeveSymbol{
+.sleeveSymbol {
font-weight: 800;
font-size: 20px;
letter-spacing: .02em;
}
-.sleeveTitle{
+
+.sleeveTitle {
font-weight: 700;
font-size: 18px;
color: var(--ink);
}
-.sleeveBody{
+.sleeveBody {
padding: 16px 18px;
color: var(--muted);
line-height: 1.5;
@@ -285,7 +544,7 @@ html[data-theme='dark'] .sleeveHeader{
flex: 1;
}
-html[data-theme='dark'] .sleeveBody{
+html[data-theme='dark'] .sleeveBody {
padding: 16px 18px;
color: white;
line-height: 1.5;
@@ -304,13 +563,16 @@ html[data-theme='dark'] .sleeveBody{
/* safety: if an old rule set justify-content, kill it */
justify-content: initial;
- justify-items: stretch; /* ensure children stretch horizontally */
+ justify-items: stretch;
+ /* ensure children stretch horizontally */
align-items: stretch;
}
-.sleeveFooter > * {
- --width: 100%; /* <- this is the key */
- display: block; /* optional, makes the host behave like a block */
+.sleeveFooter>* {
+ --width: 100%;
+ /* <- this is the key */
+ display: block;
+ /* optional, makes the host behave like a block */
justify-self: stretch;
}
@@ -322,29 +584,10 @@ html[data-theme='dark'] .sleeveBody{
border-top: 1px solid var(--line);
}
-.sleeveFooterSingle scale-button {
- --width: 100%; /* <- this is the key */
- display: block; /* optional, makes the host behave like a block */
- justify-self: stretch;
-}
-html[data-theme='dark'] .sleeveFooter {
- display: grid;
- grid-template-columns: 1fr;
- gap: 10px;
- padding: 14px 18px 18px 18px;
- border-top: 1px solid var(--ifm-color-emphasis-200);
-
- /* safety: if an old rule set justify-content, kill it */
- justify-content: initial;
- justify-items: stretch; /* ensure children stretch horizontally */
- align-items: stretch;
-}
-html[data-theme='dark'] .sleeveFooter > * {
- --width: 100%; /* <- this is the key */
- display: block; /* optional, makes the host behave like a block */
- justify-self: stretch;
+html[data-theme='dark'] .sleeveFooter {
+ border-top: 1px solid var(--ifm-color-emphasis-200);
}
html[data-theme='dark'] .sleeveFooterSingle {
@@ -357,11 +600,12 @@ html[data-theme='dark'] .sleeveFooterSingle {
/* make the SCALE button host fill its grid cell */
.sleeveFooter scale-button {
- display: block; /* not inline-block */
+ display: block;
+ /* not inline-block */
width: 100%;
}
-.sleeveBtn{
+.sleeveBtn {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -375,14 +619,19 @@ html[data-theme='dark'] .sleeveFooterSingle {
font-weight: 600;
font-size: 14px;
}
-.sleeveBtn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
-.sleeveBtnGhost{
+.sleeveBtn:hover {
+ filter: brightness(1.06);
+ transform: translateY(-1px);
+}
+
+.sleeveBtnGhost {
background: #fff;
color: #111827;
border-color: var(--line);
}
-.sleeveBtnGhost:hover{
+
+.sleeveBtnGhost:hover {
background: #f8fafc;
}
@@ -395,69 +644,82 @@ html[data-theme='dark'] .sleeveFooterSingle {
.sleeveBtnGhost:hover,
.sleeveBtnGhost:focus,
.sleeveBtnGhost:active,
-.sleeveBtnGhost:visited{
- width: 100%; /* fill each 1fr cell */
- text-decoration: none; /* no underline on any state */
- justify-content: center; /* keep label centered */
+.sleeveBtnGhost:visited {
+ width: 100%;
+ /* fill each 1fr cell */
+ text-decoration: none;
+ /* no underline on any state */
+ justify-content: center;
+ /* keep label centered */
}
/* … your existing styles unchanged … */
/* enable pointer + inline layout for SCALE chips */
-.buckets scale-chip{display:inline-flex;cursor:pointer}
+/* .buckets scale-chip {
+ display: inline-flex;
+ cursor: pointer
+} */
+
+.filtersRow {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 16px 0 10px
+}
+
+.filtersSep {
+ opacity: .5;
+ padding: 0 6px;
+ user-select: none
+}
-.filtersRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0 10px}
-.filtersSep{opacity:.5;padding:0 6px;user-select:none}
/* Smaller font for filter chips only (pipe stays the same size) */
-.filtersRow .buckets { font-size: 8px; }
+/* .filtersRow .buckets {
+ font-size: 8px;
+} */
+
/* fallback */
-.buckets scale-chip { font-size: 8px; }
+/* .buckets scale-chip {
+ font-size: 8px;
+} */
/* the row you already have */
-.filtersRow{
- display:flex;
- gap:10px;
- align-items:center;
- flex-wrap:wrap;
- margin:16px 0 10px;
+.filtersRow {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 16px 0 10px;
}
/* keeps the text field on the right and sized neatly */
-.filtersSearchWrap{
+.filtersSearchWrap {
padding-top: 10px;
- margin-left:auto; /* pushes it to the right */
+ margin-left: auto;
+ /* pushes it to the right */
min-width: 220px;
max-width: 340px;
- flex: 1 1 220px; /* lets it grow a bit when there’s room */
+ flex: 1 1 220px;
+ /* lets it grow a bit when there’s room */
}
-.filtersSearchWrap scale-text-field{
- display:block;
- width:100%;
- --transition: all var(--telekom-motion-duration-transition) var(
- --telekom-motion-easing-standard
- );
+.filtersSearchWrap scale-text-field {
+ display: block;
+ width: 100%;
+ --transition: all var(--telekom-motion-duration-transition) var(--telekom-motion-easing-standard);
--radius: var(--telekom-radius-standard);
- --border: var(--telekom-spacing-composition-space-01) solid var(
- --telekom-color-ui-border-standard
- );
- --border-error: var(--telekom-spacing-composition-space-02) solid var(
- --telekom-color-functional-danger-standard
- );
- --border-success: var(--telekom-spacing-composition-space-02) solid var(
- --telekom-color-functional-success-standard
- );
- --border-warning: var(--telekom-spacing-composition-space-02) solid var(
- --telekom-color-functional-warning-standard
- );
+ --border: var(--telekom-spacing-composition-space-01) solid var(--telekom-color-ui-border-standard);
+ --border-error: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-danger-standard);
+ --border-success: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-success-standard);
+ --border-warning: var(--telekom-spacing-composition-space-02) solid var(--telekom-color-functional-warning-standard);
--border-color-hover: var(--telekom-color-ui-border-hovered);
--border-color-focus: var(--telekom-color-ui-border-hovered);
--border-color-disabled: var(--telekom-color-ui-border-disabled);
--background-color-hover: var(--telekom-color-ui-state-fill-hovered);
--background-color-disabled: none;
- --focus-outline: var(--telekom-line-weight-highlight) solid var(
- --telekom-color-functional-focus-standard
- );
+ --focus-outline: var(--telekom-line-weight-highlight) solid var(--telekom-color-functional-focus-standard);
--height: 44px;
--spacing-x: var(--telekom-spacing-composition-space-05);
--color-disabled: var(--telekom-color-text-and-icon-disabled);
@@ -474,9 +736,7 @@ html[data-theme='dark'] .sleeveFooterSingle {
--color-meta-error: var(--telekom-color-text-and-icon-functional-danger);
/* control */
- --spacing-control: 1.125rem calc(
- 2rem - var(--telekom-spacing-composition-space-01)
- ) 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));
+ --spacing-control: 1.125rem calc(2rem - var(--telekom-spacing-composition-space-01)) 0.25rem calc(0.75rem - var(--telekom-spacing-composition-space-01));
--transition-control: var(--transition);
--background-control: var(--telekom-color-ui-state-fill-standard);
--margin-bottom-control: var(--telekom-spacing-composition-space-03);
@@ -489,16 +749,10 @@ html[data-theme='dark'] .sleeveFooterSingle {
--font-size-helper-text: var(--telekom-typography-font-size-small);
--line-height-helper-text: 0.8;
--font-weight-helper-text: var(--telekom-typography-font-weight-bold);
- --color-helper-text: var(
- --telekom-color-text-and-icon-functional-informational
- );
+ --color-helper-text: var(--telekom-color-text-and-icon-functional-informational);
--color-helper-text-error: var(--color-meta-error);
- --color-helper-text-success: var(
- --telekom-color-text-and-icon-functional-success
- );
- --color-helper-text-warning: var(
- --telekom-color-text-and-icon-functional-warning
- );
+ --color-helper-text-success: var(--telekom-color-text-and-icon-functional-success);
+ --color-helper-text-warning: var(--telekom-color-text-and-icon-functional-warning);
--color-helper-text-neutral: var(--telekom-color-text-and-icon-additional);
--helper-text-icon-size: 8px;
@@ -514,28 +768,37 @@ html[data-theme='dark'] .sleeveFooterSingle {
}
/* Single grid for tiles — 4 per row on desktop */
-.tileGrid{
+.tileGrid {
display: grid;
gap: 10px;
- grid-template-columns: repeat(4, minmax(0, 1fr));
+ grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
}
/* Tweak columns responsively so it doesn’t overflow on smaller screens */
-@media (max-width: 1200px){
- .tileGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+@media (max-width: 1200px) {
+ .tileGrid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
}
-@media (max-width: 900px){
- .tileGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+
+@media (max-width: 900px) {
+ .tileGrid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
}
-@media (max-width: 540px){
- .tileGrid { grid-template-columns: 1fr; }
+
+@media (max-width: 540px) {
+ .tileGrid {
+ grid-template-columns: 1fr;
+ }
}
.filterBarRight {
width: 100%;
- gap:10px;
- display: block; /* ensures the custom element honors width */
+ gap: 10px;
+ display: block;
+ /* ensures the custom element honors width */
min-width: 300px;
}
@@ -553,32 +816,69 @@ html[data-theme='dark'] .sleeveFooterSingle {
/* one-row layout with a 90/10 split */
.filterRow {
display: grid;
- grid-template-columns: 8.5fr 1.5fr; /* 90% / 10% */
+ grid-template-columns: 10fr 0fr;
+ /* 90% / 10% */
gap: 10px;
align-items: center;
width: 100%;
}
-/* ensure the custom element stretches */
-.fullWidthDropdown {
+.filterCategoriesRow {
+ display: grid;
+ grid-template-columns: 4.5fr 5.5fr;
+ /* 90% / 10% */
+ gap: 10px;
+ align-items: center;
+ width: 100%;
+}
+
+.filterChipsRow {
+ display: grid;
+ grid-template-columns: 4.0fr 6.0fr;
+ /* 90% / 10% */
+ gap: 10px;
+ align-items: center;
width: 100%;
- display: block;
}
-/* make the reset button fill its 10% column */
-.resetBtn {
+/* one-row layout with a 90/10 split */
+.filterRegionsRow {
+ display: grid;
+ grid-template-columns: 4.0fr 6.0fr;
+ /* 90% / 10% */
+ gap: 10px;
+ align-items: center;
width: 100%;
- height: 44px; /* match your input height if needed */
+}
+
+
+/* one-row layout with a 90/10 split */
+.filterAccordionRow {
+ display: grid;
+ grid-template-columns: 10fr 0fr;
+ /* 90% / 10% */
+ gap: 10px;
+ align-items: center;
+ width: 100%;
+}
+
+/* ensure the custom element stretches */
+.fullWidthDropdown {
+ width: 100%;
+ display: block;
}
/* Span the full results grid and center content */
.emptyFill {
- grid-column: 1 / -1; /* <-- key: occupy all grid columns */
+ grid-column: 1 / -1;
+ /* <-- key: occupy all grid columns */
width: 100%;
- display: grid; /* center both axes */
+ display: grid;
+ /* center both axes */
place-items: center;
- min-height: 50vh; /* or 100vh if you want true viewport centering */
+ min-height: 50vh;
+ /* or 100vh if you want true viewport centering */
}
.emptyState {
@@ -594,3 +894,24 @@ html[data-theme='dark'] .sleeveFooterSingle {
height: auto;
margin-bottom: 10px;
}
+
+.odstext_label {
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ height: 100%;
+}
+
+.bucketsResetFilters {
+ display: flex;
+ width: 100%;
+ gap: 8px;
+ flex-wrap: wrap;
+ margin-top: 12px
+}
+
+.odsbutton__reset_filters {
+ width: 100%;
+ display: block;
+}
diff --git a/src/components/ServiceCallouts/FeaturedServices/index.tsx b/src/components/ServiceCallouts/FeaturedServices/index.tsx
index 5da61d627b..d6c5a18b5f 100644
--- a/src/components/ServiceCallouts/FeaturedServices/index.tsx
+++ b/src/components/ServiceCallouts/FeaturedServices/index.tsx
@@ -11,60 +11,60 @@ import SwrSvg from '@site/static/img/services/swr.svg'
import CcSvg from '@site/static/img/services/cc.svg'
const calloutsList: Callout[] = [
- {
- title: "VPC",
- text: "Virtual Private Cloud",
- link: "/docs/tags/vpc",
- icon: VpcSvg
- },
+ // {
+ // title: "VPC",
+ // text: "Virtual Private Cloud",
+ // link: "/docs/tags/vpc",
+ // icon: "/img/services/VPC.svg"
+ // },
{
title: "ECS",
text: "Elastic Cloud Server",
link: "/docs/tags/ecs",
- icon: EcsSvg
+ icon: "/img/services/ECS.svg"
},
{
title: "OBS",
text: "Object Storage Service",
link: "/docs/tags/obs",
- icon: ObsSvg
+ icon: "/img/services/OBS.svg"
},
{
title: "IAM",
text: "Identity & Access Management",
link: "/docs/tags/iam",
- icon: IamSvg
+ icon: "/img/services/IAM.svg"
},
{
title: "ELB",
text: "Elastic Load Balancing",
link: "/docs/tags/elb",
- icon: ElbSvg
+ icon: "/img/services/ELB.svg"
},
{
title: "DMS",
text: "Distributed Message Service",
link: "/docs/tags/dms",
- icon: DmsSvg
+ icon: "/img/services/DMS.svg"
},
{
title: "CCE",
text: "Cloud Container Engine",
link: "/docs/tags/cce",
- icon: CceSvg
+ icon: "/img/services/CCE.svg"
},
- {
- title: "SWR",
- text: "Software Repository for Containers",
- link: "/docs/tags/swr",
- icon: SwrSvg
- },
- {
- title: "Cloud Create",
- text: "Multi-Cloud Management Platform",
- link: "/docs/tags/cloud-create",
- icon: CcSvg
- },
+ // {
+ // title: "SWR",
+ // text: "Software Repository for Containers",
+ // link: "/docs/tags/swr",
+ // icon: "/img/services/swr.svg"
+ // },
+ // {
+ // title: "Cloud Create",
+ // text: "Multi-Cloud Management Platform",
+ // link: "/docs/tags/cloud-create",
+ // icon: "/img/services/cc.svg"
+ // },
];
export default function FeaturedServices(): JSX.Element {
diff --git a/src/components/ServiceCallouts/NewServices/index.tsx b/src/components/ServiceCallouts/NewServices/index.tsx
index b4dd11067f..d5e178e3e7 100644
--- a/src/components/ServiceCallouts/NewServices/index.tsx
+++ b/src/components/ServiceCallouts/NewServices/index.tsx
@@ -12,19 +12,19 @@ import CfwSvg from '@site/static/img/services/cfw.svg'
title: "ASM",
text: "Application Service Mesh (Istio-Based)",
link: "https://docs.otc.t-systems.com/application-service-mesh/index.html",
- icon: AsmSvg
+ icon: "/img/services/asm.svg"
},
{
title: "CCI",
text: "Serverless Container Engine",
link: "https://docs.otc.t-systems.com/cloud-container-instance/index.html",
- icon: CciSvg
+ icon: "/img/services/cci.svg"
},
{
title: "RFS",
text: "Resource Formation Service",
link: "https://docs.otc.t-systems.com/resource-formation-service/index.html",
- icon: RfsSvg
+ icon: "/img/services/rfs.svg"
},
// {
// title: "Config",
@@ -36,19 +36,19 @@ import CfwSvg from '@site/static/img/services/cfw.svg'
title: "OCR",
text: "Optical Character Recognition",
link: "https://docs.otc.t-systems.com/optical-character-recognition/index.html",
- icon: OcrSvg
+ icon: "/img/services/ocr.svg"
},
{
title: "FGS",
text: "FunctionGraph",
link: "https://docs.otc.t-systems.com/function-graph/index.html",
- icon: FgSvg
+ icon: "/img/services/fg.svg"
},
{
title: "CFW",
text: "Cloud Firewall",
link: "https://docs.otc.t-systems.com/cloud-firewall/index.html",
- icon: CfwSvg
+ icon: "/img/services/cfw.svg"
},
// {
// title: "GeminiDB",
diff --git a/src/components/ServiceCallouts/callout.tsx b/src/components/ServiceCallouts/callout.tsx
index 6feb7c5493..d85c46ea53 100644
--- a/src/components/ServiceCallouts/callout.tsx
+++ b/src/components/ServiceCallouts/callout.tsx
@@ -1,8 +1,6 @@
import clsx from "clsx";
-import styles from "./styles.module.css";
-import { ComponentType, SVGProps } from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';
-
+import { ODSCardFeature, ODSCardFeaturePreferredContent } from "@telekom-ods/react-ui-kit";
export interface Callout {
title: string;
@@ -10,27 +8,34 @@ export interface Callout {
link: string;
// icon: (props: React.ComponentProps<"svg">) => JSX.Element;
- icon: ComponentType
>;
+ // icon: ComponentType>;
+ icon: string;
}
function Callout(props: Callout): JSX.Element {
return (
-
-
-
+
+
);
}
@@ -40,10 +45,10 @@ export interface ServiceCalloutsProps {
export default function ServiceCallouts({ callouts }: ServiceCalloutsProps): JSX.Element {
return (
-
+
{callouts.map((c) => (
-
+
))}
diff --git a/src/components/ServiceCallouts/styles.module.css b/src/components/ServiceCallouts/styles.module.css
index 8ca9cf28ec..6d159406a5 100644
--- a/src/components/ServiceCallouts/styles.module.css
+++ b/src/components/ServiceCallouts/styles.module.css
@@ -19,6 +19,7 @@
position: relative;
background-color: var(--telekom-color-background-surface-subtle);
}
+
.callout__title {
align-items: center;
display: flex;
@@ -26,20 +27,24 @@
font-size: smaller;
margin-bottom: 0;
}
+
.callout__icon {
height: 1.25rem;
margin-right: 0.5rem;
width: 1.25rem;
}
+
.callout__link {
color: inherit;
text-decoration: none;
font-size: small;
}
+
.callout__link:hover {
color: inherit;
text-decoration: none;
}
+
.callout__bottom {
background: var(--ifm-color-primary);
height: 0.5rem;
@@ -49,6 +54,7 @@
transition-duration: 150ms;
width: 0;
}
+
.callout:hover .callout__bottom {
width: 100%;
}
@@ -67,4 +73,4 @@ html[data-theme='dark'] .callout__shadow {
.video {
box-shadow: 0 2px 6px var(--ifm-background-surface-color-dark);
border-radius: 0.375rem;
-}
\ No newline at end of file
+}
diff --git a/src/components/Templates/TemplateCard.tsx b/src/components/Templates/TemplateCard.tsx
index 3c105d796d..523732492e 100644
--- a/src/components/Templates/TemplateCard.tsx
+++ b/src/components/Templates/TemplateCard.tsx
@@ -1,61 +1,74 @@
import React from 'react';
-import styles from './styles.module.css';
+import { ODSCardImage, ODSCardContentBasic, ODSTagStatic } from '@telekom-ods/react-ui-kit';
+import { useColorMode } from '@docusaurus/theme-common';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import clsx from 'clsx';
export type TemplateItem = {
+ id: string;
title: string;
logo: string;
description: JSX.Element;
type?: string;
link?: string;
partner?: boolean;
+ banner?: string;
};
-const TemplateCard: React.FC
= ({ title, logo, description, type, link, partner }) => {
- const Wrapper: React.ElementType = link ? 'a' : 'div';
- const wrapperProps = link
- ? {
- href: link,
- target: '_blank',
- rel: 'noopener noreferrer',
- }
- : {};
-
+const TemplateCard: React.FC = ({ title, logo, description, type, link, banner , partner }) => {
const tags = type
.split(',')
.map(t => t.trim())
.filter(Boolean)
+ const open = () => {
+ window.open(link, "_blank", "noopener");
+ };
+
+ const { colorMode } = useColorMode(); // "light" | "dark"
+
+ if (!banner) {
+ banner = useBaseUrl(
+ colorMode === 'dark' ? '/img/night_banner.png' : '/img/day_banner.png'
+ );
+ }
+
return (
-
-
-
-
-
- {partner && (
-
- Partner Template
-
- )}
-
-
-
{title}
-
{description}
-
-
- {tags.map((tag, i) => (
-
- {tag}
-
- ))}
-
-
+
+
+
+
+
+ {tags.map((tag, i) => (
+
+
+
+ }
+ href={link}
+ logoProps={{ src: logo, title: 'Telekom/Partner Logo', style: { maxHeight: '56px', maxWidth: '56px', objectFit: 'contain', backgroundColor: '#f1f1f1' } }}
+ showLogo={true}
+ role="link"
+ size="medium"
+ target="_blank"
+ />
);
};
diff --git a/src/components/Templates/TemplatesList.tsx b/src/components/Templates/TemplatesList.tsx
index 759abb8e3c..10aedb01d8 100644
--- a/src/components/Templates/TemplatesList.tsx
+++ b/src/components/Templates/TemplatesList.tsx
@@ -2,9 +2,29 @@ import { TemplateItem } from './TemplateCard';
import telekomPng from '@site/static/img/templates/logos/telekom.png';
import iitsPng from '@site/static/img/templates/logos/iits.png';
+import nextCloudPng from '@site/static/img/templates/nextcloud.png';
+import prometheusPng from '@site/static/img/templates/prometheus.png';
+import openShiftPng from '@site/static/img/templates/openshift.png';
+import keycloakPng from '@site/static/img/templates/keycloak.png';
+import letsencrypt from '@site/static/img/templates/letsencrypt.png';
+
export const TemplatesList: TemplateItem[] = [
{
+ id: 'argocdapp',
+ title: 'ArgoCD App',
+ logo: telekomPng,
+ description: (
+ <>
+ With this template, deploying your cloud-native applications to the cloud has never been easier or faster, no OpenStack expertise knowledge required.
+ In just a few clicks, you can spin up a Cloud Container Engine (CCE) cluster and launch your apps using Argo CD, the leading GitOps tool.
+
+ ),
+ type: 'Cloud Create',
+ link: 'https://designer.otc-service.com/#/applications/list',
+ },
+ {
+ id: 'openshift',
title: 'OpenShift',
logo: telekomPng,
description: (
@@ -15,8 +35,10 @@ export const TemplatesList: TemplateItem[] = [
),
type: 'Cloud Create',
link: 'https://designer.otc-service.com/#/applications/list',
+ banner: openShiftPng,
},
{
+ id: 'openshift-ha',
title: 'OpenShift HA',
logo: telekomPng,
description: (
@@ -26,8 +48,10 @@ export const TemplatesList: TemplateItem[] = [
),
type: 'Cloud Create',
link: 'https://designer.otc-service.com/#/applications/list',
+ banner: openShiftPng,
},
{
+ id: 'nextcloud',
title: 'Nextcloud',
logo: telekomPng,
description: (
@@ -37,8 +61,10 @@ export const TemplatesList: TemplateItem[] = [
),
type: 'Cloud Create',
link: 'https://designer.otc-service.com/#/applications/list',
+ banner: nextCloudPng,
},
{
+ id: 'cce',
title: 'CCE',
logo: telekomPng,
description: (
@@ -50,6 +76,7 @@ export const TemplatesList: TemplateItem[] = [
link: 'https://designer.otc-service.com/#/applications/list',
},
{
+ id: 'bastion-host',
title: 'Bastion Host',
logo: telekomPng,
description: (
@@ -61,6 +88,7 @@ export const TemplatesList: TemplateItem[] = [
link: 'https://designer.otc-service.com/#/applications/list',
},
{
+ id: 'prometheus',
title: 'Prometheus',
logo: telekomPng,
description: (
@@ -70,8 +98,10 @@ export const TemplatesList: TemplateItem[] = [
),
type: 'Cloud Create',
link: 'https://designer.otc-service.com/#/applications/list',
+ banner: prometheusPng,
},
{
+ id: 'p2s-vpn',
title: 'P2S VPN',
logo: telekomPng,
description: (
@@ -86,6 +116,7 @@ export const TemplatesList: TemplateItem[] = [
link: 'https://github.com/opentelekomcloud-blueprints/ovpn',
},
{
+ id: 'acme',
title: 'ACME',
logo: iitsPng,
description: (
@@ -98,8 +129,10 @@ export const TemplatesList: TemplateItem[] = [
type: 'Terraform',
link: 'https://github.com/iits-consulting/terraform-opentelekomcloud-acme',
partner: true,
+ banner: letsencrypt,
},
{
+ id: 'cce',
title: 'CCE',
logo: iitsPng,
description: (
@@ -114,6 +147,7 @@ export const TemplatesList: TemplateItem[] = [
partner: true,
},
{
+ id: 'cce-gpu',
title: 'CCE GPU Node Pool',
logo: iitsPng,
description: (
@@ -141,6 +175,7 @@ export const TemplatesList: TemplateItem[] = [
// link: 'https://github.com/iits-consulting/terraform-opentelekomcloud-cert-manager',
// },
{
+ id: 'crd-installer',
title: 'CRD Installer',
logo: iitsPng,
description: (
@@ -155,6 +190,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'cts',
title: 'CTS',
logo: iitsPng,
description: (
@@ -171,6 +207,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'dedicated-elb',
title: 'Dedicated ELB',
logo: iitsPng,
description: (
@@ -186,6 +223,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'enterprise-vpn-connection',
title: 'Enterprise VPN Connection',
logo: iitsPng,
description: (
@@ -202,6 +240,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'enterprise-vpn-gateway',
title: 'Enterprise VPN Gateway',
logo: iitsPng,
description: (
@@ -218,6 +257,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'evs',
title: 'EVS',
logo: iitsPng,
description: (
@@ -233,6 +273,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'jumphost',
title: 'Jumphosts',
logo: iitsPng,
description: (
@@ -250,6 +291,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'keycloak-oidc',
title: 'Keycloak SSO (OIDC)',
logo: iitsPng,
description: (
@@ -262,9 +304,10 @@ export const TemplatesList: TemplateItem[] = [
type: 'Terraform',
link: 'https://github.com/iits-consulting/terraform-opentelekomcloud-keycloak-sso-oidc',
partner: true,
-
+ banner: keycloakPng,
},
{
+ id: 'keycloak-saml',
title: 'Keycloak SSO (SAML)',
logo: iitsPng,
description: (
@@ -277,9 +320,10 @@ export const TemplatesList: TemplateItem[] = [
type: 'Terraform',
link: 'https://github.com/iits-consulting/terraform-opentelekomcloud-keycloak-sso-saml',
partner: true,
-
+ banner: keycloakPng,
},
{
+ id: 'elb',
title: 'ELB',
logo: iitsPng,
description: (
@@ -295,6 +339,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'obs-bucket',
title: 'Restricted OBS Bucket',
logo: iitsPng,
description: (
@@ -310,6 +355,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'obs-secrets-reader',
title: 'OBS Secrets Reader',
logo: iitsPng,
description: (
@@ -325,6 +371,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'obs-secrets-writer',
title: 'OBS Secrets Writer',
logo: iitsPng,
description: (
@@ -341,6 +388,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'private-dns',
title: 'Private DNS',
logo: iitsPng,
description: (
@@ -356,6 +404,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'projects',
title: 'Projects',
logo: iitsPng,
description: (
@@ -371,6 +420,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'public-dns',
title: 'Public DNS',
logo: iitsPng,
description: (
@@ -387,6 +437,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'rds',
title: 'RDS',
logo: iitsPng,
description: (
@@ -402,6 +453,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'sfs',
title: 'SFS',
logo: iitsPng,
description: (
@@ -417,6 +469,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'snat',
title: 'SNAT',
logo: iitsPng,
description: (
@@ -432,6 +485,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'terraform-remote-state',
title: 'Encrypted Terraform Remote State',
logo: iitsPng,
description: (
@@ -447,6 +501,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'vpc-subnet',
title: 'VPC/Subnet',
logo: iitsPng,
description: (
@@ -462,6 +517,7 @@ export const TemplatesList: TemplateItem[] = [
},
{
+ id: 'waf',
title: 'WAF',
logo: iitsPng,
description: (
diff --git a/src/components/Templates/index.tsx b/src/components/Templates/index.tsx
index f16fc1baa5..1c0beef79e 100644
--- a/src/components/Templates/index.tsx
+++ b/src/components/Templates/index.tsx
@@ -1,8 +1,9 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useCallback } from "react";
import styles from "./styles.module.css";
import TemplateCard from "./TemplateCard";
import { TemplatesList } from "./TemplatesList";
import useBaseUrl from '@docusaurus/useBaseUrl';
+import { ODSButton, ODSChipSet, ODSToggleChip } from '@telekom-ods/react-ui-kit';
const FILTERS = [
{ label: "Ansible", value: "ansible" },
@@ -12,7 +13,6 @@ const FILTERS = [
] as const;
type FilterType = (typeof FILTERS)[number]["value"];
-
const normalize = (v: string) => v.trim().toLowerCase();
function splitTemplateTypes(typeField?: string): string[] {
@@ -38,27 +38,23 @@ export default function Templates() {
});
};
- const onChipRowClickCapture = (e: React.MouseEvent) => {
- const host = (e.target as HTMLElement)?.closest("scale-chip") as HTMLElement | null;
- if (!host) return;
-
- const value = host.getAttribute("data-chip") as FilterType | null;
- if (!value) return;
-
- e.preventDefault();
- e.stopPropagation();
- toggleType(value);
- };
+ const resetFilters = useCallback(() => {
+ setActiveTypes(new Set());
+ }, []);
const filteredTemplates = useMemo(() => {
- if (activeTypes.size === 0) return TemplatesList;
-
- return TemplatesList.filter((tpl) => {
+ let templates = activeTypes.size === 0 ? TemplatesList : TemplatesList.filter((tpl) => {
const tplTypes = splitTemplateTypes(tpl.type);
- for (const t of activeTypes) {
- if (tplTypes.includes(t)) return true;
- }
- return false;
+ return Array.from(activeTypes).some(t => tplTypes.includes(t));
+ });
+
+ // Deduplicate by id/link
+ const seen = new Set();
+ return templates.filter(tpl => {
+ const key = tpl.id || tpl.link;
+ if (seen.has(key)) return false;
+ seen.add(key);
+ return true;
});
}, [activeTypes]);
@@ -67,48 +63,61 @@ export default function Templates() {
Filter by type:
-
+
{FILTERS.map(({ label, value }) => {
const isActive = activeTypes.has(value);
+
return (
-
- {label}
-
+ onClick={() => toggleType(value)}
+ />
);
})}
-
-
-
setActiveTypes(new Set())}
- >
-
+
+
+
- {filteredTemplates.length === 0 ? (
-
-
-
-
No results match your filters.
-
+ {filteredTemplates.length === 0 ? (
+
+
+
+
No results match your filters.
-
- ) : (
- filteredTemplates.map((tpl) => (
-
- ))
- )}
-
+
+ ) : (
+
+ {filteredTemplates.map((tpl, idx) => (
+
+
+ ))}
+
+ )}
*/
+.quickActionWrapper__content ods-card-quick-action {
+ width: 100% !important;
+ height: 100% !important;
+ display: block;
+}
+.quickActionWrapper__content .ODSQuickActionCardPreferredContent {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+}
+
+.quickActionWrapper__content .ODSQuickActionCardPreferredContent-Title {
+ display: flex !important;
+ align-items: center !important;
+ gap: 8px !important;
+ margin: 0 0 6px 0 !important;
+ font-size: 1rem !important;
+ line-height: 1.2rem !important;
+}
+
+/* Subtitle clamps AND can shrink slightly if space is tight */
+.quickActionWrapper__content .ODSQuickActionCardPreferredContent-Subtitle {
+ font-weight: 400;
+ font-family: var(--ifm-font-family-base);
+
+ /* “adjust size if necessary” (pragmatic approach) */
+ font-size: clamp(0.8rem, 0.85rem + 0.2vw, 0.9rem);
+ line-height: 1.2rem;
+
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ word-break: break-word;
+
+ /* ensures consistent card heights even with short text */
+ min-height: calc(1.2rem * 3);
+}
+
+.quickActionWrapper__content a,
+.quickActionWrapper__content a:hover,
+.quickActionWrapper__content a:focus {
+ text-decoration: none !important;
+}
+
+/* DocCardList */
+
+
+.quickActionWrapper__content_list .ODSCardQuickAction {
+ --ODSCardQuickAction-width: 100% !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ margin-top: 10px;
+}
+
+.quickActionWrapper__content_list .ODSQuickActionCardPreferredContent-Subtitle {
+ font-weight: 400;
+ font-family: var(--ifm-font-family-base);
+ font-size: var(--ifm-code-font-size);
+ line-height: 1.3rem;
+
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ word-break: break-word;
+}
+
+.quickActionWrapper__content_list .ODSQuickActionCardPreferredContent-Title {
+ display: flex !important;
+ align-items: center !important;
+ gap: 8px !important;
+}
+
+.quickActionWrapper__content_list a,
+.quickActionWrapper__content_list a:hover,
+.quickActionWrapper__content_list a:focus {
+ text-decoration: none !important;
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 20f410720e..e51607e18e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,36 +1,11 @@
import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-// import Heading from '@theme/Heading';
-// import { useThemeConfig } from '@docusaurus/theme-common';
-// import useBaseUrl from '@docusaurus/useBaseUrl';
-
-// import styles from './index.module.css';
import HomepageFeaturedServices from '../components/HomepageFeaturedServices';
-import HomepageAskAQuestion from '../components/HomepageAskAQuestion';
import HomepageContribute from '../components/HomepageContribute';
-
-// function HomepageHeader() {
-// const { siteConfig } = useDocusaurusContext();
-// const navbarStyle = useThemeConfig().navbar.style;
-// const buttonVariant = navbarStyle === 'dark' ? "primary" : "secondary-white"
-// return (
-//
-// );
-// }
+import HomepageMarketplace from '../components/HomepageMarketplace';
+import HomePageHeroPromo from '../components/HomePageHeroPromo';
+import HomePageNewArticles from '../components/HomePageNewArticles';
export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext();
@@ -40,16 +15,28 @@ export default function Home(): JSX.Element {
description={`${siteConfig.title}`}>
{/*
-
+
+
+
diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md
deleted file mode 100644
index 9756c5b668..0000000000
--- a/src/pages/markdown-page.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.
diff --git a/src/pages/webinars.mdx b/src/pages/webinars.mdx
deleted file mode 100644
index f0134266bb..0000000000
--- a/src/pages/webinars.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Webinars
-description: webinars
-hide_table_of_contents: true
----
-
-import YouTubeWebinars from '@site/src/components/YouTubeWebinars';
-
-# Webinars
-
-Welcome to our community-curated collection of webinars for Open Telekom Cloud. Here you'll find a variety of sessions created by our experts and our partners sharing practical knowledge, hands-on demos,
-and insights around building with Open Telekom Cloud. Whether you're just getting started or exploring advanced use cases, these recordings are here to help you make the most of
-Open Telekom Cloud and our partners solutions.
-
-
-
- {/* Icon + one-line‐truncated title */}
-
- {icon}
- {title}
-
-
- {/* Description clamped to 3 lines (always 3 lines tall) */}
- {description && (
-
- {description}
-
- )}
-
+
+
+
+ {/* {icon} */}
+ {title}
+
+ }
+ filled
+ href={href}
+ size="small"
+ target={target}
+ />
+
-
-
-
-
-
- {doc.title}
-
- {doc.description && (
-
{doc.description}
- )}
-
-
+
+ }
+ titleType="text"
+ // tag1Props={{label: 'New props', type: 'strong'}} tag2Props={{label: 'V2', type: 'basic'}}
+ />
+
+ }
+ filled
+ href={doc.permalink}
+ size="small"
+ target="_self"
+ />
+