Add general search and refactor header
This commit is contained in:
Marcel
parent
3337dbbdcd
commit
2d6fa02b85
|
|
@ -81,4 +81,5 @@
|
||||||
$route['reset/(:any)/(:any)'] = 'login/reset/$1/$2';
|
$route['reset/(:any)/(:any)'] = 'login/reset/$1/$2';
|
||||||
$route['tools/twitch/(:any)'] = 'tools/twitch?twich-channel=$1';
|
$route['tools/twitch/(:any)'] = 'tools/twitch?twich-channel=$1';
|
||||||
$route['projects/(:any)'] = 'projects/index/$1';
|
$route['projects/(:any)'] = 'projects/index/$1';
|
||||||
|
$route['project/(:any)'] = 'projects/entry/$1';
|
||||||
$route['tools/encrypter/(:any)'] = 'tools/encrypter/index/$1';
|
$route['tools/encrypter/(:any)'] = 'tools/encrypter/index/$1';
|
||||||
53
application/controllers/Search.php
Normal file
53
application/controllers/Search.php
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
<?php
|
||||||
|
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||||
|
|
||||||
|
use Coduo\PHPHumanizer\DateTimeHumanizer;
|
||||||
|
|
||||||
|
class Search extends MY_Controller
|
||||||
|
{
|
||||||
|
|
||||||
|
public function __construct()
|
||||||
|
{
|
||||||
|
parent::__construct('home', 'profile');
|
||||||
|
$this->load->model('SearchModel', '', TRUE);
|
||||||
|
$this->load->model('UserModel', '', TRUE);
|
||||||
|
$this->load->model('PostsModel', '', TRUE);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function index()
|
||||||
|
{
|
||||||
|
$query = html_escape($this->input->get('q'));
|
||||||
|
|
||||||
|
$this->load->view('header', ['active' => 'search', 'title' => "Suche - $query", 'additionalStyles' => []]);
|
||||||
|
$this->load->view('search', ['query' => $query]);
|
||||||
|
$this->load->view('footer', ['additionalScripts' => ['search.js']]);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getSearchResults() {
|
||||||
|
header('Content-Type: application/json;charset=utf-8');
|
||||||
|
|
||||||
|
$query = $this->input->post('query');
|
||||||
|
|
||||||
|
if(strlen($query) < 3) {
|
||||||
|
echo json_encode(['error' => true, 'message' => 'search-term']);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$offset = filter_var($this->input->post('offset'), FILTER_VALIDATE_INT);
|
||||||
|
$filters = is_array($this->input->post('filters')) ? $this->input->post('filters') : [];
|
||||||
|
|
||||||
|
$results = $this->SearchModel->search($query, 5, $offset, $filters);
|
||||||
|
|
||||||
|
if(empty($results)) {
|
||||||
|
if($offset > 0) {
|
||||||
|
$message = 'no-further-results';
|
||||||
|
} else {
|
||||||
|
$message = 'no-results';
|
||||||
|
}
|
||||||
|
echo json_encode(['error' => true, 'message' => $message]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
echo json_encode($results, JSON_UNESCAPED_UNICODE);
|
||||||
|
}
|
||||||
|
}
|
||||||
10
application/language/de/search_lang.php
Normal file
10
application/language/de/search_lang.php
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?php
|
||||||
|
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||||
|
|
||||||
|
$lang['search_type_blogPost'] = 'Blog-Post';
|
||||||
|
$lang['search_type_blogCategory'] = 'Blog-Kategorie';
|
||||||
|
$lang['search_type_blogTag'] = 'Blog-Tag';
|
||||||
|
$lang['search_type_project'] = 'Projekt';
|
||||||
|
$lang['search_type_projectCategory'] = 'Projekt-Kategorie';
|
||||||
|
$lang['search_type_user'] = 'Nutzer';
|
||||||
|
$lang['search_type_userPost'] = 'Post';
|
||||||
205
application/models/SearchModel.php
Normal file
205
application/models/SearchModel.php
Normal file
|
|
@ -0,0 +1,205 @@
|
||||||
|
<?php
|
||||||
|
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||||
|
|
||||||
|
class SearchModel extends CI_Model
|
||||||
|
{
|
||||||
|
public function __construct()
|
||||||
|
{
|
||||||
|
parent::__construct();
|
||||||
|
$this->lang->load('search', $_SESSION['site_lang']);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function search($query, $amount, $offset, $filters)
|
||||||
|
{
|
||||||
|
$results = $this->getRawResults($query, $amount, $offset, $filters);
|
||||||
|
$results = $this->prepareResults($results);
|
||||||
|
return $results;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function getRawResults($query, $amount, $offset, $filters)
|
||||||
|
{
|
||||||
|
mb_language('uni');
|
||||||
|
mb_internal_encoding('UTF-8');
|
||||||
|
|
||||||
|
$lang = $_SESSION['site_lang'];
|
||||||
|
|
||||||
|
$query = strtolower($query);
|
||||||
|
$offset *= $amount;
|
||||||
|
|
||||||
|
list($sql, $attr) = $this->buildQuery($filters);
|
||||||
|
$attr = str_split($attr);
|
||||||
|
foreach ($attr as $i => $a) {
|
||||||
|
$a = $a === 'l' ? $lang : $query;
|
||||||
|
$attr[$i] = $a;
|
||||||
|
}
|
||||||
|
$attr[] = $amount;
|
||||||
|
$attr[] = $offset;
|
||||||
|
|
||||||
|
$this->db->cache_off();
|
||||||
|
$results = $this->db->query($sql, $attr)->result_array();
|
||||||
|
$this->db->cache_on();
|
||||||
|
|
||||||
|
return $results;
|
||||||
|
}
|
||||||
|
|
||||||
|
private function buildQuery($filters)
|
||||||
|
{
|
||||||
|
$attributes = '';
|
||||||
|
$query = 'SELECT a.*, u.username authorName, u.displayname authorDisplayname
|
||||||
|
FROM (';
|
||||||
|
|
||||||
|
$possibilities = [
|
||||||
|
'blogPost' => [
|
||||||
|
'sql' => 'SELECT "blogPost" type, bp.postUrl url, bp.postAuthorID author, bp.postImage image, bt.postTitle title, bt.postDesc content, bp.postPublishDate date
|
||||||
|
FROM blog_posts bp
|
||||||
|
INNER JOIN blog_translations bt ON bt.postID = bp.postID AND bt.language = ?
|
||||||
|
LEFT JOIN blog_content bc ON bc.postID = bp.postID AND bc.isActive = TRUE AND bc.language = ?
|
||||||
|
WHERE (LOWER(bt.postTitle) RLIKE ?
|
||||||
|
OR LOWER(bt.postDesc) RLIKE ?
|
||||||
|
OR LOWER(bc.content) RLIKE ?
|
||||||
|
OR bp.postID IN (SELECT bpt.post_id FROM blog_post_tags bpt WHERE bpt.tag_id IN(SELECT bt.ID FROM blog_tags bt WHERE bt.name RLIKE ? OR LOWER(bt.display_name) RLIKE ?))
|
||||||
|
OR (SELECT username FROM users WHERE ID = bp.postAuthorID) RLIKE ?
|
||||||
|
OR (SELECT display_name FROM blog_categories WHERE ID = bp.postCategoryID) RLIKE ?)
|
||||||
|
AND postState = 1 AND postIsDeleted = FALSE',
|
||||||
|
'attributes' => 'llqqqqqqq'
|
||||||
|
],
|
||||||
|
'blogCategory' => [
|
||||||
|
'sql' => 'SELECT "blogCategory" type, c.name url, 1 author, null image, c.display_name title, null content, null date
|
||||||
|
FROM blog_categories c
|
||||||
|
WHERE c.name RLIKE ? OR LOWER(c.display_name) RLIKE ?',
|
||||||
|
'attributes' => 'qq'
|
||||||
|
],
|
||||||
|
'blogTag' => [
|
||||||
|
'sql' => 'SELECT "blogTag" type, t.name url, 1 author, null image, t.display_name title, null content, null date
|
||||||
|
FROM blog_tags t
|
||||||
|
WHERE t.name RLIKE ? OR LOWER(t.display_name) RLIKE ?',
|
||||||
|
'attributes' => 'qq'
|
||||||
|
],
|
||||||
|
'user' => [
|
||||||
|
'sql' => 'SELECT "user" type, u.username url, u.ID author, u.header_image image, u.displayname title, u.about content, u.date_created date
|
||||||
|
FROM users u
|
||||||
|
WHERE (username RLIKE ?
|
||||||
|
OR lower(about) RLIKE ?)
|
||||||
|
AND is_activated AND isDeleted = FALSE',
|
||||||
|
'attributes' => 'qq',
|
||||||
|
],
|
||||||
|
'userPost' => [
|
||||||
|
'sql' => 'SELECT "userPost" type, p.uuid url, p.user_id author, null image, p.content title, null content, p.date date
|
||||||
|
FROM user_posts p
|
||||||
|
WHERE LOWER(p.content) RLIKE ?
|
||||||
|
OR (SELECT username FROM users WHERE ID = p.user_id) RLIKE ?',
|
||||||
|
'attributes' => 'qq',
|
||||||
|
],
|
||||||
|
'project' => [
|
||||||
|
'sql' => 'SELECT "project" type, p.name url, 1 as author, p.source image, t.title title, t.description content, p.datetime date
|
||||||
|
FROM projects p
|
||||||
|
INNER JOIN projects_translations t ON t.projectID = p.ID AND t.lang = ?
|
||||||
|
WHERE LOWER(t.title) RLIKE ?
|
||||||
|
OR LOWER(t.description) RLIKE ?
|
||||||
|
OR LOWER(t.content) RLIKE ?',
|
||||||
|
'attributes' => 'lqqq',
|
||||||
|
],
|
||||||
|
'projectCategory' => [
|
||||||
|
'sql' => 'SELECT "projectCategory" type, c.collection url, 1 author, null image, c.displayname title, c.displayname content, null date
|
||||||
|
FROM projects_categories c
|
||||||
|
WHERE lower(collection) RLIKE ?
|
||||||
|
OR lower(displayname) RLIKE ?',
|
||||||
|
'attributes' => 'qq'
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
$filters = array_intersect(array_keys($possibilities), $filters);
|
||||||
|
|
||||||
|
if (empty($filters))
|
||||||
|
$filters = array_keys($possibilities);
|
||||||
|
|
||||||
|
foreach ($filters as $filter) {
|
||||||
|
$data = $possibilities[$filter];
|
||||||
|
if (empty($data))
|
||||||
|
continue;
|
||||||
|
|
||||||
|
$query .= $data['sql'];
|
||||||
|
$query .= ' UNION ';
|
||||||
|
$attributes .= $data['attributes'];
|
||||||
|
}
|
||||||
|
|
||||||
|
$query = substr($query, 0, -6);
|
||||||
|
|
||||||
|
$query .= ') a
|
||||||
|
LEFT JOIN users u ON a.author = u.ID
|
||||||
|
ORDER BY date desc LIMIT ? OFFSET ?';
|
||||||
|
|
||||||
|
return [$query, $attributes];
|
||||||
|
}
|
||||||
|
|
||||||
|
private function prepareResults($results)
|
||||||
|
{
|
||||||
|
foreach ($results as $i => $result) {
|
||||||
|
list(
|
||||||
|
'author' => $author,
|
||||||
|
'authorDisplayname' => $displayname,
|
||||||
|
'authorName' => $username,
|
||||||
|
'content' => $content,
|
||||||
|
'date' => $date,
|
||||||
|
'image' => $image,
|
||||||
|
'title' => $title,
|
||||||
|
'type' => $type,
|
||||||
|
'url' => $url,
|
||||||
|
) = $result;
|
||||||
|
|
||||||
|
$date = date('d.m.Y', strtotime($date));
|
||||||
|
|
||||||
|
if (strlen($title) > 75) {
|
||||||
|
$title = utf8_encode($title);
|
||||||
|
$title = substr($title, 0, 75) . '...';
|
||||||
|
$title = utf8_decode($title);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (strlen($content) > 200) {
|
||||||
|
$content = utf8_encode($content);
|
||||||
|
$content = substr($content, 0, 200) . '...';
|
||||||
|
$content = utf8_decode($content);
|
||||||
|
}
|
||||||
|
|
||||||
|
$showUser = TRUE;
|
||||||
|
switch ($type) {
|
||||||
|
case 'blogPost':
|
||||||
|
$url = base_url('blog/post/' . $url);
|
||||||
|
break;
|
||||||
|
case 'project':
|
||||||
|
$url = base_url('project/' . $url);
|
||||||
|
break;
|
||||||
|
case 'projectCategory':
|
||||||
|
$url = base_url('projects/' . $url);
|
||||||
|
$showUser = FALSE;
|
||||||
|
break;
|
||||||
|
case 'user':
|
||||||
|
$url = base_url('user/' . $url);
|
||||||
|
break;
|
||||||
|
case 'userPost':
|
||||||
|
$url = base_url('user/' . $username . '/post/' . $url);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
$type = lang('search_type_' . $type);
|
||||||
|
|
||||||
|
$newArray = [
|
||||||
|
'showUser' => $showUser,
|
||||||
|
'username' => $displayname,
|
||||||
|
'authorUrl' => base_url('user/' . $username),
|
||||||
|
'content' => $content,
|
||||||
|
'date' => $date,
|
||||||
|
'image' => $image,
|
||||||
|
'title' => $title,
|
||||||
|
'type' => $type,
|
||||||
|
'url' => $url,
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
$results[$i] = $newArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $results;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -48,110 +48,111 @@
|
||||||
href="<?= base_url('lang/change/fr?r=' . urlencode(base64_encode(base_url(uri_string())))); ?>"
|
href="<?= base_url('lang/change/fr?r=' . urlencode(base64_encode(base_url(uri_string())))); ?>"
|
||||||
hreflang="fr">
|
hreflang="fr">
|
||||||
</head>
|
</head>
|
||||||
<!--/head-->
|
|
||||||
<body>
|
<body>
|
||||||
<header class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top <?= isset($active) && $active == 'profile' ? 'bg-custom' : '' ?>" role="banner">
|
<header class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top <?= isset($_SESSION['user']) ? 'loggedIn' : '' ?>" role="banner">
|
||||||
<a data-track-content data-content-name="Header Logo Link" class="navbar-brand"
|
<div>
|
||||||
href="<?= base_url(); ?>">
|
<button class="menu-icon">
|
||||||
<div class="logo-container">
|
<span></span>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 386.48" id="logo-container">
|
</button>
|
||||||
<defs>
|
|
||||||
<style>.a {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</defs>
|
|
||||||
<path class="a b"
|
|
||||||
d="M186,222.6V373.74A12.26,12.26,0,0,0,198.22,386H349.36A12.26,12.26,0,0,0,358,365.07L206.89,213.93A12.26,12.26,0,0,0,186,222.6Z" />
|
|
||||||
<path class="a b"
|
|
||||||
d="M349.36,0H198.22A12.26,12.26,0,0,0,186,12.26V163.4a12.26,12.26,0,0,0,20.93,8.67L358,20.93A12.26,12.26,0,0,0,349.36,0Z" />
|
|
||||||
<path class="a c"
|
|
||||||
d="M398.68,364.32,561,202a12.7,12.7,0,0,0,0-18L398.68,21.68a12.7,12.7,0,0,0-21.68,9V355.34A12.7,12.7,0,0,0,398.68,364.32Z" />
|
|
||||||
<circle class="a d" cx="296.65" cy="193.11" r="65.52" />
|
|
||||||
</svg>
|
|
||||||
<h1 id="logo-text">KingOfDog</h1>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<div class="navbar-content float-right">
|
|
||||||
<ul>
|
|
||||||
<?php if (isset($_SESSION['user'])): ?>
|
|
||||||
<li>
|
|
||||||
<div class="dropdown">
|
|
||||||
<a href="#" role="button" data-toggle="dropdown" data-offset="0,20" id="notificationMenuButton" aria-haspopup="true" aria-expanded="false" class="navbar-link">
|
|
||||||
<i class="fa fa-bell d-inline"></i>
|
|
||||||
<div class="badge badge-pill badge-success" id="notificationCount"></div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="notificationMenuButton" id="notificationMenu">
|
|
||||||
<div class="list-group list-group-flush">
|
|
||||||
<div class="text-center">
|
|
||||||
<i class="fa fa-cog fa-spin fa-4x my-4"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<?php if (!isset($_SESSION['user'])): ?>
|
|
||||||
<li>
|
|
||||||
<a href="<?= base_url('login') ?>" data-toggle="tooltip" data-placement="bottom"
|
|
||||||
data-placement="bottom" title="<?= lang('header_login') ?>"
|
|
||||||
class="navbar-link">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 926 534" id="login-icon">
|
|
||||||
<defs>
|
|
||||||
<style>.z {
|
|
||||||
fill: #fff;
|
|
||||||
}</style>
|
|
||||||
</defs>
|
|
||||||
<path class="z"
|
|
||||||
d="M522,52H649.16c4.09,0,8.18.07,12.26.41,1.36.11,3.53.76,4.85.51l-3.43-.44q1.6.25,3.2.54,4,.73,7.9,1.75t7.74,2.3c1.53.51,3,1.11,4.55,1.64q3.76,1.5-1.5-.69,1.48.64,2.94,1.33a110.44,110.44,0,0,1,14.06,7.91c1.35.9,2.65,1.86,4,2.78,4.67,3.24-4.19-3.7.07.08,2.33,2.07,4.71,4.07,6.93,6.27q2.53,2.5,4.88,5.17a30.9,30.9,0,0,0,2.77,3.31c-4.5-3.78-1.92-2.53-.44-.41s2.7,4.08,3.9,6.21q1.09,1.94,2.07,3.94l.64,1.35q1.62,3.64-.76-1.82c-.14.91,1.22,3.4,1.51,4.32q.69,2.22,1.24,4.49c.24,1,.44,2.06.66,3.08,1.22,5.53-.31-6,0-.25.2,3.63.31,7.23.31,10.87q0,7.64,0,15.29-.07,20.14-.19,40.29-.56,99.11-1.39,198.23c-.14,17.88.83,36.23-.57,54.06-.18,2.26-1.34,4.9.51-3.52-.19.87-.28,1.78-.44,2.65q-.47,2.5-1.1,5-.72,2.81-1.65,5.55c-.41,1.21-.87,2.39-1.3,3.58-1.41,3.91,2.76-5.85-.23.36A96.41,96.41,0,0,1,715,451.8l-1,1.42q-2.42,3.24.58-.75c-.69,1.5-2.63,3.13-3.73,4.35q-3.17,3.51-6.61,6.77c-1.87,1.77-3.82,3.43-5.79,5.09-4.18,3.52,4.74-3.25.24-.21-1.25.84-2.46,1.73-3.72,2.55q-3.12,2-6.4,3.82-2,1.06-4,2l-1.34.63q-3.64,1.62,1.89-.77c-2.67.27-5.8,2.12-8.43,2.86q-3.6,1-7.29,1.72l-1.49.27q-4.05.64,2.13-.24a18,18,0,0,0-3.06.31c-3.14.27-6.27.31-9.42.3q-64.57-.18-129.14-.44l-4.45,0c-13.08,0-25.6,11.53-25,25s11,25,25,25l130.89.45c18.9.06,36.4-3.38,53.59-11.28,24.3-11.17,46.2-33.31,57.78-57.32,7.8-16.18,11.16-32.14,11.27-50,0-7.92.13-15.84.19-23.76q.78-98.3,1.42-196.6c.16-26.49.43-53,.36-79.46C779.35,56.38,728.57,12.07,674.53,4,651,.54,626.78,2,603.11,2H522c-13.08,0-25.6,11.5-25,25s11,25,25,25Z" />
|
|
||||||
<path class="z y"
|
|
||||||
d="M171,162H357V41s4-24,25-24c0,0,8-1,17,5L628,251s7,5,7,17c0,0-1,13-8,18L400,513s-10,11-28,4c0,0-15-9-15-23V374H171a27.74,27.74,0,0,1-18-8c-8-8-8-19-8-19V185s2-12,10-17S169,162,171,162Z" />
|
|
||||||
</svg>
|
|
||||||
<span><?= lang('header_login') ?></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<?php if (isset($_SESSION['user'])): ?>
|
|
||||||
<li>
|
|
||||||
<div class="dropdown">
|
|
||||||
<a href="" class="navbar-link dropdown-toggle" data-toggle="dropdown" id="userMenuButton" aria-haspopup="true" aria-expanded="false" role="button">
|
|
||||||
<img src="<?= $_SESSION['user']['profilePic'] ?>?w=100" alt="" class="img-fluid rounded-circle">
|
|
||||||
<?= $_SESSION['user']['displayname'] ?>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenuButton" id="userMenu">
|
|
||||||
<a href="<?= base_url('user/' . $_SESSION['user']['username']) ?>" class="dropdown-item">
|
|
||||||
<i class="fa fa-user"></i>
|
|
||||||
<?= lang('header_profile') ?>
|
|
||||||
</a>
|
|
||||||
<a href="<?= base_url('user/' . $_SESSION['user']['username'] . '/edit') ?>" class="dropdown-item">
|
|
||||||
<i class="fa fa-user-edit"></i>
|
|
||||||
<?= lang('header_edit_profile') ?>
|
|
||||||
</a>
|
|
||||||
<?php if (get_instance()->hasPermission('dashboard.view')): ?>
|
|
||||||
<a href="<?= base_url('admin') ?>" class="dropdown-item">
|
|
||||||
<i class="fa fa-tachometer-alt"></i>
|
|
||||||
<?= lang('header_admin_panel') ?>
|
|
||||||
</a>
|
|
||||||
<?php endif; ?>
|
|
||||||
<a href="<?= base_url('login/logout') ?>" class="dropdown-item">
|
|
||||||
<i class="fa fa-sign-out-alt"></i>
|
|
||||||
<?= lang('header_logout') ?>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-logo-container">
|
||||||
|
<div class="navbar-logo">
|
||||||
|
<a href="<?= base_url() ?>">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 386.48" class="navbar-logo-svg">
|
||||||
|
<defs>
|
||||||
|
<style>.a {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<path class="a b" d="M186,222.6V373.74A12.26,12.26,0,0,0,198.22,386H349.36A12.26,12.26,0,0,0,358,365.07L206.89,213.93A12.26,12.26,0,0,0,186,222.6Z"></path>
|
||||||
|
<path class="a b" d="M349.36,0H198.22A12.26,12.26,0,0,0,186,12.26V163.4a12.26,12.26,0,0,0,20.93,8.67L358,20.93A12.26,12.26,0,0,0,349.36,0Z"></path>
|
||||||
|
<path class="a c" d="M398.68,364.32,561,202a12.7,12.7,0,0,0,0-18L398.68,21.68a12.7,12.7,0,0,0-21.68,9V355.34A12.7,12.7,0,0,0,398.68,364.32Z"></path>
|
||||||
|
<circle class="a d" cx="296.65" cy="193.11" r="65.52"></circle>
|
||||||
|
</svg>
|
||||||
|
<h1 class="navbar-logo-title">KingOfDog</h1>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-search">
|
||||||
|
<input class="form-control" type="search" placeholder="Suchen nach Posts, Projekten, Blog-Einträgen und mehr">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-action">
|
||||||
|
<a href="#" class="navbar-action-btn" role="button" id="searchButton" data-toggle="tooltip" data-placement="bottom" title="Suchen">
|
||||||
|
<i class="fa fa-search"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if (isset($_SESSION['user'])): ?>
|
||||||
|
<div class="navbar-action">
|
||||||
|
<div class="dropdown">
|
||||||
|
<a href="#" role="button" data-toggle="dropdown" data-offset="0,20" id="notificationMenuButton" aria-haspopup="true" aria-expanded="false" class="navbar-action-btn">
|
||||||
|
<i class="fa fa-bell"></i>
|
||||||
|
<div class="badge badge-pill badge-success" id="notificationCount"></div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="notificationMenuButton" id="notificationMenu">
|
||||||
|
<div class="list-group list-group-flush">
|
||||||
|
<div class="loadingSpinner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-action">
|
||||||
|
<div class="dropdown">
|
||||||
|
<a href="#" class="navbar-action-btn dropdown-toggle" data-toggle="dropdown" id="userMenuButton" aria-haspopup="true" aria-expanded="false" role="button">
|
||||||
|
<img src="<?= $_SESSION['user']['profilePic'] ?>?w=100" alt="" class="img-fluid rounded-circle">
|
||||||
|
<text><?= $_SESSION['user']['displayname'] ?></text>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenuButton" id="userMenu">
|
||||||
|
<a href="<?= base_url('user/' . $_SESSION['user']['username']) ?>" class="dropdown-item">
|
||||||
|
<i class="fa fa-user"></i>
|
||||||
|
<?= lang('header_profile') ?>
|
||||||
|
</a>
|
||||||
|
<a href="<?= base_url('user/' . $_SESSION['user']['username'] . '/edit') ?>" class="dropdown-item">
|
||||||
|
<i class="fa fa-user-edit"></i>
|
||||||
|
<?= lang('header_edit_profile') ?>
|
||||||
|
</a>
|
||||||
|
<?php if (get_instance()->hasPermission('dashboard.view')): ?>
|
||||||
|
<a href="<? //= base_url('admin') ?>" class="dropdown-item">
|
||||||
|
<i class="fa fa-tachometer-alt"></i>
|
||||||
|
<?= lang('header_admin_panel') ?>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
<a href="<?= base_url('login/logout') ?>" class="dropdown-item">
|
||||||
|
<i class="fa fa-sign-out-alt"></i>
|
||||||
|
<?= lang('header_logout') ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="navbar-action">
|
||||||
|
<a href="<?= base_url('login?r=' . urlencode(base64_encode(uri_string()))) ?>" class="navbar-action-btn" role="button" data-toggle="tooltip" data-placement="bottom" title="<?= lang('header_login') ?>">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 926 534" id="login-icon">
|
||||||
|
<defs>
|
||||||
|
<style>.z {
|
||||||
|
fill: #fff;
|
||||||
|
}</style>
|
||||||
|
</defs>
|
||||||
|
<path class="z"
|
||||||
|
d="M522,52H649.16c4.09,0,8.18.07,12.26.41,1.36.11,3.53.76,4.85.51l-3.43-.44q1.6.25,3.2.54,4,.73,7.9,1.75t7.74,2.3c1.53.51,3,1.11,4.55,1.64q3.76,1.5-1.5-.69,1.48.64,2.94,1.33a110.44,110.44,0,0,1,14.06,7.91c1.35.9,2.65,1.86,4,2.78,4.67,3.24-4.19-3.7.07.08,2.33,2.07,4.71,4.07,6.93,6.27q2.53,2.5,4.88,5.17a30.9,30.9,0,0,0,2.77,3.31c-4.5-3.78-1.92-2.53-.44-.41s2.7,4.08,3.9,6.21q1.09,1.94,2.07,3.94l.64,1.35q1.62,3.64-.76-1.82c-.14.91,1.22,3.4,1.51,4.32q.69,2.22,1.24,4.49c.24,1,.44,2.06.66,3.08,1.22,5.53-.31-6,0-.25.2,3.63.31,7.23.31,10.87q0,7.64,0,15.29-.07,20.14-.19,40.29-.56,99.11-1.39,198.23c-.14,17.88.83,36.23-.57,54.06-.18,2.26-1.34,4.9.51-3.52-.19.87-.28,1.78-.44,2.65q-.47,2.5-1.1,5-.72,2.81-1.65,5.55c-.41,1.21-.87,2.39-1.3,3.58-1.41,3.91,2.76-5.85-.23.36A96.41,96.41,0,0,1,715,451.8l-1,1.42q-2.42,3.24.58-.75c-.69,1.5-2.63,3.13-3.73,4.35q-3.17,3.51-6.61,6.77c-1.87,1.77-3.82,3.43-5.79,5.09-4.18,3.52,4.74-3.25.24-.21-1.25.84-2.46,1.73-3.72,2.55q-3.12,2-6.4,3.82-2,1.06-4,2l-1.34.63q-3.64,1.62,1.89-.77c-2.67.27-5.8,2.12-8.43,2.86q-3.6,1-7.29,1.72l-1.49.27q-4.05.64,2.13-.24a18,18,0,0,0-3.06.31c-3.14.27-6.27.31-9.42.3q-64.57-.18-129.14-.44l-4.45,0c-13.08,0-25.6,11.53-25,25s11,25,25,25l130.89.45c18.9.06,36.4-3.38,53.59-11.28,24.3-11.17,46.2-33.31,57.78-57.32,7.8-16.18,11.16-32.14,11.27-50,0-7.92.13-15.84.19-23.76q.78-98.3,1.42-196.6c.16-26.49.43-53,.36-79.46C779.35,56.38,728.57,12.07,674.53,4,651,.54,626.78,2,603.11,2H522c-13.08,0-25.6,11.5-25,25s11,25,25,25Z" />
|
||||||
|
<path class="z y"
|
||||||
|
d="M171,162H357V41s4-24,25-24c0,0,8-1,17,5L628,251s7,5,7,17c0,0-1,13-8,18L400,513s-10,11-28,4c0,0-15-9-15-23V374H171a27.74,27.74,0,0,1-18-8c-8-8-8-19-8-19V185s2-12,10-17S169,162,171,162Z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<?php endif; ?>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="navbar-swipe-open d-block d-md-none"></div>
|
<div id="navbar-swipe-open d-block d-md-none"></div>
|
||||||
<button class="menu-icon">
|
|
||||||
<span></span>
|
|
||||||
</button>
|
|
||||||
<div class="side-navigation">
|
<div class="side-navigation">
|
||||||
<span class="side-title">
|
<span class="side-title">
|
||||||
<img src="<?= base_url('assets/images/logo.png'); ?>" id="headerLogo" alt="logo">
|
<img src="<?= base_url('assets/images/logo.png'); ?>" id="headerLogo" alt="logo">
|
||||||
|
|
@ -330,6 +331,7 @@
|
||||||
|
|
||||||
<div class="btn-floating-shadow"></div>
|
<div class="btn-floating-shadow"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if (isset($_SESSION['user']) && !empty($_SESSION['user'])): ?>
|
<?php if (isset($_SESSION['user']) && !empty($_SESSION['user'])): ?>
|
||||||
<div class="modal fade" id="postModal" tabindex="-1" role="dialog" aria-labelledby="postLabel">
|
<div class="modal fade" id="postModal" tabindex="-1" role="dialog" aria-labelledby="postLabel">
|
||||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||||
|
|
@ -341,7 +343,7 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" id="postModalBody">
|
<div class="modal-body" id="postModalBody">
|
||||||
<form id="postForm">
|
<form id="postForm" enctype="multipart/form-data" method="POST">
|
||||||
<input type="hidden" value="-1" id="replyTo">
|
<input type="hidden" value="-1" id="replyTo">
|
||||||
<div class="form-group has-feedback-right" id="content">
|
<div class="form-group has-feedback-right" id="content">
|
||||||
<div class="form-control" id="contentField" contenteditable style="min-height:100px"
|
<div class="form-control" id="contentField" contenteditable style="min-height:100px"
|
||||||
|
|
@ -359,8 +361,8 @@
|
||||||
<i class="fa fa-upload"></i>
|
<i class="fa fa-upload"></i>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
<small><?= lang('header_post_notice') ?></small>
|
||||||
</form>
|
</form>
|
||||||
<small><?= lang('header_post_notice') ?></small>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-default" data-dismiss="modal"><?= lang('close') ?></button>
|
<button type="button" class="btn btn-default" data-dismiss="modal"><?= lang('close') ?></button>
|
||||||
|
|
|
||||||
60
application/views/search.php
Normal file
60
application/views/search.php
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
<?php
|
||||||
|
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Suchen nach: <input id="searchTerm" value="<?= $query ?>" class="form-control" /></h1>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-md-4">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Filtern</h5>
|
||||||
|
</div>
|
||||||
|
<div class="list-group list-group-flush filter">
|
||||||
|
<button class="list-group-item list-group-item-action" data-filter="blogPost">
|
||||||
|
Blog-Post
|
||||||
|
</button>
|
||||||
|
<button class="list-group-item list-group-item-action" data-filter="blogCategory">
|
||||||
|
Blog-Kategorie
|
||||||
|
</button>
|
||||||
|
<button class="list-group-item list-group-item-action" data-filter="blogTag">
|
||||||
|
Blog-Tag
|
||||||
|
</button>
|
||||||
|
<button class="list-group-item list-group-item-action" data-filter="user">
|
||||||
|
Nutzer
|
||||||
|
</button>
|
||||||
|
<button class="list-group-item list-group-item-action" data-filter="userPost">
|
||||||
|
Post
|
||||||
|
</button>
|
||||||
|
<button class="list-group-item list-group-item-action" data-filter="project">
|
||||||
|
Projekt
|
||||||
|
</button>
|
||||||
|
<button class="list-group-item list-group-item-action" data-filter="projectCategory">
|
||||||
|
Projekt-Kategorie
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<ul id="searchResults" class="p-0">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="loadingSpinner"></div>
|
||||||
|
<div class="error-container text-center" style="display: none;">
|
||||||
|
<i class="far fa-frown fa-4x mb-2"></i>
|
||||||
|
<h4 class="message message-no-results">
|
||||||
|
Es wurden leider keine Suchergebnisse gefunden. Versuche es doch mal mit einem anderen Suchbegriff.
|
||||||
|
</h4>
|
||||||
|
<h4 class="message message-no-further-results">
|
||||||
|
Es wurden leider keine weiteren Suchergebnisse gefunden.
|
||||||
|
</h4>
|
||||||
|
<h4 class="message message-search-term">
|
||||||
|
Der angegebene Suchbegriff ist zu kurz. Wir benötigen min. 3 Zeichen zur erfolgreichen Suche!
|
||||||
|
</h4>
|
||||||
|
<h4 class="message message-general">
|
||||||
|
Ein unbekannter Fehler ist aufgetreten. Versuche es später erneut.
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,12 +1,281 @@
|
||||||
.navbar {
|
.navbar {
|
||||||
|
width: 100%;
|
||||||
height: 60px;
|
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 {
|
.navbar.loggedIn {
|
||||||
margin-left: auto;
|
grid-template-columns: 180px 50px 50px auto 50px 50px 180px;
|
||||||
margin-top: 17px;
|
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 {
|
.menu-icon span, .menu-icon:before, .menu-icon:after, .menu-icon span:before, .menu-icon span:after {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -98,65 +367,73 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar brand svg */
|
/* Navbar brand svg */
|
||||||
.navbar-brand {
|
/*.navbar-brand {*/
|
||||||
padding: 7px;
|
/*padding: 7px;*/
|
||||||
transition: padding 0.3s;
|
/*transition: padding 0.3s;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
.navbar-brand svg {
|
/*.navbar-brand svg {*/
|
||||||
position: absolute;
|
/*position: absolute;*/
|
||||||
left: 50%;
|
/*left: 50%;*/
|
||||||
transform: translateX(-50%);
|
/*transform: translateX(-50%);*/
|
||||||
height: 45px;
|
/*height: 45px;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
.navbar-content {
|
/*.navbar-content {*/
|
||||||
height: 60px;
|
/*height: 60px;*/
|
||||||
margin-top: 0;
|
/*margin-top: 0;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
.navbar-content ul {
|
/*.navbar-content ul {*/
|
||||||
list-style: none;
|
/*display: grid;*/
|
||||||
cursor: default;
|
/*grid-template-columns: 1fr 2fr auto;*/
|
||||||
height: 60px;
|
/*align-items: center;*/
|
||||||
margin: 0;
|
/*grid-gap: 10px;*/
|
||||||
}
|
/*list-style: none;*/
|
||||||
|
/*cursor: default;*/
|
||||||
|
/*height: 60px;*/
|
||||||
|
/*margin: 0;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
.navbar-content ul li {
|
/*.navbar-content ul li {*/
|
||||||
display: inline-block;
|
/*display: block;*/
|
||||||
font-size: 30px;
|
/*height: auto;*/
|
||||||
margin: 0 10px;
|
/*font-size: 30px;*/
|
||||||
height: 60px;
|
/*}*/
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-content ul li a.navbar-link {
|
/*.navbar-content ul li a.navbar-link {*/
|
||||||
display: block;
|
/*display: block;*/
|
||||||
height: 48px;
|
/*height: auto;*/
|
||||||
margin: 6px 0;
|
/*color: #fff !important;*/
|
||||||
color: #fff !important;
|
/*}*/
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-content ul li #notificationMenuButton {
|
/*.navbar-content ul li #notificationMenuButton {*/
|
||||||
height: 30px;
|
/*height: 30px;*/
|
||||||
margin: 9px -14px 9px 0;
|
/*}*/
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-content ul li:hover a.navbar-link,
|
/*.navbar-content ul li #notificationMenuButton .fa {*/
|
||||||
.navbar-content ul li:active a.navbar-link,
|
/*display: block;*/
|
||||||
.navbar-content ul li:focus a.navbar-link {
|
/*margin: 0 auto;*/
|
||||||
color: #ddd !important;
|
/*}*/
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-content ul li .badge {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 14px;
|
|
||||||
transform: translate(-50%, -75%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-content ul li .badge:empty {
|
/*.navbar-content ul li:hover a.navbar-link,*/
|
||||||
opacity: 0;
|
/*.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 {
|
#notificationMenu {
|
||||||
width: 360px;
|
width: 360px;
|
||||||
|
|
@ -179,26 +456,7 @@
|
||||||
background-color: #2272ff;
|
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 {
|
#logo-container {
|
||||||
top: 8px;
|
top: 8px;
|
||||||
|
|
@ -294,33 +552,7 @@
|
||||||
height: 30px;
|
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 {
|
.navbar-link svg, .navbar-link i {
|
||||||
display: block;
|
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 {
|
.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 {
|
.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-attachment: fixed;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
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 {
|
.embed-container {
|
||||||
|
|
@ -312,6 +312,132 @@ ul.tag-cloud li {
|
||||||
background-color: #F72754;
|
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 {
|
.share-btn {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -468,7 +594,6 @@ ul.social > li > a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
div.img {
|
div.img {
|
||||||
margin: 2em auto;
|
margin: 2em auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1049,7 +1174,6 @@ blockquote {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#downloadSlider img {
|
#downloadSlider img {
|
||||||
max-height: 240px;
|
max-height: 240px;
|
||||||
}
|
}
|
||||||
|
|
@ -1213,7 +1337,7 @@ ul#downloadSlider a.active .overlay {
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-list .comment-well .action-btns .action-btn:last-child,
|
.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;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1481,6 +1605,82 @@ ul#downloadSlider a.active .overlay {
|
||||||
z-index: 1030;
|
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 {
|
.btn-floating {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 50px;
|
bottom: 50px;
|
||||||
|
|
@ -1900,7 +2100,7 @@ ul#downloadSlider a.active .overlay {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
z-index: 100;
|
z-index: 1100;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1969,4 +2169,219 @@ ul#downloadSlider a.active .overlay {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-right: 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).find('.fa-moon').removeClass('far').addClass('fa');
|
||||||
$(this).attr('data-title', 'Dark Theme')
|
$(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