vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simple animations challenge template

Browse Source
This commit is contained in:
Sven Brodny
2024-02-19 23:58:41 +01:00
parent 649eb847be
commit 93b2717775
1 changed files with 41 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
apps/angular/simple-animations/src/app/app.component.ts
View File

@@ -4,11 +4,24 @@ import { Component } from '@angular/core';
standalone: true, standalone: true,
imports: [], imports: [],
selector: 'app-root', selector: 'app-root',
styles: `
.column {
@apply flex flex-1 flex-col gap-5;
}
.list-item {
@apply flex flex-row border-b px-5 pb-2;
span {
@apply flex-1;
}
}
`,
template: ` template: `
<div class="mx-20 my-40 flex gap-5"> <div class="mx-20 my-40 flex gap-5">
<div class="flex flex-1 flex-col gap-5"> <div class="column">
<section> <section>
<h4 class="subtitle">2008</h4> <h3>2008</h3>
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
mollitia sequi accusantium, distinctio similique laudantium eveniet mollitia sequi accusantium, distinctio similique laudantium eveniet
@@ -18,7 +31,7 @@ import { Component } from '@angular/core';
</section> </section>
<section> <section>
<h4 class="subtitle">2010</h4> <h3>2010</h3>
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
mollitia sequi accusantium, distinctio similique laudantium eveniet mollitia sequi accusantium, distinctio similique laudantium eveniet
@@ -28,7 +41,7 @@ import { Component } from '@angular/core';
</section> </section>
<section> <section>
<h4 class="subtitle">2012</h4> <h4>2012</h4>
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
mollitia sequi accusantium, distinctio similique laudantium eveniet mollitia sequi accusantium, distinctio similique laudantium eveniet
@@ -38,41 +51,38 @@ import { Component } from '@angular/core';
</section> </section>
</div> </div>
<div class="flex flex-1 flex-col gap-5"> <div class="column">
<div class="flex flex-col gap-3"> <div class="list-item">
<div class="flex flex-col border-b px-5 pb-2 lg:flex-row"> <span>Name:</span>
<div class="key flex-1">Name:</div> <span>Samuel</span>
<div class="value flex-1">Samuel</div>
</div> </div>
<div class="flex flex-col border-b px-5 pb-2 lg:flex-row"> <div class="list-item">
<div class="key flex-1">Age:</div> <span>Age:</span>
<div class="value flex-1">28</div> <span>28</span>
</div> </div>
<div class="flex flex-col border-b px-5 pb-2 lg:flex-row"> <div class="list-item">
<div class="key flex-1">Birthdate:</div> <span>Birthdate:</span>
<div class="value flex-1">02.11.1995</div> <span>02.11.1995</span>
</div> </div>
<div class="flex flex-col border-b px-5 pb-2 lg:flex-row"> <div class="list-item">
<div class="key flex-1">City:</div> <span>City:</span>
<div class="value flex-1">Berlin</div> <span>Berlin</span>
</div> </div>
<div class="flex flex-col border-b px-5 pb-2 lg:flex-row"> <div class="list-item">
<div class="key flex-1">Language:</div> <span>Language:</span>
<div class="value flex-1">English</div> <span>English</span>
</div> </div>
<div class="flex flex-col border-b px-5 pb-2 lg:flex-row"> <div class="list-item">
<div class="key flex-1">Like Pizza:</div> <span>Like Pizza:</span>
<div class="value flex-1">Hell yeah</div> <span>Hell yeah</span>
</div>
</div> </div>
</div> </div>
</div> </div>
`, `,
styles: [''],
}) })
export class AppComponent {} export class AppComponent {}