responsive version enhancements

This commit is contained in:
Čarodej
2022-01-26 11:43:49 +01:00
parent fb91c1883a
commit e22ae97a87
26 changed files with 263 additions and 140 deletions

View File

@@ -8,9 +8,9 @@
<ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Role" rules="required">
<AppInputText :title="$t('admin_page_user.select_role')" :description="$t('user_box_role.description')" :error="errors[0]" :is-last="true">
<div class="flex space-x-4">
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
<SelectInput v-model="userRole" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="sm:w-auto w-full">
{{ $t('admin_page_user.save_role') }}
</ButtonBase>
</div>
@@ -19,17 +19,32 @@
</ValidationObserver>
</div>
<div class="card shadow-card">
<FormLabel>{{ $t('admin_page_user.label_person_info') }}</FormLabel>
<!--Email-->
<AppInputText :title="$t('page_registration.label_email')">
<input :value="user.data.attributes.email"
:placeholder="$t('page_registration.placeholder_email')"
type="email"
class="focus-border-theme input-dark"
disabled
/>
</AppInputText>
<FormLabel>
{{ $t('admin_page_user.label_person_info') }}
</FormLabel>
<!--Name-->
<div class="md:flex justify-items md:space-x-4">
<AppInputText :title="$t('First Name')" class="w-full">
<input
disabled
:value="user.data.relationships.settings.data.attributes.first_name"
:placeholder="$t('page_registration.placeholder_name')"
type="text"
class="focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('Last Name')" class="w-full">
<input
disabled
:value="user.data.relationships.settings.data.attributes.last_name"
:placeholder="$t('page_registration.placeholder_name')"
type="text"
class="focus-border-theme input-dark"
/>
</AppInputText>
</div>
<AppInputText :title="$t('page_registration.label_name')" :is-last="true">
<input :value="user.data.relationships.settings.data.attributes.name"
:placeholder="$t('page_registration.placeholder_name')"

View File

@@ -4,7 +4,7 @@
{{ $t('Subscription') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
<b class="sm:text-3xl text-xl font-extrabold -mt-3 block mb-0.5">
{{ status }}
</b>

View File

@@ -6,14 +6,14 @@
{{ $t('Balance') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
{{ user.data.relationships.balance.data.attributes.formatted }}
</b>
<ValidationObserver ref="creditUserBalance" @submit.prevent="increaseBalance" v-slot="{ invalid }" tag="form" class="mt-6">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Balance Amount" rules="required">
<AppInputText :description="$t('User balance will be increased for the amount above.')" :error="errors[0]" :is-last="true">
<div class="flex space-x-4">
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
<input v-model="balanceAmount"
:placeholder="$t('Increase user balance for...')"
type="number"
@@ -22,7 +22,7 @@
class="focus-border-theme input-dark"
:class="{'border-red': errors[0]}"
/>
<ButtonBase type="submit" button-style="theme" class="submit-button"
<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full"
:loading="isUpdatingBalanceAmount"
:disabled="isUpdatingBalanceAmount"
>
@@ -40,7 +40,7 @@
{{ $t('Usage Estimates') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
{{ user.data.meta.usages.costEstimate }}
</b>

View File

@@ -5,11 +5,11 @@
{{ $t('user_box_password.title') }}
</FormLabel>
<AppInputSwitch :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
<AppInputText :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
<ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" class="sm:w-auto w-full" button-style="theme">
{{ $t('admin_page_user.send_password_link') }}
</ButtonBase>
</AppInputSwitch>
</AppInputText>
</div>
</PageTab>
</template>
@@ -26,10 +26,12 @@
import {required} from 'vee-validate/dist/rules'
import {events} from '/resources/js/bus'
import axios from 'axios'
import AppInputText from "../../../../components/Admin/AppInputText";
export default {
name: 'UserPassword',
components: {
AppInputText,
ValidationProvider,
ValidationObserver,
AppInputSwitch,

View File

@@ -7,7 +7,7 @@
{{ $t('Storage Usage') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
{{ storage.data.attributes.used }}
</b>
@@ -24,7 +24,7 @@
{{ $t('Upload') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
{{ storage.data.meta.traffic.upload }}
</b>
@@ -41,7 +41,7 @@
{{ $t('Download') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
{{ storage.data.meta.traffic.download }}
</b>
@@ -60,7 +60,7 @@
<ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
<AppInputText :title="$t('admin_page_user.label_change_capacity')" :description="$t('user_box_storage.description')" :error="errors[0]" :is-last="true">
<div class="flex space-x-4">
<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
<input v-model="capacity"
:placeholder="$t('admin_page_user.label_change_capacity')"
type="number"
@@ -69,7 +69,7 @@
class="focus-border-theme input-dark"
:class="{'border-red': errors[0]}"
/>
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="sm:w-auto w-full">
{{ $t('admin_page_user.change_capacity') }}
</ButtonBase>
</div>

View File

@@ -19,7 +19,7 @@
{{ $t('Subscription') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
{{ $t('Free Plan') }}
</b>