Skip to content

Fixes styling for civi sepa dashboard #820

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

Open
knottheory wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Fixes styling for civi sepa dashboard #820

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8c12559
Added stylsheet for dashboard backgrounds. Updated the action buttons…
knottheory Aug 3, 2026
136bea9
Added link to new stylesheet #216
knottheory Aug 3, 2026
3a8c018
Added class to the legend table, so that the background colour would …
knottheory Aug 3, 2026
65ea84c
Swapped href attribute in buttons for p and q
knottheory Aug 14, 2026
846e140
Added crm extension key to the tamplate and removed every occurance o…
knottheory Aug 31, 2026
bc2385f
Added type hinting and doc section to the core resource list function
knottheory Aug 31, 2026
c22eb21
Updated the selector using BEM conventions and making its name more d…
knottheory Aug 31, 2026
70994fb
Merge branch 'master' into master
knottheory Aug 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions css/sepa.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.sepa_dashboard str.submit_missed td {

@jensschuppe jensschuppe Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Typo, should be tr.submit_missed.

background-color: var(--crm-danger-light-color, #EE0000AA);
}

.sepa_dashboard tr.submit_urgently td {
background-color: var(--crm-warning-light-color, #AC6700AA);
}

.sepa_dashboard tr.submit_soon td {
background-color: var(--crm-info-light-color, #0165FFAA);
}

.sepa_dashboard tr.submit_later td {
background-color: var(--crm-success-light-color, #008300AA);
}

.sepa_dashboard tr.submit_closed td {
background-color: var(--crm-layer2-bg-color, #00830033);
}

.sepa_dashboard .sepa_actions {

@jensschuppe jensschuppe Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Let's use BEM conventions for selectors, making this .sepa-dashboard__sepa-actions.

@knottheory knottheory Aug 31, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I have updated the class name following BEM conventions and renamed it to sepa_dashboard__button_group to make more descriptive.

display: flex;

@jensschuppe jensschuppe Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Why does the table cell have to be display: flex;? - this actually causes the buttons to grow in height and shouldn't be necessary.

The buttons are inline-block so text-align: right; should be enough.

@knottheory knottheory Aug 14, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

This adresses the table cell containing the buttons. Setting the display property to flex aligns the buttons horizontally instead of vertical. The overall screen space the buttons take up is reduced.
Nonetheless the selector could be more descriptive.

justify-content: end;
}
7 changes: 7 additions & 0 deletions sepa.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,3 +599,10 @@ function sepa_civicrm_xmlMenu(array &$files): void {
$files[] = $file;
}
}

function sepa_civicrm_coreResourceList(&$list, $region) {

@jensschuppe jensschuppe Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Let's add type hints and the conventional docblock to make PHPStan happy.

@knottheory knottheory Aug 31, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

The type hints have been added.

if ($region === 'html-header') {
Civi::resources()->addStyleFile('org.project60.sepa', 'css/sepa.css');
}
}

51 changes: 21 additions & 30 deletions templates/CRM/Sepa/Page/DashBoard.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,17 +70,19 @@
</div>
{/if}

<table>
<tr>
<th>{ts domain="org.project60.sepa"}Group Name{/ts}</th>
<th>{ts domain="org.project60.sepa"}Status{/ts}</th>
<th>{ts domain="org.project60.sepa"}Type{/ts}</th>
<th>{ts domain="org.project60.sepa"}Submission{/ts}</th>
<th>{ts domain="org.project60.sepa"}Collection{/ts}</th>
<th>{ts domain="org.project60.sepa"}Transactions{/ts}</th>
<th>{ts domain="org.project60.sepa"}Total{/ts}</th>
<th></th>
</tr>
<table class="sepa_dashboard" id="options">
<thead>
<tr role="row">
<th class="sorting" aria-controls="sepa-option">{ts domain="org.project60.sepa"}Group Name{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts domain="org.project60.sepa"}Status{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts domain="org.project60.sepa"}Type{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts domain="org.project60.sepa"}Submission{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts domain="org.project60.sepa"}Collection{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts domain="org.project60.sepa"}Transactions{/ts}</th>
<th class="sorting" aria-controls="sepa-option">{ts domain="org.project60.sepa"}Total{/ts}</th>

@jensschuppe jensschuppe Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Let's take the chance getting rid of the domain attribute for translations by wrapping the entire template in {crmScope extensionKey='org.project60.sepa'}…{/crmScope} tags (applies to all occurences of {ts} in this template).

@knottheory knottheory Aug 31, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I have added the crmScpoe tag and removed domain attributes from translation tags.

<th></th>
</tr>
</thead>
{foreach from=$groups item=group}
{assign var='file_id' value=$group.file_id}
{assign var='group_id' value=$group.id}
Expand All @@ -105,27 +107,26 @@
{$group.nb_contrib}
</td>
<td style="white-space:nowrap;">{$group.total|crmMoney:$group.currency}</td>
<td>
<a href="{crmURL p="civicrm/sepa/listgroup" q="group_id=$group_id"}" class="button button_view">{ts domain="org.project60.sepa"}Contributions{/ts}</a>
<td class="sepa_actions">
{crmButton href="{crmURL p="civicrm/sepa/listgroup" q="group_id=$group_id"}" class="button_view" title="test" icon="fa-info"}{ts domain="org.project60.sepa"}Contributions{/ts}{/crmButton}

@jensschuppe jensschuppe Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

{crmButton} doesn't need the {crmURL} tag, it has its own p attribute for a CiviCRM path.

@knottheory knottheory Aug 14, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thanks for pointing it out I have updated the buttons accordingly.

@jensschuppe jensschuppe Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The title attribute seems off.

@knottheory knottheory Aug 31, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I fixed the title attribute.

{if $group.status == 'open'}
{if $can_batch}
{if $group.submit == 'missed'}
<a href="{crmURL p="civicrm/sepa/closegroup" q="group_id=$group_id&status=missed"}" class="button button_close">
{crmButton href="{crmURL p="civicrm/sepa/closegroup" q="group_id=$group_id&status=missed"}" class="button_close" title="{ts domain="org.project60.sepa"}Close and Submit{/ts}" icon="fa-paper-plane"}{ts domain="org.project60.sepa"}Close and Submit{/ts}{/crmButton}

@jensschuppe jensschuppe Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Translations within HTML attributes need the escape="htmlattributes" parameter.

{else}
<a href="{crmURL p="civicrm/sepa/closegroup" q="group_id=$group_id"}" class="button button_close">
{crmButton href="{crmURL p="civicrm/sepa/closegroup" q="group_id=$group_id"}" class="button_close" title="{ts domain="org.project60.sepa"}Close and Submit{/ts}" icon="fa-paper-plane"}{ts domain="org.project60.sepa"}Close and Submit{/ts}{/crmButton}
{/if}
{ts domain="org.project60.sepa"}Close and Submit{/ts}</a>
{/if}
{else}
<a href="{crmURL p="civicrm/sepa/xml" q="id=$file_id"}" download="{$group.file}" class="button button_export">{ts domain="org.project60.sepa"}Download Again{/ts}</a>
{crmButton href="{crmURL p="civicrm/sepa/xml" q="id=$file_id"}" class="button_export" title="{ts domain="org.project60.sepa"}Download Again{/ts}" icon=""}{ts domain="org.project60.sepa"}Download Again{/ts}{/crmButton}
{if $closed_status_id eq $group.status_id}
{if not $group.collection_date_in_future}
<a href="{crmURL p="civicrm/sepa/mark_received" q="group_id=$group_id"}" class="button button_received">{ts domain="org.project60.sepa"}Mark Received{/ts}</a>
{crmButton href="{crmURL p="civicrm/sepa/mark_received" q="group_id=$group_id"}" class="button_received" title="{ts domain="org.project60.sepa"}Mark Received{/ts}" icon=""}{ts domain="org.project60.sepa"}Mark Received{/ts}{/crmButton}
{/if}
{/if}
{/if}
{if $can_delete}
<a href="{crmURL p="civicrm/sepa/deletegroup" q="group_id=$group_id"}" class="button button_view">{ts domain="org.project60.sepa"}Delete{/ts}</a>
{crmButton href="{crmURL p="civicrm/sepa/deletegroup" q="group_id=$group_id"}" class="button_view" title="{ts domain="org.project60.sepa"}Delete{/ts}" icon="fa-trash-can"}{ts domain="org.project60.sepa"}Delete{/ts}{/crmButton}
{/if}
</td>
</tr>
Expand All @@ -134,7 +135,7 @@

{* legend by @scardinius *}
<br/>
<table>
<table class="sepa_dashboard">
<caption>{ts domain="org.project60.sepa"}Legend{/ts}</caption>
<tr>
<th>{ts domain="org.project60.sepa"}Status{/ts}</th>
Expand Down Expand Up @@ -162,16 +163,6 @@
</tr>
</table>

{literal}
<style>
tr.submit_missed {background-color: #EE0000AA;}
tr.submit_urgently {background-color: #AC6700AA;}
tr.submit_soon {background-color: #0165FFAA;}
tr.submit_later {background-color: #008300AA;}
tr.submit_closed {background-color: #00830033;}
</style>
{/literal}

<script type="text/javascript">
let received_confirmation_message = `{ts domain="org.project60.sepa"}Do you really want to mark this groups as 'payment received'?{/ts}`;

Expand Down
Loading