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">
.section {
font-size: 0.8rem;
padding: 0;
}
.card {
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-repeat: repeat;
padding: 1.8em;
width: 28em;
// width: 28em;
}
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.mt-3 {
margin-top: 1rem !important;
// .mt-3 {
// margin-top: 1rem !important;
// }
.columns:not(:last-child) {
margin-bottom: calc(1.5rem - 0.75rem);
display: flex;
}
.button {
background-color: #33cccc;

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

@ -48,10 +48,10 @@
</figure> -->
<!-- class="columns help u-full-width featured-bg-image"> -->
<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""> -->
<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">
<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>
@ -63,7 +63,7 @@
</div>
<div class="control">
<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>
</div>
</div>