diff --git a/package-lock.json b/package-lock.json index d57f8091..7d66d8d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2603,7 +2603,6 @@ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, - "optional": true, "requires": { "delegates": "^1.0.0", "readable-stream": "^2.0.6" @@ -4642,8 +4641,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "constants-browserify": { "version": "1.0.0", @@ -5262,8 +5260,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", - "dev": true, - "optional": true + "dev": true }, "depd": { "version": "1.1.2", @@ -7299,7 +7296,6 @@ "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz", "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==", "dev": true, - "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -7349,7 +7345,6 @@ "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, - "optional": true, "requires": { "aproba": "^1.0.3", "console-control-strings": "^1.0.0", @@ -7386,8 +7381,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=", - "dev": true, - "optional": true + "dev": true }, "get-stream": { "version": "4.1.0", @@ -7701,8 +7695,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", - "dev": true, - "optional": true + "dev": true }, "has-value": { "version": "1.0.0", @@ -10198,8 +10191,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", - "dev": true, - "optional": true + "dev": true }, "map-visit": { "version": "1.0.0", @@ -11082,7 +11074,6 @@ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, - "optional": true, "requires": { "are-we-there-yet": "~1.1.2", "console-control-strings": "~1.1.0", @@ -11148,14 +11139,12 @@ "array-unique": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", - "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "optional": true + "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=" }, "braces": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "optional": true, "requires": { "arr-flatten": "^1.1.0", "array-unique": "^0.3.2", @@ -11173,7 +11162,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -11346,7 +11334,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "optional": true, "requires": { "extend-shallow": "^2.0.1", "is-number": "^3.0.0", @@ -11358,7 +11345,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -11418,8 +11404,7 @@ "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "optional": true + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" }, "is-glob": { "version": "4.0.1", @@ -11434,7 +11419,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "optional": true, "requires": { "kind-of": "^3.0.2" }, @@ -11443,7 +11427,6 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -11453,14 +11436,12 @@ "isobject": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "optional": true + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", - "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", - "optional": true + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==" }, "micromatch": { "version": "3.1.10", @@ -18467,7 +18448,6 @@ "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, - "optional": true, "requires": { "string-width": "^1.0.2 || 2" } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a537d152..ca2c5975 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -23,6 +23,13 @@ const routes: Routes = [ id: "home" } }, + { + path: 'alt', + loadChildren: './home-alt/home-alt.module#HomeAltModule', + data: { + id: "homealt" + } + }, { path: 'workspace', loadChildren: './workspace/workspace.module#WorkspaceModule', diff --git a/src/app/app.component.html b/src/app/app.component.html index 9aef3dec..6fcdb7e4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,7 @@
This Website is a prototype intended to support usability testing only. + future
diff --git a/src/app/home-alt/_styles.scss b/src/app/home-alt/_styles.scss new file mode 100644 index 00000000..2cd36e08 --- /dev/null +++ b/src/app/home-alt/_styles.scss @@ -0,0 +1,169 @@ +.grid-container { + padding: 0 !important; +} + +.home-top { + background: url("/assets/img/Slice 1.png") no-repeat; + background-size: 100%; + background-position: right bottom; + background-color: #d9ebff; +} + +.home-bottom { + background: url("/assets/img/Slice 2.png") no-repeat; + background-size: 100%; + background-position: right top; + background-color: #8d8563; +} + +.homepage-title { + font-size: 28px; + font-weight: 600; + margin: auto auto 0 32px; +} + +.home-text, +.search-text { + color: white; + border-radius: 5px; + max-width: max-content; + background: rgba(141, 133, 99, 0.5); + padding: 5px; + box-shadow: 1px 1px 15px 1px #8d8563; +} + +.sds-search > select { + width: 25%; +} + +.sds-seal { + box-shadow: -5px 5px 1px 2px white, -5px -5px 1px 2px white, 5px 5px 1px 2px white, 5px -5px 1px 2px white; + border-right: 0 !important; +} + +.sds-tile--lg { + .sds-tile__content { + width: 100% !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + + .sds-tile__icon { + margin: auto 15px !important; + width: auto !important; + } + + .mobile-details { + display: flex !important; + justify-content: center !important; + flex-wrap: wrap !important; + + .sds-button--icon { + margin: auto 10px 10px 10px !important; + } + } + } +} +@media only screen and (max-width: 600px) { + .home-top { + background-size: 100%; + background-position: center bottom; + } + + .home-bottom { + background-size: 100%; + background-position: center top; + } + + .homepage-title { + font-size: 1.2rem; + margin: 20px; + text-align: center; + } + + .usa-search.usa-search--small.usa-search--inverse { + background: none !important; + padding: 0 !important; + } + + .sds-search { + padding: 8px; + background-color: white; + } + + .outline-btn { + flex-direction: column !important; + + .sds-button--outline { + align-self: center; + } + } + + .sds-search { + align-self: center; + } + + .home-video { + display: flex; + flex-direction: column-reverse; + + .video-code { + height: 270px !important; + width: 100% !important; + } + } + + .sds-tile__icon { + width: 40px; + } + + .sds-tile__content, + .sds-tile__content.sds-tile--outline { + width: 300px !important; + } +} +@media only screen and (min-width: 600px) { + .sds-tile--lg { + width: 80%; + } + .ouline-btn { + margin-right: 8%; + margin-left: 8%; + } + + .news { + position: relative; + } +} +@media only screen and (max-width: 880px) { + .outline-btn { + flex-direction: row; + justify-content: space-between; + } +} +@media only screen and (min-width: 880px) { + .sds-tile { + float: left; + } + + .sds-tile:nth-child(3n+1) { + clear: left; + } + + .outline-btn { + flex-direction: column; + } +} +@media only screen and (max-width: 1200px) { + .tiles { + display: flex; + flex-wrap: wrap; + justify-content: center; + + .sds-tile { + flex: 0 1 25%; + display: flex; + justify-content: center; + } + } +} diff --git a/src/app/home-alt/home-alt.component.html b/src/app/home-alt/home-alt.component.html new file mode 100644 index 00000000..47a4040b --- /dev/null +++ b/src/app/home-alt/home-alt.component.html @@ -0,0 +1,221 @@ +
+ +
+
+ + +
+
+

New to SAM.gov?

+
+ +
+
+
+

Already know what you want to find?

+ +
+
+
+
+ +
+ +
+ +
+
+
+
+
{{news.publishDate | date}}
+ {{news.title}} +
+
+ {{news.shortDescription}} +
+
+
+
+ + +
+ + +
+
diff --git a/src/app/home-alt/home-alt.component.spec.ts b/src/app/home-alt/home-alt.component.spec.ts new file mode 100644 index 00000000..8a75ee3a --- /dev/null +++ b/src/app/home-alt/home-alt.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home-alt.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home-alt/home-alt.component.ts b/src/app/home-alt/home-alt.component.ts new file mode 100644 index 00000000..ab721661 --- /dev/null +++ b/src/app/home-alt/home-alt.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; +import {Router} from '@angular/router'; +import { SamModelService } from '../model/sam-model.service'; + +import { NewsData } from '../news/news-data/news.model'; +import { NewsList } from '../news/news-data/news.data'; + +@Component({ + selector: 'app-home', + templateUrl: './home-alt.component.html', + styleUrls: ['./_styles.scss'] +}) +export class HomeAltComponent implements AfterViewInit, OnInit { + + newsList: NewsData[] = NewsList.sort(this.sortNews).slice(0, 3); + + constructor(private router: Router, public model: SamModelService) { + } + + ngOnInit() { + } + + sortNews(a: NewsData, b: NewsData) { + return(a.publishDate < b.publishDate) ? 1 : -1; + } + + navigateTo(route: string) { + this.router.navigateByUrl(route); + } + + ngAfterViewInit() + { + } + + log(value) { + console.log(`%cLog: ${value}`, 'color: blue; font-weight: bold'); + } +} diff --git a/src/app/home-alt/home-alt.module.spec.ts b/src/app/home-alt/home-alt.module.spec.ts new file mode 100644 index 00000000..fafa1c65 --- /dev/null +++ b/src/app/home-alt/home-alt.module.spec.ts @@ -0,0 +1,13 @@ +import { HomeAltModule } from './home-alt.module'; + +describe('HomeAltModule', () => { + let homeAltModule: HomeAltModule; + + beforeEach(() => { + homeAltModule = new HomeAltModule(); + }); + + it('should create an instance', () => { + expect(homeAltModule).toBeTruthy(); + }); +}); diff --git a/src/app/home-alt/home-alt.module.ts b/src/app/home-alt/home-alt.module.ts new file mode 100644 index 00000000..251ef97f --- /dev/null +++ b/src/app/home-alt/home-alt.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { SdsSubheaderModule } from '@gsa-sam/layouts'; + +import { HomeRoutingModule } from './home-routing.module'; +import { HomeAltComponent } from './home-alt.component'; + +@NgModule({ + imports: [ + CommonModule, + SdsSubheaderModule, + HomeRoutingModule + ], + declarations: [HomeAltComponent] +}) +export class HomeAltModule { } diff --git a/src/app/home-alt/home-routing.module.ts b/src/app/home-alt/home-routing.module.ts new file mode 100644 index 00000000..906036a7 --- /dev/null +++ b/src/app/home-alt/home-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { HomeAltComponent } from './home-alt.component'; + +const routes: Routes = [ + { + path: '', + component: HomeAltComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class HomeRoutingModule { } diff --git a/src/app/home/_styles.scss b/src/app/home/_styles.scss index 580671d6..e1b0ac79 100644 --- a/src/app/home/_styles.scss +++ b/src/app/home/_styles.scss @@ -99,6 +99,10 @@ margin: auto 10px 10px 10px !important; } } + .learn-more-link { + min-width: 100%; + font-weight: 600; + } } } @media only screen and (max-width: 600px) { @@ -175,7 +179,7 @@ float: left; } - .sds-tile:nth-child(3n+1) { + .sds-tile:nth-child(2n + 1) { clear: left; } @@ -184,15 +188,39 @@ } } @media only screen and (max-width: 1200px) { + .sds-tile__content { + display: flex; + flex-direction: row; + text-align: left; + align-items: center; + + } .tiles { display: flex; flex-wrap: wrap; justify-content: center; .sds-tile { - flex: 0 1 25%; + flex: 0 1 40%; display: flex; justify-content: center; } } } +@media only screen and (max-width: 1200px) { + .tiles .sds-tile__content.sds-tile--outline { + // height: 80px; + width: 100%; + } +} +@media only screen and (max-width: 600px) { + .tiles .sds-tile__content.sds-tile--outline { + height: auto; + } + .sds-tile__text { + padding: 0.4em 0px; + } +} +.sds-tile__text { + flex-basis: 75%; +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 2b224d01..d0b488be 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,7 +1,7 @@
-
+
@@ -19,16 +19,17 @@

SAM.gov is the official U.S. governmen

-
+
@@ -102,7 +93,7 @@

SAM.gov is the official U.S. governmen
-

New to SAM.gov?

+

New to beta.SAM.gov?