JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: improve onboarding CLI flow small screen adaptation

Browse Source 
Improved onboarding CLI flow view on smaller screens.
Also improved notification boxes adaptation.

Issue:
https://github.com/storj/storj/issues/5894

Change-Id: I83dd8968df937d0d50535707e02914bd232fed21
This commit is contained in:
Vitalii 2023-05-30 13:23:12 +03:00 committed by Vitalii Shpital
parent eb4fd2180b
commit 8c4a9f9277
12 changed files with 90 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/satellite/src/components/notifications/NotificationArea.vue
View File

@ -50,5 +50,10 @@ const doNotificationsExist = computed((): boolean => {
border-radius: 12px;
z-index: 9999;
overflow: hidden;
@media screen and (width <= 450px) {
width: unset;
left: 17px;
}
}
</style>

4
web/satellite/src/components/notifications/NotificationItem.vue
View File

@ -171,6 +171,10 @@ onMounted((): void => {
height: auto;
width: 270px;
word-break: break-word;
@media screen and (width <= 450px) {
width: unset;
}
}
&__link {

9
web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
View File

@ -17,12 +17,13 @@
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (width <= 760px) {
.tour-area {
@media screen and (width <= 760px) {
width: 88% !important;
}
@media screen and (width <= 600px) {
padding: 30px 0 !important;
}
}
</style>

10
web/satellite/src/components/onboardingTour/steps/CLIStep.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div>
<div class="wrap">
<ProgressBar />
<router-view />
</div>
@ -11,3 +11,11 @@
<script setup lang="ts">
import ProgressBar from '@/components/onboardingTour/steps/cliFlow/ProgressBar.vue';
</script>
<style scoped lang="scss">
.wrap {
@media screen and (width <= 600px) {
width: 100%;
}
}
</style>

14
web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
View File

@ -256,6 +256,11 @@ onMounted(async (): Promise<void> => {
width: 287px;
padding: 0 98.5px;
@media screen and (width <= 600px) {
width: 100%;
padding: 0;
}
&__label {
font-family: 'font_medium', sans-serif;
margin: 20px 0 8px;
@ -272,6 +277,11 @@ onMounted(async (): Promise<void> => {
padding: 0 98.5px;
flex-wrap: wrap;
@media screen and (width <= 600px) {
width: 100%;
padding: 0;
}
&__container {
display: flex;
margin-top: 5px;
@ -283,5 +293,9 @@ onMounted(async (): Promise<void> => {
:deep(.duration-selection) {
width: 287px;
margin-left: 0;
@media screen and (width <= 600px) {
width: 100%;
}
}
</style>

4
web/satellite/src/components/onboardingTour/steps/cliFlow/ProgressBar.vue
View File

@ -81,6 +81,10 @@ const fill = computed((): string => {
background: var(--c-grey-3);
border-radius: 8px;
@media screen and (width <= 600px) {
width: 100%;
}
&__fill {
height: 16px;
background: var(--c-green-5);

10
web/satellite/src/components/onboardingTour/steps/cliFlow/SuccessScreen.vue
View File

@ -86,6 +86,10 @@ async function endOnboarding(): Promise<void> {
align-items: center;
flex-direction: column;
@media screen and (width <= 600px) {
padding: 24px;
}
&__title {
margin: 20px 0;
font-family: 'font_Bold', sans-serif;
@ -108,6 +112,12 @@ async function endOnboarding(): Promise<void> {
width: 100%;
margin-top: 24px;
column-gap: 24px;
@media screen and (width <= 450px) {
flex-direction: column-reverse;
column-gap: unset;
row-gap: 24px;
}
}
}

13
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/DurationPicker.vue
View File

@ -146,6 +146,14 @@ function closePicker(): void {
position: absolute;
z-index: 1;
top: 100%;
@media screen and (width <= 930px) {
width: 500px;
}
@media screen and (width <= 750px) {
width: 100%;
}
}
.duration-picker {
@ -164,6 +172,11 @@ function closePicker(): void {
column-gap: 48px;
padding: 10px 24px 0;
@media screen and (width <= 380px) {
padding: 10px 10px 0;
column-gap: 24px;
}
&__column {
list-style-type: none;
padding-left: 0;

12
web/satellite/src/components/onboardingTour/steps/common/CLIFlowContainer.vue
View File

@ -31,7 +31,7 @@ const props = withDefaults(defineProps<{
onNextClick: () => unknown;
onBackClick: () => unknown;
title: string;
isLoading: boolean;
isLoading?: boolean;
}>(), {
onNextClick: () => {},
onBackClick: () => {},
@ -52,6 +52,10 @@ const props = withDefaults(defineProps<{
flex-direction: column;
align-items: center;
@media screen and (width <= 600px) {
padding: 24px;
}
&__title {
margin: 20px 0;
font-family: 'font_Bold', sans-serif;
@ -67,6 +71,12 @@ const props = withDefaults(defineProps<{
width: 100%;
margin-top: 34px;
column-gap: 24px;
@media screen and (width <= 450px) {
flex-direction: column-reverse;
column-gap: unset;
row-gap: 24px;
}
}
}
</style>

4
web/satellite/src/components/onboardingTour/steps/common/OSContainer.vue
View File

@ -131,6 +131,10 @@ onMounted((): void => {
padding: 16px;
color: #9daab6;
cursor: pointer;
@media screen and (width <= 350px) {
padding: 10px;
}
}
&__choice:first-child {

2
web/satellite/src/components/onboardingTour/steps/common/TabWithCopy.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="tab-copy">
<p class="tab-copy__value" :aria-roledescription="ariaRoleDescription">{{ value }}</p>
<p class="tab-copy__value" :title="value" :aria-roledescription="ariaRoleDescription">{{ value }}</p>
<CopyIcon class="tab-copy__icon" @click="onCopyClick" />
</div>
</template>

11
web/satellite/src/components/onboardingTour/steps/common/ValueWithCopy.vue
View File

@ -3,7 +3,7 @@
<template>
<div class="value-copy">
<p class="value-copy__value" :aria-roledescription="roleDescription">{{ value }}</p>
<p class="value-copy__value" :title="value" :aria-roledescription="roleDescription">{{ value }}</p>
<VButton
class="value-copy__button"
label="Copy"
@ -51,6 +51,11 @@ function onCopyClick(): void {
border-radius: 10px;
max-width: calc(100% - 50px);
@media screen and (width <= 450px) {
padding: 12px;
max-width: calc(100% - 24px);
}
&__value {
font-size: 16px;
line-height: 28px;
@ -63,6 +68,10 @@ function onCopyClick(): void {
&__button {
margin-left: 32px;
min-width: 66px;
@media screen and (width <= 450px) {
margin-left: 12px;
}
}
}
</style>