Skip to content
This repository was archived by the owner on Aug 5, 2021. It is now read-only.

Commit 9f29945

Browse files
DanielJDufourDanielJDufour
authored
Merge pull request #478 from GSA/sc_Project-details_sub
Update project pages
2 parents 492c8a9 + e5a59be commit 9f29945

24 files changed

+339
-601
lines changed

‎src/app/app.routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
SchemaValidatorComponent,
1010
SearchResultsComponent,
1111
SharedLayoutComponent,
12+
RepoComponent,
1213
} from './utils/app-components';
1314
import { EXPLORE_CODE_ROUTES } from './routes/explore-code';
1415
import { POLICY_GUIDE_ROUTES } from './routes/policy-guide';

‎src/app/components/explore-code/agencies/agencies.style.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,37 @@
22
@import '../../../../styles/base/grid-settings';
33
@import '~bourbon/app/assets/stylesheets/bourbon';
44
@import '~bourbon-neat/app/assets/stylesheets/neat';
5+
@import '~uswds/src/stylesheets/core/variables';
6+
7+
8+
.agencies-breadcrumb {
9+
font-size: 0.8em;
10+
margin-bottom: 4rem;
11+
12+
ul {
13+
li {
14+
display: inline-block;
15+
16+
&::before {
17+
content: '> ';
18+
}
19+
20+
&:first-of-type {
21+
&::before {
22+
content: '';
23+
}
24+
}
25+
26+
a {
27+
color: $color-black;
28+
}
29+
30+
&:last-child {
31+
font-weight: $font-bold;
32+
}
33+
}
34+
}
35+
}
536

