Created by Jenny Rasmussen 2018-08-29

app.component.ts

      /* 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 { }

    

index.html

Raw

      <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>

    

sites.component.html

Raw

      <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>

    

sites.component.ts

Raw

      /* 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();	
		}
	}
}





    

title.component.html

Raw

      <img class="img-responsive center-block" src="assets/img/cmp_logo_white.png">

    

title.component.ts

Raw

      /* 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 { }

Comments (0)

HTTPS

SSH

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

Snippets

Jenny Rasmussen Landing Page

Comments (0)