Skip to content

feat(FEAT-DATSET-09): show connected-dataset summary in project listing #1490

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

Merged
sven1103 merged 9 commits into from
Jul 30, 2026
Merged

feat(FEAT-DATSET-09): show connected-dataset summary in project listing #1490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
189fad4
feat(haproxy): add custom 503 maintenance landing page (#1464)
sven1103-agent Jun 26, 2026
20120c6
feat(FEAT-DATSET-09): show connected-dataset summary in project listing
sven1103 Jul 28, 2026
af0a919
Merge branch 'development' into feature/display-datasets-after-login
sven1103 Jul 28, 2026
f021409
Merge branch 'development' into feature/display-datasets-after-login
sven1103 Jul 28, 2026
8d04191
Address change requests
sven1103 Jul 29, 2026
00a350b
Merge remote-tracking branch 'origin' into feature/display-datasets-a…
sven1103 Jul 29, 2026
f852ce3
Merge remote-tracking branch 'origin/development' into feature/displa…
sven1103 Jul 29, 2026
f0ab6c0
Fix formatter usage
sven1103 Jul 29, 2026
8d1299d
Merge branch 'development' into feature/display-datasets-after-login
sven1103 Jul 30, 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
9 changes: 9 additions & 0 deletions application-commons/src/main/java/life/qbic/application/commons/time/DateTimeFormat.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,13 @@ public enum DateTimeFormat {
* Format: {@code <weekday_name>, <day> <month_name> <year>}}
*/
SIMPLE_DATE,

/**
* A more compact date representation. E.g. {@code 11 Feb 2026}
* Format: {@code <day> <month_name> <year>}
*/
SIMPLE_DATE_SHORT,

/**
* A simple to read, textual date-time representation. E.g.
* {@code Wednesday, 11 February 2026 11:12:10}
Expand Down Expand Up @@ -78,6 +85,7 @@ public static DateTimeFormatter asJavaFormatter(@NonNull DateTimeFormat format,
case ISO_LOCAL_DATE_TIME_WHITESPACE_SEPARATED -> DateTimeFormatter.ofPattern(
"yyyy-MM-dd HH:mm").withZone(zoneId);
case SIMPLE_DATE -> DateTimeFormatter.ofPattern("EEEE, dd LLLL yyyy").withZone(zoneId);
case SIMPLE_DATE_SHORT -> DateTimeFormatter.ofPattern("d MMM yyyy").withZone(zoneId);
case SIMPLE_DATE_TIME -> DateTimeFormatter.ofPattern("EEEE, dd LLLL yyyy HH:mm:ss").withZone(
zoneId);
};
Expand All @@ -95,6 +103,7 @@ public static DateTimeFormatter asJavaFormatter(@NonNull DateTimeFormat format,
public static String asMariaDbDatabasePattern(@NonNull DateTimeFormat format) {
return switch (format) {
case SIMPLE_DATE -> "%W, %d %M %Y";
case SIMPLE_DATE_SHORT -> "%d %M %Y";
case SIMPLE_DATE_TIME -> "%W, %d %M %Y %T";
case ISO_LOCAL_DATE -> "%Y-%m-%d";
case ISO_LOCAL_DATE_TIME -> "%Y-%m-%dT%T";
Expand Down
4 changes: 4 additions & 0 deletions datamanager-app/frontend/themes/datamanager/components/all.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1454,6 +1454,10 @@ Older stuff -
flex-grow: 1;
}

.flex-shrink-0 {
flex-shrink: 0;
}
Comment thread
sven1103 marked this conversation as resolved.

.wrapping-flex-container {
flex-wrap: wrap;
}
Expand Down
87 changes: 80 additions & 7 deletions datamanager-app/frontend/themes/datamanager/components/page-area.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,22 +424,34 @@
padding: var(--lumo-space-xs);
}

.project-collection-component .project-overview-item {
border: black;
border-radius: var(--lumo-border-radius-m);
box-shadow: var(--lumo-box-shadow-s);
.project-collection-component .project-overview-item,
.project-collection-component .project-overview-item:hover {
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-bottom: var(--lumo-space-s);
margin-top: var(--lumo-space-s);
overflow: hidden;
padding: var(--lumo-space-l);
row-gap: var(--lumo-space-s);
text-overflow: ellipsis;
white-space: normal;
cursor: pointer;
text-decoration: none

@KochTobi KochTobi Jul 29, 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.

Are you sure you need the text-decoration here? As far as I understood this was only regarding the footer which you already solved. By declaring it here, you disable the text-decoration for every project-overview-item (does the element with this class even have a different text-decoration?)

}

/* The wrapper now owns the card's visual styling (shadow, rounded corners,
* spacing between cards). The card body RouterLink inside it provides only
* padding and the content flow; the footer RouterLink (when present) shares
* the same rounded shape with a subtle top-border divider.
*/
.project-card-wrapper {
border: black;
border-radius: var(--lumo-border-radius-m);
box-shadow: var(--lumo-box-shadow-s);
overflow: hidden;
margin-bottom: var(--lumo-space-s);
margin-top: var(--lumo-space-s);
display: flex;
flex-direction: column;
}

.project-collection-component .project-overview-item .header {
Expand Down Expand Up @@ -634,3 +646,64 @@
.datasets-content {
grid-area: datasets-content;
}

/*
* project-dataset footer — full-width RouterLink rendered at the bottom of
* each project card in the collection view. The entire footer is the click
* target (44px+ click target for accessibility); it visually merges with
* the card body above it, forming a single unified card with a subtle
* top-border divider and slightly tinted background.
*
* Visual merge details (paired with .project-card-wrapper above):
* - Card body lives inside .project-card-wrapper (no shadow / no rounded
* corners of its own) with padding matching the footer.
* - Footer has only the top-border as a visual divider; background matches
* the card body (white).
* - .project-card-wrapper carries the rounded corner shape (overflow: hidden
* clips both children into the same card outline) and the inter-card margin.
*
* Styling is component-specific; not extracted to all.css utilities.
*/

.project-dataset-footer,
.project-dataset-footer *,
a.project-dataset-footer, a.project-dataset-footer:hover {
text-decoration: none;
box-sizing: border-box;
}

.project-dataset-footer {
display: block;
color: var(--lumo-body-text-color);
border-top: 1px solid var(--lumo-contrast-10pct);
background-color: var(--lumo-base-color);
padding-top: var(--spacing-04);
padding-bottom: var(--spacing-04);
padding-left: var(--spacing-05);
padding-right: var(--spacing-05);
margin: 0;
transition:
background-color 150ms ease,
border-top-color 150ms ease;
}

.project-dataset-footer:hover,
.project-dataset-footer:focus-within {
background-color: var(--background-color-5pct);
border-top-color: var(--lumo-contrast-20pct);
}

.project-dataset-footer vaadin-icon {
color: var(--icon-color);
transition: color 150ms ease;
}

.project-dataset-footer:hover vaadin-icon,
.project-dataset-footer:focus-within vaadin-icon {
color: var(--primary-text-color);
}

.project-dataset-footer:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: -2px;
}
Binary file modified datamanager-app/src/main/bundles/dev.bundle
View file
Open in desktop
Binary file not shown.
Loading
Loading