Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve plugin card hyperlinks #1918

Merged
merged 3 commits into from
Dec 10, 2023
Merged

Improve plugin card hyperlinks #1918

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4db8746
Update plugin-card.component.html
jsiegenthaler Dec 8, 2023
6d53a86
Update plugin-card.component.html
jsiegenthaler Dec 9, 2023
fd34f03
colours
bwp91 Dec 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 10 additions & 6 deletions ui/src/app/modules/plugins/plugin-card/plugin-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,40 @@
<img [src]="plugin.icon" (error)="handleIconError()" alt="" class="plugin-icon-card mb-3">
</div>
<div class="d-flex flex-column justify-content-between" style="width: calc(100% - 80px)">
<a href="javascript:void(0)" (click)="pluginInfoModal(plugin)" >
<h5 class="card-title mb-2 text-truncate">
{{ plugin.displayName || ((plugin.name.charAt(0) === '@' ? plugin.name.split('/')[1] : plugin.name) |
replace:'-':' ' | titlecase) }}
</h5>
</a>
<div class="d-flex flex-row align-items-end">
<div class="d-flex flex-column w-100">
<p class="card-text mb-2 text-truncate">
<a href="javascript:void(0)" (click)="pluginInfoModal(plugin)" class="card-link grey-text">
<i class="fas fa-fw fa-info-circle fa-lg"></i>
{{ plugin.name }}
</a>
{{ plugin.name }}
</p>
<p class="card-text mb-2" *ngIf="plugin.verifiedPlugin">
<a href="javascript:void(0)" class="card-link green-text" (click)="openVerifiedModal()">
<i class="fas fa-fw fa-shield-alt fa-lg"></i>
</a> {{ 'plugins.donate.button_verified' | translate }}
{{ 'plugins.donate.button_verified' | translate }}
</a>
</p>
<p class="card-text mb-2" *ngIf="!plugin.verifiedPlugin">
<a href="javascript:void(0)" class="card-link" (click)="openVerifiedModal()">
<i class="fas fa-fw fa-shield-alt fa-lg" style="opacity: 0.25;"></i>
</a> {{ 'plugins.donate.button_not_verified' | translate }}
{{ 'plugins.donate.button_not_verified' | translate }}
</a>
</p>
<p class="card-text mb-2">
<a href="javascript:void(0)" class="card-link pink-text" *ngIf="plugin.verifiedPlugin && plugin.funding"
(click)="openFundingModal(plugin)">
<i class="fas fa-fw fa-heart fa-lg"></i>
<span *ngIf="!plugin.verifiedPlugin || !plugin.funding">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't work here.
The condition on the <a is that *ngIf="plugin.verifiedPlugin && plugin.funding" so having the <span *ngIf="!plugin.verifiedPlugin || !plugin.funding"> inside will not work

In this case the span needs to be kept outside the

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I've fixed it and will update shortly

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed with the commit from today, Dec 9, 2023.

<i class="fas fa-fw fa-heart fa-lg" style="opacity: 0.5;"></i>
</span> @{{ plugin.author }}
</a>
<span *ngIf="!plugin.verifiedPlugin || !plugin.funding">
<i class="fas fa-fw fa-heart fa-lg" style="opacity: 0.5;"></i>
</span> @{{ plugin.author }}
</p>
<div class="d-flex flex-row">
<p class="card-text mb-0">
Expand Down