Merge pull request #23 from eea/develop

Develop

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.3.15](https://github.com/eea/volto-searchlib/compare/0.3.14...0.3.15) - 21 September 2022
+
+#### :hammer_and_wrench: Others
+
+- Improve styling [kreafox - [`2b509a6`](https://github.com/eea/volto-searchlib/commit/2b509a64a59b568316612591787dd6af3f5c73ba)]
+- Search results styling [kreafox - [`05ef47a`](https://github.com/eea/volto-searchlib/commit/05ef47abbdf69f83dc210fbf6b633a987892b66d)]
 ### [0.3.14](https://github.com/eea/volto-searchlib/compare/0.3.13...0.3.14) - 15 September 2022
 
 #### :hammer_and_wrench: Others

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-searchlib",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "description": "@eeacms/volto-searchlib: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/SearchBlock/less/answersbox.less

@@ -13,22 +13,6 @@
     }
   }
 
-  .ui.warning.message {
-    padding-top: 0;
-    margin: 0;
-
-    > .icon {
-      padding-top: 3px;
-    }
-
-    .ui.button {
-      padding: 5px 10px;
-      margin: 0 5px;
-      font-size: 14px;
-      font-weight: 400;
-    }
-  }
-
   .buttons {
     .button {
       background-color: @secondaryColor !important;
@@ -50,11 +34,9 @@
 .answer-header {
   display: flex;
   align-items: center;
-  margin-bottom: 0.5em;
+  gap: 1.5em;
 
   .answer-header-title {
-    margin-right: 1.5em;
-    font-size: 16px;
     font-weight: 700;
   }
 
@@ -90,40 +72,11 @@
   }
 }
 
-.answer__primary {
-  .source {
-    margin-top: 0.5em;
-
-    a {
-      color: @mediumPersianBlue;
-      font-weight: normal;
-
-      span {
-        color: @linkColor;
-      }
-    }
-
-    .label {
-      margin-right: 0.5em !important;
-    }
-  }
-}
-
 .answer__highlighted {
   background-color: #e8d2fd;
   color: black;
 }
 
-.answer__primarylink,
-.answer__primarylink a {
-  color: @deepBlue;
-  font-size: 20px;
-
-  &:hover {
-    color: @deepBlue;
-  }
-}
-
 .answers-feedback {
   display: flex;
   justify-content: flex-end;
@@ -164,22 +117,10 @@
   }
 }
 
-@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;
-    }
+.answerCard {
+  .listing-item a {
+    display: inline-flex;
+    width: auto;
   }
 }
 

src/SearchBlock/less/dropdown-filterlist.less

@@ -36,6 +36,10 @@
       .ui.dropdown {
         position: relative;
 
+        .menu > * {
+          white-space: normal;
+        }
+
         &.active {
           > span {
             z-index: 99999 !important;
@@ -56,7 +60,8 @@
 
         .menu {
           bottom: auto !important;
-          min-width: 368px;
+          min-width: 350px;
+          max-width: 400px;
           padding: 1em;
           border: none;
           border-bottom: 0.5px solid #4c677f;
@@ -194,6 +199,7 @@
 
     .card-header {
       flex-direction: row;
+      text-align: left !important;
     }
   }
 
@@ -291,23 +297,25 @@
   }
 
   .sui-multi-checkbox-facet__option-label {
-    justify-content: initial;
+    align-items: flex-start;
+    justify-content: space-between;
+    // justify-content: initial;
     margin: 0.5em 0;
   }
 
   .sui-multi-checkbox-facet__option-count {
     display: flex;
     align-items: center;
-    margin: 0;
-    margin-left: 0.5em;
+    // margin: 0;
+    margin: 0 0.5em;
     color: @blue-grey-5;
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 300;
   }
 
   .sui-multi-checkbox-facet__option-input-wrapper {
     position: relative;
-    flex: none;
+    // flex: none;
 
     input.sui-multi-checkbox-facet__checkbox {
       position: absolute;
@@ -326,16 +334,16 @@
     }
 
     .sui-multi-checkbox-facet__input-text {
-      padding-left: 30px;
-      font-size: 16px;
+      padding-left: 25px;
+      font-size: 14px;
     }
 
     .checkmark {
       position: absolute;
       top: 2px;
       left: 0;
-      width: 20px;
-      height: 20px;
+      width: 15px;
+      height: 15px;
       border: 1px solid @blue-5;
       background-color: @white;
     }
@@ -344,8 +352,8 @@
       position: absolute;
       top: 4px;
       left: 0;
-      width: 16px;
-      height: 16px;
+      width: 14px;
+      height: 14px;
       border: 2px solid @blue-5;
       background-color: @white;
       border-radius: 50%;
@@ -354,8 +362,8 @@
     .radio-checkmark:after {
       top: 2px;
       left: 2px;
-      width: 8px;
-      height: 8px;
+      width: 6px;
+      height: 6px;
       background: @blue-5;
       border-radius: 50%;
     }
@@ -381,10 +389,10 @@
     }
 
     .checkmark:after {
-      top: 3px;
-      left: 7px;
-      width: 5px;
-      height: 10px;
+      top: 1px;
+      left: 5px;
+      width: 4px;
+      height: 9px;
       border: solid white;
       border-width: 0 2px 2px 0;
       -webkit-transform: rotate(45deg);
@@ -422,7 +430,7 @@
     }
 
     .sui-multi-checkbox-facet__option-label {
-      justify-content: space-between;
+      // justify-content: space-between;
     }
 
     .match-select {
@@ -440,3 +448,8 @@
     }
   }
 }
+
+.sidebar-content .sui-multi-checkbox-facet__option-label {
+  align-items: flex-start;
+  justify-content: space-between;
+}

src/SearchBlock/less/landingpage.less

@@ -2,7 +2,7 @@
   margin-top: 5em;
 
   .search-tab {
-    margin-top: 4em;
+    margin-top: 2em;
 
     .ui.tab {
       padding-right: 0;