Experimental Variable and Group Cards sizing stays consistent indepen…

…dent of screen size (#827)

* Avoid card resizing and take up space dependent on number of cards for experimental variables and groups

* Adjust css definitions of data manager layout and landing page layout

---------

Co-authored-by: Sven F. <[email protected]>

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 {

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);
 }

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);
 }
 

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 {

user-interface/src/main/java/life/qbic/datamanager/views/DataManagerLayout.java

@@ -12,7 +12,7 @@
 /**
  * <b>Data Manager Layout</b>
  *
- * <p>Defines the basic look of the application for all sites that do not require the user to login
+ * <p>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");

user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java

@@ -34,7 +34,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();

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);