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

View File

@ -5,9 +5,7 @@
color: rgb(66, 66, 66);
box-sizing: border-box;
}
.results {
padding-left: 4%;
}
.columns.right-bar {
margin-left: 0% !important;
}
@ -45,9 +43,7 @@ section.search {
/* .record-elem h4 a {
color: #000;
} */
a.ng-binding {
cursor: pointer;
}
.record-elem h4 a {
cursor: pointer;
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;
}
/* Search items */
/* .search-items {
list-style: none;
width: 100%;
display: inline-block;
}
.search-items li {
position: relative;
overflow: hidden;
height: 360px;
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;
.panel-default > .panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-title {
margin-top: 0;
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 {
color: #444444;
list-style: none;
@ -174,44 +162,27 @@ a.ng-binding {
cursor: pointer;
}
ul.filter-items li {
/* ul.filter-items li {
min-height: 15px;
color: #444;
font-size: 12px;
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;
/*
* Because the bullet is outside of the lists
* container, indent the list entirely
*/
margin-left: 1em;
}
} */
.filter-items.limited li:nth-of-type(1n+3) {
display: none;
}
/* ul.filter-items .active {
background-color: lightgray;
} */
ul.filter-items li a {
ul.filter-items li span {
cursor: pointer;
color:#ffffff;
/* color:#ffffff;
text-decoration: none;
font-weight: bold;
font-size: 16px;
font-size: 16px; */
}
/* ul.filter-items li a:hover {
color: #0099cc;
cursor: pointer;
} */
/* Relativer Tooltip */
.tooltip {
@ -237,19 +208,16 @@ font-size: 16px;
.sidebar.left-bar {
float: left;
border-left: none;
/* width: 250px; */
width: 100%;
height: 100%;
padding: 1rem;
/* height: 100vh; */
padding: 25px;
overflow-y: auto;
background-color: #3abac4;
opacity: .9;
color: white;
/* background-color: #3abac4; */
/* opacity: .9; */
/* color: white; */
position: relative;
}
/*
.left-bar .sidebar-image {
background: url("../images/csm_kabel.png") no-repeat;
background-size: cover;
@ -273,25 +241,24 @@ font-size: 16px;
.card {
z-index: 1;
position: relative;
}
} */
.sidebar.right-bar {
border: none;
padding: 25px;
/* margin-left: 250px; */
/* background-color: lightblue; */
}
.left-bar .indexheader {
/* .left-bar .indexheader {
font-weight: bold;
display: block;
color: white;
font-family: Monoton, cursive;
/* font-size: 2rem; */
text-align: center;
}
} */
@ -304,23 +271,26 @@ font-size: 16px;
white-space: nowrap;
}
.search-input {
height: 50px !important;
border-color: currentcolor currentcolor rgb(204, 204, 204) !important;
border-style: none none solid !important;
border-width: medium medium 1px !important;
border-image: none 100% / 1 / 0 stretch !important;
/* border-color: currentcolor currentcolor rgb(204, 204, 204) !important; */
/* border-style: none none solid !important; */
/* border-width: medium medium 1px !important; */
/* border-image: none 100% / 1 / 0 stretch !important; */
/* 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;
width: 100%;
outline: currentcolor none medium;
border-radius: 0px !important;
/* outline: currentcolor none medium; */
/* border-radius: 0px !important; */
border: 1px solid;
border-radius: 4px;
}
.css-1gklxk5 {
.search-button {
position: absolute;
top: 8px;
cursor: pointer;
@ -329,7 +299,7 @@ font-size: 16px;
left: 0.25em;
border: none;
}
.css-1gklxk5 svg.search-icon {
.search-button svg.search-icon {
fill: rgb(0, 128, 0);
}
.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 {
border: 0px none;
clip: rect(1px, 1px, 1px, 1px);

57
public/css/style.css vendored
View File

@ -274,6 +274,11 @@ section.normal {
color: #222;
background-color: transparent;
}
.navigation.transparent {
background-color: #fff;
border-bottom: 1px solid #dcdcdc;
}
.navigation.active {
/* make visible visible */
@ -303,18 +308,18 @@ section.normal {
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #fff;
border-bottom: 1px solid #dcdcdc;
background:#3ad29f;
/* border-bottom: 1px solid #dcdcdc; */
}
.navigation ul {
list-style: none;
/* position: absolute;
top: 0;
left: 0;
right: 0; */
/* display:none; */
width:100%;
list-style:none;
margin: 0;
background-color: #fff;
padding:0;
/* background-color: #fff; */
}
.header ul li {
display: block;
@ -322,23 +327,39 @@ section.normal {
text-align: center;
margin: 0;
}
.navigation ul li a {
display: inline-block;
padding: 14px 16px;
height: 100%;
text-transform: uppercase;
.navigation.transparent ul li a {
color: #757575;
font-size: 1.7rem;
text-decoration: none;
transition: 0.2s;
background-color: white;
}
.navigation ul li a.current,
.navigation ul li a:hover {
.navigation ul li a {
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;
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 */
.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');
if (location.pathname == "/") {
$navigation.addClass('transparent');
$(window).scroll(function () {
if (window.scrollY > window.outerHeight) {
if (window.scrollY >= (window.innerHeight + $navigation.height())) {
$menuIcon.addClass('active');
$navigation.removeClass('transparent');
} else {
$menuIcon.removeClass('active');
$navigation.addClass('transparent');
}
});
}

View File

@ -2,7 +2,7 @@
<div class="search-container row">
<div class="four columns 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> -->
<!-- <div class="card" v-for="item in facets.language" :key="item.id">
@ -21,7 +21,7 @@
<div id="right-bar" class="sidebar right-bar">
<!-- Search input section -->
<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>
</div>
</div>
@ -84,9 +84,6 @@ export default App;
</script>
<style lang="scss">
.resultheader {
padding-left: 4%;
}
#app {
color: #56b983;
}

View File

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

View File

@ -35,11 +35,11 @@
</a>
</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 }}; </span>
</span>
<span v-for="(author,index) in document.author" :key="index">{{ author }}; </span>
</p>
<!-- <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 class="css-1gklxk5 ekqohx90">
<button class="search-button ekqohx90">
<svg
alt="Search"
@click="search()"

View File

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