Initial search and filter implementation for Agenda

Fliplet · Jan 28, 2020 · 3d0280f · 3d0280f
1 parent 5f05c08
commit 3d0280f
Show file tree

Hide file tree

Showing 15 changed files with 1,396 additions and 165 deletions.
diff --git a/css/layout-css/agenda-style.upload.css b/css/layout-css/agenda-style.upload.css
diff --git a/css/layout-css/news-feed-style.upload.css b/css/layout-css/news-feed-style.upload.css
@@ -339,8 +339,15 @@
   transition: opacity 0.2s ease-out;
 }
 
+.search-holder .btn.search-btn:focus,
+.search-holder .btn.search-btn:hover,
+.search-holder .btn.search-btn:active:focus,
+.search-holder .btn.search-btn:active:hover {
+  border-radius: 40px;
+}
+
 .search-holder .search-feed:focus ~ .btn.search-btn,
-.search-holder .search-feed:valid ~ .btn.search-btn { 
+.search-holder .search-feed:valid ~ .btn.search-btn {
   opacity: 1;
   pointer-events: all;
 }
@@ -417,7 +424,7 @@
   text-overflow: ellipsis;
   max-width: calc(100% - 185px);
   display: inline-block;
-  vertical-align: text-top;
+  vertical-align: baseline;
 }
 
 .new-news-feed-list-container .current-query-wrapper .clear-search {

diff --git a/css/layout-css/simple-list-style.upload.css b/css/layout-css/simple-list-style.upload.css
@@ -72,31 +72,31 @@
   margin-left: 5px;
 }
 
