Skip to content

Commit 3ff7585

Browse files
lamATnginxlamATnginx
authored
Card: Updated card for old frame (#319)
1 parent b86c216 commit 3ff7585

File tree

5 files changed

+181
-90
lines changed

5 files changed

+181
-90
lines changed

‎assets/css/v2/style.css

Lines changed: 116 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1199,77 +1199,144 @@ h6:has(a):hover {
11991199
color: oklch(var(--color-brand));
12001200
}
12011201

1202-
/* Landing page cards */
1203-
.text-content .card-layout {
1202+
/* Product landing page cards */
1203+
.card-brand-icon {
1204+
margin: 0;
1205+
}
1206+
1207+
.card[data-grid="half"] {
1208+
grid-column: 1;
1209+
}
1210+
1211+
.card[data-grid="wide"] {
12041212
grid-column: 1;
1213+
}
1214+
1215+
@media (min-width: 55rem) {
1216+
.card[data-grid="half"] {
1217+
grid-column: span 6;
1218+
}
1219+
1220+
.card[data-grid="wide"] {
1221+
grid-column: 1 / -1;
1222+
}
1223+
}
1224+
1225+
.card-layout {
1226+
display: flex;
1227+
flex-direction: column;
1228+
gap: 1.5rem;
12051229

12061230
.card-section {
12071231
display: flex;
12081232
flex-direction: column;
1209-
gap: 1rem;
1210-
1211-
strong {
1212-
font-weight: 500;
1213-
}
1233+
gap: 1.5rem;
12141234

1215-
/* Hide all the cards past 3 if it is a featured card section */
12161235
&.featured-section {
1217-
.card-section-content.card-grid
1218-
> *:nth-child(n + 4 of div.card-container) {
1236+
/* Hide all the cards past 3 if it is a featured card section */
1237+
.card-section-content > *:nth-child(n + 4 of a.card) {
12191238
display: none;
12201239
}
12211240
}
1222-
}
1223-
}
12241241

1225-
/* Optional grid layout */
1226-
.card-grid {
1227-
display: grid;
1228-
grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
1229-
gap: 1.5rem;
1242+
.card-section-title {
1243+
font-weight: 500;
1244+
font-size: var(--font-step-2);
1245+
display: block;
1246+
}
12301247

1231-
.card-container {
1232-
border: 1px solid oklch(var(--color-codeblock-border));
1233-
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1234-
padding: 1rem;
1248+
.card-section-content {
1249+
display: flex;
1250+
flex-direction: column;
1251+
gap: 1rem;
12351252

1236-
&.featured-card {
1237-
/* If there is a featured card, only the featured card should be full length */
1238-
grid-column: 1 / -1;
1253+
&.card-grid {
1254+
display: grid;
1255+
grid-template-columns: repeat(12, 1fr);
1256+
gap: 1.5rem;
1257+
1258+
@media (max-width: 55rem) {
1259+
grid-template-columns: 1fr;
1260+
}
12391261

1240-
/* If there is a featured card AND two cards, the last one should be full length */
1241-
~ .card-container:nth-child(2n):last-child {
1242-
grid-column: 1 / -1;
1262+
.card {
1263+
border: 1px solid oklch(var(--color-codeblock-border));
1264+
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1265+
padding: 1rem;
1266+
order: 2;
1267+
}
12431268
}
1244-
}
1245-
}
12461269

1247-
/* If there is no featured card, last card that is the 3rd one should be full width */
1248-
&:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
1249-
grid-column: 1 / -1;
1270+
.card {
1271+
color: oklch(var(--color-foreground));
1272+
text-decoration: none;
1273+
1274+
.card-container {
1275+
display: flex;
1276+
flex-direction: column;
1277+
gap: 0.5rem;
1278+
}
1279+
1280+
.card-header {
1281+
display: flex;
1282+
flex-direction: row;
1283+
gap: 1rem;
1284+
align-items: center;
1285+
color: oklch(var(--color-brand));
1286+
1287+
img.card-brand-icon {
1288+
height: 1.5rem;
1289+
width: auto;
1290+
}
1291+
1292+
h2 {
1293+
padding: 0;
1294+
margin: 0;
1295+
font-size: var(--font-step-1);
1296+
}
1297+
}
1298+
}
1299+
}
12501300
}
12511301
}
12521302

1253-
.card-container {
1254-
display: flex;
1255-
flex-direction: column;
1256-
gap: 0.5rem;
1257-
margin-bottom: 1rem;
1303+
/* Home landing page cards */
1304+
.homepage .card-layout {
1305+
margin-block-end: 3rem;
1306+
gap: 3rem;
12581307

1259-
.card-header {
1260-
display: flex;
1261-
flex-direction: row;
1262-
gap: 0.5rem;
1308+
.card-section {
1309+
.card-section-content.card-grid {
1310+
grid-template-columns: 1fr;
12631311

1264-
.card-brand-icon {
1265-
height: 20px;
1266-
width: auto;
1267-
}
1312+
@media (min-width: 70rem) {
1313+
grid-template-columns: repeat(12, 1fr);
1314+
grid-auto-rows: 1fr;
1315+
}
12681316

1269-
h2 {
1270-
padding: 0;
1271-
margin: 0;
1272-
font-size: 1rem;
1317+
.card {
1318+
padding: 1rem 2rem 2rem 2rem;
1319+
1320+
.card-container {
1321+
height: 7rem;
1322+
justify-content: space-around;
1323+
1324+
.card-header {
1325+
justify-content: flex-start;
1326+
1327+
.card-brand-icon {
1328+
height: 40px;
1329+
width: auto;
1330+
}
1331+
}
1332+
}
1333+
1334+
&:hover {
1335+
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
1336+
text-decoration-color: oklch(var(--color-background));
1337+
border: 1px solid oklch(var(--color-brand) / 0.8);
1338+
}
1339+
}
12731340
}
12741341
}
12751342
}

‎exampleSite/content/test-product/_index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ cascade:
1111
---
1212
{{<card-layout>}}
1313
{{<card-section showAsCards="true">}}
14-
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
14+
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed" isFullSize="true">}}
1515
All shortcodes in one page.
1616
{{</card >}}
1717
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
@@ -29,7 +29,7 @@ cascade:
2929
[//]: # "Provide any sort of additional supporting content you may want customers to see as well (e.g. more cards, diagrams, changelogs, etc.)"
3030
{{<card-layout>}}
3131
{{<card-section title="NGINX" showAsCards="true" >}}
32-
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB" >}}
32+
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.png" >}}
3333
Installing NGINX
3434
{{</card >}}
3535
{{</card-section >}}

‎layouts/shortcodes/card-layout.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
<!-- Render the main content first with modifications, then render the custom content -->
2-
<div class="card-layout">{{ .Inner | markdownify }}</div>
2+
<div class="card-layout" data-testid="card-layout">{{- .Inner | markdownify -}}</div>

‎layouts/shortcodes/card-section.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{{ $title := .Get "title" }}
22
{{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }}
33
{{ $showAsCardsParam := .Get "showAsCards" | default "false"}}
4+
45
{{- /* Validate the parameter strictly */ -}}
56
{{- if not (in (slice "true" "false") $showAsCardsParam) -}}
67
{{- warnf "The '<card-section>' Shortcode parameter 'showAsCards' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $showAsCardsParam -}}
@@ -15,14 +16,18 @@
1516
{{- end -}}
1617
{{- $isFeaturedSection := cond (eq $isFeaturedSectionParam "true") "true" "false" -}}
1718
{{- $class := "card-grid" -}}
19+
20+
{{- /* Get number of cards */ -}}
21+
{{ $cardCount := len (findRE "<div\\s+class=\"card\"[\\s\\S]*?>" .Inner) }}
22+
1823
{{- /* Validate that the parent is card-layout */ -}}
1924
{{ if eq .Parent.Name "card-layout"}}
20-
<div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}" data-mf="true" style="display: none;">
25+
<div class="card-section{{if eq $isFeaturedSection "true"}} featured-section{{ end }}" data-testid="{{if eq $isFeaturedSection "true"}}card-section__featured-section{{else}}card-section{{ end }}" data-mf="true" style="display: none;">
2126
{{- if $title -}}
2227
<strong class="card-section-title">{{- $title -}}</strong>
23-
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{- .Inner -}}</div>
28+
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}" data-testid="{{ if eq $showAsCards "true" }}card-section-content__card-grid{{else}}card-section-content{{ end }}">{{ .Inner }}</div>
2429
{{ else }}
25-
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{ .Inner }}</div>
30+
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}" data-testid="{{ if eq $showAsCards "true" }}card-section-content__card-grid{{else}}card-section-content{{ end }}">{{ .Inner }}</div>
2631
{{ end }}
2732
</div>
2833
<div class="row" data-mf="false">

‎layouts/shortcodes/card.html

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,74 @@
22
{{- $titleUrl := .Get "titleUrl" | default "/" -}}
33
{{- $icon := .Get "icon" | default "book-open" -}}
44
{{- $brandIcon := .Get "brandIcon" -}}
5-
{{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
5+
{{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
6+
{{- $isLandingParam := .Get "isLanding" | default "false" }}
7+
68
{{- /* Validate the parameter strictly */ -}}
7-
{{- if not (in (slice "true" "false") $isFeaturedParam) -}}
8-
{{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
9+
{{- if not (in (slice "true" "false") $isFullSizeParam) -}}
10+
{{- warnf "The '<card>' Shortcode parameter 'isFullSize' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFullSizeParam -}}
911
{{- end -}}
10-
{{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
11-
{{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
12-
{{- $newCard := dict "title" ($title) "content" (.Inner) -}}
13-
{{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
12+
{{- $isFullSize := cond (eq $isFullSizeParam "true") "true" "false" -}}
13+
14+
{{- if not (in (slice "true" "false") $isLandingParam) -}}
15+
{{- warnf "The '<card>' Shortcode parameter 'isLanding' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isLandingParam -}}
16+
{{- end -}}
17+
{{- $isLanding := cond (eq $isLandingParam "true") "true" "false" -}}
18+
19+
{{- /* Set up the positioning */ -}}
20+
{{ $dataGrid := "" }}
21+
{{ if eq $isFullSize "true" }}
22+
{{ $dataGrid = "wide"}}
23+
{{ else if (eq $isLanding "true") }}
24+
{{ $dataGrid = "third"}}
25+
{{ else }}
26+
{{ $dataGrid = "half"}}
27+
{{ end }}
28+
29+
{{- /* Build the url */ -}}
30+
{{ $url := printf "%s%s" .Page.Permalink $titleUrl }}
31+
{{ if eq (substr $titleUrl 0 1) "/" }}
32+
{{ $url = printf "%s%s" .Site.BaseURL (substr $titleUrl 1) }}
33+
{{ else if (strings.Contains $titleUrl "https") }}
34+
{{ $url = $titleUrl }}
35+
{{ end }}
36+
1437
{{- /* Validate that the parent is card-section and under 3 cards */ -}}
1538
{{- if (eq .Parent.Name "card-section") -}}
16-
<div class="card-container {{ if eq $isFeatured "true" }}featured-card{{ end }}" data-mf="true" style="display: none;">
39+
<a href="{{- $url -}}" alt="{{- $title -}}" class="card" data-grid="{{ $dataGrid }}" data-testid="card" data-mf="true" style="display: none;">
40+
<div class="card-container">
1741
{{- if $title -}}
1842
<div class="card-header">
1943
{{- if $brandIcon -}}
20-
<img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
21-
{{- else -}}
22-
{{- if $icon -}}
23-
{{ partial "lucide" (dict "context" . "icon" $icon) }}
24-
{{- end -}}
25-
{{- end -}}
26-
{{- if $titleUrl -}}
27-
<h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
28-
{{- else -}}
29-
<h2 class="card-title">{{- $title -}}</h2>
44+
<img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}">
45+
{{- else if $icon -}}
46+
{{ partial "lucide" (dict "context" . "icon" $icon) }}
3047
{{- end -}}
48+
<h2 class="card-title">{{- $title -}}</h2>
3149
</div>
3250
{{- else -}}
3351
{{ errorf "Mainframe: Missing param 'title'" }}
3452
{{- end -}}
35-
<p>{{- .Inner -}}</p>
53+
<div class="card-content">{{ .Inner }}</div>
3654
</div>
37-
<div class="col-md-5 card" data-mf="false">
38-
<div class="card-body">
39-
<h3 class="card-title" style="display: flex; align-items: center; gap: 5px;">
40-
{{- if $brandIcon -}}
41-
<img class="card-img-top" src="{{ .Site.BaseURL }}/images/icons/{{ $brandIcon }}.png"/>
42-
{{- else -}}
43-
<i class="fas fa-file-alt fa-lg card-img-top"></i>
44-
{{- end -}}
45-
{{- if ($title) -}}
46-
<a href="{{- $titleUrl -}}">{{- $title -}}</a>
47-
{{- else -}}
48-
{{ errorf "Old theme: Missing param 'title'" }}
49-
{{- end -}}
50-
</h3>
51-
<p>{{- .Inner -}}</p>
52-
</div>
55+
</a>
56+
<div class="col-md-5 card" data-mf="false">
57+
<div class="card-body">
58+
<h3 class="card-title" style="display: flex; align-items: center; gap: 5px;">
59+
{{- if $brandIcon -}}
60+
<img class="card-img-top" src="{{ .Site.BaseURL }}/images/icons/{{ $brandIcon }}"/>
61+
{{- else -}}
62+
<i class="fas fa-file-alt fa-lg card-img-top"></i>
63+
{{- end -}}
64+
{{- if ($title) -}}
65+
<a href="{{- $titleUrl -}}">{{- $title -}}</a>
66+
{{- else -}}
67+
{{ errorf "Old theme: Missing param 'title'" }}
68+
{{- end -}}
69+
</h3>
70+
<p>{{- .Inner -}}</p>
5371
</div>
72+
</div>
5473
{{- else -}}
5574
{{ errorf "The '<card>' must be nested directly inside the shortcode '<card-section>'. Please see the exampleSite for an example of usage." }}
5675
{{- end -}}

0 commit comments

Comments
 (0)