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/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>