637
.sidebar-agencies {
738
@media screen and (min-width: $medium-screen) {

‎src/app/components/explore-code/agencies/agencies.template.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<div class="agencies-breadcrumb">
2+
<ul class="usa-unstyled-list">
3+
<li><a routerLink="/">Home</a></li>
4+
<li>Browse Projects</li>
5+
</ul>
6+
</div>
17
<div class='sidebar-agencies'>
28
<agency-sidebar></agency-sidebar>
39
</div>

‎src/app/components/explore-code/agencies/agency-sidebar/agency-sidebar.template.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="agency-sidebar">
22
<sidebar>
3-
<sidebar-menu-text>Agencies</sidebar-menu-text>
4-
<sidebar-title>Agencies</sidebar-title>
3+
<sidebar-menu-text>Browse by Agency</sidebar-menu-text>
4+
<sidebar-title>Browse by Agency</sidebar-title>
55
<sidebar-content>
66
<li *ngFor="let agency of agencies">
77
<a toggle-menu routerLink="{{agency.acronym}}" routerLinkActive="usa-current">

‎src/app/components/explore-code/agency/agency.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,4 +106,5 @@ export class AgencyComponent implements OnInit, OnDestroy {
106106
this.repos = [...this.repos, ...this.allRepos.slice(this.currentIndex, this.currentIndex + this.pageSize)];
107107
this.currentIndex = this.currentIndex + this.pageSize;
108108
}
109+
109110
}

‎src/app/components/explore-code/agency/agency.styles.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,14 @@
2323
.repo {
2424

2525
a {
26-
color: $color-gray;
2726
display: block;
2827
font-size: 0.95em;
2928
margin-bottom: 1em;
3029
text-decoration: none;
31-
32-
&:hover {
3330
h3 {
3431
color: $color-primary;
32+
text-decoration: underline;
3533
}
36-
}
3734
}
3835

3936
p {
@@ -42,6 +39,7 @@
4239
}
4340
}
4441

42+
4543
.repos-count {
4644
margin: 0 0 1.5em;
4745
}
@@ -52,6 +50,7 @@
5250
li {
5351
display: inline-block;
5452
margin-right: 0.75em;
53+
color: $color-primary;
5554

5655
&:last-child {
5756
margin-right: 0;

‎src/app/components/explore-code/agency/agency.template.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,8 @@ <h3 class="repo-name">{{ repo.name }}</h3>
3232
<span>{{ language }}</span>
3333
</li>
3434
<li>
35-
<i class="icon fa fa-code"></i>
36-
<span *ngIf="repo.permissions.usageType === 'openSource'">Open Source</span>
37-
<span *ngIf="repo.permissions.usageType === 'governmentWideReuse'">Government-Wide Reuse</span>
35+
<span *ngIf="repo.permissions.usageType === 'openSource'"><i class="icon fa fa-check-circle-o"></i>Open Source</span>
36+
<span *ngIf="repo.permissions.usageType === 'governmentWideReuse'"><i class="icon fa fa-refresh"></i>Government-Wide Reuse</span>
3837
</li>
3938
</ul>
4039
</div>

‎src/app/components/explore-code/explore-code.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { StateService } from '../../services/state';
88
})
99

1010
export class ExploreCodeComponent {
11+
1112
constructor(public stateService: StateService) {
1213
this.stateService.set('section', 'explore-code');
1314
}

‎src/app/components/explore-code/explore-code.style.scss

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
@import '~bourbon/app/assets/stylesheets/addons/font-stacks';
2-
@import '~uswds/src/stylesheets/core/variables';
31

4-
.explore-code-content {
5-
padding: 0.75em 0 3em;
62

7-
@media screen and (min-width: $medium-screen) {
8-
padding: 2em 0 3em;
9-
}
10-
}
3+

‎src/app/components/explore-code/explore-code.template.html

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
<subnav>
2-
<li>
3-
<a routerLink="agencies" routerLinkActive="active">
4-
By Agency
5-
</a>
6-
</li>
7-
</subnav>
1+
<hero-header
2+
title="Browse Projects">
3+
</hero-header>
84

9-
<div class="block block--light explore-code-content">
5+
<div class="explore-code-content">
106
<div class="usa-grid">
117
<router-outlet></router-outlet>
128
</div>

‎src/app/components/explore-code/repo/repo.component.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<div class="repo-general">
2+
3+
<!-- <div class="repo-banner">
4+
<h1>{{repo.agency.acronym}}</h1>
5+
<h2>{{repo.name}}</h2>
6+
7+
<a *ngIf="getRepositoryUrl() | isdefined" href="{{ getRepositoryUrl() }}">
8+
<button class="button button--transparent">Visit Repo</button>
9+
</a>
10+
</div> -->
11+
12+
13+
14+
<section *ngIf="repo" class="repo-container usa-grid">
15+
<div class="repo-breadcrumb">
16+
<ul class="usa-unstyled-list">
17+
<li><a routerLink="/">Home</a></li>
18+
<li><a routerLink="/explore-code/agencies/{{repo.agency.acronym}}">{{repo.agency.acronym}}</a></li>
19+
<li>{{repo.name}}</li>
20+
</ul>
21+
</div>
22+
<header>
23+
<div class="repo-header-container">
24+
<h2>{{ repo.name }}</h2>
25+
<span *ngIf="repo.date?.metadataLastUpdated" class="updated">
26+
<div>Last updated on {{repo.date.metadataLastUpdated | date: "MM/dd/yy"}}</div>
27+
</span>
28+
<span *ngFor="let tag of repo.tags">
29+
<button *ngIf="tag"
30+
[routerLink]="['/search']"
31+
[queryParams]="{ q: tag }"
32+
class="repo-tag">
33+
{{ tag }}
34+
</button>
35+
</span>
36+
<ul class="usa-unstyled-list repo-features">
37+
<li>
38+
<span *ngIf="repo.permissions?.usageType === 'openSource'"><i class="icon fa fa-check-circle-o"></i>Open Source</span>
39+
<span *ngIf="repo.permissions?.usageType === 'governmentWideReuse'"><i class="icon fa fa-refresh"></i>Government-Wide Reuse</span>
40+
</li>
41+
<span *ngIf="repo.permissions?.licenses && repo.permissions?.licenses?.length > 0 && repo.permissions?.licenses[0]?.name">
42+
<li>
43+
<i class="icon fa fa-certificate"></i>
44+
<span>{{ repo.permissions?.licenses[0]?.name }}</span>
45+
</li>
46+
</span>
47+
<span *ngIf="repo.contact.laborHours > 0">
48+
<li>
49+
<i class="icon fa fa-hourglass-end"></i>
50+
{{repo.contact.laborHours}} hours
51+
</li>
52+
</span>
53+
<span *ngIf="repo.languages?.length > 0">
54+
<li>
55+
<i class="icon fa fa-code"></i>
56+
<span *ngFor="let language of repo.languages; let last=last" class="language"
57+
[ngClass]="{last: last}">
58+
{{ language }}<span class="comma">,</span>
59+
</span>
60+
</li>
61+
</span>
62+
<!-- <li>
63+
<i class="icon fa fa-user"></i>
64+
<span>23 people use this</span>
65+
</li> -->
66+
<span *ngIf="repo.contact?.email | isdefined">
67+
<li>
68+
<i class="icon fa fa-envelope-o"></i>
69+
{{repo.contact.email}}
70+
</li>
71+
</span>
72+
73+
</ul>
74+
<p>{{repo.description}}</p>
75+
<br>
76+
<a *ngIf="getRepositoryUrl() | isdefined" href="{{ getRepositoryUrl() }}">
77+
<button class="button">Visit Repo</button>
78+
</a>
79+
</div>
80+
</header>
81+
82+
</section>
83+
<modal></modal>
84+

‎src/app/components/explore-code/repo/repo.component.scss

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
@import '~bourbon/app/assets/stylesheets/addons/clearfix';
2+
@import '../../../../styles/base/variables';
3+
@import '~uswds/src/stylesheets/core/variables';
4+
5+
6+
.repo-general {
7+
h2 {
8+
font-size: 3.5rem;
9+
margin: 0;
10+
color: #323a45;
11+
}
12+
a {
13+
color: $brand-teal-dark;
14+
text-decoration: underline;
15+
16+
&:hover {
17+
color: $brand-teal;
18+
}
19+
}
20+
button {
21+
margin-left: 0;
22+
}
23+
}
24+
25+
.repo-banner {
26+
background: url('./assets/img/american_flag_1920x1280_gradient.jpg');
27+
background-attachment: fixed;
28+
background-size: cover;
29+
margin-bottom: 2rem;
30+
padding-bottom: 8rem;
31+
padding-top: 8rem;
32+
text-align: center;
33+
}
34+
35+
.repo-breadcrumb {
36+
font-size: 0.8em;
37+
margin-bottom: 4rem;
38+
39+
ul {
40+
li {
41+
display: inline-block;
42+
43+
&::before {
44+
content: '> ';
45+
}
46+
47+
&:first-of-type {
48+
&::before {
49+
content: '';
50+
}
51+
}
52+
53+
a {
54+
color: $color-black;
55+
}
56+
57+
&:last-child {
58+
font-weight: $font-bold;
59+
}
60+
}
61+
}
62+
}
63+
64+
65+
.repo-container {
66+
67+
code {
68+
background-color: $brand-blue-gray;
69+
border-radius: 3px;
70+
color: $color-gray-lightest;
71+
font-size: 0.9em;
72+
padding: 2px 3px;
73+
}
74+
75+
header {
76+
@include clearfix;
77+
margin-bottom: 1em;
78+
padding-bottom: 1em;
79+
position: relative;
80+
}
81+
.updated {
82+
font-size: 1.5rem;
83+
color: $color-gray;
84+
}
85+
}
86+
87+
.repo-tag {
88+
border-radius: 3px;
89+
background-color: $brand-blue;
90+
padding: .25rem 1.25rem;
91+
}
92+
93+
.repo-actions {
94+
95+
li {
96+
display: inline-block;
97+
}
98+
}
99+
100+
.repo-features {
101+
margin: 1rem 0;
102+
padding: .5rem;
103+
width: 100%;
104+
background-color: lighten( $brand-blue , 60%);
105+
106+
li,span.li {
107+
display: inline;
108+
color: $brand-blue-dark;
109+
padding: .7rem;
110+
margin-right: 0.75em;
111+
i {
112+
margin-right: 0.2em;
113+
}
114+
}
115+
}
116+
117+
.repo-header-container {
118+
119+
h1 {
120+
margin: 0 0 0.25em;
121+
}
122+
123+
h3 {
124+
font-weight: normal;
125+
margin: 0;
126+
127+
a {
128+
color: $color-gray;
129+
font-size: 0.95em;
130+
text-decoration: none;
131+
132+
&:hover {
133+
border-bottom: 3px solid $brand-teal-dark;
134+
color: $color-gray-dark;
135+
}
136+
}
137+
}
138+
139+
p {
140+
font-size: 1em;
141+
margin: 0;
142+
}
143+
}
144+
145+
.icon {
146+
color: $brand-blue;
147+
}
148+
149+
150+
.language.last {
151+
.comma {
152+
display: none;
153+
}
154+
}

0 commit comments

Comments
 (0)