geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki Activity

- search page styling

Browse Source
This commit is contained in:
Arno Kaimbacher 2021-12-21 14:58:22 +01:00
parent fafa254851
commit c5778f1356
4 changed files with 113 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/assets/scss/main-styles.scss
View File

@ -443,6 +443,35 @@ body {
} }
// search banner
.banner {
background-image: url(./../../assets/site/img/main-search-banner.jpg);
background-size: cover;
background-position-x: center;
background-position-y: 25%;
background-repeat: no-repeat;
padding: 6.2em 0 6.2em 0;
min-height: 400px;
width: 100%;
/* display: flex;
flex-direction: column; */
justify-content: center;
align-items: center;
}
.mz-5 {
margin-bottom: 1.5 rem;
}
@media (max-width: 576px) {
.banner {
align-items: flex-start;
height: 400px;
}
}
@media only screen and (max-width: 580px) { @media only screen and (max-width: 580px) {
.mobile-space { .mobile-space {

114
src/components/vs-input/vs-input.vue
View File

@ -1,34 +1,39 @@
<template> <template>
<div> <div>
<div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> <!-- <div class="content column is-half is-offset-one-quarter" style="margin-top: 30px; padding-bottom: 0; margin-bottom: 0px"> -->
<div class="field has-addons"> <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<div class="control is-expanded"> <div class="search-box mx-auto">
<input <div class="field has-addons main-search-from-bg">
v-on:input="searchChanged" <div class="control is-expanded">
id="search_query" <input
class="input is-medium" v-on:input="searchChanged"
type="text" id="search_query"
name="q" class="input is-medium"
autocomplete="off" type="text"
v-model="display" name="q"
v-bind:placeholder="placeholder" autocomplete="off"
v-on:keydown.down="onArrowDown" v-model="display"
v-on:keydown.up="onArrowUp" v-bind:placeholder="placeholder"
v-on:keydown.enter="onEnter" v-on:keydown.down="onArrowDown"
@keydown.tab="close" v-on:keydown.up="onArrowUp"
v-on:focus="focus" v-on:keydown.enter="onEnter"
/> @keydown.tab="close"
<!-- <p>Message is: {{ display }}</p> v-on:input="searchChanged"--> v-on:focus="focus"
</div> />
<!-- <p>Message is: {{ display }}</p> v-on:input="searchChanged"-->
</div>
<div class="control"> <div class="control">
<button class="button input is-medium search-button-icon" @click="search()"> <button class="button input is-medium search-button-icon" @click="search()">
<img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" /> <!-- <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" /> -->
</button> <i class="fas fa-search text-white"></i>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="autocomplete-column is-half is-offset-one-quarter"> <!-- <div class="column is-half is-offset-one-quarter"> -->
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<ul class="autocomplete-results pure-u-23-24" v-show="showResults"> <ul class="autocomplete-results pure-u-23-24" v-show="showResults">
<li class="loading" v-if="isLoading">Loading results...</li> <li class="loading" v-if="isLoading">Loading results...</li>
@ -56,14 +61,59 @@ export default VsInput;
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.autocomplete-column { // .columns:not(:last-child) {
display: block; // margin-bottom: calc(1.5rem - 0.75rem);
flex-basis: 0; // display: flex;
flex-grow: 1; // }
flex-shrink: 1;
padding: 0 0.75rem 0.75rem 0.75rem; .main-search-from-bg {
position: relative; background-color: #fff;
padding: 0.2em;
} }
.column {
display: block;
// flex-basis: 0;
// flex-grow: 1;
// flex-shrink: 1;
/* padding: 0.75rem; */
position: relative;
padding: 0;
}
.button {
background-color: #33cccc;
// border-color: #dbdbdb;
border-width: 0;
color: #363636;
cursor: pointer;
justify-content: center;
padding-bottom: 0;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
text-align: center;
white-space: nowrap;
}
.search-box {
background-image: url(./../../assets/site/img/white-pixel.png);
background-repeat: repeat;
padding: 1.8em;
// width: 28em;
}
.control .input,
.control .input:focus,
.column .input.selected {
// background-color: white;
/* border-color: #dbdbdb; */
// border: 0;
// outline: none;
border-radius: 4px;
color: #363636;
}
.autocomplete-results { .autocomplete-results {
padding: 0; padding: 0;
margin: 0; margin: 0;

1
src/views/dataset-detail.component.ts/dataset-detail.component.vue
View File

@ -8,6 +8,7 @@
<button v-on:click="goBack">Back</button> <button v-on:click="goBack">Back</button>
</section> </section>
</div> --> </div> -->
<div class="container-fluid banner mz-5"></div>
<section class="section" v-if="loaded"> <section class="section" v-if="loaded">
<div class="container"> <div class="container">
<!-- <span class="is-size-5"> Basic Table </span> <!-- <span class="is-size-5"> Basic Table </span>

28
src/views/search-view/search-view-component.vue
View File

@ -142,30 +142,4 @@ import SearchViewComponent from "./search-view-component";
export default SearchViewComponent; export default SearchViewComponent;
</script> </script>
<style scoped> <style scoped></style>
.banner {
background-image: url(./../../assets/site/img/main-search-banner.jpg);
background-size: cover;
background-position-x: center;
background-position-y: 25%;
background-repeat: no-repeat;
padding: 6.2em;
min-height: 400px;
width: 100%;
/* display: flex;
flex-direction: column; */
justify-content: center;
align-items: center;
}
.mz-5 {
margin-bottom: 1.5 rem;
}
@media (max-width: 576px) {
.banner {
align-items: flex-start;
height: 400px;
}
}
</style>