<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular 5 - test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<!-- polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.16?main=browser"></script>
<!--<script src="https://unpkg.com/reflect-metadata@0.1.10"></script>-->
<script src="https://unpkg.com/systemjs@0.20.18/dist/system.src.js"></script>
<script src="https://unpkg.com/web-animations-js@2.3.1"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
//our root app component
import { Component, OnInit, Inject, OnDestroy, NgModule, VERSION} from '@angular/core'
import {animate, state, style, transition, trigger} from "@angular/animations";
import {HeaderStateService} from "./headerstate.service";
@Component({
selector: 'my-app',
template: `<section class="site-wrapper">
<header-comp></header-comp>
<!-- CANVAS -->
<section class="site-canvas">
<!-- MENU -->
<section *ngIf="isMenuOpen" class="site-menu" [@isMenuOpenChanged]>
<menu-comp></menu-comp>
</section>
<!-- CANVAS CONTENT -->
<section *ngIf="!isMenuOpen" [@isContentChanged] class="content main-content">
<router-outlet></router-outlet>
</section>
</section>
</section>`,
styles: [``],
animations: [
trigger(
'isMenuOpenChanged',
[
transition(
':enter', [
style({transform: 'translate3d(-100vw, 0, 0)', opacity: 0}),
animate('800ms', style({transform: 'translate3d(0, 0, 0)', 'opacity': 1}))
]
),
transition(
':leave', [
style({transform: 'translateX(0) translate3d(0, 0, 0)', 'opacity': 1}),
animate('800ms', style({transform: 'translateX(100%)', 'opacity': 0})),
]
)]
),trigger(
'isContentChanged',
[
transition(
':enter', [
style({opacity: 0}),
animate('800ms', style({'opacity': 1}))
]
),
transition(
':leave', [
style({'opacity': 1}),
animate('800ms', style({'opacity': 0})),
]
)]
),
]
})
export class AppComponent implements OnInit, OnDestroy {
private isMenuOpen: boolean = false;
private loginSubscription: Subscription = null;
private headerStateServiceSubscription: Subscription;
constructor(private headerStateService: HeaderStateService) {
this.isMenuOpen = this.headerStateService.isMenuOpen;
this.headerStateServiceSubscription = this.headerStateService.headerState.subscribe(
(isMenuOpen: boolean) => {
this.menuStateChanged(isMenuOpen);
});
}
ngOnInit() {
}
ngOnDestroy(): void {
this.headerStateServiceSubscription.unsubscribe();
}
menuStateChanged(isMenuOpenNew: boolean) {
this.isMenuOpen = isMenuOpenNew;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {AppRoutingModule} from "./app-routing.module";
import {HeaderStateService} from "./headerstate.service";
import {MainViewComponent} from "./mainview.component";
import {ProjectsOverviewComponent} from "./projects.overview.component";
import {ProjectItemComponent} from "./project.item.component";
import {MenuItemComponent} from "./menu.item.component";
import {MenuSubItemComponent} from "./menu.subitem.component";
import {HeaderComponent} from "./header.component";
import {MenuComponent} from "./menu.component";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
],
declarations: [
AppComponent,
MainViewComponent,
ProjectsOverviewComponent,
ProjectItemComponent,
MenuItemComponent,
MenuSubItemComponent,
HeaderComponent,
MenuComponent,
],
providers: [
HeaderStateService
],
bootstrap: [AppComponent]
})
export class AppModule { }
(function (global) {
var angVer = '5.0.5';
System.config({
transpiler: 'ts',
typescriptOptions: {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"sourceMap": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es5"
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/',
'gh:': 'https://raw.githubusercontent.com/'
},
map: {
"app": "app",
"rxjs": "npm:rxjs@5.4.3",
"ts": "npm:plugin-typescript@7.1.0/lib/plugin.js",
"typescript": "npm:typescript@2.4.2/lib/typescript.js",
"@angular/core": "npm:@angular/core@" + angVer + "/bundles/core.umd.js",
"@angular/common": "npm:@angular/common@" + angVer + "/bundles/common.umd.js",
"@angular/compiler": "npm:@angular/compiler@" + angVer + "/bundles/compiler.umd.js",
"@angular/platform-browser": "npm:@angular/platform-browser@" + angVer + "/bundles/platform-browser.umd.js",
"@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@" + angVer + "/bundles/platform-browser-dynamic.umd.js",
"@angular/http": "npm:@angular/http@" + angVer + "/bundles/http.umd.js",
"@angular/router": "npm:@angular/router@" + angVer + "/bundles/router.umd.js",
"@angular/forms": "npm:@angular/forms@" + angVer + "/bundles/forms.umd.js",
"@angular/animations": "npm:@angular/animations@" + angVer + "/bundles/animations.umd.js",
"@angular/animations/browser": "npm:@angular/animations@" + angVer + "/bundles/animations-browser.umd.js",
"@angular/platform-browser/animations": "npm:@angular/platform-browser@" + angVer + "/bundles/platform-browser-animations.umd.js"
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
if (!global.noBootstrap) { bootstrap(); }
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
System.import('app/app.module')
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
})(this);
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {MainViewComponent} from "./mainview.component";
import {ProjectsOverviewComponent} from "./projects.overview.component";
import {ProjectItemComponent} from "./project.item.component";
const routes: Routes = [
{ path: 'main', component: MainViewComponent, pathMatch: 'full' },
{ path: 'cv', component: MainViewComponent, pathMatch: 'full' },
{ path: 'projects', component: ProjectsOverviewComponent, pathMatch: 'full' },
{ path: 'project/:projectid', component: ProjectItemComponent, pathMatch: 'full' },
{ path: '', redirectTo: '/main', pathMatch: 'full' },
{ path: '**', component: MainViewComponent, pathMatch: 'full' },
];
@NgModule({
imports: [ RouterModule.forRoot(routes, { enableTracing: true, useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=12P0u0kllllt1Prpbu4hvcBdE3S */
/* Feel free to copy&paste color codes to your application */
/* As hex codes */
/* Main Primary color */
*,
::before,
::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
font-family: 'FallingSkyBd+', sans-serif, 'Arial', Helvetica, 'Microsoft YaHei';
/*min-width: 320px;*/
color: #c1c1c1;
background: -webkit-gradient(linear, left top, right top, from(#000), to(#0e190e));
background: linear-gradient(to right, #000, #0e190e);
}
html {
overflow-x: hidden;
}
.main,
body,
html {
height: 100%;
}
a,
abbr,
acronym,
address,
article,
aside,
audio,
big,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: middle;
}
body,
button,
input {
color: #fff;
font-size: 23px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/*login pages css*/
/** =======================
menu
===========================*/
ul.accordion {
list-style: none none;
}
.accordion li {
list-style: none none;
}
.accordion a {
color: #b63b4d;
text-decoration: none;
}
.accordion h1 {
color: #fff;
font-size: 24px;
font-weight: 400;
text-align: center;
margin-top: 80px;
}
.accordion h1 a {
color: #c12c42;
font-size: 16px;
}
.accordion {
width: 100%;
max-width: 85%;
margin: 160px auto;
/*background: #FFF;*/
background: #e4f9e3;
border-radius: 4px;
}
.accordion .menu-item .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4d4d4d;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #ccc;
position: relative;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion .menu-item:hover .link {
background: #bcf0b9;
background: -webkit-gradient(linear, left top, left bottom, from(#e4f9e3), color-stop(#bcf0b9), to(#e4f9e3));
background: linear-gradient(#e4f9e3, #bcf0b9, #e4f9e3);
}
.accordion .menu-item:hover .link.active,
.accordion .menu-item .link.active {
background: #bde5c5;
}
.accordion .link .menu-text.has-submenu {
display: inline-block;
border-bottom: 2px solid #1c7330;
}
.accordion li:last-child .link {
border-bottom: 0;
}
.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #595959;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.accordion li.open .link {
color: #589210;
}
.accordion li.open i {
color: #589210;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion .submenu.open {
transition: all 0.8s ease-in-out, box-shadow 0.1s linear, -webkit-box-shadow 0.1s linear;
-webkit-box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
opacity: 1;
height: auto;
max-height: 600px;
}
.accordion .submenu.closed {
transition: all 0.8s ease-in-out, box-shadow 0.1s linear, -webkit-box-shadow 0.1s linear;
height: 0;
max-height: 0;
}
/**
* Submenu
-----------------------------*/
.submenu {
background: #435946;
font-size: 14px;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.submenu li {
height: 0px;
line-height: 50px;
list-style-type: none;
overflow: hidden;
margin-left: 30px;
/*Animation*/
-webkit-transition: height 1s ease;
transition: height 1s ease;
}
.accordion .menu-item:hover .submenu li {
height: 50px;
vertical-align: middle;
padding: 0px 0px 0px 30px;
border-bottom: 1px solid #eee;
border-left: 1px solid #eee;
}
.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
cursor: pointer;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu li:hover {
background: #679569;
color: #fff;
}
img {
max-width: 100%;
}
::-moz-selection {
color: #fff;
background: #3bc492;
}
::selection {
color: #fff;
background: #3bc492;
}
aside,
footer,
nav,
section {
display: block;
}
b {
font-weight: 500;
}
.wrapper {
zoom: 1;
width: 100%;
max-width: 1048px;
margin: auto;
padding: 0 20px;
}
.wrapper:before,
.wrapper:after {
content: "";
display: table;
}
.wrapper:after {
clear: both;
}
.col,
.feature,
footer input[type=email],
footer .button-wrapper {
float: left;
}
.col,
.feature {
margin-right: 7.142857142%;
display: inline-block;
}
.col:last-child,
.feature:last-child {
margin-right: 0;
}
@media only screen and (max-width: 760px) {
body,
button,
input {
font-size: 18px;
}
}
button {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
border: 0;
outline: 0;
cursor: pointer;
}
a {
border-bottom: 2px solid #ddd;
color: #34343f;
text-decoration: none;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.submenu > li > a:hover {
border-bottom-color: #3bc492;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
a img {
border: 0 none;
}
h1,
h2 {
font-size: 60px;
font-weight: 300;
line-height: 1.25;
}
@media only screen and (max-width: 760px) {
h1,
h2 {
font-size: 48px;
}
}
h2 {
margin: 0 0 18px 0;
top: -0.05em;
}
h3 {
font-size: 23px;
margin-bottom: 12px;
display: inline-block;
font-weight: 500;
}
p {
margin-bottom: 12px;
}
.flip-button,
.small-button {
background: #3bc492;
border-radius: 6px;
color: #fff;
text-align: center;
-webkit-transition: background 0.4s ease-out;
transition: background 0.4s ease-out;
}
.button:hover:not(:disabled),
.flip-button:hover:not(:disabled),
.small-button:hover:not(:disabled),
.download-container .download-button:hover:not(:disabled),
.flip-button:focus,
.small-button:focus {
background: #30a884;
-webkit-transition: background 0.1s ease-out;
transition: background 0.1s ease-out;
}
.flip-button {
border: 1px solid transparent;
border-bottom: 1px solid transparent;
display: block;
line-height: 1.25;
height: 60px;
overflow: hidden;
text-decoration: none;
width: 100%;
}
.flip-button:disabled {
background: #eee !important;
color: #aeaeb2 !important;
}
.flip-button:hover:not(:disabled),
.flip-button:focus {
border-bottom: 2px solid #2a916f;
}
.flip-button:active {
border-bottom-color: transparent;
}
.flip-button .label {
position: relative;
top: 0;
-webkit-transition: top 0.4s cubic-bezier(0, 0.8, 0.7, 1.5);
transition: top 0.4s cubic-bezier(0, 0.8, 0.7, 1.5);
}
.flip-button:hover:not(:disabled) .label,
.flip-button:focus .label {
top: -60px;
-webkit-transition: top 0.4s cubic-bezier(0, 0.8, 0.6, 1.5);
transition: top 0.4s cubic-bezier(0, 0.8, 0.6, 1.5);
}
.flip-button:not(:disabled):not(.is-disabled) .text,
.flip-button:not(:disabled):not(.is-disabled) .ss-icon {
color: #fff;
}
.flip-button .text,
.flip-button .ss-icon {
display: block;
font-style: normal;
font-weight: 400;
}
.flip-button .text {
font-size: 36px;
padding: 2px 0 12px;
}
@media only screen and (max-width: 760px) {
.flip-button .text {
font-size: 26px;
padding-top: 10px;
}
}
.flip-button .ss-icon {
line-height: 52px;
font-size: 32px;
padding-top: 8px;
}
@media only screen and (max-width: 760px) {
.flip-button .ss-icon {
font-size: 20px;
padding-top: 12px;
}
}
.small-button {
font-size: 16px;
padding: 6px 10px 2px;
}
input[type=text],
input[type=email] {
border: 2px solid #ddd;
border-radius: 6px;
font-size: 20px;
font-weight: 300;
line-height: normal;
height: 40px;
outline: none;
padding: 0 15px 5px;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
width: 100%;
overflow: hidden;
}
@media only screen and (max-width: 760px) {
input[type=text],
input[type=email] {
font-size: 26px;
}
}
input[type=text]:focus,
input[type=email]:focus {
border: 2px solid #3bc492;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
aside {
background: #eee;
margin-top: 96px;
padding: 72px 0 84px;
}
aside .wrapper {
opacity: 0.5;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
aside:hover .wrapper {
opacity: 1;
-webkit-transition: opacity 0.1s ease-out;
transition: opacity 0.1s ease-out;
}
.customers {
margin-top: 0;
padding: 72px 0;
text-align: center;
}
.customers img {
display: block;
}
.home-demo,
.main-page-button {
background: #3bc492;
-webkit-transition: background 3.5s ease-out;
transition: background 3.5s ease-out;
}
.home-intro {
margin: 96px auto;
}
@media only screen and (max-width: 500px) {
.home-intro {
margin: 72px auto;
}
.home-intro h1 {
font-size: 36px;
}
}
.home-features {
margin-bottom: 36px;
}
@media only screen and (max-width: 500px) {
.home-features {
margin-bottom: 0;
}
}
.feature {
position: relative;
}
.feature figure {
position: absolute;
width: 108px;
height: 108px;
background: #3bc492;
border-radius: 50%;
-webkit-transition: background 3.5s ease-out;
transition: background 3.5s ease-out;
}
@media only screen and (max-width: 760px) {
.feature figure {
width: 80px;
height: 80px;
}
}
@media only screen and (max-width: 500px) {
.feature figure {
width: 35px;
height: 35px;
}
}
.feature h3,
.feature p {
padding-left: 38.4615385%;
}
@media only screen and (max-width: 760px) {
.feature h3,
.feature p {
padding-left: 100px;
}
}
@media only screen and (max-width: 500px) {
.feature h3 {
padding-left: 45px;
}
.feature p {
padding-left: 0;
}
}
.feature img {
width: 108px;
height: 108px;
}
@media only screen and (max-width: 760px) {
.feature img {
width: 80px;
height: 80px;
}
}
@media only screen and (max-width: 500px) {
.feature img {
width: 35px;
height: 35px;
}
}
.main-page-button {
text-align: center;
margin-top: 60px;
padding: 144px 0;
background: #5e9456;
}
@media only screen and (max-width: 700px) {
.main-page-button {
padding: 48px 0;
}
}
.main-page-button .flip-button {
background: rgba(0,26,5,0.3);
height: 120px;
margin: auto;
max-width: 842px;
}
.main-page-button .flip-button:hover,
.main-page-button .flip-button:focus {
background: rgba(0,19,26,0.43);
border-bottom-color: rgba(0,19,26,0.3);
}
.main-page-button .flip-button:active {
border-bottom-color: transparent;
}
.main-page-button .flip-button i {
font-size: 48px;
line-height: 120px;
}
.main-page-button .flip-button b {
font-size: 60px;
font-weight: 300;
padding: 12px 0 32px;
}
@media only screen and (max-width: 700px) {
.main-page-button .flip-button b {
font-size: 48px;
padding-top: 20px;
}
}
.main-page-button .flip-button .label {
-webkit-transition: top 0.4s cubic-bezier(0, 0.8, 0.7, 1.6);
transition: top 0.4s cubic-bezier(0, 0.8, 0.7, 1.6);
}
.main-page-button .flip-button:hover .label {
top: -120px;
}
.feature:first-child {
margin-bottom: 72px;
}
@media only screen and (max-width: 700px) {
.feature:first-child {
margin-bottom: 36px;
}
}
.feature:nth-child(even) {
margin-right: 0;
}
@media only screen and (max-width: 700px) {
.feature {
width: auto;
margin: 0 0 36px;
float: none;
}
.feature:last-child {
margin-bottom: 0;
}
}
.sets-list ul {
list-style: none;
margin: 72px 0;
}
.set-preview {
zoom: 1;
margin: 0 0 52px;
clear: both;
}
.set-preview:before,
.set-preview:after {
content: "";
display: table;
}
.set-preview:after {
clear: both;
}
.set-preview:nth-child(even) {
float: right;
clear: none;
}
.set-preview a {
border-bottom: 0;
padding: 3px 0 10px;
}
.set-preview .name a {
font-size: 36px;
font-weight: 400;
}
.set-preview form,
.set-preview button {
display: inline-block;
}
.set-preview form {
float: right;
position: relative;
top: 10px;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
.set-preview .small-button {
margin-left: 10px;
background-clip: padding-box;
}
.set-preview .set-slideshow {
border-radius: 6px;
max-height: 200px;
background-clip: padding-box;
}
.set-preview > a {
position: relative;
}
@media only screen and (max-width: 980px) {
.set-preview .name a {
font-size: 24px;
margin-top: 6px;
display: inline-block;
}
}
@media only screen and (max-width: 400px) {
.set-preview .name a {
font-size: 18px;
margin-top: 10px;
}
}
.set-slideshow {
position: relative;
overflow: hidden;
-webkit-transition: background-color 0.75s ease-out;
transition: background-color 0.75s ease-out;
max-height: 432px;
}
.slideshow-wrapper .slide {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.slideshow-wrapper .slide img {
display: block;
margin: auto;
max-height: 100%;
}
.slide-placeholder {
visibility: hidden;
}
#lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #00131a;
opacity: 0.75;
display: none;
}
.frontpage-head-wrapper {
/*position: relative;
box-sizing: border-box;
display: block;
height: 450px;
*/
position: relative;
width: 100%;
height: 100%;
}
.frontpage-head-wrapper video {
/*width:500;
height:281;
object-fit: cover;
*/
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
.frontpage-head-wrapper video:not(.flideo) {
-webkit-filter: invert() brightness(125%);
filter: invert() brightness(125%);
}
.container {
text-align: left;
margin: 0 auto;
width: 960px;
position: relative;
}
.container .logo-area {
margin: auto;
margin-bottom: 30px;
margin-top: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 80%;
width: 80%;
}
@media only screen and (min-width: 100em) {
.page-header .booking-toggle {
left: 98px;
}
}
@media only screen and (min-width: 75em) {
.page-header .booking-toggle {
left: 85px;
}
}
@media only screen and (min-width: 45em) {
.page-header .booking-toggle {
left: 50px;
}
}
@media only screen and (min-width: 100em) {
.page-header .menu-toggle {
right: 92px;
}
}
@media only screen and (min-width: 75em) {
.page-header .menu-toggle {
right: 77px;
}
}
@media only screen and (min-width: 45em) {
.page-header .menu-toggle {
right: 42px;
}
}
.container .logo-area img {
margin: auto;
/* Magic! */
max-width: 100%;
max-height: 100%;
}
w-40 {
width: 40%;
}
w-10 {
width: 10%;
}
@-webkit-keyframes pulse-shadow-main {
0% {
-webkit-box-shadow: 0 0;
box-shadow: 0 0;
}
40% {
-webkit-box-shadow: 0 0 2px 3px rgba(255,255,255,0.2);
box-shadow: 0 0 2px 3px rgba(255,255,255,0.2);
}
70% {
-webkit-box-shadow: 0 0 5px 8px rgba(255,255,255,0.3);
box-shadow: 0 0 5px 8px rgba(255,255,255,0.3);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
}
}
@keyframes pulse-shadow-main {
0% {
-webkit-box-shadow: 0 0;
box-shadow: 0 0;
}
40% {
-webkit-box-shadow: 0 0 2px 3px rgba(255,255,255,0.2);
box-shadow: 0 0 2px 3px rgba(255,255,255,0.2);
}
70% {
-webkit-box-shadow: 0 0 5px 8px rgba(255,255,255,0.3);
box-shadow: 0 0 5px 8px rgba(255,255,255,0.3);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
}
}
//our root app component
import { Component, NgModule, VERSION} from '@angular/core'
import { BrowserModule} from '@angular/platform-browser'
import {MenuItem} from './menu.item.model'
import {HeaderStateService} from "./headerstate.service";
import {MenuSubItem} from "./menu.item.model";
@Component({
selector: 'menu-comp',
template: `<ul class="accordion">
<li menu-item-comp class="menu-item" *ngFor="let menuItem of menuItems; let i = index"
[ngClass]="{'default': menuItem.isCurrent}" (menuItemClicked)="onMenuItemClicked($event)"
[menuItem]="menuItem" [id]="i">
</li>
</ul>`,
styles: [``]
})
export class MenuComponent implements OnInit, OnDestroy {
private menuItems: MenuItem[] = [
new MenuItem(1, 'Home', 'fa fa-home', 'main', false, []),
new MenuItem(2, 'CV', 'fa fa-paint-brush', 'cv', false, []),
new MenuItem(3, 'About', 'fa fa-info-circle', 'about', false, []),
new MenuItem(4, 'Portfolio', 'fa fa-folder-open', 'portfolio', false, []),
new MenuItem(5, 'Artikelen', 'fa fa-folder-open', 'articles', false, []),
new MenuItem(6, 'Projecten', 'fa-life-ring', null, false, [new MenuSubItem(1, 'Test project 1', 'project', false), new MenuSubItem(2, 'Test project 2', 'project', false), new MenuSubItem(3, 'Test project 3', 'project', false)]),
//new MenuItem(6, 'Projecten', 'fa-life-ring', 'projects', false, []),
new MenuItem(7, 'Contact', 'fa fa-envelope-open-o', 'contact', false, []),
];
constructor(private headerStateService: HeaderStateService) {
}
ngOnInit() {
}
ngOnDestroy(): void {
}
onMenuItemClicked(menuId: number) {
let currentValue = this.menuItems[menuId].isCurrent;
for(let i = 0; i < this.menuItems.length; i++){
if(this.menuItems[i].isCurrent){
this.menuItems[i].isCurrent = false;
}
}
this.menuItems[menuId].isCurrent = true;
this.headerStateService.headerState.emit(false);
console.log('menuId:' + menuId + ', isCurrent: ' + currentValue);
}
}
export class MenuItem {
public id: number;
public text: string;
public faIconString: string;
public url: string;
public isCurrent: boolean;
public subItems: MenuSubItem[];
constructor(id: number, text: string, faIconString: string, url: string, isCurrent: boolean, subItems: MenuSubItem[]) {
this.id = id;
this.text = text;
this.faIconString = faIconString;
this.url = url;
this.isCurrent = isCurrent;
this.subItems = subItems;
}
}
export class MenuSubItem {
public id: number;
public text: string;
public url: string;
public isCurrent: boolean;
constructor(id: number, text: string, url: string, isCurrent: boolean) {
this.id = id;
this.text = text;
this.url = url;
this.isCurrent = isCurrent;
}
}
import {EventEmitter, Injectable, OnDestroy, OnInit} from "@angular/core";
import {Subscription} from "rxjs/Subscription";
@Injectable()
export class HeaderStateService implements OnInit, OnDestroy {
public headerState = new EventEmitter<boolean>();
public isMenuOpen: boolean = false;
private headerStateServiceSubscription: Subscription;
constructor()
{
this.headerStateServiceSubscription = this.headerState.subscribe(
(isMenuOpen: boolean) => {
this.isMenuOpen = isMenuOpen;
});
}
ngOnInit(): void {
}
ngOnDestroy(): void {
this.headerStateServiceSubscription.unsubscribe();
}
}
//our root app component
import { Component, OnInit, Inject, OnDestroy, NgModule, VERSION} from '@angular/core'
import {Subject} from 'rxjs/Subject';
import {Observable} from "rxjs/Observable";
import "rxjs/add/observable/interval";
import "rxjs/add/operator/take";
import "rxjs/add/operator/map";
import "rxjs/add/operator/bufferCount"
// Observable class extensions
import 'rxjs/add/observable/of';
// Observable operators
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/debounce';
import 'rxjs/add/operator/delay';
@Component({
selector: 'main-view-comp',
template: `<div class="container page-header navbar navbar-default navbar-fixed-top">
<div class="logo-area"><img alt="logo" height="250" id="logo" src="./assets/images/kleinProDesignLogo_white.png" width="500"></div>
</div>
<section class="home-demo" style="background: rgb(31,0,12);">
<div class="frontpage-head-wrapper">
<video autoplay="" loop="" style=""><source src="https://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.ogv?mtime=20141113185421" type="video/mp4"></video>
</div>
</section>
<section class="home-intro wrapper">
<h1>Klein pro design</h1>
</section>
<section class="home-features wrapper">
aaaaaa
<br /><br /><br />
<input type="text" (keyup)='keyUp.next($event)' style="color: black; background-color:white;">
<br />
<div>{{textFilter}}</div>
<br /><br /><br />
<br /><br /><br />
</section>
`,
styles: [``]
})
export class MainViewComponent implements OnInit, OnDestroy {
public keyUp = new Subject<string>();
public textFilter: string = null;
constructor() {
const observable = this.keyUp
.map(value => event.target.value)
.debounceTime(300)
.distinctUntilChanged()
.flatMap((search) => {
return Observable.of(search).delay(300);
})
.subscribe((data) => {
this.textFilter = data;
//console.log(data);
});
}
ngOnInit() {
}
ngOnDestroy(): void {
}
}
//our root app component
import {Component, Inject, Input, OnInit, EventEmitter, Output, OnDestroy} from "@angular/core";
import {Router} from "@angular/router";
import {MenuItem} from './menu.item.model'
@Component({
selector: '[menu-item-comp]',
template: `<div class="link" (click)="onMenuItemClicked()" [ngClass]="{'active': menuItem.isCurrent}"
routerLink="/{{menuItem.url}}" routerLinkActive="active">
<i class="{{menuItem.faIconString}}"></i>
<div class="menu-text" [ngClass]="{'has-submenu': menuItem.subItems && menuItem.subItems.length > 0}">{{menuItem.text}}</div>
<i class="{{menuItem.subItems && menuItem.subItems.length > 0 ? 'fa fa-chevron-down' : ''}}"></i>
</div>
<!--<ul class="submenu" [ngClass]="{'open': menuItem.isCurrent, 'closed': !menuItem.isCurrent}">-->
<ul class="submenu" *ngIf="menuItem.subItems">
<li menu-subitem-comp *ngFor="let subitem of menuItem.subItems; let i = index"
[menuSubItem]="subitem">
</li>
</ul>`,
styles: [``]
})
export class MenuItemComponent implements OnInit, OnDestroy {
@Input() public menuItem: MenuItem;
@Input() public id: number;
@Output() menuItemClicked = new EventEmitter<number>();
constructor(private router: Router,
)
{
}
ngOnDestroy(): void {
}
ngOnInit(): void {
if (!this.menuItem) throw new Error();
}
onMenuItemClicked(): boolean{
this.menuItemClicked.emit(this.id);
return false;
}
}
//our root app component
import {Component, Inject, Input, OnInit, EventEmitter, Output, OnDestroy} from "@angular/core";
import {Router} from "@angular/router";
import {MenuItem} from './menu.item.model'
import {MenuSubItem} from "./menu.item.model";
@Component({
selector: '[menu-subitem-comp]',
template: `<a (click)="OnSubItemClick($event)" >{{menuSubItem.text}}</a>`,
styles: [``]
})
export class MenuSubItemComponent implements OnInit, OnDestroy {
@Input() public menuSubItem: MenuSubItem;
constructor(private router: Router,
)
{
}
ngOnInit(): void {
if (!this.menuSubItem) throw new Error("invalid ussage of component!");
}
OnSubItemClick(): boolean {
if(this.menuSubItem && this.menuSubItem.url){
//this.headerStateService.headerState.emit(false);
//var navigationLink = ['/' + this.baseMenuUrlPart, this.menuSubItem.id];
var navigationLink2 = '/' + this.menuSubItem.url + '/' + this.menuSubItem.id;
console.log('navigationLink: "' + navigationLink2 + '"');
// console.log('isActive: ' + this.router.isActive(this.menuSubItem.url, true));
// console.log(this.activatedRoute);
this.router.navigateByUrl(navigationLink2);
//this.activatedRoute.
//navigate(['../', selectedId], { relativeTo: route })
// if(this.router.isActive(this.menuSubItem.url, true) == false){
// this.router.navigateByUrl(this.menuSubItem.url);
// } else {
// this.router.navigate(['./', this.menuSubItem.id], { relativeTo: this.activatedRoute })
// }
// this.router.navigate(navigationLink);
//this.router.navigate(navigationLink);
}
return false;
}
}
//our root app component
import { Component, OnInit, Inject, OnDestroy } from '@angular/core'
import {animate, state, style, transition, trigger} from "@angular/animations";
import {HeaderStateService} from "./headerstate.service";
@Component({
selector: 'header-comp',
template: `<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark main-nav-bar">
<a class="navbar-brand toggle-nav main-nav-icon" (click)="onMenuClick()" >
<i class="fa" [ngClass]="{'fa-bars': !isMenuOpen, 'fa-close': isMenuOpen}" aria-hidden="true"></i>
<div class="main-nav-info" >{{isMenuOpen ? 'Close menu' : 'Open menu'}}</div>
</a>
<div class="form-inline header-search-box">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" #searchBox>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="onHeaderSearchClick(searchBox.value)">Search</button>
</div>
<div class="nav navbar-nav avatar-wrapper">
<div class="avatar-me-container" (click)="OnAvatarClick($event)">
<div class="avatar-me"></div>
<i class="fa fa-angle-double-down"></i>
</div>
<div class="avatar-menu">
<ul class="dropdown-menu dropdown-menu-right mt-1 show">
<li class="p-3">
</li>
</ul>
</div>
</div>
</nav>`,
styles: [`.navbar.main-nav-bar > a {
border-bottom: none;
}
.navbar.main-nav-bar {
height: 80px;
}
.navbar .header-search-box {
top: 14px;
margin: 0 auto;
vertical-align: middle;
width: 500px;
height: 50px;
}
.main-nav-bar .main-nav-icon {
top: 14px;
margin-left: 12px;
display: inline;
cursor: pointer;
transition: transform 1s ease-in-out;
}
.main-nav-bar .main-nav-icon > i {
display: inline-block;
vertical-align: middle;
}
.main-nav-bar .main-nav-icon > i.fa-bars:hover {
/*font-size:200%;*/
/*-webkit-transition: font-size 2s;*/
/*-moz-transition: font-size 2s;*/
/*-o-transition: font-size 2s;*/
/*transition: font-size 2s;*/
transform: scale(2);
transition: transform .8s ease-in-out;
color: #fff;
}
.main-nav-bar .main-nav-icon > i.fa-close {
transform: scale(1.4);
transition: transform .8s ease-in-out;
}
.main-nav-icon > i.fa-close:hover {
color: #fff;
transform: scale(2);
transition: transform .8s ease-in-out;
}
.navbar.main-nav-bar .main-nav-icon:hover .main-nav-info {
transition: opacity .5s ease-in-out;
opacity: 1;
}
.main-nav-bar .main-nav-icon > .main-nav-info {
opacity: 0;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
transition: opacity .5s ease-in-out;
}
.avatar-wrapper {
top: 14px;
right: 22px;
display: inline;
cursor: pointer;
transition: transform 1s ease-in-out;
}
.avatar-wrapper:hover > .avatar-menu {
display: block;
}
.dropdown-menu {
background-color: #424636;
//background: linear-gradient(to right, #000000, #343a40);
background: linear-gradient(to right, #ccc, $color-primary-4);
border: 1px solid #555555;
min-width: 300px;
//max-height: 0;
}
//
//.avatar-wrapper > .avatar-menu {
// display: none;
//}
//.avatar-wrapper > .avatar-menu > .dropdown-menu {
// position: absolute;
// top: 100%;
// left: auto;
// z-index: 1000;
// display: block;
// float: none;
// min-width: 160px;
// padding: 5px 0;
// margin: 2px 0 0;
// font-size: 14px;
// text-align: left;
// list-style: none;
// background-color: #fff;
// -webkit-background-clip: padding-box;
// background-clip: padding-box;
// border: 1px solid rgba(0,0,0,.15);
// border-radius: 4px;
// -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
// box-shadow: 0 6px 12px rgba(0,0,0,.175);
//}
//.avatar-wrapper > .avatar-menu > .dropdown-menu > li > a {
// display: block;
// padding: 3px 20px;
// clear: both;
// font-weight: 400;
// line-height: 1.42857143;
// color: #333;
// white-space: nowrap;
//}
//.avatar-wrapper > .avatar-menu > .dropdown-menu > li {
// display: list-item;
// text-align: -webkit-match-parent;
//}
.avatar-wrapper .avatar-me-container {
font-size: 12px;
vertical-align: top;
display: inline-block;
text-align: center;
}
.avatar-wrapper .avatar-me-container .avatar-me {
width: 35px;
height: 35px;
margin: 0 auto;
vertical-align: middle;
background: url('data:image/png;base64,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') no-repeat;
background-size:contain;
transition: opacity .5s ease-in-out;
opacity: 1;
display: inline-block;
}
//.avatar-wrapper .avatar-me-container.is-loggedin i {
// display: none;
//}
.avatar-wrapper .avatar-me-container .user-caption {
display: block;
}
.avatar-wrapper .avatar-me-container .avatar-me:hover {
transition: opacity .5s ease-in-out;
opacity: .8;
}
.avatar-wrapper > i {
font-size: 12px;
vertical-align: middle;
display: inline-block;
margin: 0 auto 0 7px;
}`],
animations: [
trigger('fadeInOut', [
transition('void => *', [
style({opacity:0}), //style only for transition transition (after transiton it removes)
animate(800, style({opacity:1})) // the new state of the transition(after transiton it removes)
]),
transition('* => void', [
animate(800, style({opacity:0})) // the new state of the transition(after transiton it removes)
])
]),
trigger(
'isLoginMenuOpenChanged',
[
transition(
':enter', [
style({transform: 'translate3d(-100vw, 0, 0)', opacity: 0}),
animate('800ms', style({transform: 'translate3d(0, 0, 0)', 'opacity': 1}))
]
),
transition(
':leave', [
style({transform: 'translateX(0) translate3d(0, 0, 0)', 'opacity': 1}),
animate('800ms', style({transform: 'translateX(100%)', 'opacity': 0})),
]
)]
)
]
})
export class HeaderComponent implements OnInit, OnDestroy {
private isMenuOpen: boolean = false;
private isLoginMenuOpen: boolean = false;
private headerStateServiceSubscription: Subscription;
constructor(private headerStateService: HeaderStateService,) {
this.isMenuOpen = this.headerStateService.isMenuOpen;
this.headerStateServiceSubscription = this.headerStateService.headerState.subscribe(
(isMenuOpen: boolean) => {
if(this.isMenuOpen !== isMenuOpen){
this.isMenuOpen = isMenuOpen;
}
});
}
ngOnInit() {
}
ngOnDestroy(): void {
this.headerStateServiceSubscription.unsubscribe();
}
onHeaderSearchClick(searchValue: string): boolean{
return false;
}
onMenuClick(): boolean {
this.headerStateService.headerState.emit(!this.isMenuOpen);
return false;
}
OnAvatarClick(): boolean {
this.isLoginMenuOpen = !this.isLoginMenuOpen;
return false;
}
OnAvatarClickClose(): boolean {
this.isLoginMenuOpen = false;
return false;
}
}
import {Component, Inject, Input, OnInit, EventEmitter, Output, OnDestroy} from "@angular/core";
import {Router} from "@angular/router";
import {Project} from "./project.model";
@Component({
selector: 'projects-overview-comp',
template: `<div class="container">
<div class="container-fluid">
<h1>Projects overview</h1>
<div class="list-group" *ngIf="projects">
<a routerLink="/project/{{project.id}}" routerLinkActive="active" *ngFor="let project of projects; let i = index"
class="list-group-item list-group-item-action list-group-item-kpd-custom">
<h4>{{project.title}}</h4>
<p>{{project.description_short}}</p>
</a>
</div>
</div>
</div>`,
styles: [``]
})
export class ProjectsOverviewComponent implements OnInit {
private projects: Project[] = null;
constructor(private router: Router,
)
{
this.loadProjects();
}
ngOnInit(): void {
}
loadProjects(): void {
//constructor(id: number, title: string, description_short: string, description_long: string, html_content: string, created: Date, modified: Date) {
this.projects.push(new Project(1, 'test project 1', '', '', '', new Date(), new Date()));
this.projects.push(new Project(2, 'test project 2', '', '', '', new Date(), new Date()));
this.projects.push(new Project(3, 'test project 3', '', '', '', new Date(), new Date()));
this.projects.push(new Project(4, 'test project 4', '', '', '', new Date(), new Date()));
}
}
import {MenuSubItem} from "./menu.item.model";
export class Project {
public id: number = -1;
public title: string;
public description_short: string;
public description_long: string;
public html_content: string;
public created: Date; //is not used in request
public modified: Date; //is not used in request
constructor(id: number, title: string, description_short: string, description_long: string, html_content: string, created: Date, modified: Date) {
this.id = id;
this.title = title;
this.description_short = description_short;
this.description_long = description_long;
this.html_content = html_content;
this.created = created;
this.modified = modified;
}
public ToMenuSubItem(): MenuSubItem {
let menuSubItem = new MenuSubItem(this.id, this.title, '/project/' + this.id, false);
return menuSubItem;
}
public isValid(): boolean {
return (this.title && this.id && this.id > 0) || false;
}
}
import {Component, Inject, Input, OnInit, EventEmitter, Output, OnDestroy} from "@angular/core";
import {Router, ActivatedRoute} from "@angular/router";
import {Project} from "./project.model";
@Component({
selector: 'project-item-comp',
template: `<div class="container">
<div class="container-fluid" *ngIf="project">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1>{{project.title}}</h1>
<p class="lead">{{project.description_short}}</p>
<blockquote class="blockquote">
<footer class="blockquote-footer">Ga naar <cite title="Source Title">downloads</cite>
</footer>
</blockquote>
<h3>Five grid tiers</h3>
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
<p>https://v4-alpha.getbootstrap.com/content/typography/</p>
<p>{{project && project.html_content ? project.html_content : ''}}</p>
<h4>Downloads</h4>
<table class="table table-hover table-sm">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th class="w-75">Description</th>
<th class="w-10">Link</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark d ds adsads ds</td>
<td>Ott sfdafsd aafsdfs daf sdf sdf dsaf sdaf dsaf sdf sdfs dafs dafsd afs dafsd afs daf sdf sdf sdf sdf dsf d fsdaf sdaf sdaf sadfs daf sdaf sdaf sdaf sdaf sdf sdf sdf sdf sd</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
`,
styles: [``]
})
export class ProjectItemComponent implements OnInit {
private project: Project;
constructor(private router: Router,
private activatedRoute: ActivatedRoute)
{
this.activatedRoute.params.subscribe(
(params: Params) =>{
if(params && params['projectid']){
let projectId: number = +params['projectid'] || -1;
this.loadProject(projectId);
}
},
(error: any) => {
console.log(error);
},
() => {},
);
}
ngOnInit(): void {
}
loadProject(projectId: number): void {
this.project = new Project(projectId, 'test project ' + projectId, 'mpor et at nunc. Curabitur eget faucibus augue, sed cursus diam. Aenean fermentum massa eu eros blandit feugiat. Phasellus ac mi rutrum, sagittis elit quis,', ' interdum quam. In ac porta orci. Maecenas sit amet diam consequat, congue arcu eu, iaculis nibh. Nunc velit quam, vestib', 'nteger facilisis arcu vel mauris sagittis, a hendrerit dolor faucibus. Fusce nisl tortor, pellentesque vitae ultricies a, ultricies id enim. Proin consequat quam eu arcu viverra, sit amet mattis risus commodo. Pellentesque urna nunc, porta non ante nec, rutrum pretium sapien. Integer accumsan augue suscipit odio condimentum semper varius in arcu. Sed eu tempor lacus. Praesent aliquam nulla eget leo tempus fringilla. Ut eu tempus ex. Mauris laoreet congue finibus. Duis eleifend risus quis elit suscipit, non vehicula sem ultrices. Quisque leo mi, vulputate eu urna nec, tempor dapibus neque. Mauris ac interdum nunc. Nulla facilisi. Curabitur rhoncus dignissim enim sit amet semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor sem, ullamcorper eu facilisis ut, pretium ut m', new Date(), new Date());
}
}