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

- full responsive styling for search detail page and home view component

Browse Source
This commit is contained in:
Arno Kaimbacher 2021-12-16 23:53:15 +01:00
parent 646f1b3843
commit 1ea0c15504
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -220,6 +220,7 @@ export default DatasetDetailComponent;
<style scoped lang="scss"> <style scoped lang="scss">
.section { .section {
font-size: 0.8rem; font-size: 0.8rem;
padding: 0;
} }
.card { .card {
border-radius: 0; border-radius: 0;

10
src/views/home-view/home-view-component.scss
View File

@ -17,14 +17,18 @@ h6 {
background-image: url(./../../assets/site/img/white-pixel.png); background-image: url(./../../assets/site/img/white-pixel.png);
background-repeat: repeat; background-repeat: repeat;
padding: 1.8em; padding: 1.8em;
width: 28em; // width: 28em;
} }
.mx-auto { .mx-auto {
margin-right: auto !important; margin-right: auto !important;
margin-left: auto !important; margin-left: auto !important;
} }
.mt-3 { // .mt-3 {
margin-top: 1rem !important; // margin-top: 1rem !important;
// }
.columns:not(:last-child) {
margin-bottom: calc(1.5rem - 0.75rem);
display: flex;
} }
.button { .button {
background-color: #33cccc; background-color: #33cccc;

6
src/views/home-view/home-view-component.vue
View File

@ -48,10 +48,10 @@
</figure> --> </figure> -->
<!-- class="columns help u-full-width featured-bg-image"> --> <!-- class="columns help u-full-width featured-bg-image"> -->
<section data-sr id="help" class="columns header-image align-items-center h-100"> <section data-sr id="help" class="columns header-image align-items-center h-100">
<div class="column is-one-third mx-auto"> <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<!-- <img src="site/img/Main-banner-homepage-1280.jpg" class="img-fluid""> --> <!-- <img src="site/img/Main-banner-homepage-1280.jpg" class="img-fluid""> -->
<div class="search-box mt-3 mx-auto"> <div class="search-box mx-auto">
<!-- <form class="my-2 my-lg-0 main-search-from-bg d-flex d-row"> <!-- <form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
<input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" /> <input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
<button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button> <button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
@ -63,7 +63,7 @@
</div> </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" /> <i class="fas fa-search text-white"></i>
</button> </button>
</div> </div>
</div> </div>