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

docs(docs): improve UI button

Browse Source
This commit is contained in:
thomas
2023-09-22 16:55:24 +02:00
parent efb4277463
commit 69e9feaa0e
3 changed files with 63 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/src/content/docs/challenges/angular/1-projection.md
View File

@@ -21,7 +21,7 @@ You will start with an fully functional application that includes a dashboard co
While the application works, the developer experience is far from being optimal. Every time you need to implement a new card, you have to modify the `card.component.ts`. In real-life projects, this component can be shared among many applications. The goal of the challenge is to create a <b>CardComponent</b> that can be customized without any modifications. Once you've created this component, you can begin implementing the <b>CityCardComponent</b> and ensure you are not touching the <b>CardComponent</b>.
## Constraints:
## Constraints
- You <b>must</b> refactor the <b>CardComponent</b> and <b>ListItemComponent</b>.
- The <b>NgFor</b> directive must be declared and remain inside the <b>CardComponent</b>. You might be tempted to move it to the <b>CardComponent</b> but avoid doing so.
@@ -39,15 +39,22 @@ Your PR title must start with <b>Answer:1</b>.
:::
<div class="article-footer">
<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer" alt="Projection community solutions"> Community solutions
<a
href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer"
alt="Projection community solutions">
❖ Community Answers
</a>
<a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"' alt="Projection solution author"> Author solution
<a
href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"'
alt="Projection solution author">
▶︎ Author Answer
</a>
<a
href="https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5"
target="_blank"
rel="noopener noreferrer"
alt="Projection blog article">
Blog Post
alt="Projection blog article">
<svg aria-hidden="true" class="astro-yzt5nm4y astro-lq7oo3uf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"></path></svg>
Blog Post
</a>
</div>

39
docs/src/content/docs/challenges/angular/3-directive-enhancement.md
View File

@@ -6,3 +6,42 @@ description: Challenge 3 is about enhancing a built-in directive
:::note
WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/ngfor-enhancement/README.md) if you want to do this challenge
:::
<div class="chip">Challenge #3</div>
## Information
## Statement
## Constraints
---
:::note
Start the project by running: `npx nx serve ngfor-enhancement`.
:::
:::tip[Reminder]
Your PR title must start with <b>Answer:3</b>.
:::
<div class="article-footer">
<a
href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer"
alt="Directive enhancement community solutions">
❖ Community Answers
</a>
<a
href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"'
alt="Directive enhancement solution author">
▶︎ Author Answer
</a>
<a
href="https://medium.com/@thomas.laforge/ngfor-enhancement-cc3a9805e4c5"
target="_blank"
rel="noopener noreferrer"
alt="Directive enhancement blog article">
<svg aria-hidden="true" class="astro-yzt5nm4y astro-lq7oo3uf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"></path></svg>
Blog Post
</a>
</div>

17
docs/src/styles/custom-css.css
View File

@@ -16,7 +16,7 @@
border-radius: 6px;
padding: 2px 8px;
background-color: rgb(35, 134, 54);
color: white;
color: var(--sl-color-white);
}
.github-neutral-btn {
@@ -45,23 +45,30 @@
.article-footer {
margin-top: 3rem !important;
display: flex;
justify-content: space-between;
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.article-footer > a {
border: 1px solid var(--sl-color-gray-5);
border: 1px solid var(--sl-color-accent-high);
border-radius: 0.5rem;
padding: 1rem;
text-decoration: none;
color: var(--sl-color-gray-2);
box-shadow: var(--sl-shadow-md);
color: var(--sl-color-white);
font-size: var(--sl-text-2xl);
font-size: var(--sl-text-lg);
line-height: var(--sl-line-height-headings);
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: center;
margin-top: 0;
background-color: var(--sl-color-accent-high);
}
a.primary {
color: #fff !important;
color: var(--sl-color-white) !important;
}
b {