Merge branch 'develop' of github.com:Nona-Creative/ETHPrize into feat/new-json-structure

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,9 +1,6 @@
 @import './assets/styles/global.scss';
 
-.search-results {
+.search-results li {
-  margin-top: calculateRem(32);
-
-  li {
   margin-bottom: calculateRem(32);
 
   button {
@@ -59,7 +56,6 @@
       }
     }
   }
-  }
 
   .li-header {
     display: flex;