tailwind 3 upgrade part 3

This commit is contained in:
Čarodej
2022-01-28 16:32:01 +01:00
parent 854ae6d8fd
commit dcba1e8407
29 changed files with 55 additions and 59 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,3 +1,19 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
.card {
@apply dark:bg-dark-foreground bg-white sm:p-6 p-4 rounded-xl lg:mb-6 mb-5
}
.widget-card {
@apply dark:bg-dark-foreground bg-white lg:p-5 p-4 rounded-xl
}
.input-dark {
@apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
}
.text-limit {
@apply whitespace-nowrap text-ellipsis overflow-x-hidden block
}

View File

@@ -142,22 +142,6 @@ export default {
@import '../sass/vuefilemanager/variables';
@import '../sass/vuefilemanager/mixins';
.card {
@apply dark:bg-dark-foreground bg-white sm:p-6 p-4 rounded-xl lg:mb-6 mb-5
}
.widget-card {
@apply dark:bg-dark-foreground bg-white lg:p-5 p-4 rounded-xl
}
.input-dark {
@apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
}
.text-limit {
@apply whitespace-nowrap overflow-ellipsis overflow-x-hidden block
}
input:-webkit-autofill {
transition-delay: 999999999999s;
}

View File

@@ -12,7 +12,7 @@
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -71,7 +71,7 @@
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -135,7 +135,7 @@
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -19,7 +19,7 @@
:member="row.data.relationships.user"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -300,7 +300,7 @@
@include transition(150ms);
pointer-events: none;
margin-right: 6px;
flex-shrink: 0;
shrink: 0;
}
.location-title {

View File

@@ -1,6 +1,6 @@
<template>
<div class="flex items-center justify-center">
<span class="text-theme dark-text-theme lg:text-xs text-tiny font-semibold absolute z-10 inline-block mx-auto mt-1 w-7 overflow-ellipsis overflow-hidden text-center">
<span class="text-theme dark-text-theme lg:text-xs text-tiny font-semibold absolute z-10 inline-block mx-auto mt-1 w-7 text-ellipsis overflow-hidden text-center">
{{ entry.data.attributes.mimetype }}
</span>

View File

@@ -58,7 +58,7 @@
<div class="text-center">
<!--Item Title-->
<b class="inline-block leading-3 text-sm hover:underline w-full overflow-ellipsis overflow-hidden whitespace-nowrap md:px-6 tracking-tigh" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
<b class="inline-block leading-3 text-sm hover:underline w-full text-ellipsis overflow-hidden whitespace-nowrap md:px-6 tracking-tigh" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
{{ itemName }}
</b>

View File

@@ -37,7 +37,7 @@
<div class="pl-2">
<!--Item Title-->
<b class="block text-sm mb-0.5 overflow-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
<b class="block text-sm mb-0.5 text-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName">
{{ itemName }}
</b>

View File

@@ -1,5 +1,5 @@
<template>
<div class="flex-shrink-0 flex-grow-0">
<div class="shrink-0 grow-0">
<img
:style="{width: size + 'px', height: size + 'px'}"
v-if="member.data.attributes.avatar"

View File

@@ -6,7 +6,7 @@
<chevron-left-icon size="17" :class="{'opacity-0 -translate-x-3': ! isLoadedFolder, 'opacity-100 translate-x-0': isLoadedFolder }" class="transform align-middle cursor-pointer mr-2 -ml-1 transition-all duration-200" />
<!--Folder Title-->
<div :class="{'-translate-x-4': ! isLoadedFolder}" class="transform lg:text-base text-sm align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
<div :class="{'-translate-x-4': ! isLoadedFolder}" class="transform lg:text-base text-sm align-middle font-bold overflow-hidden text-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
{{ $getCurrentLocationName() }}
</div>

View File

@@ -8,7 +8,7 @@
<file-icon v-if="icon === 'file'" class="text-theme vue-feather" size="19" />
</div>
<div>
<b class="font-bold text-base inline-block whitespace-nowrap 2xl:w-72 w-52 overflow-ellipsis overflow-hidden leading-3">
<b class="font-bold text-base inline-block whitespace-nowrap 2xl:w-72 w-52 text-ellipsis overflow-hidden leading-3">
{{ title }}
</b>
<small class="font-bold text-xs text-gray-400 block">

View File

@@ -10,7 +10,7 @@
<user-icon v-if="selected.icon === 'user'" size="14" class="vue-feather text-theme" />
<edit2-icon v-if="selected.icon === 'user-edit'" size="14" class="vue-feather text-theme" />
</div>
<span class="whitespace-nowrap w-full inline-block overflow-hidden overflow-ellipsis option-value pl-2">
<span class="whitespace-nowrap w-full inline-block overflow-hidden text-ellipsis option-value pl-2">
{{ selected.label }}
</span>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<div class="flex items-center flex-shrink-0 flex-grow-0">
<div class="flex items-center shrink-0 grow-0">
<MemberAvatar
class="mr-3 flex-shrink-0"
class="mr-3 shrink-0"
:is-border="false"
:size="52"
:member="member"

View File

@@ -34,7 +34,7 @@
<div class="pl-2">
<!--Item Title-->
<b class="block text-sm mb-0.5 overflow-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px">
<b class="block text-sm mb-0.5 text-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px">
{{ item.data.attributes.name }}
</b>

View File

@@ -24,7 +24,7 @@
<!--Item label-->
<b
@click="getFolder"
class="text-sm font-bold whitespace-nowrap overflow-x-hidden overflow-ellipsis inline-block ml-3 transition-all duration-150"
class="text-sm font-bold whitespace-nowrap overflow-x-hidden text-ellipsis inline-block ml-3 transition-all duration-150"
:class="{'text-theme': isSelectedItem}"
>
{{ nodes.name }}
@@ -32,7 +32,7 @@
</div>
<!--Children-->
<TreeMenu
<tree-node
:disabled-by-id="disabledById"
:depth="depth + 1"
v-if="isVisible"
@@ -44,7 +44,7 @@
</template>
<script>
import TreeMenu from './TreeMenu'
//import TreeMenu from './TreeMenu'
import {FolderIcon, ChevronRightIcon, HardDriveIcon, UsersIcon, UserPlusIcon} from 'vue-feather-icons'
import {events} from '../../bus'
import {mapGetters} from 'vuex'
@@ -62,7 +62,7 @@
UserPlusIcon,
FolderIcon,
UsersIcon,
TreeMenu,
'tree-node': () => import('./TreeMenuNavigator'),
},
computed: {
...mapGetters([

View File

@@ -18,18 +18,17 @@
</div>
<folder-icon size="17" class="mr-2.5 vue-feather" :class="{'text-theme': isSelected}" />
<b
class="font-bold text-xs max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
class="font-bold text-xs max-w-1 overflow-hidden text-ellipsis whitespace-nowrap"
:class="{'text-theme': isSelected}"
>
{{ nodes.name }}
</b>
</div>
<TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
<tree-node :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
</div>
</template>
<script>
import TreeMenuNavigator from './TreeMenuNavigator'
import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons'
import {mapGetters} from 'vuex'
import {events} from '../../bus'
@@ -42,7 +41,7 @@
'depth',
],
components: {
TreeMenuNavigator,
'tree-node': () => import('./TreeMenuNavigator'),
ChevronRightIcon,
FolderIcon,
},

View File

@@ -1,5 +1,5 @@
<template>
<section class="content-sidebar flex-none xl:w-48 w-40 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background z-10" id="content-sidebar">
<section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background z-10" id="content-sidebar">
<slot></slot>
</section>
</template>

View File

@@ -136,7 +136,7 @@
:member="result"
/>
<div class="ml-3">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ result.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -13,7 +13,7 @@
:member="row.data.relationships.user"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -13,7 +13,7 @@
:member="row.data.relationships.user"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -24,7 +24,7 @@
<!--Member-->
<div v-if="entry.type === 'member'" class="info">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ entry.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -34,7 +34,7 @@
<!--Invitation-->
<div v-if="entry.type === 'invitation'" class="info">
<b class="text-sm font-bold block max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-xs overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ entry.email }}
</b>
<span v-if="entry.id" class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -13,7 +13,7 @@
:member="row.data.relationships.user"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -40,7 +40,7 @@
:member="row.data.relationships.user"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -14,7 +14,7 @@
:member="row.data.relationships.user"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -27,7 +27,7 @@
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -86,7 +86,7 @@
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">
@@ -150,7 +150,7 @@
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.settings.data.attributes.name }}
</b>
<span class="block text-xs dark:text-gray-500 text-gray-600">

