From 2de5228cc7bd3c88feeedd674b456ac2c5c2e154 Mon Sep 17 00:00:00 2001 From: Steffengreiner Date: Thu, 5 Sep 2024 15:21:06 +0200 Subject: [PATCH 1/2] Avoid card resizing and take up space dependent on number of cards for experimental variables and groups --- .../frontend/themes/datamanager/components/card.css | 10 +++++----- .../themes/datamanager/components/page-area.css | 10 ++-------- .../experiment/ExperimentDetailsComponent.java | 1 + 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/user-interface/frontend/themes/datamanager/components/card.css b/user-interface/frontend/themes/datamanager/components/card.css index adf65ffa65..6728200efb 100644 --- a/user-interface/frontend/themes/datamanager/components/card.css +++ b/user-interface/frontend/themes/datamanager/components/card.css @@ -50,13 +50,11 @@ .card-collection { display: flex; - align-content: space-evenly; - flex-flow: column; + flex-direction: column; gap: 1rem; padding-left: 1.5rem; padding-top: 1.5rem; } - .card-collection .collection-title { font-weight: bold; color: var(--lumo-secondary-text-color); @@ -67,13 +65,15 @@ .card-collection .collection-header { justify-content: space-between; display: flex; + align-items: center; } .card-collection .collection-content { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fit, minmax(250px, min-content)); + grid-template-rows: repeat(auto-fit, auto); grid-auto-rows: auto; - grid-gap: 1rem; + grid-gap: 1em; } .card-collection .collection-controls { diff --git a/user-interface/frontend/themes/datamanager/components/page-area.css b/user-interface/frontend/themes/datamanager/components/page-area.css index 06366fa503..d65319483c 100644 --- a/user-interface/frontend/themes/datamanager/components/page-area.css +++ b/user-interface/frontend/themes/datamanager/components/page-area.css @@ -95,20 +95,14 @@ font-size: var(--lumo-font-size-s); } -.experiment-details-component vaadin-tabsheet { - height: 100%; +.experiment-details-component .details-content .experimental-sheet { width: 100%; + height: 100%; } -/*Necessary so the disclaimers are aligned to the center of the tab*/ .experiment-details-component .details-content .experimental-groups-container { - height: 100%; width: 100%; -} - -.experiment-details-component .details-content .experimental-variables-container { height: 100%; - width: 100%; } .experiment-details-component .sample-registration-possible { diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/projects/project/experiments/experiment/ExperimentDetailsComponent.java b/user-interface/src/main/java/life/qbic/datamanager/views/projects/project/experiments/experiment/ExperimentDetailsComponent.java index 34b8909e4a..70dfe40a08 100644 --- a/user-interface/src/main/java/life/qbic/datamanager/views/projects/project/experiments/experiment/ExperimentDetailsComponent.java +++ b/user-interface/src/main/java/life/qbic/datamanager/views/projects/project/experiments/experiment/ExperimentDetailsComponent.java @@ -456,6 +456,7 @@ private void loadSampleSources(Experiment experiment) { } private void layoutTabSheet() { + experimentSheet.addClassName("experimental-sheet"); experimentSheet.add("Experimental Variables", experimentalVariables); experimentalVariables.addClassName("experimental-groups-container"); experimentSheet.add("Experimental Groups", experimentalGroups); From 136767ea3fcb3457af3b89bc84c6c0aab4501586 Mon Sep 17 00:00:00 2001 From: Steffengreiner Date: Thu, 5 Sep 2024 15:22:48 +0200 Subject: [PATCH 2/2] Adjust css definitions of data manager layout and landing page layout --- .../frontend/themes/datamanager/components/main.css | 10 +++++----- .../frontend/themes/datamanager/components/navbar.css | 6 +++--- .../life/qbic/datamanager/views/DataManagerLayout.java | 4 ++-- .../datamanager/views/landing/LandingPageLayout.java | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/user-interface/frontend/themes/datamanager/components/main.css b/user-interface/frontend/themes/datamanager/components/main.css index fd796bd996..5f6d9bb3c6 100644 --- a/user-interface/frontend/themes/datamanager/components/main.css +++ b/user-interface/frontend/themes/datamanager/components/main.css @@ -14,7 +14,7 @@ "data-manager-footer"; } -#landing-page-layout .landing-page-content { +.landing-page-layout .landing-page-content { /*Static resources have to be loaded in css form the Meta-INF directory see vaadin cheatsheet https://vaadin.com/vaadin-reference-card#static-content */ /*background-image: url("../images/");*/ @@ -25,7 +25,7 @@ min-height: 100%; } -#landing-page-layout .landing-page-title-and-logo { +.landing-page-layout .landing-page-title-and-logo { display: flex; align-items: center; justify-content: center; @@ -35,17 +35,17 @@ padding-top: var(--lumo-space-xl); } -#landing-page-layout .landing-page-title-and-logo .title { +.landing-page-layout .landing-page-title-and-logo .title { font-weight: bold; font-size: var(--lumo-font-size-xxl); } -#landing-page-layout .landing-page-title-and-logo .subtitle { +.landing-page-layout .landing-page-title-and-logo .subtitle { color: var(--lumo-tertiary-text-color); font-weight: bold; } -#landing-page-layout .landing-page-title-and-logo .ut-logo { +.landing-page-layout .landing-page-title-and-logo .ut-logo { height: 2.5em; margin-bottom: var(--lumo-space-xl); } diff --git a/user-interface/frontend/themes/datamanager/components/navbar.css b/user-interface/frontend/themes/datamanager/components/navbar.css index af1190dc47..f6acc4b9e6 100644 --- a/user-interface/frontend/themes/datamanager/components/navbar.css +++ b/user-interface/frontend/themes/datamanager/components/navbar.css @@ -1,10 +1,10 @@ -.data-manager-layout::part(navbar) { +#data-manager-layout::part(navbar) { display: inline-flex; justify-content: space-between; background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)); } -.data-manager-layout .data-manager-title { +#data-manager-layout .data-manager-title { font-size: var(--lumo-font-size-l); color: var(--lumo-header-text-color); font-weight: 600; @@ -87,7 +87,7 @@ width: 100%; } -#landing-page-layout::part(navbar) { +.landing-page-layout::part(navbar) { padding-inline: var(--lumo-space-m); } diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/DataManagerLayout.java b/user-interface/src/main/java/life/qbic/datamanager/views/DataManagerLayout.java index 3ab007267c..27cabc69a0 100644 --- a/user-interface/src/main/java/life/qbic/datamanager/views/DataManagerLayout.java +++ b/user-interface/src/main/java/life/qbic/datamanager/views/DataManagerLayout.java @@ -12,7 +12,7 @@ /** * Data Manager Layout * - *

Defines the basic look of the application for all sites that do not require the user to login + *

Defines the basic look of the application for all sites within the datamanager. * */ @PageTitle("Data Manager") @@ -22,7 +22,7 @@ public class DataManagerLayout extends AppLayout implements RouterLayout { protected DataManagerLayout(FooterComponentFactory footerComponentFactory) { Objects.requireNonNull(footerComponentFactory); - addClassName("data-manager-layout"); + setId("data-manager-layout"); // Create content area contentArea = new Div(); contentArea.setId("content-area"); diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java b/user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java index c5dffef3f5..235c9d4f0c 100644 --- a/user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java +++ b/user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java @@ -35,7 +35,7 @@ public LandingPageLayout(@Autowired LandingPageHandlerInterface handlerInterface FooterComponentFactory footerComponentFactory) { super(Objects.requireNonNull(footerComponentFactory)); Objects.requireNonNull(handlerInterface); - setId("landing-page-layout"); + addClassName("landing-page-layout"); //CSS class hosting the background image for all our landing pages landingPageContent.addClassName("landing-page-content"); createNavBarContent();