Skip to content

Commit

Permalink
chore(home): homepage package cards
Browse files Browse the repository at this point in the history
  • Loading branch information
miguelramos committed May 10, 2019
1 parent c48f688 commit d2499c2
Show file tree
Hide file tree
Showing 12 changed files with 248 additions and 7 deletions.
27 changes: 24 additions & 3 deletions apps/ng-lab-demo/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<clr-main-container ngResponsive (responsiveChange)="handlerResponsiveChange($event)">
<clr-main-container
ngResponsive
(responsiveChange)="handlerResponsiveChange($event)"
>
<clr-header>
<div class="header-6" [clr-nav-level]="1">
<div class="branding">
Expand All @@ -7,7 +10,8 @@
</div>
<div class="header-actions">
<p style="margin-top: 0.2rem; margin-right: 0.2rem; text-align: right">
Breakpoint: {{ (responsive$|async)?.key }} with size - {{(responsive$|async)?.width }} <br>
Breakpoint: {{ (responsive$ | async)?.key }} with size -
{{ (responsive$ | async)?.width }} <br />
<i>Window breakpoints</i>
</p>
</div>
Expand All @@ -16,6 +20,23 @@
<div class="content-area">
<router-outlet></router-outlet>
</div>
<nav class="sidenav" [clr-nav-level]="2"></nav>
<nav class="sidenav" [clr-nav-level]="2">
<section class="sidenav-content">
<a class="nav-link" routerLinkActive="active" routerLink="/" [routerLinkActiveOptions]="{exact:true}">Home</a>
<section class="nav-group">
<input id="packages" type="checkbox">
<label for="packages">Packages</label>
<ul class="nav-list">
<li><a class="nav-link" routerLinkActive="active" routerLink="/configurator">Configurator</a></li>
<li><a class="nav-link">Http Script</a></li>
<li><a class="nav-link">Http Url</a></li>
<li><a class="nav-link">Hub</a></li>
<li><a class="nav-link">JWT</a></li>
<li><a class="nav-link">Responsive</a></li>
<li><a class="nav-link">Support</a></li>
</ul>
</section>
</section>
</nav>
</div>
</clr-main-container>
6 changes: 5 additions & 1 deletion apps/ng-lab-demo/src/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ export const CONFIG = {
LOGOS: {
CONFIGURATOR: '@local:/assets/configurator-logo.svg',
SUPPORT: '@local:/assets/support-logo.svg',
JWT: '@local:/assets/jwt-logo.svg'
JWT: '@local:/assets/jwt-logo.svg',
RESPONSIVE: '@local:/assets/responsive-logo.svg',
HUB: '@local:/assets/hub-logo.svg',
HS: '@local:/assets/hs-logo.svg',
HU: '@local:/assets/hu-logo.svg'
},
POSTS: {
LIST: '@api:/posts',
Expand Down
4 changes: 4 additions & 0 deletions apps/ng-lab-demo/src/app/app.routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ const ROUTES: Routes = [
{
path: 'home',
loadChildren: './home/home.module#HomeModule'
},
{
path: 'configurator',
loadChildren: './packages/configurator-lab/configurator-lab.module#ConfiguratorLabModule'
}
];

Expand Down
132 changes: 129 additions & 3 deletions apps/ng-lab-demo/src/app/home/home.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="clr-row clr-align-items-center">
<div class="clr-col hello-area">
<div class="clr-row clr-align-items-center hello-area">
<div class="clr-col">
<h1 class="hello-area__title">Welcome to @ng-lab packages.</h1>
<p class="hello-area__info">
@ng-lab packages are functional libraries to help you on logic, decision
Expand All @@ -13,7 +13,7 @@ <h1 class="hello-area__title">Welcome to @ng-lab packages.</h1>
</p>
</div>
</div>
<div class="clr-row">
<div class="clr-row packages-area">
<div class="clr-col-lg-6 clr-col-12">
<div class="card">
<div class="card-header">
Expand Down Expand Up @@ -109,4 +109,130 @@ <h1 class="hello-area__title">Welcome to @ng-lab packages.</h1>
</div>
</div>
</div>
<div class="clr-col-lg-6 clr-col-12">
<div class="card">
<div class="card-header">
Responsive
</div>
<div class="card-block">
<div class="card-media-block">
<img [src]="responsiveLogo" class="card-media-image" />
<div class="card-media-description">
<span class="card-media-title">
@ng-lab/responsive
</span>
<span class="card-media-text">
License: MIT
</span>
<span class="card-media-text">
Dependencies: @ng-lab/support
</span>
</div>
</div>
<div class="card-text">
Responsive is an angular directive to define
media breakpoints, listen for changes and trigger event when
resize happens on the page.
</div>
</div>
<div class="card-footer">
<a class="btn btn-sm btn-link" href="">Read more</a>
<img alt="@ng-lab/responsive" src="https://img.shields.io/npm/v/@ng-lab/responsive.svg?style=social">
</div>
</div>
</div>
<div class="clr-col-lg-6 clr-col-12">
<div class="card">
<div class="card-header">
Hub
</div>
<div class="card-block">
<div class="card-media-block">
<img [src]="hubLogo" class="card-media-image" />
<div class="card-media-description">
<span class="card-media-title">
@ng-lab/hub
</span>
<span class="card-media-text">
License: MIT
</span>
<span class="card-media-text">
Dependencies: none
</span>
</div>
</div>
<div class="card-text">
Hub is an angular service pub/sub where
you can register channels and dispatch/listen
custom events.
</div>
</div>
<div class="card-footer">
<a class="btn btn-sm btn-link" href="">Read more</a>
<img alt="@ng-lab/hub" src="https://img.shields.io/npm/v/@ng-lab/hub.svg?style=social">
</div>
</div>
</div>
<div class="clr-col-lg-6 clr-col-12">
<div class="card">
<div class="card-header">
Http-Script
</div>
<div class="card-block">
<div class="card-media-block">
<img [src]="httpScriptLogo" class="card-media-image" />
<div class="card-media-description">
<span class="card-media-title">
@ng-lab/http-script
</span>
<span class="card-media-text">
License: MIT
</span>
<span class="card-media-text">
Dependencies: none
</span>
</div>
</div>
<div class="card-text">
Http-Script is an angular service to register and load external
javascript libraries.
</div>
</div>
<div class="card-footer">
<a class="btn btn-sm btn-link" href="">Read more</a>
<img alt="@ng-lab/http-script" src="https://img.shields.io/npm/v/@ng-lab/http-script.svg?style=social">
</div>
</div>
</div>
<div class="clr-col-lg-6 clr-col-12">
<div class="card">
<div class="card-header">
Http-Url
</div>
<div class="card-block">
<div class="card-media-block">
<img [src]="httpUrlLogo" class="card-media-image" />
<div class="card-media-description">
<span class="card-media-title">
@ng-lab/http-url
</span>
<span class="card-media-text">
License: MIT
</span>
<span class="card-media-text">
Dependencies: @ng-lab/configurator, @ng-lab/support
</span>
</div>
</div>
<div class="card-text">
Http-Url is an angular service to define urls
and resolve them with or without parameters.
</div>
</div>
<div class="card-footer">
<a class="btn btn-sm btn-link" href="">Read more</a>
<img alt="@ng-lab/http-url" src="https://img.shields.io/npm/v/@ng-lab/http-url.svg?style=social">
</div>
</div>
</div>
</div>
5 changes: 5 additions & 0 deletions apps/ng-lab-demo/src/app/home/home.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@
:host::ng-deep{
.hello-area {
background-color: #F3E6FF;
margin: -1rem;

&__title, &__info {
color: #232323;
}
}

.packages-area {
margin-top: 1rem;
}
}
8 changes: 8 additions & 0 deletions apps/ng-lab-demo/src/app/home/home.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ export class HomeComponent implements OnInit {
configuratorLogo: string;
supportLogo: string;
jwtLogo: string;
responsiveLogo: string;
hubLogo: string;
httpScriptLogo: string;
httpUrlLogo: string;

constructor(
private readonly url: HttpUrlService
Expand All @@ -19,6 +23,10 @@ export class HomeComponent implements OnInit {
this.configuratorLogo = this.url.get('LOGOS.CONFIGURATOR');
this.supportLogo = this.url.get('LOGOS.SUPPORT');
this.jwtLogo = this.url.get('LOGOS.JWT');
this.responsiveLogo = this.url.get('LOGOS.RESPONSIVE');
this.hubLogo = this.url.get('LOGOS.HUB');
this.httpScriptLogo = this.url.get('LOGOS.HS');
this.httpUrlLogo = this.url.get('LOGOS.HU');
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ConfiguratorLabComponent } from './configurator-lab.component';

const routes: Routes = [
{
path: '',
component: ConfiguratorLabComponent
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
declarations: [ConfiguratorLabComponent]
})
export class ConfiguratorLabRoutingModule { }
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<p>
configurator-lab works!
</p>
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ConfiguratorLabComponent } from './configurator-lab.component';

describe('ConfiguratorLabComponent', () => {
let component: ConfiguratorLabComponent;
let fixture: ComponentFixture<ConfiguratorLabComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ConfiguratorLabComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ConfiguratorLabComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'ng-lab-configurator-lab',
templateUrl: './configurator-lab.component.html',
styleUrls: ['./configurator-lab.component.scss']
})
export class ConfiguratorLabComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ConfiguratorLabRoutingModule } from './configurator-lab-routing.module';

@NgModule({
declarations: [],
imports: [
CommonModule,
ConfiguratorLabRoutingModule
]
})
export class ConfiguratorLabModule { }

0 comments on commit d2499c2

Please sign in to comment.