- better search page

- white header on starting page else green
This commit is contained in:
Arno Kaimbacher 2020-04-20 23:29:10 +02:00
parent 578021e07e
commit 7622c93473
11 changed files with 171 additions and 186 deletions

13
composer.lock generated
View File

@ -128,6 +128,7 @@
"keywords": [ "keywords": [
"laravel" "laravel"
], ],
"abandoned": true,
"time": "2019-12-30T22:50:51+00:00" "time": "2019-12-30T22:50:51+00:00"
}, },
{ {
@ -5210,16 +5211,16 @@
}, },
{ {
"name": "webmozart/assert", "name": "webmozart/assert",
"version": "1.7.0", "version": "1.8.0",
"source": { "source": {
"type": "git", "type": "git",
"url": "https://github.com/webmozart/assert.git", "url": "https://github.com/webmozart/assert.git",
"reference": "aed98a490f9a8f78468232db345ab9cf606cf598" "reference": "ab2cb0b3b559010b75981b1bdce728da3ee90ad6"
}, },
"dist": { "dist": {
"type": "zip", "type": "zip",
"url": "https://api.github.com/repos/webmozart/assert/zipball/aed98a490f9a8f78468232db345ab9cf606cf598", "url": "https://api.github.com/repos/webmozart/assert/zipball/ab2cb0b3b559010b75981b1bdce728da3ee90ad6",
"reference": "aed98a490f9a8f78468232db345ab9cf606cf598", "reference": "ab2cb0b3b559010b75981b1bdce728da3ee90ad6",
"shasum": "" "shasum": ""
}, },
"require": { "require": {
@ -5227,7 +5228,7 @@
"symfony/polyfill-ctype": "^1.8" "symfony/polyfill-ctype": "^1.8"
}, },
"conflict": { "conflict": {
"vimeo/psalm": "<3.6.0" "vimeo/psalm": "<3.9.1"
}, },
"require-dev": { "require-dev": {
"phpunit/phpunit": "^4.8.36 || ^7.5.13" "phpunit/phpunit": "^4.8.36 || ^7.5.13"
@ -5254,7 +5255,7 @@
"check", "check",
"validate" "validate"
], ],
"time": "2020-02-14T12:15:55+00:00" "time": "2020-04-18T12:12:48+00:00"
} }
], ],
"aliases": [], "aliases": [],

View File

