index: Use a different approach of showing Team members
- Allow the visitor to switch between our various departments and show only the team members working in that sector
- Using Content Filter for that
**WIP**
**TO-DO**
- Correctly adjust the sizes of all profile pictures
- Correctly adapt the layout for all the mobile resolutions
Signed-off-by: nilac8991 <nilac8991@gmail.com>
diff --git a/css/style.css b/css/style.css
index 0beb4c0..860592e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -178,12 +178,12 @@
color: #ffffff;
background-color: #ffffff; }
.navbar-default .navbar-collapse.collapse.in ul {
- background-color: #07374a;
+ background-color: #07374a;
}
.navbar-collapse.collapse.collapsing {
background-color: #07374a;
}
-
+
.navbar-collapse.collapse.show {
background-color: #07374a;
-webkit-transition: background-color .2s ease 0s;
@@ -469,11 +469,18 @@
}
.team-role, .team-name, .team-links-list a {
color: #07374a;
+ text-align: center;
+ white-space: nowrap;
}
-.team-name, .family-name {font-size: 21px}
+.team-name, .family-name {
+ font-size: 21px;
+ text-align: center;
+ white-space: nowrap;
+}
.team-links, .family-links {
padding-top: .75em;
color: #07374a;
+ text-align: center;
}
.team-image img, .family-image img {
max-width:150px;
@@ -486,7 +493,7 @@
padding-right: 0;
display: flex;
flex-wrap: wrap;
- justify-content: space-around;
+ justify-content: center;
}
@media (min-width: 768px) {
#team > .container .row > div {min-height: 320px;}
diff --git a/css/styles_filter.css b/css/styles_filter.css
new file mode 100644
index 0000000..f59a5ac
--- /dev/null
+++ b/css/styles_filter.css
@@ -0,0 +1,657 @@
+/*.ol, ul {
+ margin-top: 0;
+ margin-bottom: 10px;
+ display: grid;
+ grid-template-columns: repeat(2, 2fr);
+ align-items: start;
+}*/
+
+/* --------------------------------
+
+Main Components
+
+-------------------------------- */
+.cd-header {
+ position: relative;
+ height: 150px;
+ background-color: #331d35;
+}
+.cd-header h1 {
+ color: #ffffff;
+ line-height: 150px;
+ text-align: center;
+ font-size: 2.4rem;
+ font-weight: 300;
+}
+@media only screen and (min-width: 1170px) {
+ .cd-header {
+ height: 180px;
+ }
+ .cd-header h1 {
+ line-height: 180px;
+ }
+}
+
+.cd-main-content {
+ position: relative;
+ min-height: 100vh;
+}
+.cd-main-content:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+.cd-main-content.is-fixed .cd-tab-filter-wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+}
+.cd-main-content.is-fixed .cd-gallery {
+ padding-top: 76px;
+}
+.cd-main-content.is-fixed .cd-filter {
+ position: fixed;
+ height: 100vh;
+ overflow: hidden;
+}
+.cd-main-content.is-fixed .cd-filter form {
+ height: 100vh;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+}
+.cd-main-content.is-fixed .cd-filter-trigger {
+ position: fixed;
+}
+@media only screen and (min-width: 768px) {
+ .cd-main-content.is-fixed .cd-gallery {
+ padding-top: 90px;
+ }
+}
+@media only screen and (min-width: 1170px) {
+ .cd-main-content.is-fixed .cd-gallery {
+ padding-top: 100px;
+ }
+}
+
+/* --------------------------------
+
+xtab-filter
+
+-------------------------------- */
+.cd-tab-filter-wrapper {
+ background-color: #03467b;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+ z-index: 1;
+ opacity: 0.9;
+}
+.cd-tab-filter-wrapper:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+.cd-tab-filter {
+ /* tabbed navigation style on mobile - dropdown */
+ position: relative;
+ height: 50px;
+ width: 140px;
+ margin: 0 auto;
+ z-index: 1;
+}
+.cd-tab-filter::after {
+ /* small arrow icon */
+ content: '';
+ position: absolute;
+ right: 14px;
+ top: 50%;
+ bottom: auto;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+ display: block;
+ width: 16px;
+ height: 16px;
+ background: url("../img/cd-icon-arrow.svg") no-repeat center center;
+ -webkit-transition: all 0.3s;
+ -moz-transition: all 0.3s;
+ transition: all 0.3s;
+ pointer-events: none;
+}
+.cd-tab-filter ul {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: #ffffff;
+ box-shadow: inset 0 -2px 0 #41307c;
+}
+.cd-tab-filter li {
+ display: none;
+}
+.cd-tab-filter li:first-child {
+ /* this way the placehodler is alway visible */
+ display: block;
+}
+.cd-tab-filter a {
+ display: block;
+ /* set same size of the .cd-tab-filter */
+ height: 50px;
+ width: 140px;
+ line-height: 50px;
+ padding-right: 60px;
+}
+.cd-tab-filter a.selected {
+ background: #fff;
+ color: #ffffff;
+}
+.cd-tab-filter.is-open::after {
+ /* small arrow rotation */
+ -webkit-transform: translateY(-50%) rotate(-180deg);
+ -moz-transform: translateY(-50%) rotate(-180deg);
+ -ms-transform: translateY(-50%) rotate(-180deg);
+ -o-transform: translateY(-50%) rotate(-180deg);
+ transform: translateY(-50%) rotate(-180deg);
+}
+.cd-tab-filter.is-open ul {
+ box-shadow: inset 0 -2px 0 #41307c, 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+.cd-tab-filter.is-open ul li {
+ display: block;
+}
+.cd-tab-filter.is-open .placeholder a {
+ /* reduces the opacity of the placeholder on mobile when the menu is open */
+ opacity: .4;
+}
+@media only screen and (min-width: 768px) {
+ .cd-tab-filter {
+ /* tabbed navigation style on medium devices */
+ width: auto;
+ cursor: auto;
+ }
+ .cd-tab-filter::after {
+ /* hide the arrow */
+ display: none;
+ }
+ .cd-tab-filter ul {
+ background: transparent;
+ position: static;
+ box-shadow: none;
+ text-align: center;
+ }
+ .cd-tab-filter li {
+ display: inline-flex;
+ }
+ .cd-tab-filter li.placeholder {
+ display: none !important;
+ }
+ .cd-tab-filter a {
+ display: block;
+ padding: 0 1em;
+ width: auto;
+ color: #9a9a9a;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 1.3rem;
+ }
+ .no-touch .cd-tab-filter a:hover {
+ color: #fff;
+ }
+ .cd-tab-filter a.selected {
+ background: transparent;
+ color: #fff;
+ /* create border bottom using box-shadow property */
+ box-shadow: inset 0 -2px 0 #fff;
+ }
+ .cd-tab-filter.is-open ul li {
+ display: inline-block;
+ }
+}
+@media only screen and (min-width: 1170px) {
+ .cd-tab-filter {
+ /* tabbed navigation on big devices */
+ width: 105%;
+ float: right;
+ margin: 0;
+ -webkit-transition: width 0.3s;
+ -moz-transition: width 0.3s;
+ transition: width 0.3s;
+ }
+ .cd-tab-filter.filter-is-visible {
+ /* reduce width when filter is visible */
+ width: 80%;
+ }
+}
+
+/* --------------------------------
+
+xgallery
+
+-------------------------------- */
+.cd-gallery {
+ padding: 26px 5%;
+ width: 100%;
+}
+.cd-gallery li {
+ margin-bottom: 1.6em;
+ margin-left: 1.9em;
+ display: none;
+}
+.cd-gallery li.gap {
+ /* used in combination with text-align: justify to align gallery elements */
+ opacity: 0;
+ height: 0;
+ display: block;
+}
+.cd-gallery .cd-fail-message {
+ display: none;
+ text-align: center;
+}
+
+@media only screen and (min-width: 360px) {
+ .cd-gallery {
+ padding: 30px 3%;
+ float: left;
+ -webkit-transition: width 0.3s;
+ -moz-transition: width 0.3s;
+ transition: width 0.3s;
+ }
+ .cd-gallery ul {
+ text-align: center;
+ display: grid;
+ grid-template-columns: repeat(1, 1fr);
+ }
+ .cd-gallery ul:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+ .cd-gallery li {
+ margin-bottom: 2em;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .cd-gallery {
+ padding: 30px 3%;
+ float: left;
+ -webkit-transition: width 0.3s;
+ -moz-transition: width 0.3s;
+ transition: width 0.3s;
+ }
+ .cd-gallery ul {
+ text-align: center;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .cd-gallery ul:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+ .cd-gallery li {
+ width: 25%;
+ margin-bottom: 2em;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+@media only screen and (min-width: 1170px) {
+ .cd-gallery {
+ padding: 20px 2%;
+ float: left;
+ -webkit-transition: width 0.3s;
+ -moz-transition: width 0.3s;
+ transition: width 0.3s;
+ }
+
+ .cd-gallery ul {
+ text-align: center;
+ display: grid;
+ grid-template-columns: repeat(3, 2fr);
+ margin-top: 30px;
+ }
+
+ .cd-gallery li {
+ width: 25%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .cd-gallery.filter-is-visible {
+ /* reduce width when filter is visible */
+ width: 80%;
+ }
+}
+
+/* --------------------------------
+
+xfilter
+
+-------------------------------- */
+.cd-filter {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 280px;
+ height: 100%;
+ background: #ffffff;
+ box-shadow: 4px 4px 20px transparent;
+ z-index: 2;
+ /* Force Hardware Acceleration in WebKit */
+ -webkit-transform: translateZ(0);
+ -moz-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ -o-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-transform: translateX(-100%);
+ -moz-transform: translateX(-100%);
+ -ms-transform: translateX(-100%);
+ -o-transform: translateX(-100%);
+ transform: translateX(-100%);
+ -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
+ -moz-transition: -moz-transform 0.3s, box-shadow 0.3s;
+ transition: transform 0.3s, box-shadow 0.3s;
+}
+.cd-filter::before {
+ /* top colored bar */
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 50px;
+ width: 100%;
+ background-color: #41307c;
+ z-index: 2;
+}
+.cd-filter form {
+ padding: 70px 20px;
+}
+.cd-filter .cd-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 50px;
+ line-height: 50px;
+ width: 60px;
+ color: #ffffff;
+ font-size: 1.3rem;
+ text-align: center;
+ background: #37296a;
+ opacity: 0;
+ -webkit-transition: opacity 0.3s;
+ -moz-transition: opacity 0.3s;
+ transition: opacity 0.3s;
+ z-index: 3;
+}
+.no-touch .cd-filter .cd-close:hover {
+ background: #32255f;
+}
+.cd-filter.filter-is-visible {
+ -webkit-transform: translateX(0);
+ -moz-transform: translateX(0);
+ -ms-transform: translateX(0);
+ -o-transform: translateX(0);
+ transform: translateX(0);
+ box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
+}
+.cd-filter.filter-is-visible .cd-close {
+ opacity: 1;
+}
+@media only screen and (min-width: 1170px) {
+ .cd-filter {
+ width: 20%;
+ }
+ .cd-filter form {
+ padding: 70px 10%;
+ }
+}
+
+.cd-filter-trigger {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 50px;
+ line-height: 50px;
+ width: 60px;
+ /* image replacement */
+ overflow: hidden;
+ text-indent: 100%;
+ color: transparent;
+ white-space: nowrap;
+ background: transparent url("../img/cd-icon-filter.svg") no-repeat center center;
+ z-index: 3;
+}
+.cd-filter-trigger.filter-is-visible {
+ pointer-events: none;
+}
+@media only screen and (min-width: 1170px) {
+ .cd-filter-trigger {
+ width: auto;
+ left: 2%;
+ text-indent: 0;
+ color: #9a9a9a;
+ text-transform: uppercase;
+ font-size: 1.3rem;
+ font-weight: 700;
+ padding-left: 24px;
+ background-position: left center;
+ -webkit-transition: color 0.3s;
+ -moz-transition: color 0.3s;
+ transition: color 0.3s;
+ }
+ .no-touch .cd-filter-trigger:hover {
+ color: #41307c;
+ }
+ .cd-filter-trigger.filter-is-visible, .cd-filter-trigger.filter-is-visible:hover {
+ color: #ffffff;
+ }
+}
+
+/* --------------------------------
+
+xcustom form elements
+
+-------------------------------- */
+.cd-filter-block {
+ margin-bottom: 1.6em;
+}
+.cd-filter-block h4 {
+ /* filter block title */
+ position: relative;
+ margin-bottom: .2em;
+ padding: 10px 0 10px 20px;
+ color: #9a9a9a;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 1.3rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+}
+.no-touch .cd-filter-block h4:hover {
+ color: #41307c;
+}
+.cd-filter-block h4::before {
+ /* arrow */
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ width: 16px;
+ height: 16px;
+ background: url("../img/cd-icon-arrow.svg") no-repeat center center;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+ -webkit-transition: -webkit-transform 0.3s;
+ -moz-transition: -moz-transform 0.3s;
+ transition: transform 0.3s;
+}
+.cd-filter-block h4.closed::before {
+ -webkit-transform: translateY(-50%) rotate(-90deg);
+ -moz-transform: translateY(-50%) rotate(-90deg);
+ -ms-transform: translateY(-50%) rotate(-90deg);
+ -o-transform: translateY(-50%) rotate(-90deg);
+ transform: translateY(-50%) rotate(-90deg);
+}
+.cd-filter-block input, .cd-filter-block select,
+.cd-filter-block .radio-label::before,
+.cd-filter-block .checkbox-label::before {
+ /* shared style for input elements */
+ font-family: "Open Sans", sans-serif;
+ border-radius: 0;
+ background-color: #ffffff;
+ border: 2px solid #e6e6e6;
+}
+.cd-filter-block input[type='search'],
+.cd-filter-block input[type='text'],
+.cd-filter-block select {
+ width: 100%;
+ padding: .8em;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+ box-shadow: none;
+}
+.cd-filter-block input[type='search']:focus,
+.cd-filter-block input[type='text']:focus,
+.cd-filter-block select:focus {
+ outline: none;
+ background-color: #ffffff;
+ border-color: #41307c;
+}
+.cd-filter-block input[type='search'] {
+ /* custom style for the search element */
+ border-color: transparent;
+ background-color: #e6e6e6;
+ /* prevent jump - ios devices */
+ font-size: 1.6rem !important;
+}
+.cd-filter-block input[type='search']::-webkit-search-cancel-button {
+ display: none;
+}
+.cd-filter-block .cd-select {
+ /* select element wrapper */
+ position: relative;
+}
+.cd-filter-block .cd-select::after {
+ /* switcher arrow for select element */
+ content: '';
+ position: absolute;
+ z-index: 1;
+ right: 14px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+ display: block;
+ width: 16px;
+ height: 16px;
+ background: url("../img/cd-icon-arrow.svg") no-repeat center center;
+ pointer-events: none;
+}
+.cd-filter-block select {
+ cursor: pointer;
+ font-size: 1.4rem;
+}
+.cd-filter-block select::-ms-expand {
+ display: none;
+}
+.cd-filter-block .list li {
+ position: relative;
+ margin-bottom: .8em;
+}
+.cd-filter-block .list li:last-of-type {
+ margin-bottom: 0;
+}
+.cd-filter-block input[type=radio],
+.cd-filter-block input[type=checkbox] {
+ /* hide original check and radio buttons */
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 0;
+ padding: 0;
+ opacity: 0;
+ z-index: 2;
+}
+.cd-filter-block .checkbox-label,
+.cd-filter-block .radio-label {
+ padding-left: 24px;
+ font-size: 1.4rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.cd-filter-block .checkbox-label::before, .cd-filter-block .checkbox-label::after,
+.cd-filter-block .radio-label::before,
+.cd-filter-block .radio-label::after {
+ /* custom radio and check boxes */
+ content: '';
+ display: block;
+ position: absolute;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -moz-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ -o-transform: translateY(-50%);
+ transform: translateY(-50%);
+}
+.cd-filter-block .checkbox-label::before,
+.cd-filter-block .radio-label::before {
+ width: 16px;
+ height: 16px;
+ left: 0;
+}
+.cd-filter-block .checkbox-label::after,
+.cd-filter-block .radio-label::after {
+ /* check mark - hidden */
+ display: none;
+}
+.cd-filter-block .checkbox-label::after {
+ /* check mark style for check boxes */
+ width: 16px;
+ height: 16px;
+ background: url("../img/cd-icon-check.svg") no-repeat center center;
+}
+.cd-filter-block .radio-label::before,
+.cd-filter-block .radio-label::after {
+ border-radius: 50%;
+}
+.cd-filter-block .radio-label::after {
+ /* check mark style for radio buttons */
+ width: 6px;
+ height: 6px;
+ background-color: #ffffff;
+ left: 5px;
+}
+.cd-filter-block input[type=radio]:checked + label::before,
+.cd-filter-block input[type=checkbox]:checked + label::before {
+ border-color: #41307c;
+ background-color: #41307c;
+}
+.cd-filter-block input[type=radio]:checked + label::after,
+.cd-filter-block input[type=checkbox]:checked + label::after {
+ display: block;
+}
+
+@-moz-document url-prefix() {
+ /* hide custom arrow on Firefox - select element */
+ .cd-filter-block .cd-select::after {
+ display: none;
+ }
+}