Commit 2f822e9b authored by Alain Takoudjou's avatar Alain Takoudjou

Mynij Search: Fix search result and improve layout for mobile too

parent 554312dc
......@@ -81,7 +81,7 @@
</item>
<item>
<key> <string>content_md5</string> </key>
<value> <string>346ac88b9877bb714c42f55a4badcfa4</string> </value>
<value> <string>950a69b80543dc973375ccffa5f0f872</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
......@@ -99,11 +99,11 @@
</item>
<item>
<key> <string>filename</string> </key>
<value> <string>google_logo.png</string> </value>
<value> <string>mynij_google_logo.png</string> </value>
</item>
<item>
<key> <string>height</string> </key>
<value> <int>3000</int> </value>
<value> <int>1261</int> </value>
</item>
<item>
<key> <string>id</string> </key>
......
......@@ -81,7 +81,7 @@
</item>
<item>
<key> <string>content_md5</string> </key>
<value> <string>9beb13edeabd6fa0008d2e960b4a358f</string> </value>
<value> <string>d4bb131f30becd7ac1289780b144e5cf</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
......@@ -103,7 +103,7 @@
</item>
<item>
<key> <string>height</string> </key>
<value> <int>3000</int> </value>
<value> <int>1848</int> </value>
</item>
<item>
<key> <string>id</string> </key>
......
......@@ -8,15 +8,18 @@
<link rel="stylesheet" type="text/css" href="mynij-style.css">
</head>
<body>
<div class="search" id="logo-search">
<img class="logo-search" src="mynij_logo.png" />
</div>
<div id="search_div">
<form id = "search_bar">
<input type="search" id = "search_input" required>
<form id="search_bar">
<input type="search" id="search_input" required>
</form>
<select id="select_index"></select>
</div>
<div id = "gadget_result" data-gadget-url="gadget_mynij_result.html"
data-gadget-scope="result" data-gadget-sandbox="public">
<div id="gadget_result" data-gadget-url="gadget_mynij_result.html"
data-gadget-scope="result" data-gadget-sandbox="public"></div>
<div data-gadget-url="gadget_mynij_model.html" data-gadget-scope="model"
data-gadget-sandbox="public">
data-gadget-sandbox="public"></div>
</body>
</html>
\ No newline at end of file
......@@ -103,7 +103,7 @@
</item>
<item>
<key> <string>title</string> </key>
<value> <string>Mynij Home Page gadget</string> </value>
<value> <string>Mynij Search Page gadget</string> </value>
</item>
<item>
<key> <string>version</string> </key>
......
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/
/*global window, RSVP, rJS, document*/
(function (window, document, rJS, RSVP) {
var gadget;
rJS(window)
.setState({
model_gadget : null,
result_gadget : null
var gadget;
rJS(window)
.setState({
model_gadget : null,
result_gadget : null
})
.ready(function () {
var model_gadget,
result_gadget,
gadget = this;
return gadget.getDeclaredGadget("model")
.push(function (model) {
model_gadget = model;
})
.ready(function(){
var model_gadget,
result_gadget,
gadget = this;
return gadget.getDeclaredGadget("model")
.push(function(model){
model_gadget = model;
})
.push(function(){
return gadget.getDeclaredGadget("result");
})
.push(function(result){
return gadget.changeState({
model_gadget : model_gadget,
result_gadget : result
});
})
.push(function(){
setTimeout(function () {
return gadget.fill_available_indices();
}, 100);
});
.push(function () {
return gadget.getDeclaredGadget("result");
})
.declareMethod("fill_available_indices", function(){
var gadget = this,
drop_list = document.getElementById("select_index");
return gadget.state.model_gadget.get_available_indices()
.push(function(results){
results.forEach((item, i) => {
var option_item = document.createElement("option");
option_item.value = item;
option_item.appendChild(document.createTextNode(item));
drop_list.appendChild(option_item);
});
});
.push(function (result) {
return gadget.changeState({
model_gadget : model_gadget,
result_gadget : result
});
})
.declareMethod("search", function (key){
var gadget = this,
chosen_index = document.getElementById("select_index").selectedOptions[0];
if (chosen_index == null){
return gadget.state.result_gadget.addItem({title : "Error : No index built", link : "", body : ""}, key);
.push(function () {
setTimeout(function () {
return gadget.fill_available_indices();
}, 100);
});
})
.declareMethod("fill_available_indices", function () {
var gadget = this,
drop_list = document.getElementById("select_index");
return gadget.state.model_gadget.get_available_indices()
.push(function (results) {
results.forEach((item, i) => {
var option_item = document.createElement("option");
option_item.value = item;
option_item.appendChild(document.createTextNode(item));
drop_list.appendChild(option_item);
});
});
})
.declareMethod("search", function (key) {
var gadget = this,
chosen_index;
chosen_index = document.getElementById("select_index").selectedOptions[0];
if (chosen_index === null) {
return gadget.state.result_gadget.addItem(
{
title: "Error : No index built",
link: "",
body: ""
},
key);
}
return gadget.state.result_gadget.clear()
.push(function () {
console.log("starting search");
return gadget.state.model_gadget.search(key, chosen_index.value);
})
.push(function (result) {
console.log("search done");
var i, promise_list = [];
if (result.length === 0) {
return gadget.state.result_gadget.addItem(
{
title : "No results found",
link : ""
},
"");
} else {
for (i = 0; i < result.length; i += 1) {
promise_list.push(gadget.state.model_gadget.get_page(result[i]));
}
return new RSVP.Queue()
.push(function () {
return RSVP.all(promise_list);
})
.push(function (result) {
var i, promise_list = [];
for (i = 0; i < result.length; i += 1) {
promise_list.push(gadget.state.result_gadget.addItem(
result[i],
key));
}
});
}
return gadget.state.result_gadget.clear()
.push(function(){
console.log("starting search");
return gadget.state.model_gadget.search(key, chosen_index.value);
})
.push(function(result){
console.log("search done");
if (result.length === 0) {
return gadget.state.result_gadget.addItem({
title : "No results found",
link : ""
}, "");
} else {
var i, promise_list = [];
for (i=0; i<result.length; i+=1){
promise_list.push(gadget.state.model_gadget.get_page(result[i]));
}
return new RSVP.Queue()
.push(function(){
return RSVP.all(promise_list);
})
.push(function(result){
var i, promise_list = [];
for (i=0; i<result.length; i+=1){
promise_list.push(gadget.state.result_gadget.addItem(result[i], key));
}
});
}
});
})
.declareMethod("add_searx_results", function (key) {
var gadget = this;
return new RSVP.Queue()
.push(function () {
return jIO.util.ajax({
url : "https://cors-anywhere.herokuapp.com/search.disroot.org/?q=" +
key + "&category_general=on&theme=oscar"
});
})
.declareMethod("add_searx_results", function(key){
var gadget = this;
return new RSVP.Queue()
.push(function(){
return jIO.util.ajax({url : "https://cors-anywhere.herokuapp.com/search.disroot.org/?q=" + key + "&category_general=on&theme=oscar"});
})
.push(function(resultHTML){
var i,
promise_list = [],
elements,
doc = new DOMParser().parseFromString(resultHTML.currentTarget.response, "text/html");
elements = doc.body.querySelectorAll('div.result.result-default');
for (i=0; i<elements.length; i+=1){
promise_list.push(gadget.state.result_gadget.show_searx_result(elements[i], key));
}
return RSVP.all(promise_list);
});
})
.onEvent("submit", function(event){
var gadget = this,
search_key = document.getElementById("search_input").value;
})
.push(undefined, function (error) {
var error_html;
error_html = document.createElement("p");
error_html.className = "no-result";
error_html.textContent = "AN error occured, please try again. " +
error.message || '';
return gadget.state.result_gadget.show_searx_result(error_html);
})
.push(function (resultHTML) {
var i,
promise_list = [],
elements,
doc = new DOMParser().parseFromString(
resultHTML.currentTarget.response,
"text/html");
elements = doc.body.querySelectorAll('div.result.result-default');
for (i = 0; i < elements.length; i += 1) {
promise_list.push(gadget.state.result_gadget.show_searx_result(
elements[i],
key));
}
return RSVP.all(promise_list);
});
})
.onEvent("submit", function (event) {
var gadget = this,
top = document.getElementById("logo-search"),
search_key = document.getElementById("search_input").value;
if(top) {
gadget.element.removeChild(top);
}
return gadget.state.result_gadget.startLoading()
.push(function () {
return gadget.state.result_gadget.showResultBox();
})
.push(function () {
return gadget.search(search_key)
.push(function(){
return gadget.add_searx_results(search_key);
});
});
})
.push(function () {
return gadget.add_searx_results(search_key);
});
});
}(window, document, rJS, RSVP));
\ No newline at end of file
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/
/*global window, RSVP, rJS, jIO*/
(function (window, document, RSVP, rJS, jIO) {
"use strict";
rJS(window)
.declareMethod("preRenderDocument", function (parent_options) {
var gadget = this;
return gadget.jio_get(parent_options.jio_key)
.push(function (parent_document) {
return parent_document;
});
"use strict";
rJS(window)
.declareMethod("preRenderDocument", function (parent_options) {
var gadget = this;
return gadget.jio_get(parent_options.jio_key)
.push(function (parent_document) {
return parent_document;
});
})
.ready(function () {
var indices = [], db;
db = jIO.createJIO({
type: "query",
sub_storage: {
type: "indexeddb",
database: "mynij"
}
});
this.changeState({
indices: indices,
db: db
});
})
.declareMethod("add_page", function (page, index_name) {
var gadget = this,
indices,
index;
if (! gadget.state.indices[index_name]) {
indices = gadget.state.indices;
indices[index_name] = new FlexSearch(
"memory",
{stemmer : "en", filter : "en"}
);
gadget.changeState({
indices : indices
});
}
index = gadget.state.indices[index_name];
return gadget.state.db.put(page.id, page)
.push(function () {
return index.add(page.id, page.title + "\n" + page.content);
});
})
.declareMethod("get_page", function (id) {
return this.state.db.get(id);
})
.declareMethod("save_index", function (index_name) {
var gadget = this,
serialized = this.state.indices[index_name].export_test(),
index_id = "index-" + index_name;
return this.state.db.put(
index_id,
{type: "index", info: this.state.indices[index_name].info()}
)
.push(function () {
return gadget.state.db.putAttachment(
index_id, "ids",
new Blob([serialized.ids], {type : "application/json"}));
})
.ready(function(){
var indices = [], db;
db = jIO.createJIO(
{
type:"query",
sub_storage: {
type : "indexeddb",
database : "mynij"
}
}
);
this.changeState({
indices : indices,
db : db
});
.push(function () {
return gadget.state.db.putAttachment(
index_id,
"map",
new Blob([serialized.map], {type : "application/json"}));
})
.declareMethod("add_page", function(page, index_name){
var gadget = this, index;
if (! gadget.state.indices[index_name]){
var indices = gadget.state.indices;
indices[index_name] = new FlexSearch("memory", {stemmer : "en", filter : "en"});
gadget.changeState({
indices : indices
});
}
index = gadget.state.indices[index_name];
return gadget.state.db.put(page.id, page)
.push(function(){
return index.add(page.id, page.title + "\n" + page.content);
});
.push(function () {
return gadget.state.db.putAttachment(
index_id,
"ctx",
new Blob([serialized.ctx], {type : "application/json"}));
})
.declareMethod("get_page", function(id){
return this.state.db.get(id);
.push(function () {
console.log("Index saved : ");
console.log(gadget.state.indices[index_name].info());
return gadget.state.indices[index_name].info().items;
})
.declareMethod("save_index", function(index_name){
var gadget = this,
serialized = this.state.indices[index_name].export_test(),
index_id = "index-" + index_name;
return this.state.db.put(index_id, {type: "index", info : this.state.indices[index_name].info()})
.push(function(){
return gadget.state.db.putAttachment(index_id, "ids", new Blob([serialized.ids], {type : "application/json"}));
})
.push(function(){
return gadget.state.db.putAttachment(index_id, "map", new Blob([serialized.map], {type : "application/json"}));
})
.push(function(){
return gadget.state.db.putAttachment(index_id, "ctx", new Blob([serialized.ctx], {type : "application/json"}));
})
.push(function(){
console.log("Index saved : ");
console.log(gadget.state.indices[index_name].info());
return gadget.state.indices[index_name].info().items;
})
.push(undefined, function (my_error) {
console.log(my_error);
});
.push(undefined, function (my_error) {
console.log(my_error);
});
})
.declareMethod("get_index", function (index_name) {
var gadget = this,
ids,
map,
index_id = "index-" + index_name,
new_index;
new_index = FlexSearch.create("memory", {stemmer : "en", filter : "en"});
return gadget.state.db.getAttachment(index_id, "ids", {"format": "text"})
.push(function (result) {
ids = result;
return gadget.state.db.getAttachment(
index_id,
"map",
{"format": "text"});
})
.push(function (result) {
map = result;
return gadget.state.db.getAttachment(index_id, "ctx", {"format": "text"});
})
.declareMethod("get_index", function(index_name){
var gadget = this,
ids,
map,
index_id = "index-" + index_name,
new_index = FlexSearch.create("memory", {stemmer : "en", filter : "en"});
return gadget.state.db.getAttachment(index_id, "ids", {"format": "text"})
.push(function(result){
ids = result;
return gadget.state.db.getAttachment(index_id, "map", {"format": "text"});
})
.push(function(result){
map = result;
return gadget.state.db.getAttachment(index_id, "ctx", {"format": "text"});
})
.push(function(result){
new_index.import_test(ids, map, result);
return new_index;
})
.push(undefined, function (my_error) {console.log(my_error)});
.push(function (result) {
new_index.import_test(ids, map, result);
return new_index;
})
.push(undefined, function (my_error) {
console.log(my_error);
});
})
.declareMethod("get_available_indices", function () {
var gadget = this,
indices = [],
query = 'type:index';
return gadget.state.db.allDocs({"query" : query})
.push(function (results) {
results.data.rows.forEach((item, i) => {
indices.push(item.id.split("index-")[1]);
});
return indices;
});
})
// .declareMethod("get_index_info", function(){
// console.log("index in state : ");
// console.log(this.state.index.info());
// return this.get_index()
// .push(function(index){
// console.log("index in db :");
// console.log(index.info());
// });
// })
.declareMethod("search", function (search_key, index_name) {
var gadget = this,
results = [];
return gadget.get_index(index_name)
.push(function (index) {
console.log(index.info());
return index.search(search_key);
})
.declareMethod("get_available_indices", function(){
var gadget = this,
indices = [],
query='type:index';
return gadget.state.db.allDocs({"query" : query})
.push(function(results){
results.data.rows.forEach((item, i) => {
indices.push(item.id.split("index-")[1]);
});
return indices;
});
.push(function (index_results) {
return index_results;
})
// .declareMethod("get_index_info", function(){
// console.log("index in state : ");
// console.log(this.state.index.info());
// return this.get_index()
// .push(function(index){
// console.log("index in db :");
// console.log(index.info());
// });
// })
.declareMethod("search", function(search_key, index_name){
var gadget = this,
results = [];
return gadget.get_index(index_name)
.push(function(index){
console.log(index.info());
return index.search(search_key);
})
.push(function(index_results){
return index_results;
})
.push(undefined, function (my_error) {console.log(my_error)});
.push(undefined, function (my_error) {
console.log(my_error);
});
});
}(window, document, RSVP, rJS, jIO));
\ No newline at end of file
......@@ -8,16 +8,31 @@
<link rel="stylesheet" type="text/css" href="mynij-style.css">
</head>
<body>
<div id="results" class="result-box">
<div id ="mynij" class="mynij-results">
<div class="logo-img"><img src="mynij_logo.png"></div>
<ul id="mynij-results">
</ul>
</div>
<div id ="google" class="searx-results">
<div class="logo-img"><img src="mynij_google_logo.png"></div>
<ul id="searx-results">
</ul>
<div id="results" class="tabs result-box hide">
<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<ul>
<li title="Mynij"><label for="tab1" role="button">
<span><img class="logo-img logo-mynij" src="mynij_logo.png"></span></label>
</li>
<li title="Google"><label for="tab2" role="button">
<span><img class="logo-img" src="mynij_google_logo.png"></span></label>
</li>
</ul>
<div class="slider"><div class="indicator"></div></div>
<div class="slider-border"></div>
<div class="content">
<section class="section-result">
<ul id="mynij-results">
</ul>
<div id="mynij-loading" class="loading" style="display: none"><div class="loader"></div></div>
</section>
<section class="section-result">
<ul id="searx-results">
</ul>
<div id="searx-loading" class="loading" style="display: none"><div class="loader"></div></div>
</section>
</div>
</div>
</body>
......
/*jslint nomen: true, indent: 2, maxerr: 3, maxlen: 80*/
/*global window, RSVP, rJS, jIO*/
(function(window, RSVP, rJS, jIO) {
"use strict";
rJS(window)
.declareMethod("addItem", function(item, key) {
var list,
list_item,
title,
link,
link_par,
body,
gadget = this;
list = document.getElementById("mynij-results");
list_item = document.createElement("LI");
title = document.createElement("a");
title.appendChild(document.createTextNode(item.title));
title.className="title";
title.href = item.link;
list_item.appendChild(title);
return this.cut_link(item.link)
.push(function(cut_link){
link = document.createElement("a");
link.appendChild(document.createTextNode(cut_link));
link.href = item.link;
link.className = "link";
link_par = document.createElement('p');
link_par.appendChild(link);
list_item.appendChild(link_par);
})
.push(function(){
body = document.createElement('p');
body.className = "body";
item.body = new DOMParser().parseFromString(item.body, "text/html").body.textContent || "";
if (key === "" || item.body === ""){
body.innerHTML = "";
list.appendChild(list_item);
} else {
return gadget.cut_description(item.body, key) //return gadget.cut_description(item.body, item.description, key)
.push(function (result){
var array = [...result.matchAll(key)],
i;
for (i=0; i<array.length; i+=1){
result = result.slice(0, array[i].index) + "<b>" + result.slice(array[i].index, array[i].index+array[i][0].length+1) + "</b>" + result.slice(array[i].index+array[i][0].length+1);
}
body.innerHTML = result;
list_item.appendChild(body);
list.appendChild(list_item);
/*global window, RSVP, rJS, document, DOMParser*/
(function (window, RSVP, rJS, document, DOMParser) {
"use strict";
rJS(window)
.declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareMethod("showResultBox", function () {
var box = document.getElementById("results");
if (box.classList.contains("hide")) {
box.classList.remove("hide");
}
})
.declareMethod("startLoading", function () {
var loader;
loader = document.getElementById("mynij-loading");
loader.style.display = "block";
loader = document.getElementById("searx-loading");
loader.style.display = "block";
})
.declareMethod("addItem", function (item, key) {
var list,
list_item,
title,
link,
link_par,
body,
gadget = this;
list = document.getElementById("mynij-results");
list_item = document.createElement("LI");
if (item.link.startsWith("?url=")) {
item.link = item.link.substring(5);
}
return gadget.cut_link(item.link)
.push(function (cut_link) {
title = document.createElement("a");
title.appendChild(document.createTextNode(item.title));
title.className = "title";
title.href = item.link;
list_item.appendChild(title);
link = document.createElement("a");
link.appendChild(document.createTextNode(item.link));
link.href = item.link;
link.className = "link";
link_par = document.createElement('p');
link_par.appendChild(link);
list_item.appendChild(link_par);
})
.push(function () {
var loader = document.getElementById("mynij-loading");
loader.style.display = "none";
body = document.createElement('p');
body.className = "body";
item.body = new DOMParser().parseFromString(
item.body,
"text/html"
).body.textContent || "";
if (key === "" || item.body === "") {
body.innerHTML = "";
list.appendChild(list_item);
} else {
//return gadget.cut_description(item.body, item.description, key)
return gadget.cut_description(item.body, key)
.push(function (result) {
var array = [...result.matchAll(key)],
i;
for (i = 0; i < array.length; i += 1) {
result = result.slice(0, array[i].index) +
"<b>" + result.slice(array[i].index,
array[i].index + array[i][0].length + 1
) +
"</b>" + result.slice(array[i].index +
array[i][0].length + 1);
}
body.innerHTML = result;
list_item.appendChild(body);
list.appendChild(list_item);
});
}
});
})
.declareMethod("show_searx_result", function(item, key){
var list,
list_item,
title,
link,
link_par,
body;
list = document.getElementById("searx-results");
list_item = document.createElement("li");
title = document.createElement("a");
title.appendChild(document.createTextNode(item.querySelector('h4.result_header').textContent));
title.className="title";
title.href =item.querySelector('div.external-link').textContent;
list_item.appendChild(title);
link = document.createElement("a");
link.appendChild(document.createTextNode(item.querySelector('div.external-link').textContent));
link.href = item.querySelector('div.external-link').textContent;
link.className = "link";
link_par = document.createElement("p");
link_par.appendChild(link);
list_item.appendChild(link_par);
body = document.createElement("p");
body.className = "body";
if (item.querySelector('p.result-content') !== null) body.innerHTML = item.querySelector('p.result-content').outerHTML;
else body.innerHTML = "";
list_item.appendChild(body);
list.appendChild(list_item);
})
.declareMethod("clear", function(){
var list = document.getElementById("mynij-results");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
list = document.getElementById("searx-results");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
})
.declareMethod("cut_description", function(body, key){ //function(body, description, key)
var result = new RegExp('[^.?!]*' + ' ' + key + ' ' + '[^.?!]*[.?!]', 'gm').exec(body);
if (result === null) {
result = new RegExp('[^.?!]*[.?!]').exec(body); //if (description !== "") return description; else....
if (result === null) return "";
else return result[0];
}
}
});
})
.declareMethod("show_searx_result", function (item, key) {
var list,
list_item,
title,
link,
link_par,
body,
loader = document.getElementById("searx-loading");
loader.style.display = "none";
list = document.getElementById("searx-results");
list_item = document.createElement("li");
title = document.createElement("a");
title.appendChild(document.createTextNode(
item.querySelector('h4.result_header').textContent));
title.className = "title";
title.href = item.querySelector('div.external-link').textContent;
list_item.appendChild(title);
link = document.createElement("a");
link.appendChild(document.createTextNode(
item.querySelector('div.external-link').textContent));
link.href = item.querySelector('div.external-link').textContent;
link.className = "link";
link_par = document.createElement("p");
link_par.appendChild(link);
list_item.appendChild(link_par);
body = document.createElement("p");
body.className = "body";
if (item.querySelector('p.result-content') !== null)
body.innerHTML = item.querySelector('p.result-content').outerHTML;
else
body.innerHTML = "";
list_item.appendChild(body);
list.appendChild(list_item);
})
.declareMethod("clear", function () {
var list = document.getElementById("mynij-results");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
list = document.getElementById("searx-results");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
})
.declareMethod("cut_description", function (body, key) {
//function(body, description, key)
var result = new RegExp(
'[^.?!]*' + ' ' + key + ' ' + '[^.?!]*[.?!]', 'gm').exec(body);
if (result === null) {
//if (description !== "") return description; else....
result = new RegExp('[^.?!]*[.?!]').exec(body);
if (result === null) return "";
else return result[0];
})
.declareMethod("cut_link", function(link){
if (link === undefined) return "";
if (link.length > 70) return link.slice(0,70) + "...";
else return link;
});
}(window, RSVP, rJS, jIO));
\ No newline at end of file
}
else return result[0];
})
.declareMethod("cut_link", function (link) {
if (link === undefined) return "";
if (link.length > 70) return link.slice(0, 70) + "...";
else return link;
});
}(window, RSVP, rJS, document, DOMParser));
\ No newline at end of file
#search_div {
display : flex;
transition: all 1s;
}
#search_bar {
......@@ -11,6 +12,26 @@
width: 20%;
}
.search {
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.logo-search {
max-height: 130px;
}
.hide {
display: none;
}
@media (max-width: 600px) {
#mynij-results > li, #searx-results > li {
width: 100%;
}
}
/* body {
padding: 0;
margin: 0;
......@@ -133,14 +154,6 @@ input[type="button"]:hover{
} */
.result-box {
display : flex;
}
.result-box:after {
content: "";
clear: both;
}
.mynij-results, .searx-results {
margin-top : 20px;
......@@ -148,45 +161,43 @@ input[type="button"]:hover{
}
.logo-img {
width: 100%;
text-align: left;
height: 80px;
height: 25px;
}
.logo-img img {
height: 100%;
.logo-mynij {
margin-bottom: 5px;
}
#mynij-results, #searx-results {
display: inline-block;
width: 100%;
}
#mynij-results > li, #searx-results > li {
list-style-type: none;
position: relative;
margin-bottom: 20px;
padding-top: 1%;
padding-bottom: 1%;
padding-left : 1%;
padding: 10px 1%;
background: #fff;
color: #2b2b5d;
width: 90%;
max-width: 40em;
max-width: 50em;
text-align : left;
flex: inherit;
}
.title {
color: #3c459e;
text-decoration: none;
font-size: 1.3em;
max-width: 40em;
max-width: 50em;
}
.link, .link:visited {
text-decoration: none;
color: #009933;
max-width: 40em;
max-width: 50em;
}
.body {
color : #444444;
max-width: 40em;
max-width: 50em;
}
#mynij-results > a, #searx-results > a {
......@@ -223,3 +234,256 @@ input[type="button"]:hover{
font-weight: 100;
font-size: .8em;
}
.loading {
margin-top: 80px;
position: absolute;
top: 100px;
left: 50%;
transform: translate(-50%, -50%);
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
border: 2px solid red;
border-color: transparent #ff2c2c transparent #ff2c2c;
border-radius: 50%;
animation: spin .6s linear infinite;
display: inline-block;
}
.section-result {
position: relative;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/** Tabs CSS **/
.tabs {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
background: white;
padding: 20px;
padding-bottom: 80px;
border-radius: 5px;
min-width: 240px;
}
.tabs input[name="tab-control"] {
display: none;
}
.tabs ul li label {
font-family: "Montserrat";
font-weight: bold;
font-size: 18px;
color: #428bff;
}
.tabs ul {
list-style-type: none;
padding-left: 0;
display: -webkit-box;
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
margin: 0;
}
.tabs ul li {
box-sizing: border-box;
flex: 1;
width: 25%;
padding: 0 10px;
text-align: center;
}
.tabs ul li label {
color: #929daf;
overflow: hidden;
text-overflow: ellipsis;
display: block;
cursor: pointer;
transition: all 0.2s ease-in-out;
white-space: nowrap;
}
.tabs ul li label br {
display: none;
}
.tabs ul li label svg {
fill: #929daf;
height: 1.2em;
vertical-align: bottom;
margin-right: 0.2em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
outline: 0;
color: #bec5cf;
}
.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
fill: #bec5cf;
}
.tabs .slider {
position: relative;
width: 50%;
-webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.tabs .slider .indicator {
position: relative;
/*width: 50px;*/
max-width: 100%;
margin: 0 auto;
height: 4px;
background: #428bff;
border-radius: 1px;
}
.tabs .slider-border {
border-top: 4px solid #e2e6ef;
height: 1px;
width: 100%;
margin-top: -4px;
border-radius: 1px;
}
.tabs .content {
margin-top: 30px;
}
.tabs .content section {
display: none;
-webkit-animation-name: content;
animation-name: content;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
line-height: 1.4;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
cursor: default;
color: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg {
fill: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
cursor: default;
color: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg {
fill: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
cursor: default;
color: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg {
fill: #428bff;
}
@media (max-width: 600px) {
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
background: rgba(0, 0, 0, 0.08);
}
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
cursor: default;
color: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg {
fill: #428bff;
}
@media (max-width: 600px) {
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
background: rgba(0, 0, 0, 0.08);
}
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
-webkit-transform: translateX(300%);
transform: translateX(300%);
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
display: block;
}
@-webkit-keyframes content {
from {
opacity: 0;
-webkit-transform: translateY(5%);
transform: translateY(5%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes content {
from {
opacity: 0;
-webkit-transform: translateY(5%);
transform: translateY(5%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@media (max-width: 1000px) {
.tabs ul li label {
white-space: initial;
}
.tabs ul li label br {
display: initial;
}
.tabs ul li label svg {
height: 1.5em;
}
}
@media (max-width: 600px) {
/*.tabs ul li label span {
display: none;
}
.tabs .slider {
display: none;
}
.tabs .slider-border {
display: none;
}*/
.tabs .content {
margin-top: 20px;
}
}
/** END Tabs CSS **/
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