Merge pull request #40 from CrossRef/PREP-112-101_landingPage_UI_changes

Prep 112 101 landing page ui changes
CrossRef · Jun 5, 2018 · 7654099 · 7654099
2 parents 5e75dd2 + d3225e7
commit 7654099
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 64 deletions.
diff --git a/app/components/landingPage/landingPage.js b/app/components/landingPage/landingPage.js
@@ -71,30 +71,31 @@ export default class LandingPage extends React.Component {
               onSelect={this.onSelect}
               searchList={this.state.searchList}
               savedSearches={JSON.parse(localStorage.getItem('savedSearches'))}
+              notFound="No matching member name found. Please try again."
               placeHolder='Search by member'/>
           </div>
 
         </div>
 
         <div className="content">
 
-          <div className="greyBar">
-            <img src={`${deployConfig.baseUrl}assets/images/light-bulb.svg`}/>
-            <div className="greyBarContent">
-              <div className="headlineTextHolder">
-                <p className="smallText">{headlineText.homePage.smallText}</p>
-                <p className="bigText">{headlineText.homePage.bigText}</p>
-              </div>
+          <div className="moreInfoBar">
+            <div className="moreInfoContent">
 
               <div className="button">
                 <a href="https://www.crossref.org/participation" target="_blank">Learn more</a>
               </div>
+
+              <div className="headlineTextHolder">
+                <p className="smallText">{headlineText.homePage.smallText}</p>
+                <p className="bigText">{headlineText.homePage.bigText}</p>
+              </div>
             </div>
 
           </div>
 
 
-          <div className="testimonialContainer">
+          {/*<div className="testimonialContainer">
 
             <div className="testimonial">
               {testimonials.testimonial1}
@@ -109,7 +110,7 @@ export default class LandingPage extends React.Component {
               {testimonials.testimonial3}
             </div>
 
-          </div>
+          </div>*/}
         </div>
       </div>
     )

