From 851fef45b099e0d54510029a19cbb1e600fd2b45 Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Tue, 5 Nov 2019 07:19:36 +0100 Subject: [PATCH 1/9] add accordion for additional filters --- app/public/accordion.css | 41 +++++++++++++++++++++++++++++++++ app/views/layout.ejs | 1 + app/views/realEstateFilters.ejs | 22 +++++++++++++++--- 3 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 app/public/accordion.css diff --git a/app/public/accordion.css b/app/public/accordion.css new file mode 100644 index 0000000..b438731 --- /dev/null +++ b/app/public/accordion.css @@ -0,0 +1,41 @@ +.accordion label { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background-color: #02adba; + color: white; + padding-left: 15px; + height: 3em; + line-height: 0.5em; + font-size: medium; + cursor: pointer; + border-bottom: 1px solid #bdbdbd; + border-top: 1px solid #ffffff; +} +.accordion p { + color: #424242; + padding: 10px; + font-size: 0.8em; + line-height: 1.7em; + opacity: 0; + display: none; + text-align: left; + background-color: #fff; + margin: 0px; +} +#tm:checked ~ .hiddentext { + display: block; + opacity: 1; +} +input#tm { + display: none; + position: relative; +} +.arrow { + color: #02adba; +} + +.accordion-title { + font-size: 2em; +} diff --git a/app/views/layout.ejs b/app/views/layout.ejs index 7856ad6..49109e9 100644 --- a/app/views/layout.ejs +++ b/app/views/layout.ejs @@ -19,6 +19,7 @@ + diff --git a/app/views/realEstateFilters.ejs b/app/views/realEstateFilters.ejs index 1b3eb01..3aaac2e 100644 --- a/app/views/realEstateFilters.ejs +++ b/app/views/realEstateFilters.ejs @@ -4,7 +4,9 @@
Cijena


-
+
+
+

@@ -23,7 +25,9 @@
Površina


-
+
+
+

@@ -43,7 +47,9 @@
Površina okućnice


-
+
+
+

@@ -58,6 +64,16 @@ <% } %> +
+
+
+ + +

Filteri

