Merge pull request #208 from EGA-archive/frontend

Frontend

frontend/src/App.css

@@ -167,6 +167,7 @@ html {
 }
 .searchIcon:hover {
   width: 40px;
+  margin-top: -4px;
 }
 
 .forwardIcon {
@@ -260,198 +261,94 @@ html {
   font-size: 12px;
 }
 
-.errorQE {
-  color: rgb(209, 66, 66);
-  font-size: 12.5px;
-  font-weight: bold;
-  margin-top: -71px;
-  /* margin: 9px; */
-  display: flex;
-  /* display: block; */
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 50px;
-}
-
-.queryExpansion {
-  padding: 12px;
-  margin-bottom: 33px;
-  border-radius: 5px;
-  border: solid;
-  margin-top: 0px;
-}
-
-.qeSection {
-  background: #d5dce7;
-  padding: 20px;
-  margin-bottom: 44px;
-  margin-top: 10px;
-  height: 112px;
-  border-radius: 2px;
-  display: flex;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
-}
-
-.expansionContainer2 {
-  width: 100vw;
-}
-
-.expansionContainer {
-  width: 100vw;
+.btn-3 {
+  display: inline-block;
+  position: relative;
+  background: none;
+  border: none;
+  color: #34495e;
+  font-size: 14px;
+  cursor: pointer;
+  margin-top: -10px;
+  margin-bottom: 35px;
+  background: rgba(0, 0, 0, 0.09);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 }
-
-.resultsOptions {
-  display: flex;
-  flex-direction: column;
-  /* justify-content: center; */
-  align-items: center;
+.spanQE {
+  display: block;
+  padding: 14px 15px;
 }
 
-.qeSection h5 {
-  color: rgb(209, 66, 66);
-  font-weight: bold;
-  width: fit-content;
+.btn-3::before,
+.btn-3::after {
+  content: '';
+  width: 0;
+  height: 1.6px;
+  position: absolute;
+  transition: all 0.2s linear;
+  background: #e07a1a;
 }
 
-.qeSection h5:hover {
-  color: rgb(209, 66, 66);
-  font-weight: bold;
-  width: fit-content;
+.spanQE::before,
+.spanQE::after {
+  content: '';
+  width: 1.6px;
+  height: 0;
+  position: absolute;
+  transition: all 0.2s linear;
+  background: #e07a1a;
 }
 
-.qeSubmit {
-  margin-left: 10px;
-  margin-top: 44px;
+.btn-3:hover::before,
+.btn-3:hover::after {
+  width: 100%;
 }
 
-.newQEsearch {
-  border: solid;
-  padding: 6px;
-  border-radius: 2px;
-  margin-top: 95px;
-  margin-left: 66px;
+.btn-3:hover .spanQE::before,
+.btn-3:hover .spanQE::after {
+  height: 100%;
 }
 
-.newQEsearch:hover {
-  color: #1abc9c;
-  margin-left: 74px;
+.btn-3::after {
+  left: 0;
+  bottom: 0;
+  transition-delay: 0.6s;
 }
 
-.hideQE {
-  width: 25px;
-  margin-left: 10px;
+.spanQE::after {
+  transition-delay: 0.4s;
+  right: 0;
+  bottom: 0;
 }
-
-.hideQE:hover {
-  width: 27px;
+.btn-3::before {
+  right: 0;
+  top: 0;
+  transition-delay: 0.2s;
 }
-
-.qeSubmitH2 {
-  margin-top: 2px;
-  margin-top: -72px;
-  text-decoration: underline;
-  padding: 20px;
-  text-underline-position: under;
+.spanQE::before {
+  transition-delay: 0s;
+  left: 0;
+  top: 0;
 }
 
-.qeSubmit:hover {
-  margin-left: 10px;
-  color: #51a1cf;
+.btn-3:hover::after {
+  transition-delay: 0s;
 }
-
-.QEinput {
-  margin-left: -12vw;
-  width: 427px;
-  border: 2px solid 8985c1;
-  margin-top: 30px;
-  height: 25px;
-  font-size: 14.5px;
-  padding: 3px;
-  margin-right: 1px;
+.btn-3:hover .spanQE::after {
+  transition-delay: 0.2s;
 }
-
-.divCheckboxQE input {
-  margin-right: 6px;
-  height: 16px;
-  width: 16px;
-  accent-color: #1abc9c;
-  cursor: pointer;
+.btn-3:hover::before {
+  transition-delay: 0.4s;
 }
-
-.divCheckboxQE input:hover {
-  margin-right: 6px;
-  height: 16px;
-  width: 16px;
-  accent-color: #3fa18e;
+.btn-3:hover .spanQE::before {
+  transition-delay: 0.6s;
 }
 
-.labelQE {
+.resultsOptions {
   display: flex;
-  align-content: center;
-  justify-content: center;
+  flex-direction: column;
+  /* justify-content: center; */
   align-items: center;
-  font-weight: 500;
-  margin-left: 11px;
-  font-size: 15px;
-  font-family: system-ui;
-}
-
-.textQE {
-  width: 50vw;
-  line-height: 1.5;
-  font-size: 14px;
-}
-
-.textQE2 {
-  width: fit-content;
-  line-height: 1.5;
-  font-size: 14px;
-  padding-right: 30px;
-}
-
-.nextButton {
-  margin-top: 94px;
-  margin-left: 12px;
-  font-weight: 500;
-}
-
-.forwardButton {
-  margin-top: 94px;
-  margin-left: 76px;
-  font-weight: 500;
-}
-
-.qeListItem {
-  margin: 14px;
-}
-
-.nextButton:hover {
-  font-size: 14px;
-  color: #1abc9c;
-}
-
-.forwardButton:hover {
-  font-size: 14px;
-  color: #1abc9c;
-}
-
-.QEinput2 {
-  width: 527px;
-  border: 2px solid 8985c1;
-  margin-top: 30px;
-  height: 25px;
-  font-size: 14.5px;
-  padding: 3px;
-  margin-left: 10px;
-}
-
-.queryExpansion:hover {
-  border: solid;
-  padding: 12px;
-  border-radius: 4px;
-  background-color: #eaf5fc;
 }
 
 .buttonVariants {
@@ -838,6 +735,7 @@ h5 {
 .advSearch-module {
   display: flex;
   align-items: center;
+  margin-top: -3px;
 }
 
 .loader2 {

frontend/src/components/Analyses/Analyses.js

@@ -1,6 +1,11 @@
-import '../../App.css';
+import '../../App.css'
+import Layout from '../Layout/Layout'
 
-function Analyses(){
-    return (<><h2 className="comming_message">Comming soon...</h2></>)
+function Analyses () {
+  return (
+    <div>
+      <Layout collection={'Analyses'} />
+    </div>
+  )
 }
-export default Analyses
+export default Analyses

frontend/src/components/Biosamples/Biosamples.js

@@ -1,7 +1,12 @@
-import '../../App.css';
+import '../../App.css'
+import Layout from '../Layout/Layout'
 
-function Biosamples(){
-    return (<><h2 className="comming_message">Comming soon...</h2></>)
+function Biosamples () {
+  return (
+    <div>
+      <Layout collection={'Biosamples'} />
+    </div>
+  )
 }
 
-export default Biosamples
+export default Biosamples

frontend/src/components/Individuals/Individuals.js

@@ -1,7 +1,6 @@
 import './Individuals.css';
 import '../../App.css';
 
-import TableResultsIndividuals from '../Results/IndividualsResults/TableResultsIndividuals';
 import Layout from '../Layout/Layout';
 
 function Individuals(props) {