QT/InvoiceShelf
1
0
Fork 0
mirror of https://github.com/InvoiceShelf/InvoiceShelf.git synced 2026-04-07 13:41:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace fixed text length with css line-clamp (#96)

Browse Source
This commit is contained in:
mchev
2024-06-05 14:36:32 +02:00
committed by GitHub
parent bf5a8cdb28
commit 592a537379
15 changed files with 18 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/scripts/admin/views/customers/Index.vue
View File

@@ -152,13 +152,11 @@
<router-link :to="{ path: `customers/${row.data.id}/view` }">
<BaseText
:text="row.data.name"
:length="30"
tag="span"
class="font-medium text-primary-500 flex flex-col"
/>
<BaseText
:text="row.data.contact_name ? row.data.contact_name : ''"
:length="30"
tag="span"
class="text-xs text-gray-400"
/>

2
resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
View File

@@ -133,7 +133,6 @@
<div>
<BaseText
:text="customer.name"
:length="30"
class="
pr-2
text-sm
@@ -149,7 +148,6 @@
<BaseText
v-if="customer.contact_name"
:text="customer.contact_name"
:length="30"
class="
mt-1
text-xs

2
resources/scripts/admin/views/estimates/Index.vue
View File

@@ -211,7 +211,7 @@
</template>
<template #cell-name="{ row }">
<BaseText :text="row.data.customer.name" :length="30" />
<BaseText :text="row.data.customer.name" />
</template>
<template #cell-status="{ row }">

1
resources/scripts/admin/views/estimates/View.vue
View File

@@ -180,7 +180,6 @@
<div class="flex-2">
<BaseText
:text="estimate.customer.name"
:length="30"
class="
pr-2
mb-2

1
resources/scripts/admin/views/expenses/Index.vue
View File

@@ -191,7 +191,6 @@
<template #cell-user_name="{ row }">
<BaseText
:text="row.data.customer ? row.data.customer.name : '-'"
:length="30"
/>
</template>

2
resources/scripts/admin/views/invoices/Index.vue
View File

@@ -196,7 +196,7 @@
</template>
<template #cell-name="{ row }">
<BaseText :text="row.data.customer.name" :length="30" />
<BaseText :text="row.data.customer.name" />
</template>
<!-- Invoice Number -->

1
resources/scripts/admin/views/invoices/View.vue
View File

@@ -423,7 +423,6 @@ onSearched = debounce(onSearched, 500)
<div class="flex-2">
<BaseText
:text="invoice.customer.name"
:length="30"
class="
pr-2
mb-2

2
resources/scripts/admin/views/items/Index.vue
View File

@@ -155,7 +155,7 @@
:to="{ path: `items/${row.data.id}/edit` }"
class="font-medium text-primary-500"
>
{{ row.data.name }}
<BaseText :text="row.data.name" />
</router-link>
</template>

1
resources/scripts/admin/views/modules/partials/ModuleCard.vue
View File

@@ -86,7 +86,6 @@
<base-text
:text="data.short_description"
class="pt-4 text-gray-500 h-16 line-clamp-2"
:length="110"
>
</base-text>
<div

2
resources/scripts/admin/views/payments/Index.vue
View File

@@ -165,7 +165,7 @@
</template>
<template #cell-name="{ row }">
<BaseText :text="row.data.customer.name" :length="30" tag="span" />
<BaseText :text="row.data.customer.name" tag="span" />
</template>
<template #cell-payment_mode="{ row }">

1
resources/scripts/admin/views/payments/View.vue
View File

@@ -158,7 +158,6 @@
<div class="flex-2">
<BaseText
:text="payment?.customer?.name"
:length="30"
class="
pr-2
mb-2

2
resources/scripts/admin/views/recurring-invoices/Index.vue
View File

@@ -201,7 +201,6 @@
<router-link :to="{ path: `recurring-invoices/${row.data.id}/view` }">
<BaseText
:text="row.data.customer.name"
:length="30"
tag="span"
class="font-medium text-primary-500 flex flex-col"
/>
@@ -212,7 +211,6 @@
? row.data.customer.contact_name
: ''
"
:length="30"
tag="span"
class="text-xs text-gray-400"
/>

1
resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
View File

@@ -262,7 +262,6 @@ onSearched = debounce(onSearched, 500)
<div class="flex-2">
<BaseText
:text="invoice.customer.name"
:length="30"
class="
pr-2
mb-2

3
resources/scripts/components/base/BaseCustomerSelectPopup.vue
View File

@@ -26,7 +26,6 @@
<div class="flex relative justify-between mb-2">
<BaseText
:text="selectedCustomer.name"
:length="30"
class="flex-1 text-base font-medium text-left text-gray-900"
/>
<div class="flex">
@@ -308,7 +307,6 @@
<BaseText
v-if="customer.name"
:text="customer.name"
:length="30"
class="
m-0
text-base
@@ -320,7 +318,6 @@
<BaseText
v-if="customer.contact_name"
:text="customer.contact_name"
:length="30"
class="
m-0
text-sm

22
resources/scripts/components/base/BaseText.vue
View File

@@ -1,9 +1,10 @@
<template>
<BaseCustomTag :tag="tag" :title="text">
{{ displayText }}
</BaseCustomTag>
<div class="whitespace-normal">
<BaseCustomTag :tag="tag" :title="text" class="line-clamp-1">
{{ displayText }}
</BaseCustomTag>
</div>
</template>
<script setup>
import { computed } from "vue"
@@ -20,12 +21,17 @@ const props = defineProps({
length: {
type: Number,
default: 0,
default: null,
}
})
const displayText = computed(() => {
const { text, length } = props;
const displayText = computed(() => {
if (length) {
return text.length <= length ? text : `${text.substring(0, length)}...`;
}
return text;
});
return props.text.length < props.length ? props.text : `${props.text.substring(0 , props.length)}...`
})
</script>