Add general search and refactor header
This commit is contained in:
Marcel
@@ -1,12 +1,281 @@
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
justify-content: normal;
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px auto 50px 50px;
|
||||
grid-template-areas: "menuButton . center firstAction secondAction";
|
||||
grid-gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
margin-left: auto;
|
||||
margin-top: 17px;
|
||||
.navbar.loggedIn {
|
||||
grid-template-columns: 180px 50px 50px auto 50px 50px 180px;
|
||||
grid-template-areas: "menuButton . . center firstAction secondAction thirdAction";
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container {
|
||||
grid-area: center;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container .navbar-logo {
|
||||
position: relative;
|
||||
min-width: 240px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
transition: opacity .25s;
|
||||
}
|
||||
|
||||
.navbar.search-open .navbar-logo-container .navbar-logo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container .navbar-logo-svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
-o-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.navbar .navbar-logo-container .navbar-logo-title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 50%;
|
||||
transform: translate(calc(-50% + 100px), -50%);
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
font-size: 24px;
|
||||
text-transform: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .navbar-action {
|
||||
height: auto;
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar .navbar-action:nth-child(4) {
|
||||
grid-area: firstAction;
|
||||
}
|
||||
|
||||
.navbar .navbar-action:nth-child(5) {
|
||||
grid-area: secondAction;
|
||||
}
|
||||
|
||||
.navbar .navbar-action:nth-child(6) {
|
||||
grid-area: thirdAction;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn:active,
|
||||
.navbar .navbar-action-btn:focus {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.navbar .navbar-action-btn:hover {
|
||||
color: #ddd !important;
|
||||
}
|
||||
|
||||
.navbar-action-btn #login-icon .z {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.navbar-action-btn:hover #logo-icon .z {
|
||||
fill: #ddd;
|
||||
}
|
||||
|
||||
.navbar-action-btn:hover #login-icon .y {
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
-ms-transition: all .2s;
|
||||
-o-transition: all .2s;
|
||||
transition: all .2s;
|
||||
transform: translate(0, 0);
|
||||
animation: arrow-pointing 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes arrow-pointing {
|
||||
50% {
|
||||
-webkit-transform: translate(-140px, 0);
|
||||
-moz-transform: translate(-140px, 0);
|
||||
-ms-transform: translate(-140px, 0);
|
||||
-o-transform: translate(-140px, 0);
|
||||
transform: translate(-140px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Logo animation
|
||||
*/
|
||||
|
||||
.navbar-logo svg, .navbar-logo svg .a {
|
||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .b {
|
||||
-webkit-transform: translateX(-100px);
|
||||
-moz-transform: translateX(-100px);
|
||||
-ms-transform: translateX(-100px);
|
||||
-o-transform: translateX(-100px);
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .c {
|
||||
-webkit-transform: translateX(100px);
|
||||
-moz-transform: translateX(100px);
|
||||
-ms-transform: translateX(100px);
|
||||
-o-transform: translateX(100px);
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .d {
|
||||
animation: bouncing 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes bouncing {
|
||||
14% {
|
||||
transform: translate(90px, 10px);
|
||||
}
|
||||
28% {
|
||||
transform: translate(-45px, 50px);
|
||||
}
|
||||
42% {
|
||||
transform: translate(-22px, -76px);
|
||||
}
|
||||
56% {
|
||||
transform: translate(96px, -29px);
|
||||
}
|
||||
70% {
|
||||
transform: translate(-63px, 34px);
|
||||
}
|
||||
84% {
|
||||
transform: translate(-40px, -56px);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-logo:hover .navbar-logo-title {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(calc(-50% + 55px), -50%);
|
||||
}
|
||||
|
||||
.navbar-logo:hover .navbar-logo-svg {
|
||||
transform: translateX(calc(-50% - 55px));
|
||||
}
|
||||
|
||||
#searchButton > i.fa {
|
||||
transform-origin: 25% 25%;
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
#searchButton:hover i.fa {
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
-moz-transform: rotateZ(360deg);
|
||||
-ms-transform: rotateZ(360deg);
|
||||
-o-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
|
||||
.navbar .navbar-search {
|
||||
pointer-events: none;
|
||||
grid-area: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.navbar .navbar-search input.form-control {
|
||||
width: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
transition: all .25s;
|
||||
opacity: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navbar.search-open .navbar-search {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.navbar.search-open .navbar-search input.form-control {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#userMenuButton {
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
background: white;
|
||||
color: #444 !important;
|
||||
border-radius: 25px;
|
||||
padding: 4px 25px 4px 4px;
|
||||
}
|
||||
|
||||
#userMenuButton img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.navbar {
|
||||
grid-template-columns: 50px 50px 50px auto 50px 50px 50px;
|
||||
}
|
||||
|
||||
/*.navbar-content {*/
|
||||
/*transform: scale(.75) translateX(25px);*/
|
||||
/*margin-top: -8px;*/
|
||||
/*}*/
|
||||
|
||||
#userMenuButton {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#userMenuButton::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#userMenuButton text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*.navbar {*/
|
||||
/*height: 60px;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content {*/
|
||||
/*margin-left: auto;*/
|
||||
/*margin-top: 17px;*/
|
||||
/*}*/
|
||||
|
||||
.menu-icon span, .menu-icon:before, .menu-icon:after, .menu-icon span:before, .menu-icon span:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -98,65 +367,73 @@
|
||||
}
|
||||
|
||||
/* Navbar brand svg */
|
||||
.navbar-brand {
|
||||
padding: 7px;
|
||||
transition: padding 0.3s;
|
||||
}
|
||||
/*.navbar-brand {*/
|
||||
/*padding: 7px;*/
|
||||
/*transition: padding 0.3s;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-brand svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 45px;
|
||||
}
|
||||
/*.navbar-brand svg {*/
|
||||
/*position: absolute;*/
|
||||
/*left: 50%;*/
|
||||
/*transform: translateX(-50%);*/
|
||||
/*height: 45px;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content {
|
||||
height: 60px;
|
||||
margin-top: 0;
|
||||
}
|
||||
/*.navbar-content {*/
|
||||
/*height: 60px;*/
|
||||
/*margin-top: 0;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul {
|
||||
list-style: none;
|
||||
cursor: default;
|
||||
height: 60px;
|
||||
margin: 0;
|
||||
}
|
||||
/*.navbar-content ul {*/
|
||||
/*display: grid;*/
|
||||
/*grid-template-columns: 1fr 2fr auto;*/
|
||||
/*align-items: center;*/
|
||||
/*grid-gap: 10px;*/
|
||||
/*list-style: none;*/
|
||||
/*cursor: default;*/
|
||||
/*height: 60px;*/
|
||||
/*margin: 0;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li {
|
||||
display: inline-block;
|
||||
font-size: 30px;
|
||||
margin: 0 10px;
|
||||
height: 60px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/*.navbar-content ul li {*/
|
||||
/*display: block;*/
|
||||
/*height: auto;*/
|
||||
/*font-size: 30px;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li a.navbar-link {
|
||||
display: block;
|
||||
height: 48px;
|
||||
margin: 6px 0;
|
||||
color: #fff !important;
|
||||
}
|
||||
/*.navbar-content ul li a.navbar-link {*/
|
||||
/*display: block;*/
|
||||
/*height: auto;*/
|
||||
/*color: #fff !important;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li #notificationMenuButton {
|
||||
height: 30px;
|
||||
margin: 9px -14px 9px 0;
|
||||
}
|
||||
/*.navbar-content ul li #notificationMenuButton {*/
|
||||
/*height: 30px;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li:hover a.navbar-link,
|
||||
.navbar-content ul li:active a.navbar-link,
|
||||
.navbar-content ul li:focus a.navbar-link {
|
||||
color: #ddd !important;
|
||||
}
|
||||
/*.navbar-content ul li #notificationMenuButton .fa {*/
|
||||
/*display: block;*/
|
||||
/*margin: 0 auto;*/
|
||||
/*}*/
|
||||
|
||||
.navbar-content ul li .badge {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
transform: translate(-50%, -75%);
|
||||
}
|
||||
|
||||
.navbar-content ul li .badge:empty {
|
||||
opacity: 0;
|
||||
}
|
||||
/*.navbar-content ul li:hover a.navbar-link,*/
|
||||
/*.navbar-content ul li:active a.navbar-link,*/
|
||||
/*.navbar-content ul li:focus a.navbar-link {*/
|
||||
/*color: #ddd !important;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li .badge {*/
|
||||
/*position: absolute;*/
|
||||
/*top: 0;*/
|
||||
/*right: 0;*/
|
||||
/*font-size: 14px;*/
|
||||
/*transform: translate(25%, -50%);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-content ul li .badge:empty {*/
|
||||
/*opacity: 0;*/
|
||||
/*}*/
|
||||
|
||||
#notificationMenu {
|
||||
width: 360px;
|
||||
@@ -179,26 +456,7 @@
|
||||
background-color: #2272ff;
|
||||
}
|
||||
|
||||
#userMenuButton {
|
||||
font-size: 18px;
|
||||
background: white;
|
||||
color: #444 !important;
|
||||
border-radius: 25px;
|
||||
vertical-align: middle;
|
||||
padding: 4px 25px 5px 0;
|
||||
}
|
||||
|
||||
#userMenuButton img {
|
||||
height: 100%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.navbar-content {
|
||||
transform: scale(.75) translateX(25px);
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
top: 8px;
|
||||
@@ -294,33 +552,7 @@
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#login-icon .z {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.navbar-link:hover #logo-icon .z {
|
||||
fill: #ddd;
|
||||
}
|
||||
|
||||
.navbar-link:hover #login-icon .y {
|
||||
-webkit-transition: all .2s;
|
||||
-moz-transition: all .2s;
|
||||
-ms-transition: all .2s;
|
||||
-o-transition: all .2s;
|
||||
transition: all .2s;
|
||||
transform: translate(0, 0);
|
||||
animation: arrow-pointing 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes arrow-pointing {
|
||||
50% {
|
||||
-webkit-transform: translate(-140px, 0);
|
||||
-moz-transform: translate(-140px, 0);
|
||||
-ms-transform: translate(-140px, 0);
|
||||
-o-transform: translate(-140px, 0);
|
||||
transform: translate(-140px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link svg, .navbar-link i {
|
||||
display: block;
|
||||
|
||||
@@ -62,7 +62,7 @@ body > section {
|
||||
}
|
||||
|
||||
.primary a:not(.btn):hover, .secondary a:not(.btn):hover, .section-red a:not(.btn):hover, .section-green a:not(.btn):hover, .section-orange a:not(.btn):hover {
|
||||
color: rgba(255,255,255,.5) !important;
|
||||
color: rgba(255, 255, 255, .5) !important;
|
||||
}
|
||||
|
||||
.primary .btn.btn-default, .secondary .btn.btn-default, .section-red .btn.btn-default, .section-green .btn.btn-default, .section-orange .btn.btn-default {
|
||||
@@ -137,7 +137,7 @@ body > section {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: inset 0 0 20px 5px rgba(0,0,0,.18);
|
||||
box-shadow: inset 0 0 20px 5px rgba(0, 0, 0, .18);
|
||||
}
|
||||
|
||||
.embed-container {
|
||||
@@ -312,6 +312,132 @@ ul.tag-cloud li {
|
||||
background-color: #F72754;
|
||||
}
|
||||
|
||||
.loadingSpinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #2272ff url('/assets/images/logo_little_transparent.png');
|
||||
background-size: cover;
|
||||
margin: 40px auto;
|
||||
-webkit-animation: loadingAnimation 2.4s infinite ease-in-out;
|
||||
-o-animation: loadingAnimation 2.4s infinite ease-in-out;
|
||||
animation: loadingAnimation 2.4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.loadingSpinner.failed {
|
||||
background-color: #F72754;
|
||||
animation: loadingAnimationFailed .6s;
|
||||
}
|
||||
|
||||
.loadingSpinner.success {
|
||||
animation: loadingAnimationSucceeded 1.2s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimationSucceeded {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
50% {
|
||||
|
||||
transform: none;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateY(-10px);
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimationFailed {
|
||||
0% {
|
||||
transform: none;
|
||||
|
||||
}
|
||||
|
||||
16% {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
32% {
|
||||
transform: translateX(15px);
|
||||
|
||||
}
|
||||
|
||||
48% {
|
||||
transform: translateX(-15px);
|
||||
|
||||
}
|
||||
|
||||
64% {
|
||||
transform: translateX(15px);
|
||||
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(-15px);
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
color: #fff;
|
||||
@@ -468,7 +594,6 @@ ul.social > li > a:hover {
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.img {
|
||||
margin: 2em auto;
|
||||
width: 100%;
|
||||
@@ -1049,7 +1174,6 @@ blockquote {
|
||||
}
|
||||
|
||||
|
||||
|
||||
#downloadSlider img {
|
||||
max-height: 240px;
|
||||
}
|
||||
@@ -1213,7 +1337,7 @@ ul#downloadSlider a.active .overlay {
|
||||
}
|
||||
|
||||
.comment-list .comment-well .action-btns .action-btn:last-child,
|
||||
.postFullviewModal .action-btns .action-btn:last-child{
|
||||
.postFullviewModal .action-btns .action-btn:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@@ -1481,6 +1605,82 @@ ul#downloadSlider a.active .overlay {
|
||||
z-index: 1030;
|
||||
}
|
||||
|
||||
/*.navbar-search {*/
|
||||
/*position: absolute;*/
|
||||
/*width: 38px;*/
|
||||
/*height: 38px;*/
|
||||
/*margin: 11px 0;*/
|
||||
/*top: 0;*/
|
||||
/*left: 84%;*/
|
||||
/*transform: translateX(-100%) translateX(-38px);*/
|
||||
/*!*transform: translateX(-100%);*!*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search.active {*/
|
||||
/*width: 77%;*/
|
||||
/*transform: translateX(-100%);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search.active {*/
|
||||
/*width: 77%;*/
|
||||
/*transform: translateX(-100%);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search .input-group {*/
|
||||
/*display: grid;*/
|
||||
/*grid-template-columns: calc(100% - 76px) 38px 38px;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search input {*/
|
||||
/*width: 100% !important;*/
|
||||
/*text-align: center;*/
|
||||
/*padding: 0;*/
|
||||
/*border: none;*/
|
||||
/*border-radius: 4px !important;*/
|
||||
/*opacity: 0;*/
|
||||
/*transform: scaleX(0);*/
|
||||
/*-webkit-transform-origin: 100% 50%;*/
|
||||
/*-moz-transform-origin: 100% 50%;*/
|
||||
/*-ms-transform-origin: 100% 50%;*/
|
||||
/*-o-transform-origin: 100% 50%;*/
|
||||
/*transform-origin: 100% 50%;*/
|
||||
/*transition: all .5s;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search.active input {*/
|
||||
/*transform: none;*/
|
||||
/*padding: .375rem .75rem;*/
|
||||
/*opacity: 1;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search button {*/
|
||||
/*width: 38px;*/
|
||||
/*padding: .375rem 0;*/
|
||||
/*border: none;*/
|
||||
/*background: none;*/
|
||||
/*color: #fff;*/
|
||||
/*transition: transform .25s;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search button:hover, .navbar-search button:active, .navbar-search button:focus {*/
|
||||
/*color: #fff !important;*/
|
||||
/*background: none !important;*/
|
||||
/*transform: scale(1.5);*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search .btn-reset {*/
|
||||
/*!*display: none;*!*/
|
||||
/*pointer-events: none;*/
|
||||
/*opacity: 0;*/
|
||||
/*transition: transform .25s, opacity .25s;*/
|
||||
/*}*/
|
||||
|
||||
/*.navbar-search.active .btn-reset {*/
|
||||
/*!*display: inline;*!*/
|
||||
/*pointer-events: all;*/
|
||||
/*opacity: 1;*/
|
||||
/*}*/
|
||||
|
||||
.btn-floating {
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
@@ -1900,7 +2100,7 @@ ul#downloadSlider a.active .overlay {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
z-index: 1100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -1969,4 +2169,219 @@ ul#downloadSlider a.active .overlay {
|
||||
background-size: cover;
|
||||
border-radius: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.video-container .video {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.video-container .video-controls {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
grid-template-columns: 25px 25px 50px auto 50px 25px;
|
||||
grid-gap: 5px;
|
||||
bottom: 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: linear-gradient(0, rgba(0, 0, 0, .5), transparent);
|
||||
padding: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity .5s;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.video-container:hover .video-controls {
|
||||
opacity: 1;
|
||||
transition: opacity .25s;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-control-btn {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-volume-container {
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-volume-container:hover .video-volume {
|
||||
transform: rotateZ(-90deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.video-container .video-volume {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
padding: 5px 10px;
|
||||
height: 40px;
|
||||
width: 150px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
transform: rotateZ(-90deg) scaleX(0);
|
||||
-webkit-transform-origin: 0% 50%;
|
||||
-moz-transform-origin: 0% 50%;
|
||||
-ms-transform-origin: 0% 50%;
|
||||
-o-transform-origin: 0% 50%;
|
||||
transform-origin: 0% 50%;
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
transition: opacity .25s, transform .25s;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-time,
|
||||
.video-container .video-controls .video-length {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0px;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-webkit-slider-thumb {
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(13, 13, 13, 0.2);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus::-webkit-slider-runnable-track {
|
||||
background: rgba(26, 26, 26, 0.25);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0px;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(13, 13, 13, 0.2);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-track {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 0px;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-fill-upper {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 0px;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-thumb {
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(13, 13, 13, 0.2);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus::-ms-fill-upper {
|
||||
background: rgba(26, 26, 26, 0.25);
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-ms-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.video-container .video-controls .video-seek-bar::-webkit-slider-thumb,
|
||||
.video-container .video-controls .video-seek-bar::-moz-range-thumb,
|
||||
.video-container .video-controls .video-seek-bar::-ms-thumb {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 100%;
|
||||
border: 0 !important;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -356,4 +356,12 @@ $('#switchDarkmode').click(function (event) {
|
||||
$(this).find('.fa-moon').removeClass('far').addClass('fa');
|
||||
$(this).attr('data-title', 'Dark Theme')
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function addSnackbar(type, text) {
|
||||
const snackbar = $(`<div class="alert alert-${type} snackbar" role="alert" >${text}</div>`);
|
||||
$('.snackbar-container').append(snackbar);
|
||||
setTimeout(() => {
|
||||
snackbar.remove();
|
||||
}, 5500);
|
||||
}
|
||||
158
assets/js/search.js
Normal file
158
assets/js/search.js
Normal file
@@ -0,0 +1,158 @@
|
||||
let offset = 0;
|
||||
let query;
|
||||
let searching = {query: null, offset: 0, filters: []};
|
||||
const filters = [];
|
||||
let moreAvailable = true;
|
||||
|
||||
let executing = false;
|
||||
|
||||
function loadSearchResults() {
|
||||
if (executing) {
|
||||
setTimeout(() => loadSearchResults(), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!query || query.trim().length < 3) {
|
||||
$('.loadingSpinner').hide();
|
||||
$('.error-container .message').hide();
|
||||
$('.error-container .message-search-term').show();
|
||||
$('.error-container').show();
|
||||
return;
|
||||
}
|
||||
|
||||
if (searching.query === query && (searching.offset === offset || !moreAvailable) && searching.filters.length === filters.length) {
|
||||
$('.loadingSpinner').hide();
|
||||
return;
|
||||
}
|
||||
|
||||
if (query !== searching.query || searching.filters.length !== filters.length) {
|
||||
offset = 0;
|
||||
$('#searchResults').empty();
|
||||
}
|
||||
|
||||
$('.error-container').hide();
|
||||
$('.loadingSpinner').show();
|
||||
|
||||
console.log('executing with ', query);
|
||||
|
||||
searching = {
|
||||
query,
|
||||
offset,
|
||||
filters: filters.slice()
|
||||
};
|
||||
|
||||
executing = true;
|
||||
$.ajax({
|
||||
url: '/search/getSearchResults',
|
||||
method: 'POST',
|
||||
data: searching,
|
||||
success: data => {
|
||||
$('.loadingSpinner').hide();
|
||||
|
||||
if (data.error) {
|
||||
$('.error-container').show();
|
||||
$('.error-container .message').hide();
|
||||
$('.error-container .message-' + data.message).show();
|
||||
moreAvailable = false;
|
||||
} else {
|
||||
const searchResults = $('#searchResults');
|
||||
data.forEach(item => {
|
||||
searchResults.append(`
|
||||
<li class="card mb-2">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
<a href="${item.url}">
|
||||
<span class="badge badge-primary">
|
||||
${item.type}
|
||||
</span>
|
||||
${item.title}
|
||||
</a>
|
||||
</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">
|
||||
<i class="fa fa-clock"></i> ${item.date}
|
||||
${item.showUser ? `
|
||||
-
|
||||
<a href="${item.authorUrl}" target="_blank">
|
||||
<i class="fa fa-user"></i> ${item.username}
|
||||
</a>
|
||||
` : ''}
|
||||
</h6>
|
||||
|
||||
${!!item.content ? `
|
||||
<p class="card-text">${item.content}</p>
|
||||
` : ''}
|
||||
</div>
|
||||
</li>
|
||||
`);
|
||||
});
|
||||
|
||||
registerScrollEvent();
|
||||
|
||||
if (data.length < 5)
|
||||
moreAvailable = false;
|
||||
}
|
||||
executing = false;
|
||||
},
|
||||
error: data => {
|
||||
console.log(data);
|
||||
$('.col').append(data.responseText);
|
||||
$('.loadingSpinner').hide();
|
||||
|
||||
$('.error-container .message').hide();
|
||||
$('.error-container .message-general').show();
|
||||
$('.error-container').show();
|
||||
|
||||
executing = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(() => {
|
||||
query = $('#searchTerm').val();
|
||||
loadSearchResults();
|
||||
});
|
||||
|
||||
let timeout;
|
||||
$('#searchTerm').on('change keyup', function () {
|
||||
query = $(this).val();
|
||||
const url = window.location.pathname + '?q=' + encodeURI(query);
|
||||
const title = document.title.split('-')[0] + ' ' + query + ' ' + document.title.split('|')[1];
|
||||
window.history.replaceState('', title, url);
|
||||
document.title = title;
|
||||
moreAvailable = true;
|
||||
|
||||
startTimeout();
|
||||
});
|
||||
|
||||
$('.filter > .list-group-item-action').on('click', function () {
|
||||
$(this).toggleClass('active');
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
filters.push($(this).data('filter'));
|
||||
} else {
|
||||
filters.splice(filters.indexOf($(this).data('filter')), 1);
|
||||
}
|
||||
|
||||
moreAvailable = true;
|
||||
|
||||
clearTimeout(timeout);
|
||||
loadSearchResults();
|
||||
});
|
||||
|
||||
function startTimeout() {
|
||||
clearTimeout(timeout);
|
||||
setTimeout(() => loadSearchResults(), 500);
|
||||
}
|
||||
|
||||
function registerScrollEvent() {
|
||||
const list = $('#searchResults');
|
||||
$(window).scroll(function () {
|
||||
if (!moreAvailable || executing)
|
||||
return;
|
||||
|
||||
if ($(document).scrollTop() + 360 + $(window).height() >= list.position().top + list.outerHeight()) {
|
||||
offset++;
|
||||
loadSearchResults();
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user