From b9c0bbce2f18c6ee02eb8c553c989ed9e0cf3667 Mon Sep 17 00:00:00 2001 From: NickolaiYurchenko Date: Wed, 18 Jan 2023 16:19:11 +0200 Subject: [PATCH] web/satellite: access page responsiveness added navigation logo shrink fixed by updating icon; https://github.com/storj/storj/issues/5461 https://github.com/storj/storj/issues/5458 Change-Id: I6794cbf1c63786978336810f4c8151dc7825c7c8 --- .../components/accessGrants/AccessGrants.vue | 21 ++++++++++++++----- .../common/VSearchAlternateStyling.vue | 4 ++++ .../navigation/MobileNavigation.vue | 12 +++++------ web/satellite/static/images/smallLogo.svg | 5 +++-- 4 files changed, 29 insertions(+), 13 deletions(-) diff --git a/web/satellite/src/components/accessGrants/AccessGrants.vue b/web/satellite/src/components/accessGrants/AccessGrants.vue index fc51272b8..8e11d1398 100644 --- a/web/satellite/src/components/accessGrants/AccessGrants.vue +++ b/web/satellite/src/components/accessGrants/AccessGrants.vue @@ -387,13 +387,16 @@ export default class AccessGrants extends Vue { flex-direction: column; align-items: flex-start; justify-content: center; - padding: 10px 28px; + padding: 25px 28px; width: 300px; - height: 220px; background: #fff; box-shadow: 0 0 20px rgb(0 0 0 / 4%); border-radius: 10px; min-width: 175px; + + @media screen and (max-width: 930px) { + width: 100%; + } } .access-grants { @@ -440,11 +443,14 @@ export default class AccessGrants extends Vue { &__cli-credentials { @include grant-flow-card; - @media screen and (max-width: 448px) { - height: auto; + @media screen and (max-width: 370px) { + + .access-grants__flows-area__button-container { + flex-direction: column; + align-items: flex-start; + } .access-grants__flows-area__create-button { - padding: 20px 10px; margin: 8px 0 0; } } @@ -493,6 +499,11 @@ export default class AccessGrants extends Vue { } .access-grants-items { + padding-bottom: 55px; + + @media screen and (max-width: 1150px) { + margin-top: -45px; + } &__content { margin-top: 20px; diff --git a/web/satellite/src/components/common/VSearchAlternateStyling.vue b/web/satellite/src/components/common/VSearchAlternateStyling.vue index 056d0d42c..fc3952318 100644 --- a/web/satellite/src/components/common/VSearchAlternateStyling.vue +++ b/web/satellite/src/components/common/VSearchAlternateStyling.vue @@ -63,6 +63,10 @@ async function processSearchQuery(): Promise { background-repeat: no-repeat; background-size: 22px 22px; background-position: top 16px left 16px; + + @media screen and (max-width: 1150px) { + width: 100%; + } } ::placeholder { diff --git a/web/satellite/src/components/navigation/MobileNavigation.vue b/web/satellite/src/components/navigation/MobileNavigation.vue index 0c58f3570..d4ee62597 100644 --- a/web/satellite/src/components/navigation/MobileNavigation.vue +++ b/web/satellite/src/components/navigation/MobileNavigation.vue @@ -561,14 +561,14 @@ export default class MobileNavigation extends Vue { height: 4rem; &__logo { - width: 187px; - max-width: 187px; - height: 32px; - max-height: 32px; + width: 211px; + max-width: 211px; + height: 37px; + max-height: 37px; svg { - width: 187px; - height: 32px; + width: 211px; + height: 37px; } } } diff --git a/web/satellite/static/images/smallLogo.svg b/web/satellite/static/images/smallLogo.svg index 7d9d8c7e6..afa0835fc 100644 --- a/web/satellite/static/images/smallLogo.svg +++ b/web/satellite/static/images/smallLogo.svg @@ -1,3 +1,4 @@ - - + + +