@ -5,9 +5,7 @@
color: rgb(66, 66, 66); color: rgb(66, 66, 66);
box-sizing: border-box; box-sizing: border-box;
} }
.results {
padding-left: 4%;
}
.columns.right-bar { .columns.right-bar {
margin-left: 0% !important; margin-left: 0% !important;
} }
@ -45,9 +43,7 @@ section.search {
/* .record-elem h4 a { /* .record-elem h4 a {
color: #000; color: #000;
} */ } */
a.ng-binding {
cursor: pointer;
}
.record-elem h4 a { .record-elem h4 a {
cursor: pointer; cursor: pointer;
color: #000; color: #000;
@ -94,49 +90,52 @@ a.ng-binding {
} }
/* zenodo left side: */
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-default {
border-color: #ddd;
}
.panel-default > .panel-heading {
/* Search items */ color: #333;
/* .search-items { background-color: #f5f5f5;
list-style: none; border-color: #ddd;
width: 100%; padding: 10px 15px;
display: inline-block; border-bottom: 1px solid transparent;
} border-top-right-radius: 3px;
.search-items li { border-top-left-radius: 3px;
position: relative; }
overflow: hidden; .panel-title {
height: 360px; margin-top: 0;
margin: 0!important;
width: 50%;
border: 10px solid white;
position: relative;
padding-left: 15px;
padding-right: 15px;
}
.search-items li:nth-child(3n) {
margin-left: 0;
}
.search-items li img{
width: auto;
height: 100%;
display: block;
} */
/* Work detail */
/* .search-detail {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
align-items: center;
box-shadow: inset rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
opacity: 1;
border: 1px solid rgb(238, 238, 238);
box-sizing: border-box;
min-height: 300px;
font-size: 16px; font-size: 16px;
padding:20px; margin-bottom: 0;
} */ color: inherit;
}
.panel-body {
padding: 15px;
font-size: 14px;
line-height: 1.42857;
color: #333;
}
.list-inline, .list-unstyled {
padding-left: 0;
list-style: none;
margin-bottom: 10px;
margin-top: 0;
}
#left-bar .titlecase {
text-transform: capitalize;
}
@ -150,17 +149,6 @@ a.ng-binding {
/* filter items in the left bar */
/*-------------------------------------------------- */
.left-bar .panel-title {
text-transform: capitalize;
margin-top: 8px;
margin-bottom: 2px;
color: white;
display: block;
font-weight: bold;
}
.overflowing { .overflowing {
color: #444444; color: #444444;
list-style: none; list-style: none;
@ -174,44 +162,27 @@ a.ng-binding {
cursor: pointer; cursor: pointer;
} }
ul.filter-items li { /* ul.filter-items li {
min-height: 15px; min-height: 15px;
color: #444; color: #444;
font-size: 12px; font-size: 12px;
list-style-type: none; list-style-type: none;
/*list-style-position:inside;*/
/*
* We want the bullets outside of the list,
* so the text is aligned. Now the actual bullet
* is outside of the lists container
*/
list-style-position: outside; list-style-position: outside;
/*
* Because the bullet is outside of the lists
* container, indent the list entirely
*/
margin-left: 1em; margin-left: 1em;
} } */
.filter-items.limited li:nth-of-type(1n+3) { .filter-items.limited li:nth-of-type(1n+3) {
display: none; display: none;
} }
/* ul.filter-items .active { ul.filter-items li span {
background-color: lightgray;
} */
ul.filter-items li a {
cursor: pointer; cursor: pointer;
color:#ffffff; /* color:#ffffff;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px; */
} }
/* ul.filter-items li a:hover {
color: #0099cc;
cursor: pointer;
} */
/* Relativer Tooltip */ /* Relativer Tooltip */
.tooltip { .tooltip {
@ -237,19 +208,16 @@ font-size: 16px;
.sidebar.left-bar { .sidebar.left-bar {
float: left; float: left;
border-left: none; border-left: none;
/* width: 250px; */
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 1rem; padding: 25px;
/* height: 100vh; */
overflow-y: auto; overflow-y: auto;
background-color: #3abac4; /* background-color: #3abac4; */
opacity: .9; /* opacity: .9; */
color: white; /* color: white; */
position: relative; position: relative;
} }
/*
.left-bar .sidebar-image { .left-bar .sidebar-image {
background: url("../images/csm_kabel.png") no-repeat; background: url("../images/csm_kabel.png") no-repeat;
background-size: cover; background-size: cover;
@ -273,25 +241,24 @@ font-size: 16px;
.card { .card {
z-index: 1; z-index: 1;
position: relative; position: relative;
} */
}
.sidebar.right-bar { .sidebar.right-bar {
border: none; border: none;
padding: 25px;
/* margin-left: 250px; */ /* margin-left: 250px; */
/* background-color: lightblue; */ /* background-color: lightblue; */
} }
.left-bar .indexheader { /* .left-bar .indexheader {
font-weight: bold; font-weight: bold;
display: block; display: block;
color: white; color: white;
font-family: Monoton, cursive; font-family: Monoton, cursive;
/* font-size: 2rem; */
text-align: center; text-align: center;
} } */
@ -304,23 +271,26 @@ font-size: 16px;
white-space: nowrap; white-space: nowrap;
} }
.search-input { .search-input {
height: 50px !important; height: 50px !important;
border-color: currentcolor currentcolor rgb(204, 204, 204) !important; /* border-color: currentcolor currentcolor rgb(204, 204, 204) !important; */
border-style: none none solid !important; /* border-style: none none solid !important; */
border-width: medium medium 1px !important; /* border-width: medium medium 1px !important; */
border-image: none 100% / 1 / 0 stretch !important; /* border-image: none 100% / 1 / 0 stretch !important; */
/* background: rgb(250, 250, 250) none repeat scroll 0% 0%; */ /* background: rgb(250, 250, 250) none repeat scroll 0% 0%; */
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s; /* transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s; */
background-color: rgb(250, 250, 250) !important; background-color: rgb(250, 250, 250) !important;
width: 100%; width: 100%;
outline: currentcolor none medium; /* outline: currentcolor none medium; */
border-radius: 0px !important; /* border-radius: 0px !important; */
border: 1px solid;
border-radius: 4px;
} }
.css-1gklxk5 { .search-button {
position: absolute; position: absolute;
top: 8px; top: 8px;
cursor: pointer; cursor: pointer;
@ -329,7 +299,7 @@ font-size: 16px;
left: 0.25em; left: 0.25em;
border: none; border: none;
} }
.css-1gklxk5 svg.search-icon { .search-button svg.search-icon {
fill: rgb(0, 128, 0); fill: rgb(0, 128, 0);
} }
.sidebar-simplesearch input[type=text] { .sidebar-simplesearch input[type=text] {
@ -389,22 +359,6 @@ font-size: 16px;
.filter-items {
list-style: outside none none;
padding: 0px 0px 12px;
margin: 0px;
/* max-height: 240px; */
position: relative;
overflow-y: auto;
}
.filter-items li {
min-height: 30px;
display: flex;
flex-direction: row;
-moz-box-align: center;
align-items: center;
padding-left: 2px;
}
.css-w1gpbi { .css-w1gpbi {
border: 0px none; border: 0px none;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);

57
public/css/style.css vendored
View File

@ -274,6 +274,11 @@ section.normal {
color: #222; color: #222;
background-color: transparent; background-color: transparent;
} }
.navigation.transparent {
background-color: #fff;
border-bottom: 1px solid #dcdcdc;
}
.navigation.active { .navigation.active {
/* make visible visible */ /* make visible visible */
@ -303,18 +308,18 @@ section.normal {
-ms-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
background-color: #fff; background:#3ad29f;
border-bottom: 1px solid #dcdcdc; /* border-bottom: 1px solid #dcdcdc; */
} }
.navigation ul { .navigation ul {
list-style: none; /* display:none; */
/* position: absolute; width:100%;
top: 0; list-style:none;
left: 0;
right: 0; */
margin: 0; margin: 0;
background-color: #fff; padding:0;
/* background-color: #fff; */
} }
.header ul li { .header ul li {
display: block; display: block;
@ -322,23 +327,39 @@ section.normal {
text-align: center; text-align: center;
margin: 0; margin: 0;
} }
.navigation ul li a {
display: inline-block; .navigation.transparent ul li a {
padding: 14px 16px;
height: 100%;
text-transform: uppercase;
color: #757575; color: #757575;
font-size: 1.7rem; background-color: white;
text-decoration: none;
transition: 0.2s;
} }
.navigation ul li a.current, .navigation ul li a {
.navigation ul li a:hover { display: block;
padding:1em;
background:#3ad29f; /* green */
color: white;
/* font-size: 1.7rem; */
text-decoration: none;
/* border-right: 1px solid #28b183; */
}
#nav.transparent ul li a.current,
#nav.transparent ul li a:hover {
background-color: #eee; background-color: #eee;
color: #757575; color: #757575;
} }
#nav ul li a.current,
#nav ul li a:hover {
background: #2dc592;
}
.navigation ul li a.current,
/* .navigation ul li a:hover {
background-color: #eee;
color: #757575;
} */
/* Float right the list item that should be right aligned */ /* Float right the list item that should be right aligned */
.navigation ul li.right { float: right; } .navigation ul li.right { float: right; }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -45,11 +45,14 @@ $(document).ready(function () {
$navigationLink = $('.menu a'); $navigationLink = $('.menu a');
if (location.pathname == "/") { if (location.pathname == "/") {
$navigation.addClass('transparent');
$(window).scroll(function () { $(window).scroll(function () {
if (window.scrollY > window.outerHeight) { if (window.scrollY >= (window.innerHeight + $navigation.height())) {
$menuIcon.addClass('active'); $menuIcon.addClass('active');
$navigation.removeClass('transparent');
} else { } else {
$menuIcon.removeClass('active'); $menuIcon.removeClass('active');
$navigation.addClass('transparent');
} }
}); });
} }

View File

@ -2,7 +2,7 @@
<div class="search-container row"> <div class="search-container row">
<div class="four columns left-bar"> <div class="four columns left-bar">
<div id="left-bar" class="sidebar left-bar"> <div id="left-bar" class="sidebar left-bar">
<div class="sidebar-image"></div> <!-- <div class="sidebar-image"></div> -->
<!-- <h2 class="indexheader">DataXplore</h2> --> <!-- <h2 class="indexheader">DataXplore</h2> -->
<!-- <div class="card" v-for="item in facets.language" :key="item.id"> <!-- <div class="card" v-for="item in facets.language" :key="item.id">
@ -21,7 +21,7 @@
<div id="right-bar" class="sidebar right-bar"> <div id="right-bar" class="sidebar right-bar">
<!-- Search input section --> <!-- Search input section -->
<div class="row"> <div class="row">
<div class="twelve columns"> <div class="ten columns">
<vs-input @search="onSearch" title="searching solr datasets" placeholder="Enter your search term..."></vs-input> <vs-input @search="onSearch" title="searching solr datasets" placeholder="Enter your search term..."></vs-input>
</div> </div>
</div> </div>
@ -84,9 +84,6 @@ export default App;
</script> </script>
<style lang="scss"> <style lang="scss">
.resultheader {
padding-left: 4%;
}
#app { #app {
color: #56b983; color: #56b983;
} }

View File

@ -1,12 +1,17 @@
<template> <template>
<!-- <span>property: {{ filterName }}</span> <!-- <span>property: {{ filterName }}</span>-->
<span>value: {{ myLanguageFilters }}</span>-->
<div class="panel panel-default">
<!-- <h3 class="panel-title filterViewModelName">{{ filterName }}</h3> -->
<div class="panel-heading">
<h3 class="panel-title titlecase filterViewModelName">{{ filterName }}</h3>
</div>
<div class="panel-body">
<div class="panel panel-primary">
<h3 class="panel-title filterViewModelName">{{ filterName }}</h3>
<!-- e.g.language --> <!-- e.g.language -->
<ul class="filter-items" v-bind:class="{'limited':filterItems.length > 1 && collapsed }"> <ul class="filter-items list-unstyled" v-bind:class="{'limited':filterItems.length > 1 && collapsed }">
<li v-for="(item, index) in filterItems" :key="index" class="list-group-item"> <li v-for="(item, index) in filterItems" :key="index" class="list-group-item titlecase">
<!-- <input <!-- <input
class="css-w1gpbi" class="css-w1gpbi"
name="language" name="language"
@ -17,7 +22,9 @@
<label :for="item.value"> <label :for="item.value">
<span click: @click="activateItem(item)">{{ item.value }} ({{ item.count }})</span> <span click: @click="activateItem(item)">{{ item.value }} ({{ item.count }})</span>
</label>--> </label>-->
<a :class="item.Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.value }} ({{ item.count }})</a> <span :class="item.Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.value }}
({{ item.count }})
</span>
</li> </li>
</ul> </ul>
<ul class="overflowing" v-if="overflowing == true"> <ul class="overflowing" v-if="overflowing == true">
@ -26,19 +33,21 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import FacetCategory from "./facet-category-class"; import FacetCategory from "./facet-category-class";
export default FacetCategory; export default FacetCategory;
</script> </script>
<style scoped> <style scoped>
/* local styles */ /* local styles */
.disabled { .disabled {
/* color: #EBEBE4; */ /* color: #EBEBE4; */
color:lightgray; color: lightgray;
pointer-events: none; pointer-events: none;
text-decoration:line-through; text-decoration: line-through;
} }
</style> </style>

