Skip to content

Commit 460b416

Browse files
IsaacMilarkyIsaacMilarky
authored
Merge pull request #124 from DSACMS/nat/minor-fixes
Frontend: Updated Website Copy + Minor Fixes
2 parents 7d5bc0d + 6dfb3bf commit 460b416

File tree

9 files changed

+100
-40
lines changed

9 files changed

+100
-40
lines changed

‎.github/workflows/checks.yml

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ jobs:
1818
glob_pattern: "**/*.py"
1919
filter_mode: "file"
2020
frontend-checks:
21+
permissions: write-all
2122
runs-on: ubuntu-latest
2223
defaults:
2324
run:

‎app/site/_data/site.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ const host = production ? "https://dsacms.github.io" : "http://0.0.0.0:8080"
66
const baseurl = production ? "/metrics" : ""
77

88
module.exports = {
9-
name: "CMS OSPO Repo Metrics",
10-
title: "CMS OSPO Repo Metrics",
11-
description: "Open Source Repository Metrics across CMS.gov",
9+
name: "CMS Metrics Website",
10+
title: "CMS.gov Open Source Repository Metrics",
11+
description: "Powered by the Open Source Program Office (OSPO) at the Digital Service at the Centers for Medicare and Medicaid Services.",
1212
type: "website",
1313
baseurl,
1414
url: `${host}${baseurl}`,

‎app/site/_includes/graph-toggle.liquid

+12-12
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,17 @@
1515
{% if graphsCheck %}
1616
<div class="graph-container">
1717
<h3>{{ title }}</h3>
18+
<ul class="usa-button-group ">
19+
{% for option in options %}
20+
<li class="usa-button-group__item">
21+
{% if forloop.first %}
22+
<button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
23+
{% else %}
24+
<button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button usa-button--outline" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
25+
{% endif %}
26+
</li>
27+
{% endfor %}
28+
</ul>
1829
{% for graph in graphs %}
1930
{% if forloop.first %}
2031
<div class={{ graphName }} id="{{ forloop.index0 }}">
@@ -23,6 +34,7 @@
2334
{% endif %}
2435
{% assign graphPath = graph | strip %}
2536
{% assign distPath = baseurl | append: "/assets/img/graphs" | append: graphPath %}
37+
{% assign fileExtension = path | split: '.' | last %}
2638
<figure>
2739
{% if fileExtension == 'svg' %}
2840
<embed type="image/svg+xml" src="{{ distPath }}" />
@@ -32,17 +44,5 @@
3244
</figure>
3345
</div>
3446
{% endfor %}
35-
36-
<ul class="usa-button-group ">
37-
{% for option in options %}
38-
<li class="usa-button-group__item">
39-
{% if forloop.first %}
40-
<button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
41-
{% else %}
42-
<button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button usa-button--outline" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
43-
{% endif %}
44-
</li>
45-
{% endfor %}
46-
</ul>
4747
</div>
4848
{% endif %}

‎app/site/_includes/project-type-tag.liquid

+56-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,59 @@
11
{% case type %}
2-
{% when "midsize" %}
3-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="20" role="img" aria-label="project type: {{ type }}"><title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="128" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="51" height="20" fill="#{{ color }}"/><rect width="128" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="1015" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">{{ type }}</text><text x="1015" y="140" transform="scale(.1)" fill="#fff" textLength="410">{{ type }}</text></g></svg>
4-
{% when "club" %}
5-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20" role="img" aria-label="project type: {{ type }}"><title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="110" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="33" height="20" fill="#{{ color }}"/><rect width="110" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="925" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="230">{{ type }}</text><text x="925" y="140" transform="scale(.1)" fill="#fff" textLength="230">{{ type }}</text></g></svg>
6-
{% when "toy" %}
7-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104" height="20" role="img" aria-label="project type: {{ type }}"><title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="104" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="27" height="20" fill="#{{ color }}"/><rect width="104" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="895" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">{{ type }}</text><text x="895" y="140" transform="scale(.1)" fill="#fff" textLength="170">{{ type }}</text></g></svg>
8-
{% when "stadium" %}
9-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="20" role="img" aria-label="project type: {{ type }}"><title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="132" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="55" height="20" fill="#{{ color }}"/><rect width="132" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="1035" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">{{ type }}</text><text x="1035" y="140" transform="scale(.1)" fill="#fff" textLength="450">{{ type }}</text></g></svg>
10-
{% when "federation" %}
11-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="144" height="20" role="img" aria-label="project type: {{ type }}"><title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="144" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="67" height="20" fill="#{{ color }}"/><rect width="144" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="1015" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="570">{{ type }}</text><text x="1095" y="140" transform="scale(.1)" fill="#fff" textLength="570">{{ type }}</text></g></svg>
2+
{% when 'midsize' %}
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
xmlns:xlink="http://www.w3.org/1999/xlink"
6+
width="128"
7+
height="20"
8+
role="img"
9+
aria-label="project type: {{ type }}"
10+
>
11+
<title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="128" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="51" height="20" fill="#{{ color }}"/><rect width="128" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="1015" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">{{ type }}</text><text x="1015" y="140" transform="scale(.1)" fill="#fff" textLength="410">{{ type }}</text></g>
12+
</svg>
13+
{% when 'club' %}
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
xmlns:xlink="http://www.w3.org/1999/xlink"
17+
width="170"
18+
height="20"
19+
role="img"
20+
aria-label="project type: {{ type }}"
21+
>
22+
<title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="110" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="33" height="20" fill="#{{ color }}"/><rect width="110" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="925" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="230">{{ type }}</text><text x="925" y="140" transform="scale(.1)" fill="#fff" textLength="230">{{ type }}</text></g>
23+
</svg>
24+
{% when 'toy' %}
25+
<svg
26+
xmlns="http://www.w3.org/2000/svg"
27+
xmlns:xlink="http://www.w3.org/1999/xlink"
28+
width="104"
29+
height="20"
30+
role="img"
31+
aria-label="project type: {{ type }}"
32+
>
33+
<title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="104" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="27" height="20" fill="#{{ color }}"/><rect width="104" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="895" y="140" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">{{ type }}</text><text x="895" y="140" transform="scale(.1)" fill="#fff" textLength="170">{{ type }}</text></g>
34+
</svg>
35+
{% when 'stadium' %}
36+
<svg
37+
xmlns="http://www.w3.org/2000/svg"
38+
xmlns:xlink="http://www.w3.org/1999/xlink"
39+
width="132"
40+
height="20"
41+
role="img"
42+
aria-label="project type: {{ type }}"
43+
>
44+
<title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="132" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="55" height="20" fill="#{{ color }}"/><rect width="132" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="1035" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="450">{{ type }}</text><text x="1035" y="140" transform="scale(.1)" fill="#fff" textLength="450">{{ type }}</text></g>
45+
</svg>
46+
{% when 'federation' %}
47+
<svg
48+
xmlns="http://www.w3.org/2000/svg"
49+
xmlns:xlink="http://www.w3.org/1999/xlink"
50+
width="144"
51+
height="20"
52+
role="img"
53+
aria-label="project type: {{ type }}"
54+
>
55+
<title>project type: {{ type }}</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="144" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="77" height="20" fill="#555"/><rect x="77" width="67" height="20" fill="#{{ color }}"/><rect width="144" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="395" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="670">project type</text><text x="395" y="140" transform="scale(.1)" fill="#fff" textLength="670">project type</text><text aria-hidden="true" x="1015" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="570">{{ type }}</text><text x="1095" y="140" transform="scale(.1)" fill="#fff" textLength="570">{{ type }}</text></g>
56+
</svg>
1257
{% else %}
13-
<img src="{{ link }}" alt="Project Type"/>
58+
<img src="{{ link }}" alt="Project Type">
1459
{% endcase %}

‎app/site/_layouts/repo-report.liquid

+6-2
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,13 @@ layout: base
1313
</div>
1414

1515
<div class="tags_row">
16-
{% render "project-type-tag", type: project.nadia_badge_name, color: project.nadia_color, link: project.nadia_shields_badge_url%}
16+
{% render 'project-type-tag',
17+
type: project.nadia_badge_name,
18+
color: project.nadia_color,
19+
link: project.nadia_shields_badge_url
20+
%}
1721
</div>
18-
22+
1923
<div class="report_container">
2024
<h2>Repo Stats</h2>
2125
{% if project %}

‎app/site/index.liquid

+5-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
layout: base
33
---
44
<div class="grid-container">
5-
<h1>Repo Metrics Website</h1>
5+
<div class="title">
6+
<img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo">
7+
<h1>Metrics Website</h1>
8+
</div>
69
<p>
7-
Welcome! This website is intended for program managers and developers interested in learning about the status and
8-
activity of open source projects within the CMS organization.
10+
{{ site.description }}
911
</p>
1012
<ul class="usa-card-group">
1113
<li class="usa-card tablet:grid-col-6">

‎app/src/css/style.css

+9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
@import "@uswds/uswds/dist/css/uswds.css";
22

3+
.title {
4+
display: flex;
5+
align-items: baseline;
6+
}
7+
.logo {
8+
width: 120px;
9+
height: 40px;
10+
margin-right: 10px;
11+
}
312
.github-information {
413
display: flex;
514
flex-direction: row;

‎app/src/img/cms-logo.jpg

184 KB
Loading

‎app/src/js/graphs.js

+8-9
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ window.showGraph = function (selectedGraphId, className, buttonName) {
44
graphs.forEach((graph) => {
55
const button = document.querySelector("#" + buttonName + graph.id)
66

7-
if (
8-
graph.id == selectedGraphId &&
9-
button.classList.contains("usa-button--outline")
10-
) {
11-
// Shows selected graph
12-
graph.style.display = "block"
13-
button.classList.remove("usa-button--outline")
7+
if (graph.id == selectedGraphId) {
8+
if (button.classList.contains("usa-button--outline")) {
9+
// Shows selected graph
10+
graph.style.display = "block";
11+
button.classList.remove("usa-button--outline");
12+
}
1413
} else {
1514
// Hides rest of graphs
16-
graph.style.display = "none"
17-
button.classList.add("usa-button--outline")
15+
graph.style.display = "none";
16+
button.classList.add("usa-button--outline");
1817
}
1918
})
2019
}

0 commit comments

Comments
 (0)