variants working right

elixir-europe · Jan 3, 2024 · e6da39d · e6da39d
1 parent c96cf95
commit e6da39d
Show file tree

Hide file tree

Showing 3 changed files with 279 additions and 439 deletions.
diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css
@@ -33,22 +33,21 @@
 }
 
 @media (min-width: 860px) {
-.datasetCardResults {
-  /* width: 20vw; */
-  height: 207px;
-  margin: 54px;
-  /* border: 2px solid #3b9ad5; */
-  padding: 3px;
-  display: flex;
-  box-shadow: 18 (0, 0, 0, -0.75) 0px 1px 0px, rgba(1, 1, 2, 12);
-  align-items: center;
-  align-content: center;
-  flex-direction: column;
-  background-color: #495782;
-  justify-content: center;
-  border-radius: 8px;
-}
-
+  .datasetCardResults {
+    /* width: 20vw; */
+    height: 207px;
+    margin: 54px;
+    /* border: 2px solid #3b9ad5; */
+    padding: 3px;
+    display: flex;
+    box-shadow: 18 (0, 0, 0, -0.75) 0px 1px 0px, rgba(1, 1, 2, 12);
+    align-items: center;
+    align-content: center;
+    flex-direction: column;
+    background-color: #495782;
+    justify-content: center;
+    border-radius: 8px;
+  }
 }
 
 .tittle h2 {
@@ -138,8 +137,8 @@
   display: flex;
   padding-top: 2px;
   padding-bottom: 2px;
-  flex-direction: column;
   padding-left: 5px;
+  flex-direction: column;
   align-items: center;
   overflow-y: scroll;
 }
@@ -185,6 +184,8 @@
   background: #c8d4e6;
   padding: 9px;
   margin: 0px;
+  display: flex;
+  align-items: center;
 }
 
 .tittle2 {
@@ -224,10 +225,7 @@
   align-content: center;
 }
 
-
-
 @media (max-width: 860px) {
-
   .datasetCardResults {
     /* width: 20vw; */
     height: 247px;
@@ -245,7 +243,6 @@
     border-radius: 8px;
   }
 
-
   .resultsRecord {
     display: flex;
     flex-direction: row;
@@ -260,11 +257,11 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    width: fit-content;
+    width: 100%;
     background: #c8d4e6;
     height: 60px;
     margin-top: 2px;
-}
+  }
   .datasetCard p {
     font-size: 11px;
     font-weight: normal;
@@ -273,7 +270,6 @@
     margin-top: -5px;
   }
 
-
   .datasetCard {
     width: 75vw;
     margin: 30px;
@@ -341,33 +337,31 @@
 }
 
 @media (max-width: 600px) {
-
-.datasetCardResults {
-  width: 49vw;
-  height: 247px;
-  margin: 24px !important;
-  width: 75vw;
-  /* border: 2px solid #3b9ad5; */
-  padding: 3px;
-  display: flex;
-  box-shadow: 18 (0, 0, 0, -0.75) 0px 1px 0px, rgba(1, 1, 2, 12);
-  align-items: center;
-  align-content: center;
-  flex-direction: column;
-  background-color: #495782;
-  justify-content: center;
-  border-radius: 8px;
-}
-.tittle4 {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  width: -moz-fit-content;
-  width: 100%;
-  background: #c8d4e6;
-  height: 60px;
-  margin-top: 2px;
-}
-
+  .datasetCardResults {
+    width: 49vw;
+    height: 247px;
+    margin: 24px !important;
+    width: 75vw;
+    /* border: 2px solid #3b9ad5; */
+    padding: 3px;
+    display: flex;
+    box-shadow: 18 (0, 0, 0, -0.75) 0px 1px 0px, rgba(1, 1, 2, 12);
+    align-items: center;
+    align-content: center;
+    flex-direction: column;
+    background-color: #495782;
+    justify-content: center;
+    border-radius: 8px;
+  }
+  .tittle4 {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: -moz-fit-content;
+    width: 100%;
+    background: #c8d4e6;
+    height: 60px;
+    margin-top: 2px;
+  }
 }
diff --git a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css
@@ -57,7 +57,9 @@ h6:hover {
 }
 
 .tittleResults h5 {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   text-transform: uppercase;
   font-size: 11px;
   font-weight: normal;
@@ -74,8 +76,6 @@ h6:hover {
   padding: 3px;
 }
 
-
-
 h7 {
   text-transform: uppercase;
   /* margin-left: 40px; */
@@ -177,6 +177,19 @@ h1 {
   overflow: scroll;
 }
 
+.containerBeaconResultsVariants {
+  overflow-y: scroll;
+  height: 100vh;
+}
+
+
+.containerResultsVariants {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
 @media (max-width: 860px) {
   .containerBeaconResults {
     display: flex;
@@ -193,13 +206,24 @@ h1 {
     overflow: scroll;
   }
 
+  .containerResultsVariants {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .containerBeaconResultsVariants {
+    overflow-y: scroll;
+    height: 100vh;
+    width: 70vw;
+  }
   .tittleResults {
-    width: 45vw;
+    width: 46vw;
     background: white;
     border-radius: 2px;
     height: 212px;
     display: flex;
-    padding: 2px;
     flex-direction: column;
     align-items: center;
   }
@@ -222,7 +246,9 @@ h1 {
   }
 
   .tittleResults h5 {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
     text-transform: uppercase;
     font-size: 11px;
     font-weight: normal;
@@ -260,5 +286,5 @@ h1 {
     padding: 2px;
     flex-direction: column;
     align-items: center;
+  }
 }
-}