Improve search results on mobile

eea · Jun 16, 2022 · fc570b3 · fc570b3
1 parent cc6e31c
commit fc570b3
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 5 deletions.
diff --git a/src/SearchBlock/less/answersbox.less b/src/SearchBlock/less/answersbox.less
@@ -1,15 +1,17 @@
 .answer-header {
   display: flex;
   align-items: center;
+  margin-bottom: 0.5em;
 
   .answer-header-title {
-    margin-right: 1.3em;
+    margin-right: 1.5em;
     font-size: 16px;
     font-weight: 700;
   }
 
   .ui.basic.button.header-btn {
-    padding: 0 0.75em;
+    padding-right: 0;
+    padding-left: 0;
     margin: 0;
     color: @deepBlue !important;
     font-size: 14px;
@@ -47,7 +49,11 @@
 .answer__primarylink a {
   color: @deepBlue;
   font-size: 20px;
-  font-weight: 700;
+}
+
+.answer__primarylink,
+.answer__primarylink a {
+  // font-weight: 700;
 
   &:hover {
     color: @deepBlue;
@@ -73,6 +79,10 @@
     padding-top: 0;
     margin: 0;
 
+    > .icon {
+      padding-top: 3px;
+    }
+
     .ui.button {
       padding: 5px 10px;
       margin: 0 5px;
@@ -174,6 +184,32 @@
   }
 }
 
+@media only screen and (max-width: @tabletBreakpoint) {
+  .answers-list .answer__primarylink,
+  .answers-list .answer__primarylink a {
+    color: @deepBlue;
+    font-size: 16px;
+  }
+
+  .answers-list .answer__primary span {
+    font-size: 16px !important;
+  }
+
+  .results-layout .answers-list .answer__primary {
+    .result__source span,
+    .result__source strong {
+      font-size: 14px !important;
+    }
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .answer-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
 // .answers__bottom {
 //   display: flex;
 //   justify-content: space-between;

diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less
@@ -229,7 +229,7 @@ div#page-document div.searchapp div.cards div.search-result {
   width: 100%;
   padding-bottom: 0.5em;
   margin-top: 0.5em;
-  margin-bottom: 1.5em;
+  margin-bottom: 2em;
   clear: both;
 
   // div.menu.mlt {
@@ -279,7 +279,11 @@ div#page-document div.searchapp div.cards div.search-result {
     color: @secondaryColor;
     font-size: 16px;
     font-weight: 700;
-    gap: 1.5em;
+    // gap: 1.5em;
+
+    span {
+      margin-right: 20px;
+    }
   }
 
   .col-full {
@@ -312,6 +316,7 @@ div#page-document div.searchapp div.cards div.search-result {
           margin: 0 1.2em;
           color: @deepBlue;
           font-size: 16px;
+          line-height: inherit;
         }
       }
 
@@ -433,6 +438,26 @@ div#page-document div.searchapp div.cards div.search-result {
   font-size: 70% !important;
 }
 
+@media only screen and (max-width: @tabletBreakpoint) {
+  div#page-document {
+    div.searchapp div.cards div.search-result div.col-left h3,
+    div.searchapp div.cards div.search-result div.col-left h3 > a,
+    div.searchapp
+      div.cards
+      div.search-result
+      div.col-left
+      .result-description
+      p {
+      font-size: 16px !important;
+    }
+  }
+
+  div.col-left .source span,
+  div.col-left .source strong {
+    font-size: 14px !important;
+  }
+}
+
 @media only screen and (max-width: 1279px) {
   .search {
     position: initial !important;