nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-29 19:25:57 +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
resources/js/views/Admin/Dashboard.vue
+5 -5
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>
resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
+1 -1
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">
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+27 -12
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')"
resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
+1 -1
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>
resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
+4 -4
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>
resources/js/views/Admin/Users/UserTabs/UserPassword.vue
+4 -2
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,
resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+5 -5
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>
resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
+1 -1
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>
resources/js/views/MobileNavigationToolbar.vue
+8 -3
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>
resources/js/views/SetupWizard/AppSetup.vue
+2 -2
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>
resources/js/views/User/Password.vue
+6 -4
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,
resources/js/views/User/Storage.vue
+3 -3
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>