diff --git a/app/components/landingPage/styles/style-landingPage.scss b/app/components/landingPage/styles/style-landingPage.scss
@@ -8,14 +8,22 @@
   align-items: center;
 
   .topStripe {
-    background-image: url("images/PR_Banner_1.png");
-    height: 368px;
+    background-image: url("images/PR_Banner_2.png");
+    background-size: auto 100%;
+    background-position-x: 140vw;
+    height: 244px;
     width: 100%;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-end;
+    padding-bottom: 20px;
+    box-sizing: border-box;
     position: relative;
 
+    @media (max-width: 550px) {
+      padding-bottom: 0px;
+    }
+
     .searchContainer {
       width: 96%;
       max-width: 768px;
@@ -66,43 +74,63 @@
     justify-content: flex-start;
     flex-direction: column;
 
-    .greyBar {
+    .moreInfoBar {
 
-      height:160px;
       width: 100%;
       box-sizing: border-box;
-      margin-top: 48px;
+      margin-top: 140px;
       margin-bottom: 48px;
-      background-color: #E5E5E5;
       display: flex;
       justify-content: center;
       align-items: flex-start;
-      padding: 0 30px 16px 30px;
 
-      img {
-        margin-right: 30px;
-        margin-top: 32px;
+      @media (max-width: 768px) {
+        margin-top: 105px;
+      }
+
+      @media(max-width: 550px) {
+        margin-top: 85px;
       }
 
-      .greyBarContent {
+      .moreInfoContent {
         color: #4F5757;
-        height: 100%;
+        display: flex;
+        width: 720px;
+        padding: 0 30px;
+
+        @media (max-width: 768px) {
+          flex-direction: column-reverse;
+          padding-left: 17vw;
+        }
+
+        @media (max-width: 550px) {
+          padding-left: 10vw;
+        }
 
         .headlineTextHolder {
+          margin-left: 30px;
           display: flex;
           align-items: flex-start;
           max-width: 400px;
           width: 100%;
           flex-direction: column;
-          margin-top: 30px;
           justify-content: center;
           min-height: 45px;
 
+          @media (max-width: 768px) {
+            margin-left: 0;
+          }
+
           .smallText {
             margin: 0;
             font-size: 18px;
             font-family: $regularFont;
+
+            @media(max-width: 550px) {
+              display: none;
+            }
           }
+
           .bigText {
             margin: 0;
             font-family: $regularFont;
@@ -113,36 +141,25 @@
 
         .button {
           height: 48px;
-          width: 224px;
+          width: 208px;
           background-color: white;
           justify-content: center;
           display: flex;
           align-items: center;
-          margin-top: 21.5px;
           font-family: $regularFont;
           cursor: pointer;
+          border: 2px solid #4F5858;
+          border-radius: 5px;
+
+          @media (max-width: 768px) {
+            margin-top: 21px;
+          }
 
           a { color: #4F5757; text-decoration: none }
           a:visited { color: #4F5757 }
 
         }
       }
-
-      @media (max-width: 700px) {
-        .greyBarContent {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .smallText {
-          display: none;
-        }
-
-        img {
-          display: none;
-        }
-      }
     }
 
     .testimonialContainer {
@@ -156,6 +173,11 @@
       flex-wrap: wrap;
       padding-bottom: 122px;
 
+      @media (max-width: 700px) {
+        flex-direction: column;
+        align-items: center;
+      }
+
       .testimonial {
         width: 210px;
 
@@ -172,13 +194,5 @@
         }
       }
     }
-
-    @media (max-width: 700px) {
-      .testimonialContainer {
-        flex-direction: column;
-        align-items: center;
-      }
-    }
-
   }
 }
diff --git a/app/components/landingPage/styles/style-memberSearch.scss b/app/components/landingPage/styles/style-memberSearch.scss
@@ -59,12 +59,14 @@
       cursor: pointer;
       padding: 5px 17px 5px 17px;
     }
-    .searchItem:hover {
+    .searchItem:hover:not(.unclickable) {
       background-color: #E5E5E5;
+      color: #3EB1CB;
     }
-    .searchItem:focus {
+    .searchItem:focus:not(.unclickable) {
       background-color: #E5E5E5;
       outline: none;
+      color: #3EB1CB;
     }
   }
 }
diff --git a/app/components/mainContainer/style-mainContainer.scss b/app/components/mainContainer/style-mainContainer.scss
@@ -11,7 +11,7 @@ body {
 
   .header {
     width: 100%;
-    height: 112px;
+    height: 80px;
     background-color: white;
     display: flex;
     justify-content: center;
@@ -25,20 +25,20 @@ body {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
+      padding-left: 14px;
+      padding-right: 16px;
 
       .participationLogo {
-        width: 140px;
+        width: 115px;
         cursor: pointer;
+        margin-bottom: 5px;
       }
 
       .crossrefLogo {
-        width: 96px;
+        width: 72px;
+        margin-bottom: 13px;
       }
 
-    }  @media(max-width: 960px) {
-      .widthContainer {
-        padding-left: 14px;
-      }
     }
   }
 

diff --git a/app/components/publisherPage/styles/style-titleSearch.scss b/app/components/publisherPage/styles/style-titleSearch.scss
@@ -64,16 +64,12 @@
       cursor: pointer;
       padding: 5px 17px 5px 17px;
     }
-    .searchItem:hover {
+    .searchItem:not(.unclickable):hover {
       background-color: #E5E5E5;
     }
-    .searchItem:focus {
+    .searchItem:not(.unclickable):focus {
       background-color: #E5E5E5;
       outline: none;
     }
-
-    .unclickable {
-      pointer-events: none;
-    }
   }
 }
diff --git a/app/style/global.scss b/app/style/global.scss
@@ -0,0 +1,5 @@
+
+
+.unclickable {
+  pointer-events: none;
+}