Merge pull request #26 from Nona-Creative/fix/various-mobile-fixes

Various mobile fixes

assets/styles/base/forms.scss

@@ -4,3 +4,8 @@ input,
 button {
   font-family: $primary-font;
 }
+
+input[type="search"] {
+  -webkit-appearance: none;
+  border-radius: 0;
+}

components/browseArchives/style.scss

@@ -28,14 +28,17 @@
 
 .browse-content-right {
 
-  @media (min-width: $monitor) {
+  @media (min-width: $desktop) {
     display: flex;
     flex-direction: column;
-    width: calculateRem($container-width);
-    padding: 0 calculateRem($container-padding);
 
     .interviews-wrap {
       order: 1;
     }
   }
+
+  @media (min-width: $monitor) {
+    width: calculateRem($container-width);
+    padding: 0 calculateRem($container-padding);
+  }
 }

components/interviews/interviewsList/style.scss

@@ -3,7 +3,7 @@
 .mob-interviews-link {
   display: flex;
   justify-content: space-between;
-  margin-bottom: calculateRem(24);
+  margin-bottom: calculateRem(32);
 
   @media (min-width: $desktop) {
     display: none;

components/interviews/singleInterview/style.scss

@@ -49,6 +49,7 @@
     p {
       padding-left: calculateRem(16);
       position: relative;
+      margin-bottom: calculateRem(10);
 
       &::before {
         content: '\00B7';

components/modal/style.scss

@@ -12,7 +12,10 @@
     height: 100vh;
     z-index: 3;
     background-color: $navy-dark;
-    overflow: auto;
+
+    /* enable smooth scrolling on mobile devices */
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
   }
 
   &.modal-on-mobile-only {
@@ -42,7 +45,6 @@
 
 .modal-inner {
   width: 100%;
-  height: 100%;
   padding-top: calculateRem(24);
   position: relative;
 
@@ -54,7 +56,7 @@
 .modal-close {
   position: fixed;
   top: calculateRem(16);
-  right: calculateRem(16);
+  right: calculateRem(12);
   z-index: 4;
 
   @media (min-width: $desktop) {

components/searchBar/index.js

@@ -6,7 +6,10 @@ import './style.scss';
 const { publicRuntimeConfig } = getConfig();
 
 const SearchBar = props => (
-  <div className="search-bar" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
+  <div
+    className={`search-bar ${props.isSearchActive ? 'search-active' : ''}`}
+    style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}
+  >
     <div className="container">
       <h3 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
         Archives

components/searchBar/style.scss

@@ -5,7 +5,7 @@
   background-image: url('/static/img/header-bg.jpg');
   background-position: center;
   background-size: cover;
-  margin-bottom: calculateRem(56);
+  margin-bottom: calculateRem(40);
   height: calculateRem(164);
   padding-top: calculateRem(52);
 
@@ -21,6 +21,10 @@
       margin-bottom: calculateRem(32);
     }
   }
+
+  &.search-active {
+    margin-bottom: calculateRem(92);
+  }
 }
 
 .search-form {

components/searchResults/style.scss

@@ -1,61 +1,57 @@
 @import './assets/styles/global.scss';
 
-.search-results {
-  margin-top: calculateRem(32);
+.search-results li {
+  margin-bottom: calculateRem(32);
 
-  li {
-    margin-bottom: calculateRem(32);
+  button {
+    text-align: left;
+    width: 100%;
+    padding: 0;
 
-    button {
-      text-align: left;
-      width: 100%;
-      padding: 0;
+    &:hover h3 {
+      text-decoration: underline;
 
-      &:hover h3 {
-        text-decoration: underline;
-
-        &.matched-name::before {
-          display: none;
-        }
+      &.matched-name::before {
+        display: none;
       }
+    }
 
-      h3 {
-        color: #fff;
-        font-size: calculateRem(24);
-        display: inline-block;
-        margin-bottom: calculateRem(12);
+    h3 {
+      color: #fff;
+      font-size: calculateRem(24);
+      display: inline-block;
+      margin-bottom: calculateRem(12);
 
-        &.matched-name {
-          @include hasRedUnderline;
-          position: relative;
-        }
+      &.matched-name {
+        @include hasRedUnderline;
+        position: relative;
       }
+    }
 
-      h5 {
-        color: #fff;
-        font-size: calculateRem(16);
-        margin-bottom: calculateRem(8);
-      }
+    h5 {
+      color: #fff;
+      font-size: calculateRem(16);
+      margin-bottom: calculateRem(8);
+    }
 
-      p {
-        color: hsla(0, 0, 100, .6);
-        font-size: calculateRem(14);
-        line-height: 1.6;
+    p {
+      color: hsla(0, 0, 100, .6);
+      font-size: calculateRem(14);
+      line-height: 1.6;
 
-        span {
-          position: relative;
+      span {
+        position: relative;
 
-          &::before {
-            content: '';
-            position: absolute;
-            top: -10%;
-            left: -2%;
-            height: 120%;
-            width: 104%;
-            background-color: $red;
-            color: $navy;
-            z-index: -1;
-          }
+        &::before {
+          content: '';
+          position: absolute;
+          top: -10%;
+          left: -2%;
+          height: 120%;
+          width: 104%;
+          background-color: $red;
+          color: $navy;
+          z-index: -1;
         }
       }
     }