Skip to content

Commit 1db21f6

Browse files
gaurav-nelsongaurav-nelson
committed
feat: Refine pattern header layout and attribution
1 parent 251d888 commit 1db21f6

1 file changed

Lines changed: 81 additions & 54 deletions

File tree

‎layouts/partials/patterns-index.html‎

Lines changed: 81 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,77 +3,104 @@
33
{{ partial "menu-patterns.html" . }}
44
</div>
55
</div>
6+
<style>
7+
.pattern-header-row {
8+
display: flex;
9+
justify-content: space-between;
10+
align-items: center;
11+
margin-bottom: var(--pf-global--spacer--md);
12+
gap: var(--pf-global--spacer--md);
13+
}
14+
15+
.pattern-header-title {
16+
flex: 1 1 auto;
17+
min-width: 0;
18+
padding-right: var(--pf-global--spacer--md);
19+
}
20+
21+
.pattern-header-logo {
22+
flex: 0 0 auto;
23+
text-align: right;
24+
}
25+
26+
@media (max-width: 768px) {
27+
.pattern-header-row {
28+
align-items: flex-start;
29+
}
30+
31+
.pattern-header-logo {
32+
display: none;
33+
}
34+
}
35+
</style>
636
<main class="pf-c-page__main" tabindex="0">
737
<section class="pf-c-page__main-section">
838
{{ partial "toc-mobile.html" . }}
939
{{ partial "page-toolbar.html" . }}
1040
<div class="pf-u-display-flex">
1141
{{ partial "toc.html" . }}
1242
<div class="pf-c-content">
13-
<div class="pf-c-panel pf-m-raised">
43+
<div class="pf-c-panel">
1444
<div class="pf-c-panel__main">
1545
<div class="pf-c-panel__main-body">
16-
<div class="pf-l-grid pf-m-gutter">
17-
<div class="pf-l-grid__item pf-m-10-col">
18-
<h1 class="pf-c-title pf-m-4xl">{{ .Title }}</h1>
19-
</div>
20-
<div class="pf-l-grid__item pf-m-2-col">
21-
{{ if (isset .Params "pattern_logo") }}
22-
<div class="pf-c-panel">
23-
<div class="pf-c-panel__main">
24-
<div class="pf-c-panel__main-body pf-u-text-align-right">
25-
<img src="/images/logos/{{ .Params.pattern_logo }}" class="pattern_logo" alt="Points">
26-
</div>
27-
</div>
46+
<p class="pf-u-font-size-sm pf-u-color-200 pf-u-font-weight-bold pf-u-text-transform-uppercase pf-u-mb-sm">Pattern</p>
47+
<div class="pattern-header-row">
48+
<div class="pattern-header-title">
49+
<h1 class="pf-c-title pf-m-4xl pf-u-mt-0">{{ .Title }}</h1>
50+
{{ if or (isset .Params "authors") (isset .Params "company") }}
51+
<div class="pf-u-mt-sm pf-u-color-200">
52+
{{ if (isset .Params "authors") }}
53+
{{ partial "authors.html" . }}
54+
{{ end }}
55+
{{ if and (isset .Params "authors") (isset .Params "company") }}
56+
<span class="pf-u-mx-sm">|</span>
57+
{{ end }}
58+
{{ if (isset .Params "company") }}
59+
{{ .Params.company }}
60+
{{ end }}
2861
</div>
2962
{{ end }}
3063
</div>
31-
{{ if (isset .Params "authors") }}
32-
<div class="pf-l-grid__item pf-m-3-col">
33-
Author{{if (gt .Params.authors 1)}}s{{ end }}:
34-
</div>
35-
<div class="pf-l-grid__item pf-m-9-col">
36-
{{ partial "authors.html" . }}
37-
</div>
38-
{{ end }}
39-
{{ if (isset .Params "company") }}
40-
<div class="pf-l-grid__item pf-m-3-col">
41-
Company:
42-
</div>
43-
<div class="pf-l-grid__item pf-m-9-col">
44-
{{ .Params.company }}
45-
</div>
46-
{{ end }}
47-
<div class="pf-l-grid__item pf-m-3-col">
48-
Validation status:
49-
</div>
50-
<div class="pf-l-grid__item pf-m-9-col">
51-
{{ $validated := .Param "tier" }}
52-
{{ if (eq $validated "maintained" ) }}
53-
{{ partial "label-maintained.html" . }}
54-
{{ else if (eq $validated "tested" ) }}
55-
{{ partial "label-tested.html" . }}
64+
<div class="pattern-header-logo">
65+
{{ if and (isset .Params "partners") (isset .Params "pattern_logo") }}
66+
<img src="/images/logos/{{ .Params.pattern_logo }}" class="pattern_logo" alt="{{ .Title }} logo" style="max-height:56px; max-width:240px; width:auto; height:auto; object-fit:contain; object-position:right center;">
5667
{{ else }}
57-
{{ partial "label-sandbox.html" . }}
68+
<img src="/images/logos/ansible-edge.png" alt="Ansible Edge logo" style="max-height:56px; max-width:240px; width:auto; height:auto; object-fit:contain; object-position:right center;">
5869
{{ end }}
5970
</div>
60-
{{ if (isset .Params "ci") }}
61-
<div class="pf-l-grid__item pf-m-3-col">
62-
CI status:
63-
</div>
64-
<div class="pf-l-grid__item pf-m-9-col">
65-
{{ partial "ci.html" . }}
66-
</div>
67-
{{ end }}
68-
{{ if (isset .Params "links") }}
69-
<div class="pf-l-grid__item pf-m-3-col">
70-
Links:
71-
</div>
72-
<div class="pf-l-grid__item pf-m-9-col">
73-
{{ partial "links.html" . }}
74-
</div>
71+
</div>
72+
73+
<div class="pf-u-mb-md">
74+
<span class="pf-u-font-size-xs pf-u-color-200 pf-u-font-weight-bold pf-u-text-transform-uppercase pf-u-mr-md">Status</span>
75+
{{ $validated := .Param "tier" }}
76+
{{ if (eq $validated "maintained" ) }}
77+
{{ partial "label-maintained.html" . }}
78+
{{ else if (eq $validated "tested" ) }}
79+
{{ partial "label-tested.html" . }}
80+
{{ else }}
81+
{{ partial "label-sandbox.html" . }}
7582
{{ end }}
7683
</div>
84+
85+
{{ if (isset .Params "ci") }}
86+
<div class="pf-u-mb-md">
87+
{{ partial "ci.html" . }}
88+
</div>
89+
{{ end }}
90+
91+
{{ if (isset .Params "links") }}
92+
<div class="pf-u-pt-md pf-u-mb-sm">
93+
<p class="pf-u-font-size-xs pf-u-color-200 pf-u-font-weight-bold pf-u-text-transform-uppercase pf-u-mb-sm">Resources</p>
94+
{{ partial "links.html" . }}
95+
</div>
96+
{{ end }}
97+
98+
{{ if (isset .Params "partners") }}
99+
<p class="pf-u-color-200 pf-u-font-size-sm pf-u-mt-md pf-u-mb-0">
100+
{{ delimit .Params.partners ", " }} and related names, logos, and product names are trademarks or registered trademarks of their respective owners. This pattern is contributed as community content and is not an official product endorsement.
101+
</p>
102+
{{ end }}
103+
<div class="pf-u-pt-md pf-u-mt-md" style="border-top: 1px solid var(--pf-global--BorderColor--100);"></div>
77104
</div>
78105
</div>
79106
</div>

0 commit comments

Comments
 (0)