Merge pull request #40 from ebiwd/Sprint-9-Demo

Sprint 9 demo

.env.development

@@ -1,4 +1,4 @@
-REACT_APP_API_URL=http://cms.competency.ebi.ac.uk
+REACT_APP_API_URL=https://www.ebi.ac.uk
 #REACT_APP_API_URL=http://cms.competency.ebi.ac.uk.docker.localhost:52927/
 #REACT_APP_API_URL=https://dev-cms.competency.ebi.ac.uk/
 REACT_APP_HTTPS_CMS_API_URL=https://cms.competency.ebi.ac.uk

.env.production

@@ -1 +1 @@
-REACT_APP_API_URL=https://cms.competency.ebi.ac.uk
+REACT_APP_API_URL=https://www.ebi.ac.uk

src/app/components/Footer.jsx

@@ -84,16 +84,17 @@ const Footer = () => {
               Terms of use
             </a>
           </span>
+          <span className="vf-footer__legal-text">
+            <a
+              className="vf-footer__link"
+              href="https://www.ebi.ac.uk/data-protection/privacy-notice/competency-hub"
+            >
+              Privacy notice
+            </a>
+          </span>
         </p>
       </div>
-      <div>
-        <a
-          className="vf-footer__link"
-          href="https://www.ebi.ac.uk/data-protection/privacy-notice/competency-hub"
-        >
-          Privacy notice
-        </a>
-      </div>
+
       <div className="vf-u-margin__top--200" />
       <p className="vf-footer__notice">
         Contact us at competency [at] ebi.ac.uk if you have any questions,

src/app/containers/ProfileViewGuest.jsx

@@ -375,9 +375,13 @@ export const ProfileViewGuest = props => {
 
       <form onSubmit={e => handlePrint(e)}>
         <div className="submit_fixed">
-          <button className="button" type="submit">
+          <button className="vf-button vf-button--secondary" type="submit">
             Print <i className="icon icon-common icon-print" />
           </button>
+          <p style={{ paddingTop: '30px' }}>
+            [Please enable background graphics in the print preview in order to
+            get better print output]
+          </p>
         </div>
       </form>
     </div>

src/app/containers/ProfilesCompareButterfly.jsx

@@ -382,14 +382,18 @@ export const ProfilesCompareButterfly = props => {
             ''
           )}
         </div>
-        <div style={{ textAling: 'center' }}>
+        <div style={{ textAling: 'center' }} className="submit_fixed">
           <button
             href="#"
             className="vf-button vf-button--secondary"
             onClick={e => handlePrint(e)}
           >
             Print <i className="icon icon-common icon-print" />
           </button>
+          <p style={{ paddingTop: '30px' }}>
+            [Please enable background graphics in the print preview in order to
+            get better print output]
+          </p>
         </div>
         <div />
       </div>

src/index.css

@@ -338,21 +338,27 @@ table tbody tr:nth-child(even) {
   footer {
     display: none;
   }
+
   .vf-button {
     display: none;
   }
-  .profile_navigation {
-    /*display: none*/
-  }
+
   .submit_fixed {
     display: none;
   }
+
   nav {
     display: none;
   }
-  a {
-    display: none;
+
+  .vf-content h2:not([class*='vf-']) {
+    font-size: 20px;
   }
+
+  .vf-content h3:not([class*='vf-']) {
+    font-size: 18px;
+  }
+
   .masthead-inner {
     display: none;
   }
@@ -361,6 +367,10 @@ table tbody tr:nth-child(even) {
     margin-top: 0px;
   }
 
+  .profile_navigation {
+    display: none;
+  }
+
   /* #main-content-area:before {
     content: 'Competency Mapper';
     font-size: 40px;
@@ -392,24 +402,41 @@ table tbody tr:nth-child(even) {
     background-color: rgb(233, 180, 0) !important;
   }
 
-  .vf-grid__col--span-3 {
+  /* .vf-grid__col--span-3 {
+    float: left;
+  }
+
+  .vf-grid__col-5 {
     float: left;
+  } */
+
+  .vf-grid__col--span-1 {
+    float: right;
   }
 
   .competency_title {
     font-size: 14px;
   }
+
   .vf-text-heading--5 {
     font-weight: normal;
   }
 
   .vf-grid__col-4 {
     grid-template-columns: repeat(4, 1fr);
   }
+
+  .vf-grid__col-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .vf-grid {
+    grid-auto-flow: column;
+  }
 }
 
 .tooltip-custom p {
-  font-size: 18px !important ;
+  font-size: 18px !important;
   color: #fff !important;
 }
 
@@ -442,6 +469,7 @@ table tbody tr:nth-child(even) {
 .customOverlay {
   background: rgba(36, 123, 160, 0.7);
 }
+
 .customModal {
   background: #b2dbbf;
   max-width: 500px;