+
+
+
+
Dalje -- 2.47.3 From 5e0de499e876953346bae0664ef5a7fba7dc9a96 Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Fri, 15 Nov 2019 09:07:56 +0100 Subject: [PATCH 2/9] remove accordion files and import --- app/public/accordion.css | 41 ---------------------------------------- app/views/layout.ejs | 1 - 2 files changed, 42 deletions(-) delete mode 100644 app/public/accordion.css diff --git a/app/public/accordion.css b/app/public/accordion.css deleted file mode 100644 index b438731..0000000 --- a/app/public/accordion.css +++ /dev/null @@ -1,41 +0,0 @@ -.accordion label { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: #02adba; - color: white; - padding-left: 15px; - height: 3em; - line-height: 0.5em; - font-size: medium; - cursor: pointer; - border-bottom: 1px solid #bdbdbd; - border-top: 1px solid #ffffff; -} -.accordion p { - color: #424242; - padding: 10px; - font-size: 0.8em; - line-height: 1.7em; - opacity: 0; - display: none; - text-align: left; - background-color: #fff; - margin: 0px; -} -#tm:checked ~ .hiddentext { - display: block; - opacity: 1; -} -input#tm { - display: none; - position: relative; -} -.arrow { - color: #02adba; -} - -.accordion-title { - font-size: 2em; -} diff --git a/app/views/layout.ejs b/app/views/layout.ejs index 49109e9..7856ad6 100644 --- a/app/views/layout.ejs +++ b/app/views/layout.ejs @@ -19,7 +19,6 @@ - -- 2.47.3 From 5ff10fc62daa1f66471d04abcfc24f0e67b08790 Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Fri, 15 Nov 2019 09:29:02 +0100 Subject: [PATCH 3/9] modify materialize tabs style to match Kivi color scheme --- app/public/main.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/app/public/main.css b/app/public/main.css index 2e0d7d4..2454e3a 100644 --- a/app/public/main.css +++ b/app/public/main.css @@ -110,3 +110,20 @@ h3 { .collection a.collection-item:not(.active):hover { background-color: rgba(2, 173, 186, 0.2); } + +.tabs .tab a { + color: #02adba; + -webkit-transition: color 0.28s ease, background-color 0.28s ease; + transition: color 0.28s ease, background-color 0.28s ease; +} +.tabs .tab a:focus, +.tabs .tab a:focus.active { + background-color: rgba(2, 173, 186, 0.2); +} +.tabs .tab a:hover, +.tabs .tab a.active { + color: #02adba; +} +.tabs .indicator { + background-color: #02adba; +} -- 2.47.3 From 31579735523c7a5e4aa8baf9d51e0e7ac481f7a1 Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Mon, 18 Nov 2019 06:42:22 +0100 Subject: [PATCH 4/9] add more filters to different tab on filters page; update css --- app/public/main.css | 20 ++++ app/views/advancedFilters.ejs | 30 +++++ app/views/realEstateFilters.ejs | 203 ++------------------------------ app/views/standardFilters.ejs | 188 +++++++++++++++++++++++++++++ 4 files changed, 251 insertions(+), 190 deletions(-) create mode 100644 app/views/advancedFilters.ejs create mode 100644 app/views/standardFilters.ejs diff --git a/app/public/main.css b/app/public/main.css index 2454e3a..dcbc0d7 100644 --- a/app/public/main.css +++ b/app/public/main.css @@ -127,3 +127,23 @@ h3 { .tabs .indicator { background-color: #02adba; } + +[type="checkbox"].filled-in:checked + span:not(.lever):after { + border: 2px solid #02adba; + background-color: #02adba; +} +[type="checkbox"].filled-in:not(:checked) + span:not(.lever):after { + background-color: transparent; + border: 2px solid #02adba; +} + +.distinguished { + border: 2px solid #02adba; + border-radius: 4px; + padding: 5px 5px 3px 5px; + margin-left: -5px; +} + +p > label { + color: black; +} diff --git a/app/views/advancedFilters.ejs b/app/views/advancedFilters.ejs new file mode 100644 index 0000000..22b019c --- /dev/null +++ b/app/views/advancedFilters.ejs @@ -0,0 +1,30 @@ +
+ +

+ +

+ +

+ +

+ +

+ +

+ +
+

+ +

diff --git a/app/views/realEstateFilters.ejs b/app/views/realEstateFilters.ejs index 3aaac2e..caf3c23 100644 --- a/app/views/realEstateFilters.ejs +++ b/app/views/realEstateFilters.ejs @@ -1,76 +1,17 @@ +
-
- -
-
Cijena
-

-
-
-
-
- -
-
-
- - -
-
- -
-
- -
- -
-
Površina
-

-
-
-
-
- -
-
-
- - -
-
- -
-
- -
- - <% if(hasGardenSize) { %> -
-
Površina okućnice
-

-
-
-
-
- -
-
-
- - -
-
- -
-
- <% } %> -
-
- - -

Filteri

-
+ +
+
+ <%- include("./standardFilters.ejs") %> +
+
+ <%- include("./advancedFilters.ejs") %>
@@ -82,125 +23,7 @@
diff --git a/app/views/standardFilters.ejs b/app/views/standardFilters.ejs new file mode 100644 index 0000000..423d694 --- /dev/null +++ b/app/views/standardFilters.ejs @@ -0,0 +1,188 @@ +
+ +
+
Cijena
+

+
+
+
+
+ +
+
+
+ + +
+
+ +
+
+ +
+ +
+
Površina
+

+
+
+
+
+ +
+
+
+ + +
+
+ +
+
+ +
+ +<% if(hasGardenSize) { %> +
+
Površina okućnice
+

+
+
+
+
+ +
+
+
+ + +
+
+ +
+
+<% } %> + + -- 2.47.3 From cb175595db374b77a7aa563ea2b14a3064561e3f Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Mon, 18 Nov 2019 06:44:10 +0100 Subject: [PATCH 5/9] specify and use custom css class for checkbox labels --- app/public/main.css | 2 +- app/views/advancedFilters.ejs | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/public/main.css b/app/public/main.css index dcbc0d7..1163246 100644 --- a/app/public/main.css +++ b/app/public/main.css @@ -144,6 +144,6 @@ h3 { margin-left: -5px; } -p > label { +.checkbox-label { color: black; } diff --git a/app/views/advancedFilters.ejs b/app/views/advancedFilters.ejs index 22b019c..ff54fa7 100644 --- a/app/views/advancedFilters.ejs +++ b/app/views/advancedFilters.ejs @@ -1,21 +1,21 @@

-

-

-

-

- -

+<% for (const filter of advancedBooleanFilterObjects){ %> +

+ +

+<% } %> -

- -

+
+<% for (const filter of advancedRangeFilterObjects){ %> +
+

+ <%= filter.title %> +

+
+ " + > + +
+
+ " + > + +
+
+<% } %> -

- -

+
+<% for (const filter of advancedSegmentSelectFilterObjects){ %> +
+

+ + <% for (const segmentObject of filter.values) { %> + + <% } %> + +
+<% } %>

-- 2.47.3