Enhancement: Improve UI on user preferences page (#584)

This commit is contained in:
Nithin David Thomas
2020-03-03 12:39:05 +05:30
committed by GitHub
parent c772c0af03
commit dfdb68e1c3
2 changed files with 11 additions and 15 deletions

View File

@@ -1,9 +1,9 @@
<template> <template>
<div class="profile--settings--row row"> <div class="profile--settings--row row">
<div class="columns small-3 "> <div class="columns small-3 ">
<p class="section--title"> <h4 class="block-title">
{{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }} {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
</p> </h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.NOTE') }}</p> <p>{{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.NOTE') }}</p>
</div> </div>
<div class="columns small-9"> <div class="columns small-9">

View File

@@ -3,12 +3,12 @@
<form @submit.prevent="updateUser"> <form @submit.prevent="updateUser">
<div class="small-12 row profile--settings--row"> <div class="small-12 row profile--settings--row">
<div class="columns small-3 "> <div class="columns small-3 ">
<p class="section--title"> <h4 class="block-title">
{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.TITLE') }} {{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.TITLE') }}
</p> </h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.NOTE') }}</p> <p>{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.NOTE') }}</p>
</div> </div>
<div class="columns small-9"> <div class="columns small-9 medium-5">
<label> <label>
{{ $t('PROFILE_SETTINGS.FORM.PROFILE_IMAGE.LABEL') }} {{ $t('PROFILE_SETTINGS.FORM.PROFILE_IMAGE.LABEL') }}
<thumbnail size="80px" :src="avatarUrl"></thumbnail> <thumbnail size="80px" :src="avatarUrl"></thumbnail>
@@ -48,12 +48,12 @@
</div> </div>
<div class="profile--settings--row row"> <div class="profile--settings--row row">
<div class="columns small-3 "> <div class="columns small-3 ">
<p class="section--title"> <h4 class="block-title">
{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE') }} {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE') }}
</p> </h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.NOTE') }}</p> <p>{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.NOTE') }}</p>
</div> </div>
<div class="columns small-9"> <div class="columns small-9 medium-5">
<label :class="{ error: $v.password.$error }"> <label :class="{ error: $v.password.$error }">
{{ $t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL') }} {{ $t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL') }}
<input <input
@@ -211,16 +211,12 @@ export default {
.profile--settings--row { .profile--settings--row {
@include border-normal-bottom; @include border-normal-bottom;
padding: 16px; padding: $space-normal;
.small-3 { .small-3 {
padding: 16px 16px 16px 0; padding: $space-normal $space-medium $space-normal 0;
} }
.small-9 { .small-9 {
padding: 16px; padding: $space-normal;
} }
} }
.section--title {
color: $color-woot;
}
</style> </style>