Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] summary bars #21667

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

[WIP] summary bars #21667

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8090149
Summary bars for docs
sarahsanders-docker Dec 18, 2024
d898e3c
Remove .css files to move styling inline
sarahsanders-docker Dec 18, 2024
0745724
First pass inline styles
sarahsanders-docker Dec 18, 2024
cb05ad4
Remove EA callout
sarahsanders-docker Dec 18, 2024
d189bdb
Remove bold
sarahsanders-docker Dec 18, 2024
760983b
Remove bold
sarahsanders-docker Dec 18, 2024
51c70d6
Remove border radius
sarahsanders-docker Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Summary bars for docs
  • Loading branch information
@sarahsanders-docker
sarahsanders-docker committed Dec 18, 2024
commit 8090149a64e7e7a7b1bbedab639a8a0ddc733383
2 changes: 2 additions & 0 deletions assets/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@
@import "/assets/css/syntax-light";
@import "/assets/css/syntax-dark";
@import "/assets/css/icons";

@import "/assets/css/summary-bar";
26 changes: 26 additions & 0 deletions assets/css/summary-bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.summary-bar {
display: flex;
gap: 1rem;
padding: 1rem;
background-color: theme("colors.blue.light.500");
border: 1px solid theme("colors.blue.light.500");
border-radius: 5px;
margin-bottom: 1rem;
align-items: center;
}

.summary-icon {
display: flex;
align-items: center;
gap: 0.5rem;
}

.summary-icon .material-symbols-outlined {
font-size: 24px;
color: theme("colors.white");
}

.summary-label {
font-size: 14px;
color: theme("colors.white");
}
9 changes: 9 additions & 0 deletions ...rity/for-admins/hardened-desktop/settings-management/configure-admin-console.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,15 @@
text: EA
---

{{< summary-bar
subscription="domain"
subscriptionText="Business"
lifecycle="rocket_launch"
lifecycleText="EA"

Check warning on line 18 in content/manuals/security/for-admins/hardened-desktop/settings-management/configure-admin-console.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Docker.Acronyms] 'EA' has no definition.

Raw Output:
{"message": "[Docker.Acronyms] 'EA' has no definition.", "location": {"path": "content/manuals/security/for-admins/hardened-desktop/settings-management/configure-admin-console.md", "range": {"start": {"line": 18, "column": 20}}}, "severity": "WARNING"}
admin="admin_panel_settings"

Check warning on line 19 in content/manuals/security/for-admins/hardened-desktop/settings-management/configure-admin-console.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Docker.RecommendedWords] Consider using 'administrator' instead of 'admin'

Raw Output:
{"message": "[Docker.RecommendedWords] Consider using 'administrator' instead of 'admin'", "location": {"path": "content/manuals/security/for-admins/hardened-desktop/settings-management/configure-admin-console.md", "range": {"start": {"line": 19, "column": 5}}}, "severity": "INFO"}
adminText="Admin"

Check warning on line 20 in content/manuals/security/for-admins/hardened-desktop/settings-management/configure-admin-console.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Docker.RecommendedWords] Consider using 'administrator' instead of 'Admin'

Raw Output:
{"message": "[Docker.RecommendedWords] Consider using 'administrator' instead of 'Admin'", "location": {"path": "content/manuals/security/for-admins/hardened-desktop/settings-management/configure-admin-console.md", "range": {"start": {"line": 20, "column": 16}}}, "severity": "INFO"}
>}}

{{% restricted title="Early Access" %}}
Settings Management in the Docker Admin Console is an [early access](/release-lifecycle#early-access-ea) feature and is available to Docker Business customers only.
{{% /restricted %}}
Expand Down
55 changes: 55 additions & 0 deletions layouts/shortcodes/summary-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!--
Summary bar icon library:

1. Subscription:
- Label: Business | Icon: domain
- Label: Team | Icon: groups
- Label: Pro | Icon: person_add
- Label: Personal | Icon: person
- Label: Available to all | Icon: public

2. Release lifecycle:
- Label: Experimental | Icon: science
- Label: Beta | Icon: bolt
- Label: EA | Icon: rocket_launch
- Label: GA | Icon: check_circle
- Label: Retired | Icon: package_2

3. Minimum version:
- Label: Version [version_number] | Icon: browser_updated

4. Admin:
- Label: Admin | Icon: admin_panel_settings
-->

{{ $styles := resources.Get "css/summary-bar.css" | resources.Minify }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

<div class="summary-bar">
<span class="summary-title">Available for:</span>
{{ if .Get "subscription" }}
<div class="summary-icon">
<span class="material-symbols-outlined">{{ .Get "subscription" }}</span>
<span class="summary-label">{{ .Get "subscriptionText" }}</span>
</div>
{{ end }}
{{ if .Get "lifecycle" }}
<div class="summary-icon">
<span class="material-symbols-outlined">{{ .Get "lifecycle" }}</span>
<span class="summary-label">{{ .Get "lifecycleText" }}</span>
</div>
{{ end }}
{{ if .Get "version" }}
<div class="summary-icon">
<span class="material-symbols-outlined">{{ .Get "version" }}</span>
<span class="summary-label">{{ .Get "versionText" }}</span>
</div>
{{ end }}
{{ if .Get "admin" }}
<div class="summary-icon">
<span class="material-symbols-outlined">{{ .Get "admin" }}</span>
<span class="summary-label">{{ .Get "adminText" }}</span>
</div>
{{ end }}
</div>