From 9c2b22129aea7b0245d3db5a54e2fee51c48e3a4 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 3 Feb 2022 10:38:51 +0100
Subject: [PATCH] OZG-1820 detailview for small displays
---
.../apps/goofy/src/app/app.component.scss | 3 ++
.../lib/build-info/build-info.component.scss | 5 ----
.../lib/navigation/navigation.component.scss | 28 +++++++++++++++++++
3 files changed, 31 insertions(+), 5 deletions(-)
diff --git a/goofy-client/apps/goofy/src/app/app.component.scss b/goofy-client/apps/goofy/src/app/app.component.scss
index f9b60b4e0e..6d15feb9a6 100644
--- a/goofy-client/apps/goofy/src/app/app.component.scss
+++ b/goofy-client/apps/goofy/src/app/app.component.scss
@@ -29,6 +29,9 @@ main {
max-width: calc(100vw - (20px + 72px));
transition-delay: 0.2s;
}
+ @include media('<desktop') {
+ max-width: calc(100vw - (20px + 72px));
+ }
}
.left-nav {
diff --git a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
index 206a83d14d..0c892bfb79 100644
--- a/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
+++ b/goofy-client/libs/navigation/src/lib/build-info/build-info.component.scss
@@ -9,11 +9,6 @@
padding: 4px 8px;
transform: rotate(-90deg) translate(100%, 0);
transform-origin: right bottom;
-
- @media (min-width: 1240px) {
- //transform: initial;
- //padding: 4px 8px;
- }
}
p {
diff --git a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
index e99d86ce1d..9eddb9b846 100644
--- a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
+++ b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
@@ -1,6 +1,8 @@
@use 'sass:map';
@use '~@angular/material' as mat;
@import "variables";
+@import "breakpoints";
+@import "~include-media/dist/include-media";
:host {
position: sticky;
@@ -17,6 +19,11 @@ nav {
width: 72px;
transition-delay: 0.2s;
}
+
+ @include media('<desktop') {
+ width: 72px;
+ transition-delay: 0.2s;
+ }
}
ul {
@@ -83,3 +90,24 @@ ul {
}
}
}
+
+@include media('<desktop') {
+ ul {
+ a {
+ border-radius: 16px;
+ margin-left: 20px;
+ padding-left: 4px;
+ transition-delay: 0s;
+ width: 32px;
+
+ &.active {
+ background-color: mat.get-color-from-palette($primaryPalette, 50);
+ }
+ }
+
+ span {
+ opacity: 0;
+ transition-delay: 0s;
+ }
+ }
+}
--
GitLab