From 49414655948f867c525fc80182b8276e9b8f85f4 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sun, 13 Apr 2025 11:13:09 +0200 Subject: [PATCH] style: adjust SCSS media queries for responsive design --- .../add-task/add-task.component.scss | 26 +++++-------- src/app/components/board/board.component.scss | 36 ++++++------------ .../contacts/contacts.component.html | 1 + .../contacts/contacts.component.scss | 38 +++++++++++++------ .../components/contacts/contacts.component.ts | 7 +++- .../main-layout/main-layout.component.scss | 19 ++++------ .../components/summary/summary.component.scss | 18 +++------ .../components/header/header.component.scss | 11 ++---- 8 files changed, 70 insertions(+), 86 deletions(-) diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss index a7d5da6..4c38132 100644 --- a/src/app/components/add-task/add-task.component.scss +++ b/src/app/components/add-task/add-task.component.scss @@ -261,6 +261,16 @@ select:valid { width: calc(100%); } } + +@media screen and (max-width: 950px) { + .header { + margin-bottom: 24px; + .title { + font-size: 50px; + } + } +} + @media screen and (max-width: 560px) { .btn-text { span { @@ -268,19 +278,3 @@ select:valid { } } } - -@media screen and (max-width: 480px) { - .headline { - margin-bottom: 24px; - .title { - font-size: 47px; - font-weight: 700; - } - } - - input, - textarea, - select { - font-size: 16px; - } -} diff --git a/src/app/components/board/board.component.scss b/src/app/components/board/board.component.scss index 87fe482..87b6f46 100644 --- a/src/app/components/board/board.component.scss +++ b/src/app/components/board/board.component.scss @@ -149,7 +149,7 @@ d-none { /*------------- RESPONSIVE -------------*/ -@media screen and (max-width: 1100px) { +@media screen and (max-width: 950px) { .search { .search-inner { input { @@ -157,30 +157,22 @@ d-none { } } } -} -@media screen and (max-width: 1020px) { - .search { - .search-inner { - input { - width: 150px; - } + .btn { + padding: 0; + img { + display: flex; + align-items: center; + justify-content: center; + } + span { + display: none; } } .title { font-size: 50px; } -} - -@media screen and (max-width: 910px) { - .search { - .search-inner { - input { - width: 280px; - } - } - } .status { justify-content: center; @@ -209,14 +201,8 @@ d-none { .btn { position: absolute; - top: -75px; + top: -70px; right: 0px; - width: 40px; - height: 40px; - padding: 3px; - span { - display: none; - } } } diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html index 98fe9b2..d903326 100644 --- a/src/app/components/contacts/contacts.component.html +++ b/src/app/components/contacts/contacts.component.html @@ -61,6 +61,7 @@ +
} } diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss index 5606029..f38b289 100644 --- a/src/app/components/contacts/contacts.component.scss +++ b/src/app/components/contacts/contacts.component.scss @@ -64,7 +64,7 @@ font-size: 20px; font-weight: 400; padding-left: 32px; - margin: 32px 0 12px 0; + margin-bottom: 12px; } .line { @@ -74,6 +74,10 @@ background-color: var(--light-gray); } +.spacer { + margin: 6px; +} + .contact { display: flex; align-items: center; @@ -165,7 +169,7 @@ } } -@media screen and (max-width: 1150px) { +@media screen and (max-width: 950px) { .left-frame { right: 0; width: auto; @@ -175,7 +179,7 @@ .right-frame { top: 96px; - left: 232px; + left: 60px; bottom: 0; right: 0; } @@ -187,17 +191,17 @@ } } -@media screen and (max-width: 910px) { +@media screen and (max-width: 700px) { .left-frame { top: 80px; - left: 0; + left: 60px; bottom: 80px; padding: 0; } .right-frame { top: 80px; - left: 0; + left: 60px; bottom: 80px; } @@ -217,9 +221,14 @@ height: 56px; width: 56px; border-radius: 100%; + padding: 0 0 0 12px; + margin: 0; z-index: 1; cursor: pointer; img { + display: flex; + align-items: center; + justify-content: center; padding: 0; width: 32px; height: 32px; @@ -227,9 +236,18 @@ } } -@media screen and (max-width: 450px) { +@media screen and (max-width: 700px) { + .left-frame, .right-frame { - padding: 16px; + left: 0; + } +} + +@media screen and (max-width: 450px) { + .content, + .contact, + .right-frame { + padding: 12px; } .first-letter { @@ -238,10 +256,6 @@ } } - .contact { - padding: 16px 0; - } - .first-letter { padding-left: 16px; } diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts index 139195c..a88241a 100644 --- a/src/app/components/contacts/contacts.component.ts +++ b/src/app/components/contacts/contacts.component.ts @@ -16,6 +16,8 @@ import { UpdateNotifierService } from '../../services/update-notifier.service'; styleUrl: './contacts.component.scss', }) export class ContactsComponent implements OnInit, OnDestroy { + private readonly CONTACT_VIEW_BREAKPOINT = 950; + allUsers: User[] = []; currentUser: User | null = null; selectedUserId: string | null = null; @@ -132,7 +134,10 @@ export class ContactsComponent implements OnInit, OnDestroy { @HostListener('window:resize', ['$event']) onResize() { - if (window.innerWidth <= 1000 && this.selectedUserId != undefined) { + if ( + window.innerWidth <= this.CONTACT_VIEW_BREAKPOINT && + this.selectedUserId != undefined + ) { this.showAllUsers = false; } else { this.showAllUsers = true; diff --git a/src/app/components/main-layout/main-layout.component.scss b/src/app/components/main-layout/main-layout.component.scss index 11457ad..4c830ad 100644 --- a/src/app/components/main-layout/main-layout.component.scss +++ b/src/app/components/main-layout/main-layout.component.scss @@ -55,14 +55,21 @@ app-sidebar-mobile { } } -@media screen and (max-width: 910px) { +@media screen and (max-width: 800px) { .main-content { padding: 32px; + } +} + +@media screen and (max-width: 700px) { + .main-content { + top: 80px; left: 0; bottom: 80px; } app-header { + height: 80px; left: 0; } @@ -71,16 +78,6 @@ app-sidebar-mobile { } } -@media screen and (max-width: 700px) { - .main-content { - top: 80px; - } - - app-header { - height: 80px; - } -} - @media screen and (max-width: 450px) { .main-content { padding: 16px; diff --git a/src/app/components/summary/summary.component.scss b/src/app/components/summary/summary.component.scss index 133ca44..0ac4964 100644 --- a/src/app/components/summary/summary.component.scss +++ b/src/app/components/summary/summary.component.scss @@ -204,14 +204,6 @@ } } -@media screen and (max-width: 910px) { - section { - display: flex; - flex-direction: column; - align-items: center; - } -} - @media screen and (max-width: 700px) { .header { flex-direction: column; @@ -274,7 +266,7 @@ } } -@media screen and (max-width: 520px) { +@media screen and (max-width: 560px) { .summary-container { height: fit-content; } @@ -334,7 +326,7 @@ } } -@media screen and (max-width: 450px) { +@media screen and (max-width: 470px) { .header { .title { font-size: 47px; @@ -374,7 +366,7 @@ } } -@media screen and (max-width: 400px) { +@media screen and (max-width: 410px) { .todo-done, .urgent, .tasks { @@ -414,7 +406,7 @@ } } -@media screen and (max-width: 350px) { +@media screen and (max-width: 360px) { .todo-done, .urgent, .tasks { @@ -422,7 +414,7 @@ } .details { - width: 75px; + width: 70px; p { font-size: 10px; diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss index 77d9e32..b417cf2 100644 --- a/src/app/shared/components/header/header.component.scss +++ b/src/app/shared/components/header/header.component.scss @@ -8,7 +8,7 @@ .headline { font-size: 20px; - padding-left: 116px; + padding-left: 64px; } .navbar { @@ -56,9 +56,10 @@ /*------------- RESPONSIVE -------------*/ -@media screen and (max-width: 910px) { +@media screen and (max-width: 700px) { .header { width: 100%; + height: 80px; } .headline { @@ -69,9 +70,3 @@ display: unset; } } - -@media screen and (max-width: 700px) { - .header { - height: 80px; - } -}