trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 15 Releases 5 Wiki Activity
Labels Milestones
New Pull Request

Switch to CSS-based text-truncate #156

Merged
jose merged 1 commits from notification-line-wrapping into master 4 days ago
Conversation 1 Commits 1 Files Changed 1
1 changed files with 15 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      src/App.vue

37
src/App.vue
View File

@ -27,9 +27,9 @@
v-if="notification.type === 'toast'" v-if="notification.type === 'toast'"
class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md" class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md"
> >
<div class="w-full px-4 py-3"> <div class="w-full px-4 py-3 overflow-hidden">
<span class="font-semibold">{{ notification.title }}</span> <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
<p class="text-sm">{{ notification.text }}</p> <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
</div> </div>
</div> </div>
@ -46,9 +46,9 @@
></font-awesome> ></font-awesome>
</div> </div>
<div class="relative w-full pl-4 pr-8 py-2 text-slate-900"> <div class="relative w-full pl-4 pr-8 py-2 text-slate-900 overflow-hidden">
<span class="font-semibold">{{ notification.title }}</span> <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p> <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
<button <button
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600" class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
@ -72,9 +72,9 @@
></font-awesome> ></font-awesome>
</div> </div>
<div class="relative w-full pl-4 pr-8 py-2 text-emerald-900"> <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900 overflow-hidden">
<span class="font-semibold">{{ notification.title }}</span> <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p> <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
<button <button
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600" class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
@ -98,9 +98,9 @@
></font-awesome> ></font-awesome>
</div> </div>
<div class="relative w-full pl-4 pr-8 py-2 text-amber-900"> <div class="relative w-full pl-4 pr-8 py-2 text-amber-900 overflow-hidden">
<span class="font-semibold">{{ notification.title }}</span> <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p> <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
<button <button
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600" class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
@ -124,9 +124,9 @@
></font-awesome> ></font-awesome>
</div> </div>
<div class="relative w-full pl-4 pr-8 py-2 text-rose-900"> <div class="relative w-full pl-4 pr-8 py-2 text-rose-900 overflow-hidden">
<span class="font-semibold">{{ notification.title }}</span> <h4 class="font-semibold text-ellipsis overflow-hidden">{{ notification.title }}</h4>
<p class="text-sm">{{ truncateLongWords(notification.text) }}</p> <p class="text-sm text-ellipsis overflow-hidden">{{ notification.text }}</p>
<button <button
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600" class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
@ -349,13 +349,6 @@ export default class App extends Vue {
stopAsking = false; stopAsking = false;
truncateLongWords(sentence: string) {
return sentence
.split(" ")
.map((word) => (word.length > 30 ? word.slice(0, 30) + "..." : word))
.join(" ");
}
async turnOffNotifications( async turnOffNotifications(
notification: NotificationIface, notification: NotificationIface,
): Promise<boolean> { ): Promise<boolean> {

Write Preview
Loading…
Cancel
Save