From 46756f6e800c449619bf39a3c9fac87f0b6bec68 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 11 Nov 2017 00:46:26 +0100 Subject: [PATCH] tinker --- src/app/app.component.html | 14 +++++----- src/app/app.component.scss | 21 ++++++++++++++- src/app/app.component.ts | 55 +++++++++++++++++++++++++++++++++++--- src/index.html | 5 ++-- src/styles.scss | 4 +++ 5 files changed, 85 insertions(+), 14 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index a7a7ced..957eae5 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,8 @@ - - - - -
-
+
+ + + + +
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 6c012b7..25eb4d4 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -17,7 +17,11 @@ along with this program. If not, see . src: url('../../_old/resources/uhr.woff') format('woff'); } -:host(.uhr) { +:host { + background: hotpink; +} + +.uhr { font-family: 'Uhrenfont', sans-serif; position: relative; margin: 0; @@ -42,6 +46,21 @@ along with this program. If not, see . overflow: hidden; font-size: 200%; } + &.black { + background-color: #111; + .dot:not(.active) { + border-color: rgba(255, 255, 255, 0.1); + box-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } + .letter:not(.active) { + color: rgba(255, 255, 255, 0.1); + text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.1); + } + } +} + +.black .onoffswitch-inner:before { + background-color: #111; } .item { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 305c831..96d124c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,17 +1,64 @@ -import {Component, ElementRef, OnInit} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core'; @Component({ selector: '[uhr]', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent implements OnInit { - constructor(private elementRef: ElementRef) { +export class AppComponent implements AfterViewInit, OnInit { + @Input() size: string = '100%'; + @Input() autoresize = true; + @ViewChild('container') container: ElementRef; + + constructor(private element: ElementRef) { } ngOnInit(): void { - this.elementRef.nativeElement.classList.add('uhr'); + window.onresize = this.handleResize.bind(this); + } + + ngAfterViewInit(): void { + const realWidthInPx = this.determineSizeInPx(this.size); + this.resizeToPx(realWidthInPx); + } + + handleResize(event: UIEvent): boolean { + const parentWidth = AppComponent.getWidth(this.element); + const parentHeight = AppComponent.getHeight(this.element); + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + this.resizeToPx(Math.min(parentWidth, parentHeight, windowWidth, windowHeight)); + return true; + } + + private determineSizeInPx(size: string): number { + if (this.size === 'fill') { + this.element.nativeElement.style.width = '100%'; + this.element.nativeElement.style.height = '100%'; + const width: number = AppComponent.getWidth(this.container); + const height: number = AppComponent.getHeight(this.container); + return Math.min(width, height); + } else { + this.container.nativeElement.style.width = size; + return AppComponent.getWidth(this.container); + } + } + + private resizeToPx(size: number): void { + this.container.nativeElement.style.width = `${size}px`; + this.container.nativeElement.style.height = `${size}px`; + this.container.nativeElement.style['font-size'] = `${size / 40}px`; + } + + private static getWidth(e: ElementRef): number { + console.log('getting width', e); + return e.nativeElement.clientWidth; + } + + private static getHeight(e: ElementRef): number { + console.log('getting height', e); + return e.nativeElement.clientHeight; } } diff --git a/src/index.html b/src/index.html index 796cfa5..7ad52e6 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + Uhr @@ -8,7 +8,6 @@ - -
+ diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..22decbf 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,5 @@ /* You can add global styles to this file, and also import other style files */ +body { + padding: 0; + margin: 0; +}