-.filter-header-holder .filter-header-btn-controls {
+.simple-list-container .filter-header-holder .filter-header-btn-controls {
   text-transform: none;
 }
 
-.apply-filters {
+.simple-list-container .apply-filters {
   border: 1px solid #337ab7;
   border-radius: 20px;
   padding: 6px 14px;
   background-color: #337ab7;
 }
 
-.clear-filters {
+.simple-list-container .clear-filters {
   padding: 6px 14px;
 }
 
-.clear-filters:hover,
-.apply-filters:hover,
-.clear-filters:focus,
-.apply-filters:focus,
-.clear-filters:active,
-.apply-filters:active,
-.clear-filters:active:hover,
-.apply-filters:active:hover,
-.clear-filters:active:focus,
-.apply-filters:active:focus {
+.simple-list-container .clear-filters:hover,
+.simple-list-container .apply-filters:hover,
+.simple-list-container .clear-filters:focus,
+.simple-list-container .apply-filters:focus,
+.simple-list-container .clear-filters:active,
+.simple-list-container .apply-filters:active,
+.simple-list-container .clear-filters:active:hover,
+.simple-list-container .apply-filters:active:hover,
+.simple-list-container .clear-filters:active:focus,
+.simple-list-container .apply-filters:active:focus {
   color: #fff;
   box-shadow: none;
 }
@@ -191,7 +191,7 @@
   margin: 0;
 }
 
-.filters-header {
+.simple-list-container .filters-header {
   font-size: 1.2em;
   margin-top: 20px;
   margin-bottom: 10px;
@@ -201,18 +201,18 @@
   margin: 0 -15px;
 }
 
-.filter-holder .panel-group .panel {
+.simple-list-container .filter-holder .panel-group .panel {
   border: none;
   border-radius: 0;
   background-color: #364363;
   margin-top: 1px;
 }
 
-.filter-holder .panel-group .panel:first-child {
+.simple-list-container .filter-holder .panel-group .panel:first-child {
   margin-top: 0;
 }
 
-.filter-holder .panel-default > .panel-heading {
+.simple-list-container .filter-holder .panel-default > .panel-heading {
   color: #ffffff;
   background-color: #232b3f;
   border: none;
@@ -222,11 +222,11 @@
   position: relative;
 }
 
-.filter-holder .panel-default > .panel-heading h4 {
+.simple-list-container .filter-holder .panel-default > .panel-heading h4 {
   font-weight: normal;
 }
 
-.filter-holder .panel-default > .panel-heading .fa {
+.simple-list-container .filter-holder .panel-default > .panel-heading .fa {
   position: absolute;
   top: 50%;
   right: 0;
@@ -238,7 +238,7 @@
   font-size: 1.5em;
 }
 
-.panel-default > .panel-heading + .panel-collapse > .panel-body {
+.simple-list-container .panel-default > .panel-heading + .panel-collapse > .panel-body {
   border: none;
 }
 
@@ -257,14 +257,14 @@
   margin-bottom: 10px;
 }
 
-.list-search-icon {
+.simple-list-container .list-search-icon {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.list-search-icon .fa {
+.simple-list-container .list-search-icon .fa {
   display: inline-block;
   opacity: 0.3;
   font-size: 20px;
@@ -274,12 +274,12 @@
   line-height: 35px;
 }
 
-.list-search-icon .fa-search.active,
-.list-search-icon .fa-sliders.active {
+.simple-list-container .list-search-icon .fa-search.active,
+.simple-list-container .list-search-icon .fa-sliders.active {
   display: none;
 }
 
-.list-search-cancel {
+.simple-list-container .list-search-cancel {
   display: none;
   font-size: 20px;
   padding-left: 0;
@@ -290,31 +290,31 @@
   text-decoration: none;
 }
 
-.list-search-cancel.active {
+.simple-list-container .list-search-cancel.active {
   display: inline-block;
 }
 
-.hidden-filter-controls,
-.hidden-search-controls {
+.simple-list-container .hidden-filter-controls,
+.simple-list-container .hidden-search-controls {
   height: 0;
   overflow: hidden;
   margin: 0 -15px;
 }
 
-.hidden-filter-controls-content {
+.simple-list-container .hidden-filter-controls-content {
   padding-bottom: 15px;
 }
 
-.hidden-filter-controls-search {
+.simple-list-container .hidden-filter-controls-search {
   padding: 15px 15px;
 }
 
-.search-holder {
+.simple-list-container .search-holder {
   width: 100%;
   position: relative;
 }
 
-.search-holder .fa.fa-search {
+.simple-list-container .search-holder .fa.fa-search {
   position: absolute;
   top: 0;
   left: 0;
@@ -327,7 +327,7 @@
   text-align: center;
 }
 
-.search-holder .btn.search-btn {
+.simple-list-container .search-holder .btn.search-btn {
   opacity: 0;
   pointer-events: none;
   position: absolute;
@@ -345,23 +345,30 @@
   transition: opacity 0.2s ease-out;
 }
 
-.search-holder .search-feed:focus ~ .btn.search-btn,
-.search-holder .search-feed:valid ~ .btn.search-btn {
+.simple-list-container .search-holder .btn.search-btn:focus,
+.simple-list-container .search-holder .btn.search-btn:hover,
+.simple-list-container .search-holder .btn.search-btn:active:focus,
+.simple-list-container .search-holder .btn.search-btn:active:hover {
+  border-radius: 40px;
+}
+
+.simple-list-container .search-holder .search-feed:focus ~ .btn.search-btn,
+.simple-list-container .search-holder .search-feed:valid ~ .btn.search-btn {
   opacity: 1;
   pointer-events: all;
 }
 
-.search-holder .search-feed:focus ~ .btn.search-btn,
-.search-holder .search-feed:focus ~ .btn.search-btn:hover,
-.search-holder .search-feed:focus ~ .btn.search-btn:active,
-.search-holder .search-feed:focus ~ .btn.search-btn:active:hover {
+.simple-list-container .search-holder .search-feed:focus ~ .btn.search-btn,
+.simple-list-container .search-holder .search-feed:focus ~ .btn.search-btn:hover,
+.simple-list-container .search-holder .search-feed:focus ~ .btn.search-btn:active,
+.simple-list-container .search-holder .search-feed:focus ~ .btn.search-btn:active:hover {
   border: none;
   background-color: #eeeeee;
 }
 
-.search-holder .btn.search-btn:hover,
-.search-holder .btn.search-btn:active,
-.search-holder .btn.search-btn:active:hover {
+.simple-list-container .search-holder .btn.search-btn:hover,
+.simple-list-container .search-holder .btn.search-btn:active,
+.simple-list-container .search-holder .btn.search-btn:active:hover {
   border: none;
   background-color: #eeeeee;
 }
@@ -381,7 +388,7 @@
   display: block;
 }
 
-.search-holder .form-control {
+.simple-list-container .search-holder .form-control {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -392,11 +399,11 @@
   height: auto;
 }
 
-.search-holder .form-control:focus {
+.simple-list-container .search-holder .form-control:focus {
   border-color: #337ab7;
 }
 
-.hidden-filter-controls-search .search-query-holder {
+.simple-list-container .hidden-filter-controls-search .search-query-holder {
   width: 100%;
   display: none;
   align-items: center;
@@ -406,7 +413,7 @@
   display: block;
 }
 
-.current-query-wrapper {
+.simple-list-container .current-query-wrapper {
   position: relative;
   background-color: #337ab7;
   border: 1px solid #337ab7;
@@ -417,16 +424,16 @@
   line-height: 1;
 }
 
-.current-query {
+.simple-list-container .current-query {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: calc(100% - 185px);
   display: inline-block;
-  vertical-align: text-top;
+  vertical-align: baseline;
 }
 
-.current-query-wrapper .clear-search {
+.simple-list-container .current-query-wrapper .clear-search {
   position: absolute;
   right: 0;
   top: 0;
@@ -440,34 +447,34 @@
   cursor: pointer;
 }
 
-.hidden-filter-controls-label {
+.simple-list-container .hidden-filter-controls-label {
   font-size: 14px;
   color: #aaaaaa;
   padding: 0 18px 5px;
 }
 
-.hidden-filter-controls-filter-container + .hidden-filter-controls-label {
+.simple-list-container .hidden-filter-controls-filter-container + .hidden-filter-controls-label {
   padding-top: 10px;
 }
 
-.hidden-filter-controls-label span {
+.simple-list-container .hidden-filter-controls-label span {
   font-weight: bold;
   text-transform: capitalize;
 }
 
-.hidden-filter-controls-filter-container {
+.simple-list-container .hidden-filter-controls-filter-container {
   width: 100%;
   display: flex;
 }
 
-.hidden-filter-controls-filter-wrapper {
+.simple-list-container .hidden-filter-controls-filter-wrapper {
   padding: 0 15px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
 }
 
-.hidden-filter-controls-filter {
+.simple-list-container .hidden-filter-controls-filter {
   width: auto;
   border: 1px solid #e5e5e5;
   border-radius: 20px;
@@ -476,23 +483,23 @@
   font-size: 14px;
 }
 
-.hidden-filter-controls-filter.mixitup-control-active {
+.simple-list-container .hidden-filter-controls-filter.mixitup-control-active {
   background-color: #337ab7;
   color: #ffffff;
   border-color: #337ab7;
 }
 
-.hidden-filter-controls-filter:last-child {
+.simple-list-container .hidden-filter-controls-filter:last-child {
   margin-right: 15px;
 }
 
-.limit-entries-text {
+.simple-list-container .limit-entries-text {
   padding-top: 20px;
   text-align: center;
   opacity: 0.5;
 }
 
-.back-button-holder {
+.simple-list-container .back-button-holder {
   text-align: center;
 }
 

diff --git a/css/layout-css/small-card-style.upload.css b/css/layout-css/small-card-style.upload.css
@@ -396,6 +396,13 @@
   transition: opacity 0.2s ease-out;
 }
 
+.search-holder .btn.search-btn:focus,
+.search-holder .btn.search-btn:hover,
+.search-holder .btn.search-btn:active:focus,
+.search-holder .btn.search-btn:active:hover {
+  border-radius: 40px;
+}
+
 .search-holder .search-feed:focus ~ .btn.search-btn,
 .search-holder .search-feed:valid ~ .btn.search-btn {
   opacity: 1;
@@ -476,7 +483,7 @@
   text-overflow: ellipsis;
   max-width: calc(100% - 185px);
   display: inline-block;
-  vertical-align: text-top;
+  vertical-align: baseline;
 }
 
 .new-small-card-list-container .current-query-wrapper .clear-search {