- remove glyphicons- fonts
- add local open sans - reactive solr search - display flex for same height of columns - add .babelrec - add reactivesearch-vue components
This commit is contained in:
Arno Kaimbacher
parent
9855c235b7
commit
c91a487b98
34 changed files with 1137 additions and 6825 deletions
40
resources/assets/js/search/App.vue
Normal file
40
resources/assets/js/search/App.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div>{{ bar }}</div> -->
|
||||
<!-- Search input section -->
|
||||
<div class="row">
|
||||
<div class="twelve columns">
|
||||
<vs-input @search="onSearch"></vs-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results section -->
|
||||
<div class="results">
|
||||
<div class="card" v-for="item in results" :key="item.id">
|
||||
<img
|
||||
v-if="item.thumb"
|
||||
class="card-img-top"
|
||||
:src="item.thumb"
|
||||
:alt="item.title"
|
||||
@error="error(item)"
|
||||
/>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{item.name}}</h5>
|
||||
<!-- <p class="card-text" v-html="truncate(item.description || item.abstract, 50)"></p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
import App from './app-class.js';
|
||||
export default App;
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
color: #56b983;
|
||||
}
|
||||
</style>
|
||||
25
resources/assets/js/search/app-class.js
Normal file
25
resources/assets/js/search/app-class.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { Component, Vue, Prop, Provide } from 'vue-property-decorator';
|
||||
import VsInput from './components/vs-input.vue';
|
||||
import rdrApi from './search-results/search-api';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VsInput
|
||||
}
|
||||
})
|
||||
export default class App extends Vue {
|
||||
|
||||
results = [];
|
||||
bar = 'bar';
|
||||
|
||||
async onSearch(term) {
|
||||
console.log(term);
|
||||
this.results = await rdrApi.search(term);
|
||||
}
|
||||
|
||||
|
||||
mounted() {
|
||||
console.log('Component mounted.')
|
||||
}
|
||||
|
||||
}
|
||||
45
resources/assets/js/search/components/vs-input.vue
Normal file
45
resources/assets/js/search/components/vs-input.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div class="sidebar-simplesearch">
|
||||
<form method="GET" action="http://localhost:3002/search" accept-charset="UTF-8">
|
||||
<input
|
||||
class="search-input"
|
||||
placeholder="Enter your search term..."
|
||||
name="q"
|
||||
type="text"
|
||||
v-model="term"
|
||||
/>
|
||||
|
||||
<!-- <button @click="search()" class="css-1gklxk5 ekqohx90"> -->
|
||||
<button class="css-1gklxk5 ekqohx90">
|
||||
<svg
|
||||
alt="Search"
|
||||
class="search-icon"
|
||||
height="14"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 15 15"
|
||||
>
|
||||
<title>Search</title>
|
||||
<path
|
||||
d=" M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609, 0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021, 0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338, 4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z "
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lange="ts">
|
||||
import Vue from "vue";
|
||||
import { Component, Provide } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class VsInput extends Vue {
|
||||
term = "";
|
||||
bar = "bar";
|
||||
search() {
|
||||
//console.log(this.term);
|
||||
this.$emit("search", this.term);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
7
resources/assets/js/search/main.js
Normal file
7
resources/assets/js/search/main.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Vue from 'vue';
|
||||
import App from './App.vue';
|
||||
|
||||
new Vue({
|
||||
el: '#search-input',
|
||||
render: h => h(App)
|
||||
});
|
||||
18
resources/assets/js/search/search-results/search-api.js
Normal file
18
resources/assets/js/search/search-results/search-api.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
|
||||
async search (term) {
|
||||
// solr endpoint
|
||||
const host = 'http://voyagerdemo.com/';
|
||||
const path = 'daily/solr/v0/select';
|
||||
const fields = 'id,name:[name],thumb:[thumbURL],abstract,description'; // fields we want returned
|
||||
const api = `${host}${path}?q=${term}&fl=${fields}&wt=json&rows=20`;
|
||||
|
||||
const res = await axios.get(api);
|
||||
// const call = await fetch(api);
|
||||
// const json = await res.json();
|
||||
return res.data.response.docs;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -5,301 +5,193 @@
|
|||
@section('content')
|
||||
|
||||
<section data-sr id="search" class="search normal u-full-width">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="twelve columns">
|
||||
<h3 class="separator">SEARCH</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SEARCH RESULTS GO HERE, EXACTLY AS BEFORE -->
|
||||
<div class="content">
|
||||
<div class="sidebar-simplesearch">
|
||||
{{ Form::open(array('method' => 'GET')) }}
|
||||
{{-- <div class="container"> --}}
|
||||
|
||||
{!! Form::text('q', Input::get('q'), array('class'=>'u-full-width',
|
||||
'placeholder'=>'Enter your search term')) !!}
|
||||
<span class="input-group-btn">
|
||||
{{-- {{ Form::submit('Search', array('class' => 'btn btn-primary btn-lg')) }} --}}
|
||||
<button type="submit">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</span>
|
||||
{{-- <div class="row">
|
||||
<div class="twelve columns">
|
||||
<div class="content">
|
||||
<div class="sidebar-simplesearch">
|
||||
{{ Form::open(array('method' => 'GET')) }}
|
||||
{!! Form::text('q', Input::get('q'), array('class'=>'search-input',
|
||||
'placeholder'=>'Enter your search term')) !!}
|
||||
<span class="input-group-btn">
|
||||
<button type="submit">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</span>
|
||||
{{ Form::close() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<!-- SEARCH RESULTS GO HERE, EXACTLY AS BEFORE -->
|
||||
|
||||
{{ Form::close() }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-container row">
|
||||
|
||||
@if (isset($resultset))
|
||||
<div class="row">
|
||||
|
||||
<div class="four columns">
|
||||
<div id="left-bar">
|
||||
<h3 class="indexheader">Refine by</h3>
|
||||
<?php $facet = $resultset->getFacetSet()->getFacet('language'); ?>
|
||||
<div class="panel panel-primary">
|
||||
|
||||
{{-- <h3 class="panel-title">Language</h3> --}}
|
||||
<h3 class="filterViewModelName">Language</h3>
|
||||
|
||||
<ul class="filterItems">
|
||||
@foreach ($facet as $value => $count)
|
||||
@if ($count)
|
||||
<li class="list-group-item">
|
||||
<a class="firstLabel"
|
||||
href="?{{ http_build_query(array_merge(Input::all(), array('language' => $value))) }}">{{ $value }}</a>
|
||||
<span class="badge">{{ $count }}</span>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<?php $facet = $resultset->getFacetSet()->getFacet('datatype'); ?>
|
||||
<div class="panel panel-primary">
|
||||
{{-- <h3 class="panel-title">Datatype</h3> --}}
|
||||
<h3 class="filterViewModelName">Data Type</h3>
|
||||
<ul class="filterItems">
|
||||
@foreach ($facet as $value => $count)
|
||||
@if ($count)
|
||||
<li class="list-group-item">
|
||||
<a class="firstLabel"
|
||||
href="?{{ http_build_query(array_merge(Input::all(), array('datatype' => $value))) }}">{{ $value }}</a>
|
||||
<span class="badge">{{ $count }}</span>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<?php $facet = $resultset->getFacetSet()->getFacet('year'); ?>
|
||||
<div class="panel panel-primary">
|
||||
<h3 class="filterViewModelName">Year</h3>
|
||||
|
||||
<ul class="filterItems">
|
||||
@foreach ($facet as $value => $count)
|
||||
@if ($count)
|
||||
<li class="list-group-item">
|
||||
<a class="firstLabel"
|
||||
href="?{{ http_build_query(array_merge(Input::all(), array('year' => $value))) }}">{{ $value }}</a>
|
||||
<span class="badge">{{ $count }}</span>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eight columns">
|
||||
<div class="four columns left-bar">
|
||||
<div class="sidebar left-bar">
|
||||
{{-- <h3 class="indexheader">Refine by</h3> --}}
|
||||
<h2 class="indexheader">DataXplore</h2>
|
||||
@if (isset($resultset))
|
||||
<header>
|
||||
<p>Your search yielded <strong>{{ $resultset->getNumFound() }}</strong> results:</p>
|
||||
<hr />
|
||||
</header>
|
||||
|
||||
<section class="results normal">
|
||||
<ul class="search-items isotope js-isotope u-cf">
|
||||
@foreach ($resultset as $document)
|
||||
|
||||
<li>
|
||||
<div class="post">
|
||||
<header class="post-header">
|
||||
<h3 class="post-title">
|
||||
<a href="{{ URL::route('frontend.dataset.show',['id' =>$document->id]) }}">
|
||||
{{ $document->title_output }}
|
||||
</a>
|
||||
</h3>
|
||||
</header>
|
||||
<div class="blog-meta">
|
||||
{{ date('D, m M, Y', $document->server_date_modified) }}
|
||||
</div>
|
||||
@if (isset($document->title_additional) && is_array($document->title_additional))
|
||||
<div class="blog-meta">
|
||||
<em>Additional Title: {{ implode('; ', $document->title_additional) }}</em>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="post-description">
|
||||
|
||||
@if (is_array($document->author))
|
||||
<em>Author: {{ implode('; ', $document->author) }}</em>
|
||||
@endif
|
||||
|
||||
<p>
|
||||
<em>Abstract: {{ $document->abstract_output }}</em>
|
||||
</p>
|
||||
<p>
|
||||
<em>Creating Corporation: {{ $document->creating_corporation }}</em>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<?php $facet = $resultset->getFacetSet()->getFacet('language'); ?>
|
||||
<div class="panel panel-primary">
|
||||
<h3 class="panel-title">Language</h3>
|
||||
|
||||
<ul class="filter-items">
|
||||
@foreach ($facet as $value => $count)
|
||||
@if ($count)
|
||||
<li class="active" role="radio">
|
||||
<input class="css-w1gpbi" name="language" id="{{ $value }}" type="radio"
|
||||
value="{{ $value }}">
|
||||
<label for="{{ $value }}"><span>{{ $value }} ({{ $count }}) </span></label>
|
||||
</li>
|
||||
|
||||
{{-- <li class="list-group-item">
|
||||
<a class="firstLabel"
|
||||
href="?{{ http_build_query(array_merge(Input::all(), array('language' => $value))) }}">{{ $value }}</a>
|
||||
<span class="badge">{{ $count }}</span>
|
||||
</li> --}}
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<?php $facet = $resultset->getFacetSet()->getFacet('datatype'); ?>
|
||||
<div class="panel panel-primary">
|
||||
{{-- <h3 class="panel-title">Datatype</h3> --}}
|
||||
<h3 class="panel-title">Data Type</h3>
|
||||
<ul class="filterItems">
|
||||
@foreach ($facet as $value => $count)
|
||||
@if ($count)
|
||||
<li class="list-group-item">
|
||||
<a class="firstLabel"
|
||||
href="?{{ http_build_query(array_merge(Input::all(), array('datatype' => $value))) }}">{{ $value }} ({{ $count }})</a>
|
||||
{{-- <span class="badge">{{ $count }}</span> --}}
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<?php $facet = $resultset->getFacetSet()->getFacet('year'); ?>
|
||||
<div class="panel panel-primary">
|
||||
<h3 class="panel-title">Year</h3>
|
||||
|
||||
<ul class="filterItems">
|
||||
@foreach ($facet as $value => $count)
|
||||
@if ($count)
|
||||
<li class="list-group-item">
|
||||
<a class="firstLabel"
|
||||
href="?{{ http_build_query(array_merge(Input::all(), array('year' => $value))) }}">{{ $value }} ({{ $count }})</a>
|
||||
{{-- <span class="badge">{{ $count }}</span> --}}
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="eight columns right-bar">
|
||||
<div class="sidebar right-bar">
|
||||
<div id="search-input"></div>
|
||||
{{-- <div class="row">
|
||||
<div class="twelve columns">
|
||||
<div class="sidebar-simplesearch">
|
||||
{{ Form::open(array('method' => 'GET')) }}
|
||||
|
||||
{!! Form::text('q', Input::get('q'), array('class'=>'search-input',
|
||||
'placeholder'=>'Enter your search term...')) !!}
|
||||
|
||||
<button type="submit" class="css-1gklxk5 ekqohx90">
|
||||
<svg alt="Search" class="search-icon" height="14" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 15 15">
|
||||
<title>Search</title>
|
||||
<path
|
||||
d=" M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609, 0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021, 0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338, 4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z ">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
{{ Form::close() }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
@if (isset($resultset))
|
||||
<div class="results">
|
||||
<div class="result-list-info">
|
||||
<div class="resultheader">
|
||||
Your search yielded <strong>{{ $resultset->getNumFound() }}</strong> results:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="result-list-container">
|
||||
<div class="row">
|
||||
<ul class="search-items isotope js-isotope u-cf">
|
||||
@foreach ($resultset as $document)
|
||||
|
||||
|
||||
<li class="six columns post">
|
||||
<div class="search-detail">
|
||||
|
||||
<div>
|
||||
<a href="{{ URL::route('frontend.dataset.show',['id' =>$document->id]) }}">
|
||||
{{ $document->title_output }}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
{{ date('D, m M, Y', $document->server_date_modified) }}
|
||||
<p>
|
||||
@if (isset($document->title_additional) &&
|
||||
is_array($document->title_additional))
|
||||
<em>Additional Title: {{ implode('; ', $document->title_additional) }}</em>
|
||||
@endif
|
||||
</p>
|
||||
@if (is_array($document->author))
|
||||
<em>Author: {{ implode('; ', $document->author) }}</em>
|
||||
@endif
|
||||
<p class="clamped clamped-2">
|
||||
<span class="text">
|
||||
Abstract: {{ $document->abstract_output }}
|
||||
<span class="ellipsis">
|
||||
…
|
||||
</span>
|
||||
<span class="fill"></span>
|
||||
</span>
|
||||
</p>
|
||||
<div class="css-subject">
|
||||
<div class="css-keyword">#blade</div>
|
||||
<div class="css-keyword">#graphql</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
@endsection
|
||||
|
||||
|
||||
@section('head')
|
||||
<link rel="stylesheet" href="{{ asset('css/search_style.css') }}">
|
||||
@endsection
|
||||
|
||||
<style>
|
||||
*-------------------------------------------------- */
|
||||
|
||||
/* lists in the left bar */
|
||||
/*-------------------------------------------------- */
|
||||
.overflowing {
|
||||
color: #444444;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.overflowing span {
|
||||
color: #444444;
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul.filterItems li {
|
||||
min-height: 15px;
|
||||
color: #444;
|
||||
font-size: 12px;
|
||||
|
||||
list-style-type: disc;
|
||||
/*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 list’s container
|
||||
*/
|
||||
list-style-position: outside;
|
||||
/*
|
||||
* Because the bullet is outside of the list’s
|
||||
* container, indent the list entirely
|
||||
*/
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.filterItems.limited li:nth-of-type(1n+6) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.filterItems .active {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
/*ul.filterItems li.hover{
|
||||
background-color: yellow;
|
||||
}*/
|
||||
|
||||
/*ul.filterItems li.hover .firstLabel,
|
||||
ul.filterItems li.hover a{
|
||||
color: #0099cc;
|
||||
cursor:pointer;
|
||||
}*/
|
||||
|
||||
/*ul.filterItems span.hover {
|
||||
color: #0099cc;
|
||||
cursor:pointer;
|
||||
}*/
|
||||
ul.filterItems li a:hover {
|
||||
color: #0099cc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Relativer Tooltip */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
font-weight: bolder;
|
||||
color: #444444;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.sidebar.left {
|
||||
background-color: rgb(244, 244, 244);
|
||||
float: left;
|
||||
border-left: none;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* #left-bar {
|
||||
position:absolute;
|
||||
height:auto;
|
||||
width:auto;
|
||||
bottom:0;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
margin: 15px;
|
||||
} */
|
||||
|
||||
.sidebar.right {
|
||||
border: none;
|
||||
margin-left: 250px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#left-bar .indexheader {
|
||||
color: #a9a9a9;
|
||||
font-weight: bold;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
#left-bar .filterViewModelName {
|
||||
color: black;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
/* font-size: 12px; */
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.sidebar-simplesearch {
|
||||
position: relative;
|
||||
margin-bottom: 2.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar-simplesearch input[type=text] {
|
||||
padding: 0.25em 0.3em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sidebar-simplesearch button {
|
||||
padding: 0.25em 0.3em;
|
||||
border: none;
|
||||
background: none;
|
||||
position: absolute;
|
||||
right: 0.25em;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
||||
@endsection
|
||||
@section('after-scripts')
|
||||
<script type="text/javascript" src="{{ asset('js/search/main.js') }}"></script>
|
||||
@stop
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
|
||||
<!-- FONT
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<!-- <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'> -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet" type='text/css'>
|
||||
{{-- <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" /> --}}
|
||||
<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
|
||||
|
||||
<!-- CSS
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
|
|
@ -175,6 +175,7 @@
|
|||
|
||||
<!-- End Document
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
@yield('after-scripts')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue