gabdlr/agenda-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: additional slot for action btn

Browse Source
This commit is contained in:
Gabriel De Los Rios
2025-12-22 22:30:46 -03:00
parent ed3d749ba4
commit 361fd6ce57
2 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/main-header/main-header.html
View File

@@ -1,8 +1,11 @@
<div class="bar-container"> <div class="bar-container">
<div class="bar-container__elements"> <div class="bar-container__elements">
<div class="bar-container__action-button bar-container__action-button--left"> <div class="bar-container__action-button bar-container__action-button--left">
<ng-content select="[slot='action-button']"></ng-content> <ng-content select="[slot='action-button-left']"></ng-content>
</div> </div>
<h1 class="bar-container__title">{{title()|titlecase}}</h1> <h1 class="bar-container__title">{{title()|titlecase}}</h1>
<div class="bar-container__action-button bar-container__action-button--right">
<ng-content select="[slot='action-button-right']"></ng-content>
</div>
</div> </div>
</div> </div>

26
src/app/components/main-header/main-header.scss
View File

@@ -1,7 +1,7 @@
.bar-container { .bar-container {
background-color: var(--primaryDark); background-color: var(--primaryDark);
width: 100%; width: 100%;
&__elements { &__elements {
position: relative; position: relative;
display: flex; display: flex;
@@ -13,6 +13,7 @@
&__title { &__title {
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 1.3em;
} }
&__action-button { &__action-button {
@@ -20,9 +21,30 @@
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
&--left { &--left,
&--right {
position: absolute; position: absolute;
} }
&--left {
margin-left: 8px;
}
&--right {
margin-right: 8px;
right: 0;
}
} }
@media screen and (min-width: 480px) {
&__title {
font-size: 2em;
}
&__action-button {
&--left {
margin-left: 0;
}
&--right {
margin-right: 0;
}
}
}
} }