Husky/Hochzeit
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Website style erweitert

Browse Source
This commit is contained in:
Damian Wessels
2022-01-13 11:08:45 +01:00
parent 6ae3e86cb9
commit 713327a32f
9 changed files with 134 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/app/app-routing.module.ts
View File

@@ -1,7 +1,13 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { BesucherComponent } from './besucher/besucher.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = []; const routes: Routes = [
{ path: '', redirectTo: '/home',pathMatch:'full'},
{ path: 'home', component: HomeComponent},
{ path: 'besucher',component: BesucherComponent}
];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],

17
ui/src/app/app.component.html
View File

@@ -1,16 +1,7 @@
<app-navbar></app-navbar> <app-navbar></app-navbar>
<div class="section-heading-page"> <router-outlet></router-outlet>
<div class="container">
<div class="row">
<div class="col-xs-12"> <!--<app-besucher></app-besucher>-->
<h1 class="heading-page">Annika &amp; Damian</h1>
<div class="subtitle-page text-center mt-10">04.10.2022</div>
</div>
</div>
</div>
</div>
<app-besucher></app-besucher>
<app-countdown></app-countdown>

163
ui/src/app/countdown/countdown.component.css
View File

@@ -1,121 +1,50 @@
.content-coming-soon { .content-comming-soon {
position: relative; height: auto;
width: 100%; margin: auto;
} position: relative;
#coming-soon { width: 100%;
position: absolute; box-sizing: border-box;
top: -50px; text-align: center;
left: 50%; font-size: 15px;
margin-left: -230px; line-height: 1.6;
}
.coming-soon-wrapper {
width: 100px;
border-radius: 50%;
height: 100px;
}
.coming-soon-time {
font-size: 44px;
font-weight: 100;
line-height: 64px;
}
.coming-soon-date {
line-height: 14px;
display:block;
font-size: 16px;
}
.wrapper-table {
margin: 0;
padding: 0;
width: 100%;
}
.wrapper-table {
display: table;
}
.wrapper-table-cell {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
.content-coming-soon {
height: auto;
margin: auto;
}
.coming-soon-wrapper {
text-align:center;
background-color:#fff;
padding: 0px;
display:inline-block;
color:white;
}
.coming-soon-wrapper-transparent {
text-align:center;
background-color:rgba(0,0,0,0.6);
padding:20px;
display:inline-block;
color:white;
}
.coming-soon-wrapper+.coming-soon-wrapper,
.coming-soon-wrapper-transparent+.coming-soon-wrapper-transparent {
margin-left:16px;
}
@media (max-width: 992px) {
/*
.coming-soon-wrapper,
.coming-soon-wrapper-transparent {
padding-p: 20px;
}
/*.coming-soon-time {
font-size: 48px;
line-height: 60px;
}
.coming-soon-date {
line-height: 20px;
font-size: 15px;
}*/
#coming-soon {
top: -64px;
margin-left: -228px;
}
}
@media (max-width: 767px) {
.coming-soon-wrapper, }
.coming-soon-wrapper-transparent {
width: 64px; /* 160, 128, 64 */
border-radius: 35px;
height: 64px;
padding-top: 10px;
}
.coming-soon-time {
font-size: 24px; /* 60, 48, 24 */
line-height: 30px;
}
.coming-soon-date {
line-height: 15px;
font-size: 11px; /* 18, 15, 13 */
}
#coming-soon {
top: -32px;
margin-left: -150px;
}
.coming-soon-wrapper+.coming-soon-wrapper, #comming-soon {
.coming-soon-wrapper-transparent+.coming-soon-wrapper-transparent { position: absolute;
margin-left:8px; background-color: red;
} display: flex;
.coming-soon-date {
display:block; }
} .comming-soon-wrapper {
text-align: center;
padding: 0px;
display: inline-block;
color:black;
width: 100px;
border-radius: 50%;
background-color: lightblue;
height: 100px;
box-sizing: border-box;
margin: 10px;
font-size: 15px;
}
.comming-soon-time {
color:black;
font-weight: 100;
font-size: 44px;
line-height: 64px;
box-sizing: border-box;
text-align: center;
}
.comming-soon-date {
color: #787873;
line-height: 14px;
display: block;
font-size: 16px;
box-sizing: border-box;
text-align: center;
} }

1
ui/src/app/countdown/countdown.component.html
View File

@@ -1,4 +1,5 @@
<div id="content" class="content-comming-soon"> <div id="content" class="content-comming-soon">
<div id="comming-soon" class="text-theme"> <div id="comming-soon" class="text-theme">
<div class="comming-soon-wrapper"> <div class="comming-soon-wrapper">
<span class="comming-soon-time">{{Counter.Tage}}</span> <span class="comming-soon-time">{{Counter.Tage}}</span>

36
ui/src/app/home/home.component.css
View File

@@ -0,0 +1,36 @@
.heading-page {
text-align: center;
font-size: 60px;
margin: 0;
line-height: 1.2;
}
.section-heading-page {
background: #228fb8;
color: white;
}
.col-xs-12 {
width: 100%;
}
.container {
width:1170px;
text-align: center;
}
.wrapper-table {
display: table;
margin: 0;
padding: 0;
width: 100%;
}
.wrapper-table-cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}

32
ui/src/app/home/home.component.html
View File

@@ -1,4 +1,30 @@
<div class="c-block"> <br />
<h2>Welcome Home!</h2> <br />
<a class="btn btn-primary" routerLink="/besucher">Zeige Besucher liste</a> <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="wrapper-table">
<div class="wrapper-table-cell">
<app-countdown></app-countdown>
</div>
<div class="section-heading-page">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="heading-page">Annika &amp; Damian</h1>
<div class="subtitle-page text-center mt-10">20.08.2022</div>
</div>
</div>
</div>
</div>
</div> </div>

38
ui/src/app/navbar/navbar.component.html
View File

@@ -5,7 +5,7 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Home</a> <a class="nav-link" routerLink="/home">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Unser Fest</a> <a class="nav-link" href="#">Unser Fest</a>
@@ -17,43 +17,9 @@
<a class="nav-link" href="#">Wunschbüechli</a> <a class="nav-link" href="#">Wunschbüechli</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Anmeldung zum Fest</a> <a class="nav-link" routerLink="/besucher">Anmeldung zum Fest</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<!-- NAVBAR END --> <!-- NAVBAR END -->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

2
ui/src/index.html
View File

@@ -12,7 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body class="mat-typography"> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

10
ui/src/styles.css
View File

@@ -1,4 +1,10 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
* {
font-size: 15px;
}
html, body { height: 100%; } html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 15px;
}