View File

@ -35,11 +35,11 @@
</a> </a>
</h4> </h4>
<p>
<span v-if="document.author && document.author.length > 0" v-for="author in document.author"> <p v-if="document.author && document.author.length > 0">
<!-- <span>Author: {{ document.author.join(', ') }}</span> --> <!-- <span>Author: {{ document.author.join(', ') }}</span> -->
<span>{{ author }}; </span> <span v-for="(author,index) in document.author" :key="index">{{ author }}; </span>
</span> </p>
<!-- <p v-if="document.title_additional && document.title_additional.length > 0"> <!-- <p v-if="document.title_additional && document.title_additional.length > 0">

View File

@ -16,7 +16,7 @@
/> />
<!-- <button @click="search()" class="css-1gklxk5 ekqohx90"> --> <!-- <button @click="search()" class="css-1gklxk5 ekqohx90"> -->
<button class="css-1gklxk5 ekqohx90"> <button class="search-button ekqohx90">
<svg <svg
alt="Search" alt="Search"
@click="search()" @click="search()"

View File

@ -57,7 +57,7 @@
<!-- Menu --> <!-- Menu -->
<header class="header"> <header class="header">
<nav class="navigation"> <nav class="navigation" id="nav">
<a href="#" class="menu-icon {{ Route::currentRouteName() != 'frontend.home.index' ? 'active' : '' }}""> <a href="#" class="menu-icon {{ Route::currentRouteName() != 'frontend.home.index' ? 'active' : '' }}"">
<i class=" fa fa-bars"></i> <i class=" fa fa-bars"></i>
</a> </a>