View File

@@ -44,7 +44,7 @@
<div @click="goToFolder(folder)" v-for="folder in favourites" :key="folder.data.id" class="group flex items-center justify-between py-2.5 cursor-pointer">
<div class="flex items-center">
<folder-icon size="17" class="mr-2.5 vue-feather" :class="{'text-theme': $route.params.id === folder.data.id}" />
<span class="font-bold text-xs max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" :class="{'text-theme': $route.params.id === folder.data.id}">
<span class="font-bold text-xs max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" :class="{'text-theme': $route.params.id === folder.data.id}">
{{ folder.data.attributes.name }}
</span>
</div>

View File

@@ -2,7 +2,7 @@
<div class="flex text-center py-5 px-5 w-full justify-between items-center z-20 lg:hidden block">
<!--Location Title-->
<div class="text-sm dark:text-gray-100 align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
<div class="text-sm dark:text-gray-100 align-middle font-bold overflow-hidden text-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
{{ locationName }}
</div>

View File

@@ -30,7 +30,7 @@
{{--StyleSheet--}}
<link href="{{ mix('css/app.css') }}?v={{ get_version() }}" rel="stylesheet" type="text/css">
<link href="{{ asset('css/tailwind.css') }}?v={{ get_version() }}" rel="stylesheet" type="text/css">
<link href="{{ mix('css/tailwind.css') }}?v={{ get_version() }}" rel="stylesheet" type="text/css">
{{--OG items--}}
<meta property="og:url" content="{{ url('/') }}">

2
webpack.mix.js vendored
View File

@@ -17,7 +17,7 @@ mix
.sass('resources/sass/app.scss', 'public/css/app.css', {
implementation: require('node-sass')
})
.postCss("resources/css/tailwind.css", "public/css", [
.postCss("resources/css/tailwind.css", "public/css/tailwind.css", [
require("tailwindcss"),
])
/*.webpackConfig({