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

web/satellite: user settings page made responsive

Browse Source 
existing adaptations fixed
added new adaptation media queries
modals related to setting page fixed on larger screens
cursor changed to pointer for passphrase type selection

Change-Id: Iee3dd141c2beea6951ff43b31506e709fb1d6b9d
This commit is contained in:
NickolaiYurchenko 2022-09-09 12:34:49 +03:00 committed by Storj Robot
parent c5bca894fd
commit fc9bd515fd
4 changed files with 73 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/satellite/src/components/account/SettingsArea.vue
View File

@ -22,7 +22,7 @@
<div class="settings__secondary-container">
<div class="settings__secondary-container__change-password">
<div class="settings__edit-profile__row">
<ChangePasswordIcon class="settings__secondary-container__img" />
<ChangePasswordIcon class="settings__secondary-container__change-password__img" />
<div class="settings__secondary-container__change-password__text-container">
<h2 class="profile-bold-text">Change Password</h2>
<h3 class="profile-regular-text">6 or more characters</h3>
@ -34,7 +34,7 @@
/>
</div>
<div class="settings__secondary-container__email-container">
<div class="settings__edit-profile__row">
<div class="settings__secondary-container__email-container__row">
<EmailIcon class="settings__secondary-container__img" />
<div class="settings__secondary-container__email-container__text-container">
<h2 class="profile-bold-text email">{{ user.email }}</h2>
@ -202,6 +202,11 @@ export default class SettingsArea extends Vue {
</script>
<style scoped lang="scss">
h3 {
margin-block-start: 0;
margin-block-end: 0;
}
.settings {
position: relative;
font-family: 'font_regular', sans-serif;
@ -216,8 +221,9 @@ export default class SettingsArea extends Vue {
}
&__edit-profile {
height: 66px;
width: calc(100% - 80px);
height: 137px;
box-sizing: border-box;
width: 100%;
border-radius: 6px;
display: flex;
justify-content: space-between;
@ -229,6 +235,7 @@ export default class SettingsArea extends Vue {
display: flex;
justify-content: flex-start;
align-items: center;
max-width: calc(100% - 40px);
}
&__avatar {
@ -257,14 +264,15 @@ export default class SettingsArea extends Vue {
margin-top: 40px;
&__change-password {
height: 66px;
height: 137px;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 37px 40px;
background-color: #fff;
width: calc(48% - 80px);
width: 48%;
box-sizing: border-box;
&__text-container {
margin-left: 32px;
@ -272,14 +280,22 @@ export default class SettingsArea extends Vue {
}
&__email-container {
height: 66px;
height: 137px;
border-radius: 6px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 37px 40px;
background-color: #fff;
width: calc(48% - 80px);
width: 48%;
box-sizing: border-box;
&__row {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
}
&__text-container {
margin-left: 32px;
@ -353,19 +369,20 @@ export default class SettingsArea extends Vue {
@media screen and (max-width: 1300px) {
.profile-container {
.settings {
&__secondary-container {
flex-direction: column;
justify-content: center;
&__change-password {
width: calc(100% - 80px);
&__change-password,
&__email-container {
height: auto;
width: 100%;
}
&__email-container {
margin-top: 40px;
width: calc(100% - 80px);
}
}
}
@ -373,7 +390,7 @@ export default class SettingsArea extends Vue {
@media screen and (max-height: 825px) {
.profile-container {
.settings {
height: 535px;
overflow-y: scroll;
@ -390,4 +407,25 @@ export default class SettingsArea extends Vue {
}
}
}
@media screen and (max-width: 650px) {
.settings__secondary-container__change-password__text-container {
margin: 0;
}
.settings__edit-profile__avatar,
.settings__secondary-container__change-password__img {
display: none;
}
}
@media screen and (max-width: 460px) {
.settings__edit-profile,
.settings__secondary-container__change-password,
.settings__secondary-container__email-container {
padding: 25px;
}
}
</style>

11
web/satellite/src/components/modals/ChangePasswordModal.vue
View File

@ -214,11 +214,22 @@ export default class ChangePasswordModal extends Vue {
display: flex;
flex-direction: column;
padding: 48px;
box-sizing: border-box;
min-width: 550px;
@media screen and (max-width: 600px) {
min-width: 475px;
padding: 48px 24px;
}
@media screen and (max-width: 530px) {
min-width: 420px;
}
@media screen and (max-width: 470px) {
min-width: unset;
}
&__row {
display: flex;
align-items: center;

10
web/satellite/src/components/modals/EditProfileModal.vue
View File

@ -123,6 +123,16 @@ export default class EditProfileModal extends Vue {
display: flex;
flex-direction: column;
padding: 48px;
min-width: 530px;
box-sizing: border-box;
@media screen and (max-width: 580px) {
min-width: 450px;
}
@media screen and (max-width: 500px) {
min-width: unset;
}
@media screen and (max-width: 400px) {
padding: 24px;

1
web/satellite/src/components/objects/BucketCreationGeneratePassphrase.vue
View File

@ -284,6 +284,7 @@ export default class GeneratePassphrase extends Vue {
align-items: center;
justify-content: flex-start;
padding: 20px 0;
cursor: pointer;
&__radio {
color: #0149ff;