Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

responsive

Browse source
This commit is contained in:
Chneemann 2024-03-25 10:59:53 +01:00
parent 855134aa73
commit 4e9a5f3dd0
3 changed files with 34 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/app/components/board/board.component.html
View file

@ -31,7 +31,7 @@
<span>To do</span <span>To do</span
><img src="./../../../assets/img/board/add.svg" alt="add" /> ><img src="./../../../assets/img/board/add.svg" alt="add" />
</div> </div>
<div id="todo"> <div id="todo" class="details">
<ng-container *ngIf="getTask('todo').length > 0; else noTask"> <ng-container *ngIf="getTask('todo').length > 0; else noTask">
<app-task <app-task
*ngFor="let task of getTask('todo')" *ngFor="let task of getTask('todo')"
@ -53,7 +53,7 @@
<span>In progress</span <span>In progress</span
><img src="./../../../assets/img/board/add.svg" alt="add" /> ><img src="./../../../assets/img/board/add.svg" alt="add" />
</div> </div>
<div id="inprogress"> <div id="inprogress" class="details">
<ng-container *ngIf="getTask('inprogress').length > 0; else noTask"> <ng-container *ngIf="getTask('inprogress').length > 0; else noTask">
<app-task <app-task
*ngFor="let task of getTask('inprogress')" *ngFor="let task of getTask('inprogress')"
@ -75,7 +75,7 @@
<span>Await feedback</span <span>Await feedback</span
><img src="./../../../assets/img/board/add.svg" alt="add" /> ><img src="./../../../assets/img/board/add.svg" alt="add" />
</div> </div>
<div id="awaitfeedback"> <div id="awaitfeedback" class="details">
<ng-container <ng-container
*ngIf="getTask('awaitfeedback').length > 0; else noTask" *ngIf="getTask('awaitfeedback').length > 0; else noTask"
> >
@ -99,14 +99,13 @@
<span>Done</span <span>Done</span
><img src="./../../../assets/img/board/add.svg" alt="add" /> ><img src="./../../../assets/img/board/add.svg" alt="add" />
</div> </div>
<div id="todo"> <div id="todo" class="details">
<ng-container *ngIf="getTask('done').length > 0; else noTask"> <ng-container *ngIf="getTask('done').length > 0; else noTask">
<app-task <app-task
*ngFor="let task of getTask('done')" *ngFor="let task of getTask('done')"
[task]="task" [task]="task"
></app-task> ></app-task>
</ng-container> </ng-container>
<ng-template #noTask> <ng-template #noTask>
<div class="empty-task">No tasks</div> <div class="empty-task">No tasks</div>
</ng-template> </ng-template>

11
src/app/components/board/board.component.scss
View file

@ -1,6 +1,7 @@
section { section {
margin: 0; margin: 0;
background-color: var(--very-light-gray); background-color: var(--very-light-gray);
padding-bottom: 32px;
} }
.title { .title {
@ -186,7 +187,7 @@ section {
.search { .search {
padding-right: 0; padding-right: 0;
input { input {
width: calc(100vw - 120px); width: calc(100vw - 113px);
} }
.line { .line {
right: 35px; right: 35px;
@ -211,21 +212,25 @@ section {
width: 100%; width: 100%;
padding-right: 0; padding-right: 0;
} }
.empty-task { .empty-task {
width: 100%;
max-width: 100%; max-width: 100%;
} }
#inprogress {
.details {
display: flex; display: flex;
width: calc(100vw - 85px); width: calc(100vw - 85px);
overflow-x: auto; overflow-x: auto;
} }
app-task { app-task {
padding-right: 16px; padding-right: 16px;
} }
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
#inprogress { .details {
width: calc(100vw - 55px); width: calc(100vw - 55px);
} }

23
src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
View file

@ -17,10 +17,10 @@ nav {
flex-direction: column; flex-direction: column;
width: 80px; width: 80px;
height: 65px; height: 65px;
border-radius: 16px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--very-dark-blue); background-color: var(--very-dark-blue);
border-radius: 8px;
} }
p { p {
color: var(--light-gray); color: var(--light-gray);
@ -35,3 +35,24 @@ nav {
.active { .active {
background-color: var(--very-dark-blue); background-color: var(--very-dark-blue);
} }
/*------------- RESPONSIVE -------------*/
@media screen and (max-width: 450px) {
.nav-links {
width: 70px;
height: 60px;
img {
width: 20px;
height: auto;
}
}
}
@media screen and (max-width: 380px) {
.nav-links {
p {
font-size: 12px;
}
}
}