Skip to content

GitLab

Commit 821666f2 authored by Patrick's avatar Patrick
Browse files

Created a Search function (not finished yet) 

Created a language selection UI
parent 8439c61a
Pipeline #1975 passed with stage
in 37 seconds
Hide whitespace changes
Inline Side-by-side
public/rgc_website/content/content.json 0 → 100644
View file @ 821666f2
[
{
"item": {
"title": "The Book of Samson",
"author": {
"firstName": "David",
"lastName": "Maine"
}
},
"refIndex": 19
},
{
"item": {
"title": "The Preservationist",
"author": {
"firstName": "David",
"lastName": "Maine"
}
},
"refIndex": 20
},
{
"item": {
"title": "Fallen",
"author": {
"firstName": "David",
"lastName": "Maine"
}
},
"refIndex": 21
},
{
"item": {
"title": "Monster 1959",
"author": {
"firstName": "David",
"lastName": "Maine"
}
},
"refIndex": 22
},
{
"item": {
"title": "The DaVinci Code",
"author": {
"firstName": "Dan",
"lastName": "Brown"
}
},
"refIndex": 6
},
{
"item": {
"title": "Angels & Demons",
"author": {
"firstName": "Dan",
"lastName": "Brown"
}
},
"refIndex": 7
},
{
"item": {
"title": "The Lost Symbol",
"author": {
"firstName": "Dan",
"lastName": "Brown"
}
},
"refIndex": 10
}
]
\ No newline at end of file
public/rgc_website/css/language.css 0 → 100644
View file @ 821666f2
.selectpicker{
cursor: pointer
}
public/rgc_website/css/search.css 0 → 100644
View file @ 821666f2
body {
background: #212129;
}
::selection {
background: #212129;
}
.search-wrapper {
position: relative;
transform: translate(-50%, -50%);
top:50%;
left:50%;
float: right;
margin-right: 47%;
}
.search-wrapper.active {}
.search-wrapper .input-holder {
height: 70px;
width:70px;
overflow: hidden;
background: rgba(255,255,255,0);
border-radius:6px;
position: relative;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
width:450px;
border-radius: 50px;
background: rgba(0,0,0,0.5);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
.search-wrapper .input-holder .search-input {
width:100%;
height: 50px;
padding:0px 70px 0 20px;
opacity: 0;
position: absolute;
top:0px;
left:0px;
background: transparent;
box-sizing: border-box;
border:none;
outline:none;
font-family:"Open Sans", Arial, Verdana;
font-size: 16px;
font-weight: 400;
line-height: 20px;
color:#FFF;
transform: translate(0, 60px);
transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
opacity: 1;
transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
width:70px;
height:70px;
border:none;
border-radius:6px;
background: #FFF;
padding:0px;
outline:none;
position: relative;
z-index: 2;
float:right;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
width: 50px;
height:50px;
margin: 10px;
border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
width:22px;
height:22px;
display: inline-block;
vertical-align: middle;
position:relative;
transform: rotate(45deg);
transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
position: absolute;
content:'';
}
.search-wrapper .input-holder .search-icon span::before {
width: 4px;
height: 11px;
left: 9px;
top: 18px;
border-radius: 2px;
background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
width: 20px;
height: 20px;
left: 3px;
top: 0px;
border-radius: 16px;
border: 4px solid #FE5F55;
}
.search-wrapper .close {
position: absolute;
z-index: 1;
top:24px;
right:20px;
width:25px;
height:25px;
cursor: pointer;
transform: rotate(-180deg);
transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
transition-delay: 0.2s;
}
.search-wrapper.active .close {
right:-50px;
transform: rotate(45deg);
transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
position:absolute;
content:'';
background: #FE5F55;
border-radius: 2px;
}
.search-wrapper .close::before {
width: 5px;
height: 25px;
left: 10px;
top: 0px;
}
.search-wrapper .close::after {
width: 25px;
height: 5px;
left: 0px;
top: 10px;
}
\ No newline at end of file
public/rgc_website/index.html
View file @ 821666f2
......@@ -12,6 +12,7 @@
<link href="css/main.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/79b3e255a2.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/png" sizes="32x32" href="./imgs/icon.png">
</head>
<body>
......@@ -49,10 +50,14 @@
class="hftlogo" width="100px">
<h1 id='projectname'></h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
<select class="selectpicker" style="background-color: #cc3125; width: 8em; border-color:#cc3125;" data-width="fit">
<option class="selectlang" style="background-color: white;">English</option>
<option class="selectlang" style="background-color: white;">Deutsch</option>
</select>
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</button> -->
</div>
</div>
</header>
......@@ -70,9 +75,20 @@
<div class="album py-5 bg-light topDownPadding">
<div class="container">
<h2><i class="fas fa-laptop-code"></i> Our Applications</h2>
<p class="grey-text w-responsive mx-auto mb-5">Research Short Introduction ....</p>
<div>
<h2 ><i class="fas fa-laptop-code"></i> Our Applications</h2>
<!-- Searchbar -->
<!-- start -->
<div class="search-wrapper">
<div class="input-holder">
<input type="text" id="search-input" class="search-input" placeholder="Type to search" />
<button id="search-button" class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
</div>
<span class="close" onclick="searchToggle(this, event);"></span>
</div>
<!-- end -->
</div>
<p class="grey-text w-responsive mx-auto mb-5">Research Short Introduction ....</p><br>
<div class="row">
<div class="col-lg-4">
......@@ -428,13 +444,26 @@
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
</div>
</footer>
<!-- Test -->
<!-- /////////////////////////////////////// -->
<!-- Language selector -->
<!-- full jquery needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
<script src="js/language.js"></script>
<!-- search library -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
<link rel="stylesheet" href="./css/search.css">
<link rel="stylesheet" href="./css/language.css">
<script src="js/search.js"></script>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
<!-- <script src="settings.js"> </script> -->
<script src="./js/jquery.slim.min.js"></script>
<!-- <script src="./js/jquery.slim.min.js"></script> -->
<script src="./js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
\ No newline at end of file
public/rgc_website/js/language.js 0 → 100644
View file @ 821666f2
// placeholder for real language selection
$('.selectpicker').change(function(){
alert($(this).val());
})
\ No newline at end of file
public/rgc_website/js/search.js 0 → 100644
View file @ 821666f2
// search options
// --- needs to be adapted to the form of our content
const options = {
includeScore: true,
// Search in `author` and in `tags` array
keys: ["item.title",
"item.author.firstName", "item.author.lastName"]
}
// start search
var searchanswer
function search(){
const fuse = new Fuse(stuff, options);
searchanswer = fuse.search(document.getElementById("search-input").value)
alert(searchanswer);
}
//get json
// --- can be adapted if we load the content from the json
var stuff = []
$(document).ready(function(){
$.getJSON("./content/content.json", function(result){
stuff = result;
});
});
// searchbar and start search
function searchToggle(obj, evt){
console.log("arrive")
var container = $(obj).closest('.search-wrapper');
if(!container.hasClass('active')){
container.addClass('active');
evt.preventDefault();
console.log("first")
}
else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
container.removeClass('active');
// clear input
console.log("second")
container.find('.search-input').val('');
} else {
console.log("search")
search();
}
}
// search on enter
var input = document.getElementById("search-input");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("search-button").click();
}
});
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal