nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

responsive version enhancements

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/App.vue
View File

@@ -146,7 +146,7 @@ export default {
@import '/resources/sass/vuefilemanager/_mixins';
.card {
@apply dark:bg-dark-foreground bg-white p-6 rounded-xl lg:mb-6 mb-5
@apply dark:bg-dark-foreground bg-white sm:p-6 p-4 rounded-xl lg:mb-6 mb-5
}
.widget-card {

2
resources/js/components/Admin/AppInputButton.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="{'mb-7': !isLast}" class="sm:flex justify-between sm:space-x-8 space-x-2 sm:space-y-0 space-y-4 w-full">
<div :class="{'mb-7': !isLast}" class="sm:flex justify-between sm:space-x-8 sm:space-x-2 sm:space-y-0 space-y-4 w-full">
<!--Label for input-->
<div class="leading-5">

90
resources/js/components/FilesView/Option.vue
View File

@@ -1,49 +1,51 @@
<template>
<li class="2xl:py-4 xl:py-3 lg:py-2.5 py-4 px-5 flex items-center" :class="{'dark:hover:bg-4x-dark-foreground hover:bg-light-background cursor-pointer group': ! isHoverDisabled}">
<div class="mr-4">
<calendar-icon v-if="icon === 'calendar'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<grid-icon v-if="icon === 'grid'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<list-icon v-if="icon === 'list'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<trash-2-icon v-if="icon === 'trash'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<life-buoy-icon v-if="icon === 'restore'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<trash-icon v-if="icon === 'empty-trash'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<eye-icon v-if="icon ==='detail'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<download-cloud-icon v-if="icon === 'download'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<edit2-icon v-if="icon === 'rename'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<corner-down-right-icon v-if="icon === 'move-item'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<link-icon v-if="icon === 'share'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<star-icon v-if="icon === 'favourites'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<folder-plus-icon v-if="icon === 'create-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<smile-icon v-if="icon === 'no-options'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<paperclip-icon v-if="icon === 'zip-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<alphabet-icon v-if="icon === 'alphabet'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<star-icon v-if="icon === 'star'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<users-icon v-if="icon === 'users'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-icon v-if="icon === 'user'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-plus-icon v-if="icon === 'user-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-minus-icon v-if="icon === 'user-minus'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-check-icon v-if="icon === 'user-check'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<settings-icon v-if="icon === 'settings'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<power-icon v-if="icon === 'power'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<lock-icon v-if="icon === 'lock'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<cloud-icon v-if="icon === 'cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<credit-card-icon v-if="icon === 'credit-card'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<file-text-icon v-if="icon === 'file-text'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<database-icon v-if="icon === 'database'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<globe-icon v-if="icon === 'globe'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<monitor-icon v-if="icon === 'monitor'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<box-icon v-if="icon === 'box'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<folder-plus-icon v-if="icon === 'folder-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
</div>
<b class="font-bold text-sm group-hover-text-theme" :class="{'text-theme': isActive}">
{{ title }}
</b>
<li class="2xl:py-4 xl:py-3 lg:py-2.5 py-4 px-5 flex items-center justify-between" :class="{'dark:hover:bg-4x-dark-foreground hover:bg-light-background cursor-pointer group': ! isHoverDisabled}">
<div class="flex items-center">
<div class="mr-4">
<calendar-icon v-if="icon === 'calendar'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<grid-icon v-if="icon === 'grid'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<list-icon v-if="icon === 'list'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<trash-2-icon v-if="icon === 'trash'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<life-buoy-icon v-if="icon === 'restore'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<trash-icon v-if="icon === 'empty-trash'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<eye-icon v-if="icon ==='detail'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<download-cloud-icon v-if="icon === 'download'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<edit2-icon v-if="icon === 'rename'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<corner-down-right-icon v-if="icon === 'move-item'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<link-icon v-if="icon === 'share'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<star-icon v-if="icon === 'favourites'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<folder-plus-icon v-if="icon === 'create-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<smile-icon v-if="icon === 'no-options'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<paperclip-icon v-if="icon === 'zip-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<alphabet-icon v-if="icon === 'alphabet'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<star-icon v-if="icon === 'star'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<users-icon v-if="icon === 'users'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-icon v-if="icon === 'user'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-plus-icon v-if="icon === 'user-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-minus-icon v-if="icon === 'user-minus'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-check-icon v-if="icon === 'user-check'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<settings-icon v-if="icon === 'settings'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<power-icon v-if="icon === 'power'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<lock-icon v-if="icon === 'lock'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<cloud-icon v-if="icon === 'cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<credit-card-icon v-if="icon === 'credit-card'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<file-text-icon v-if="icon === 'file-text'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<database-icon v-if="icon === 'database'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<globe-icon v-if="icon === 'globe'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<monitor-icon v-if="icon === 'monitor'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<box-icon v-if="icon === 'box'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<folder-plus-icon v-if="icon === 'folder-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
</div>
<b class="font-bold text-sm group-hover-text-theme" :class="{'text-theme': isActive}">
{{ title }}
</b>
</div>
<div v-if="arrow" class="ml-2">
<chevron-right-icon v-if="arrow === 'right'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<arrow-up-icon v-if="arrow === 'up'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<arrow-down-icon v-if="arrow === 'down'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<chevron-right-icon v-if="arrow === 'right'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{'text-theme': isActive}"/>
<arrow-up-icon v-if="arrow === 'up'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{'text-theme': isActive}"/>
<arrow-down-icon v-if="arrow === 'down'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{'text-theme': isActive}"/>
</div>
</li>
</template>

2
resources/js/components/Others/Forms/FormLabel.vue
View File

@@ -13,7 +13,7 @@
<bell-icon v-if="icon === 'bell'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<key-icon v-if="icon === 'key'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<users-icon v-if="icon === 'users'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<b class="font-bold dark:text-gray-200 text-lg">
<b class="font-bold dark:text-gray-200 sm:text-lg text-md">
<slot></slot>
</b>
</div>

4
resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
View File

@@ -5,7 +5,7 @@
<!--Payment Options-->
<div v-if="isPaymentOptionPage">
<PopupContent class="px-4">
<PopupContent>
<!--Stripe implementation-->
<PaymentMethod
@@ -95,7 +95,7 @@
</div>
<!--List available plans-->
<div class="px-4">
<div>
<PlanDetail
v-for="(plan, i) in plans.data"
:plan="plan"

2
resources/js/components/Subscription/UserBalance.vue
View File

@@ -4,7 +4,7 @@
{{ $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>

12
resources/js/components/Subscription/UserEditSubscription.vue
View File

@@ -4,21 +4,23 @@
{{ $t('Edit your Subscription') }}
</FormLabel>
<AppInputSwitch v-if="subscription.attributes.status !== 'cancelled'" :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
<AppInputButton v-if="subscription.attributes.status !== 'cancelled'" :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
<ButtonBase @click.native="cancelSubscriptionConfirmation" :loading="isCancelling" class="sm:w-auto w-full" button-style="secondary">
{{ $t('Cancel Now') }}
</ButtonBase>
</AppInputSwitch>
</AppInputButton>
<AppInputSwitch :title="$t('Upgrade or Downgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
<AppInputButton :title="$t('Upgrade or Downgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
<ButtonBase @click.native="$openUpgradeOptions" class="sm:w-auto w-full" button-style="secondary">
{{ $t('Change Plan') }}
</ButtonBase>
</AppInputSwitch>
</AppInputButton>
</div>
</template>
<script>
import AppInputButton from "../Admin/AppInputButton";
import AppInputText from "../Admin/AppInputText";
import AppInputSwitch from "../Admin/AppInputSwitch"
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import FormLabel from "../Others/Forms/FormLabel"
@@ -28,7 +30,9 @@
export default {
name: 'UserEditSubscription',
components: {
AppInputButton,
AppInputSwitch,
AppInputText,
ButtonBase,
FormLabel
},

2
resources/js/components/Subscription/UserEmptySubscription.vue
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-2xl font-extrabold -mt-3 block mb-0.5">
{{ $t('Free Plan') }}
</b>

2
resources/js/components/Subscription/UserFailedPayments.vue
View File

@@ -4,7 +4,7 @@
{{ $t('Failed Payments') }}
</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.totalDebt.formatted }}
</b>

2
resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
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>

6
resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
View File

@@ -4,11 +4,11 @@
{{ $t('Update Payments') }}
</FormLabel>
<AppInputSwitch :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
<AppInputButton :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
<ButtonBase @click.native="updatePaymentMethod" :loading="isGeneratedUpdateLink" class="sm:w-auto w-full" button-style="theme">
{{ $t('Update Payments') }}
</ButtonBase>
</AppInputSwitch>
</AppInputButton>
</div>
</template>
@@ -18,10 +18,12 @@
import FormLabel from "../Others/Forms/FormLabel"
import axios from "axios";
import {events} from "../../bus";
import AppInputButton from "../Admin/AppInputButton";
export default {
name: 'UserUpdatePaymentMethodsExternally',
components: {
AppInputButton,
AppInputSwitch,
ButtonBase,
FormLabel

2
resources/js/components/Subscription/UserUsageEstimates.vue
View File

@@ -4,7 +4,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>

10
resources/js/views/Admin/Dashboard.vue
View File

@@ -44,7 +44,7 @@
{{ $t('Total Users') }}
</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">
{{ data.users.total }}
</b>
@@ -60,7 +60,7 @@
{{ $t('Total Storage') }}
</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">
{{ data.disk.used }}
</b>
@@ -76,7 +76,7 @@
{{ $t('Earnings') }}
</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">
{{ data.app.earnings }}
</b>
@@ -95,7 +95,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">
{{ data.disk.upload.total }}
</b>
@@ -112,7 +112,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">
{{ data.disk.download.total }}
</b>

2
resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
View File

@@ -26,7 +26,7 @@
{{ $t('Pricing') }}
</FormLabel>
<div class="flex space-x-4">
<div class="md:flex justify-items md:space-x-4">
<!--Price-->
<ValidationProvider tag="div" mode="passive" name="Price" rules="required" v-slot="{ errors }" class="w-full">
<AppInputText :title="$t('admin_page_plans.form.price')" class="w-full">

39
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
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')"

2
resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
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>

8
resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
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>

6
resources/js/views/Admin/Users/UserTabs/UserPassword.vue
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,

10
resources/js/views/Admin/Users/UserTabs/UserStorage.vue
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>

2
resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
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>

11
resources/js/views/MobileNavigationToolbar.vue
View File

@@ -2,17 +2,17 @@
<div class="flex text-center py-5 px-4 w-full justify-between items-center z-20 lg:hidden block">
<!-- Go back-->
<div @click="$router.back()" class="go-back-button flex text-left items-center">
<div @click="$router.back()" class="go-back-button flex text-left items-center cursor-pointer">
<chevron-left-icon size="17" class="transform align-middle mr-2 -ml-1" />
<!--Folder Title-->
<div class="text-sm align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
{{ $t('Profile') }}
{{ locationName }}
</div>
</div>
<!--More Actions-->
<div @click="$showMobileMenu('user-navigation')" class="pr-2">
<div @click="$showMobileMenu('user-navigation')" class="pr-2 cursor-pointer">
<menu-icon size="17" />
</div>
</div>
@@ -25,6 +25,11 @@
components: {
ChevronLeftIcon,
MenuIcon,
},
computed: {
locationName() {
return this.$t(this.$route.meta.title)
}
}
}
</script>

4
resources/js/views/SetupWizard/AppSetup.vue
View File

@@ -94,7 +94,7 @@
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">Storage Limitation:</label>
<small class="input-help">If this value is off, all users will have infinity storage capacity and you won't be <br/>able to charge your users for storage plan.</small>
<small class="input-help">If this value is off, all users will have infinity storage capacity and you won't be able to charge your users for storage plan.</small>
</div>
<SwitchInput v-model="app.storageLimitation" class="switch" :state="app.storageLimitation"/>
</div>
@@ -120,7 +120,7 @@
<div class="inline-wrapper">
<div class="switch-label">
<label class="input-label">Allow User Registration:</label>
<small class="input-help">You can disable public registration for new users. You will still able to <br/>create new users in administration panel.</small>
<small class="input-help">You can disable public registration for new users. You will still able to create new users in administration panel.</small>
</div>
<SwitchInput v-model="app.userRegistration" class="switch" :state="app.userRegistration"/>
</div>

10
resources/js/views/User/Password.vue
View File

@@ -9,11 +9,11 @@
<AppInputSwitch :title="$t('popup_2fa.switch_title')" :description="$t('popup_2fa.switch_info')" :is-last="! user.data.attributes.two_factor_authentication">
<SwitchInput v-model="user.data.attributes.two_factor_authentication" class="switch" :state="user.data.attributes.two_factor_authentication" />
</AppInputSwitch>
<AppInputSwitch v-if="user && user.data.attributes.two_factor_authentication" :title="$t('popup_2fa.codes_title')" :description="$t('popup_2fa.codes_info')" :is-last="true">
<AppInputButton v-if="user && user.data.attributes.two_factor_authentication" :title="$t('popup_2fa.codes_title')" :description="$t('popup_2fa.codes_info')" :is-last="true">
<ButtonBase class="w-full" button-style="secondary" @click.native="showRecoveryCodes">
{{ $t('popup_2fa.codes_button') }}
</ButtonBase>
</AppInputSwitch>
</AppInputButton>
</div>
<!--Get personal api keys-->
@@ -37,7 +37,7 @@
</li>
</ul>
</InfoBox>
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="sm:w-auto w-full">
{{ $t('personal_token.create_token') }}
</ButtonBase>
</div>
@@ -66,7 +66,7 @@
</AppInputText>
</ValidationProvider>
<ButtonBase type="submit" button-style="theme" class="confirm-form">
<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full">
{{ $t('profile.store_pass') }}
</ButtonBase>
</ValidationObserver>
@@ -89,10 +89,12 @@
import {events} from '/resources/js/bus'
import {mapGetters} from 'vuex'
import axios from 'axios'
import AppInputButton from "../../components/Admin/AppInputButton";
export default {
name: 'Password',
components: {
AppInputButton,
ValidationProvider,
ValidationObserver,
UserImageInput,

6
resources/js/views/User/Storage.vue
View File

@@ -5,7 +5,7 @@
{{ $t('Storage Usage') }}
</FormLabel>
<b class="text-3xl font-extrabold -mt-3 block">
<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block">
{{ storage.data.attributes.used }}
</b>
@@ -20,7 +20,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>
@@ -35,7 +35,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>