Snippets

Jenny Rasmussen Landing Page

Created by Jenny Rasmussen
View revision

File app.component.ts Added

  • Ignore whitespace
  • Hide word diff 
+/* Actual content has been obfuscated at the request of the client. */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sites-app',
+  template: `<sites-title></sites-title>
+  			 <sites-content></sites-content>`
+})
+
+export class AppComponent { }

File index.html Added

  • Ignore whitespace
  • Hide word diff 
+<html>
+  <head>
+    <title>Sites @ Centurion</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
+    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
+    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
+    <link rel="stylesheet" href="assets/styles.css">
+
+    <!-- 1. Load libraries -->
+     <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <!-- 2. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+  <!-- 3. Display the application -->
+  <body>
+    <sites-app><div id="load">Loading...</div></sites-app>
+  </body>
+</html>

File sites.component.html Added

  • Ignore whitespace
  • Hide word diff 
+<ul>
+	<li *ngFor="let site of sites; let i = index; trackBy: trackByFn" class="subsite">
+		<div class="title-absolute">
+			<h2 class="app-title"><a href="{{site.link}}">{{site.name}}</a></h2>
+		</div>
+		
+		<div>
+			<img class="img-responsive" src="img/{{site.image}}" alt="Click for Tool"  (mouseleave)="whenMouseLeave()" />
+			<span class="tool-desc">
+				<div class="text-desc">
+					<span class="desc-label">Used By</span><br />{{site.usedby}} <br/> <br/> 
+					<span class="desc-label">Purpose</span><br />{{site.desc}}
+				<br />
+				<br />
+					<a class="tool-link" href="{{site.link}}">Go to {{site.shortname}}</a>
+					<a on-click="clickMore()" class="more-button">More...</a>
+				</div>
+				<div id="{{site.cssname}}-desc" class="longer-desc">
+					<ul [innerHTML]="site.longerdesc"></ul>
+				<br />
+				<br />
+					<a class="tool-link" href="{{site.link}}">Go to {{site.shortname}}</a>
+					<a on-click="clickLess()" class="less-button">Less...</a>
+				</div>
+			</span>
+		</div>
+	</li>
+</ul>

File sites.component.ts Added

  • Ignore whitespace
  • Hide word diff 
+/* Actual content has been obfuscated at the request of the client. */
+
+import { Component } from '@angular/core';
+import * as $ from 'jquery';
+
+@Component({
+	selector: 'sites-content',
+	templateUrl: 'html-templates/sites.component.html'
+})
+
+export class SitesComponent {
+	sites = [{
+		"id": 1,
+		"name": "D",
+		"shortname": "D",
+		"cssname": "d",
+		"desc": "D Description",
+		"longerdesc": `<li>Reason 1</li>
+						<li>Reason 2</li>
+						<li>Reason 3</li>
+						<li>Reason 4</li>`,
+		"usedby": "Sales Team, Sales Support, & Sales Service",
+		"link": "../d/",
+		"image": "../assets/img/d.png"
+	},
+	{
+		"id": 2,
+		"name": "IC",
+		"shortname": "C",
+		"cssname": "ic",
+		"desc": "IC Description",
+		"longerdesc": `<li>Reason 1</li>
+						<li>Reason 2</li>
+						<li>Reason 3</li>
+						<li>Reason 4</li>`,
+		"usedby": "Sales Team, Support, & Purchasing",
+		"link": "../ic/",
+		"image": "../assets/img/i-c.png"
+	},
+	{
+		"id": 3,
+		"name": "LIV",
+		"shortname": "lv",
+		"cssname": "liv",
+		"desc": "LIV description",
+		"longerdesc": `<li>Reason 1</li>
+						<li>Reason 2</li>
+						<li>Reason 3</li>
+						<li>Reason 4</li>`,
+		"usedby": "Sales Team, Support, & Label Sales Service",
+		"link": "../liv/",
+		"image": "../assets/img/l-i.png"
+	},
+	{
+		"id": 4,
+		"name": "PT",
+		"shortname": "P",
+		"cssname": "p-t",
+		"desc": "PT Description",
+		"longerdesc": `<li>Reason 1</li>
+						<li>Reason 2</li>
+						<li>Reason 3</li>
+						<li>Reason 4</li>
+						<li>Reason 5</li>`,
+		"usedby": "Sales Team, Support, Service, & Customer Service",
+		"link": "../PT",
+		"image": "../assets/img/p-t.png"
+	},
+	{
+		"id": 5,
+		"name": "KV",
+		"shortname": "K",
+		"cssname": "kv",
+		"desc": "KV Description",
+		"longerdesc": `<li>Reason 1</li>
+						<li>Reason 2</li>
+						<li>Reason 3</li>
+						<li>Reason 4</li>`,
+		"usedby": "Everyone",
+		"link": "../kv",
+		"image": "../assets/img/k-v.png"
+	},
+	{
+		"id": 6,
+		"name": "SK",
+		"shortname": "s",
+		"cssname": "s-k",
+		"desc": "SK Description",
+		"longerdesc": `<li>Reason 1</li>
+						<li>Reason 2</li>`,
+		"usedby": "Sales Team, Support, & Service",
+		"link": "../sk/",
+		"image": "../assets/img/sk.png"
+	}];
+
+	clickMore(){
+		$('.text-desc, .longer-desc').toggle();
+	};
+
+	clickLess(){
+		$('.text-desc, .longer-desc').toggle();
+	};
+
+	whenMouseLeave() {
+		if ($('.longer-desc').is(":visible")) 
+		{
+			$('.text-desc, .longer-desc').toggle();	
+		}
+	}
+}
+
+
+
+

File title.component.html Added

  • Ignore whitespace
  • Hide word diff 
+<img class="img-responsive center-block" src="assets/img/cmp_logo_white.png">

File title.component.ts Added

  • Ignore whitespace
  • Hide word diff 
+/* Actual content has been obfuscated at the request of the client. */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sites-title',
+  templateUrl: 'html-templates/title.component.html'
+})
+
+export class TitleComponent { }
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.