Add headers to search filters

locate-place · May 25, 2024 · 7ae74b0 · 7ae74b0
1 parent e14604f
commit 7ae74b0
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git a/src/components/layout/SearchForm.tsx b/src/components/layout/SearchForm.tsx
@@ -688,6 +688,7 @@ const SearchForm = ({routePathDefault, queryDefault, query}: SearchFormProps) =>
         {'code': 0.1, name: 0.1},
         {'code': 0.5, name: 0.5},
         {'code': 1, name: 1},
+        {'code': 5, name: 5},
         {'code': 10, name: 10},
         {'code': 20, name: 20},
         {'code': 50, name: 50},
@@ -769,6 +770,8 @@ const SearchForm = ({routePathDefault, queryDefault, query}: SearchFormProps) =>
                                         <div
                                             className={['form-property-choice', isCountryChoiceVisible ? 'form-property-choice-visible' : 'form-property-choice-invisible'].join(' ')}>
                                             <ul className="country-list">
+                                                <li className="caption">{t('TEXT_WORD_COUNTRY_FILTER')}</li>
+
                                                 {
                                                     country !== null && <li
                                                         data-value={null}
@@ -830,6 +833,7 @@ const SearchForm = ({routePathDefault, queryDefault, query}: SearchFormProps) =>
                                         <div
                                             className={['form-property-choice', isFeatureChoiceVisible ? 'form-property-choice-visible' : 'form-property-choice-invisible'].join(' ')}>
                                             <ul>
+                                                <li className="caption">{t('TEXT_WORD_FEATURE_FILTER')}</li>
                                                 {
                                                     features.length > 0 && <li
                                                         data-value={null}
@@ -875,7 +879,7 @@ const SearchForm = ({routePathDefault, queryDefault, query}: SearchFormProps) =>
                                     </div>
 
                                     {
-                                        hasCurrentPosition &&
+                                    hasCurrentPosition &&
                                         <div className="form-property form-property-distance">
                                                 <span
                                                     ref={menuRefDistance}
@@ -891,6 +895,7 @@ const SearchForm = ({routePathDefault, queryDefault, query}: SearchFormProps) =>
                                             <div
                                                 className={['form-property-choice', isDistanceChoiceVisible ? 'form-property-choice-visible' : 'form-property-choice-invisible'].join(' ')}>
                                                 <ul>
+                                                    <li className="caption">{t('TEXT_WORD_DISTANCE_FILTER', {currentPosition: currentPosition})}</li>
                                                     {
                                                         distance !== null && <li
                                                             data-value={null}
@@ -944,6 +949,7 @@ const SearchForm = ({routePathDefault, queryDefault, query}: SearchFormProps) =>
                                         <div
                                             className={['form-property-choice', isLimitChoiceVisible ? 'form-property-choice-visible' : 'form-property-choice-invisible'].join(' ')}>
                                             <ul>
+                                                <li className="caption">{t('TEXT_WORD_LIMIT')}</li>
                                                 {
                                                     limit !== null && <li
                                                         data-value={null} key={'limit-code-remove'}

diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
@@ -232,6 +232,7 @@
   "TEXT_WORD_CLOSE": "Schließen",
   "TEXT_WORD_COMPASS": "Kompass",
   "TEXT_WORD_COORDINATE": "Koordinate",
+  "TEXT_WORD_COUNTRY": "Länder",
   "TEXT_WORD_COUNTRY_FILTER": "Länderfilter",
   "TEXT_WORD_CURRENT_VERSION": "Aktuelle Version",
   "TEXT_WORD_DATA_PRIVACY": "Datenschutzerklärung",
@@ -245,6 +246,7 @@
   "TEXT_WORD_DISTANCE_OWN_POSITION": "Abstand eigene Postion",
   "TEXT_WORD_EMAIL": "E-Mail",
   "TEXT_WORD_ERROR": "Fehler",
+  "TEXT_WORD_FEATURES": "Features",
   "TEXT_WORD_FEATURE_CODES": "Feature-Codes",
   "TEXT_WORD_FEATURE_CLASS": "Feature-Class",
   "TEXT_WORD_FEATURE_CLASSES": "Feature-Classes",
@@ -257,6 +259,7 @@
   "TEXT_WORD_LAST_UPDATE": "Letztes Update",
   "TEXT_WORD_LENGTH": "Länge",
   "TEXT_WORD_LICENSE": "Lizenz",
+  "TEXT_WORD_LIMIT": "Suchergebnisse pro Seite",
   "TEXT_WORD_LIMIT_FILTER": "Suchergebnisse pro Seite",
   "TEXT_WORD_LINK_ADDRESSES": "Linkadressen",
   "TEXT_WORD_LINK_ADDRESSES_MAPS": "Karten / Linkadressen",

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -231,6 +231,7 @@
   "TEXT_WORD_CLOSE": "Close",
   "TEXT_WORD_COMPASS": "Compass",
   "TEXT_WORD_COORDINATE": "Coordinate",
+  "TEXT_WORD_COUNTRY": "Countries",
   "TEXT_WORD_COUNTRY_FILTER": "Country filter",
   "TEXT_WORD_CURRENT_VERSION": "Current version",
   "TEXT_WORD_DATA_PRIVACY": "Data Privacy",
@@ -244,6 +245,7 @@
   "TEXT_WORD_DISTANCE_OWN_POSITION": "Distance own position",
   "TEXT_WORD_EMAIL": "Email",
   "TEXT_WORD_ERROR": "Error",
+  "TEXT_WORD_FEATURES": "Features",
   "TEXT_WORD_FEATURE_CODES": "Feature codes",
   "TEXT_WORD_FEATURE_CLASS": "Feature class",
   "TEXT_WORD_FEATURE_CLASSES": "Feature classes",

diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
@@ -231,6 +231,7 @@
   "TEXT_WORD_CLOSE": "Cerrar",
   "TEXT_WORD_COMPASS": "Brújula",
   "TEXT_WORD_COORDINATE": "Coordenada",
+  "TEXT_WORD_COUNTRY": "Países",
   "TEXT_WORD_COUNTRY_FILTER": "Filtro de países",
   "TEXT_WORD_CURRENT_VERSION": "Versión actual",
   "TEXT_WORD_DATA_PRIVACY": "Política de Privacidad",
@@ -244,6 +245,7 @@
   "TEXT_WORD_DISTANCE_OWN_POSITION": "Distancia posición propia",
   "TEXT_WORD_EMAIL": "Correo electrónico",
   "TEXT_WORD_ERROR": "Error",
+  "TEXT_WORD_FEATURES": "Características",
   "TEXT_WORD_FEATURE_CODES": "Códigos de características",
   "TEXT_WORD_FEATURE_CLASS": "Clase de característica",
   "TEXT_WORD_FEATURE_CLASSES": "Clases de características",

diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -341,7 +341,7 @@ body {
                                 top: 36px;
                                 left: 0;
                                 display: none;
-                                z-index: 1000;
+                                z-index: 2000;
                                 background-color: white;
                                 border: 1px solid rgb(108, 117, 125);
                                 border-radius: 6px !important;
@@ -380,12 +380,32 @@ body {
                                             cursor: pointer;
                                         }
 
+                                        &.caption {
+                                            border-bottom: 1px solid rgb(108, 117, 125);
+                                            background-color: rgb(233, 235, 228);
+                                            display: flex;
+                                            justify-content: space-between;
+                                            align-items: flex-start;
+                                            width: 100%;
+                                            margin-bottom: .5rem;
+                                            white-space: break-spaces;
+                                            font-family: 'Montserrat-Bold', Arial, sans-serif;
+                                            font-weight: normal !important;
+                                            border-radius: 6px 6px 0 0 !important;
+
+                                            &:hover {
+                                                background-color: rgb(233, 235, 228);
+                                                border-radius: 6px 6px 0 0 !important;
+                                            }
+                                        }
+
                                         &.remover {
                                             border-bottom: 1px solid #dee2e6;
                                             display: flex;
                                             justify-content: space-between;
                                             align-items: flex-start;
                                             width: 100%;
+                                            margin-top: -.5rem;
                                             margin-bottom: 1rem;
                                             white-space: break-spaces;
 
@@ -394,6 +414,11 @@ body {
                                                 margin-left: 0.5rem;
                                                 cursor: pointer;
                                             }
+
+                                            &:hover {
+                                                background-color: transparent;
+                                                border-radius: 0 !important;
+                                            }
                                         }
 
                                         &:hover {
@@ -478,7 +503,7 @@ body {
         }
     }
 
-    @media (min-width: 768px) {
+    @media (min-width: 992px) {
         .search-form {
             .search-group-shadow {
                 @include shadow-own;