Improved mobile layout for header search. Improved release tile layout behavior.

This commit is contained in:
ThePendulum 2020-02-26 04:07:35 +01:00
parent ec70c4f0c7
commit 82d1f0fd38
4 changed files with 161 additions and 78 deletions

View File

@ -59,40 +59,36 @@
</nav>
</div>
<form
class="search"
@submit.prevent="search"
>
<input
v-model="query"
type="search"
class="search-input"
placeholder="Search..."
>
<Search class="search-full" />
<v-popover class="search-compact">
<button
type="submit"
type="button"
class="search-button"
><Icon
icon="search"
/></button>
</form>
<Search
slot="popover"
class="compact"
/>
</v-popover>
</header>
</template>
<script>
async function search() {
this.$router.push({ name: 'search', query: { q: this.query } });
}
import Search from './search.vue';
export default {
components: {
Search,
},
data() {
return {
query: this.$route.query ? this.$route.query.q : null,
};
},
methods: {
search,
},
};
</script>
@ -166,67 +162,34 @@ export default {
}
}
.search {
height: 100%;
max-width: 20rem;
display: flex;
flex-grow: 1;
align-items: center;
justify-content: flex-end;
padding: 0 1rem 0 0;
border-left: solid 1px $shadow-hint;
}
.search-input {
height: 100%;
width: 100%;
padding: 0 .5rem;
border: none;
outline: none;
font-size: 1rem;
outline: none;
&::placeholder {
color: $shadow;
}
&::-webkit-search-cancel-button {
-webkit-appearance: none;
padding: .5rem;
position: relative;
right: 0;
color: $text;
background: url('/img/cancel-circle2.svg');
opacity: .25;
&:hover {
opacity: .5;
cursor: pointer;
}
}
&:focus::placeholder {
color: $shadow-weak;
}
}
.search-button {
height: 100%;
padding: 0 1rem;
background: none;
border: none;
margin: .3rem 0 0 0;
.icon {
fill: $shadow-weak;
}
&:hover {
cursor: pointer;
outline: none;
margin: .2rem 0 0 0;
.icon {
fill: $shadow;
}
&:focus .icon {
fill: $primary;
}
}
.search-compact {
display: none;
}
@media(max-width: $breakpoint2) {
.search-full {
display: none;
}
.search-compact {
display: flex;
}
}
@ -243,10 +206,5 @@ export default {
.nav-item {
flex-grow: 1;
}
.nav-link {
}
}
</style>

View File

@ -0,0 +1,119 @@
<template>
<form
class="search"
@submit.prevent="search"
>
<input
v-model="query"
type="search"
class="search-input"
placeholder="Search..."
>
<button
type="submit"
class="search-button"
><Icon
icon="search"
/></button>
</form>
</template>
<script>
async function search() {
this.$router.push({ name: 'search', query: { q: this.query } });
}
export default {
data() {
return {
query: null,
};
},
methods: {
search,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.search {
height: 100%;
max-width: 20rem;
display: flex;
flex-grow: 1;
align-items: center;
justify-content: flex-end;
padding: 0 1rem 0 0;
border-left: solid 1px $shadow-hint;
&.compact {
padding: 0;
border: none;
.search-input {
border: solid 1px $shadow-hint;
}
.search-button {
padding: 0 .5rem 0 1rem;
margin: 0;
}
}
}
.search-input {
height: 100%;
width: 100%;
padding: .5rem;
border: none;
outline: none;
font-size: 1rem;
outline: none;
&::placeholder {
color: $shadow;
}
&::-webkit-search-cancel-button {
-webkit-appearance: none;
padding: .5rem;
position: relative;
right: 0;
color: $text;
background: url('/img/cancel-circle2.svg');
opacity: .25;
&:hover {
opacity: .5;
cursor: pointer;
}
}
&:focus::placeholder {
color: $shadow-weak;
}
}
.search-button {
height: 100%;
padding: 0 1rem;
background: none;
border: none;
margin: .3rem 0 0 0;
outline: none;
.icon {
fill: $shadow-weak;
}
&:hover {
cursor: pointer;
.icon {
fill: $shadow;
}
}
}
</style>

View File

@ -75,7 +75,7 @@ export default {
.tiles {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
grid-gap: 1rem;
}
@ -85,6 +85,12 @@ export default {
}
@media(max-width: $breakpoint4) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
}
}
@media(max-width: $breakpoint3) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
}
@ -92,7 +98,7 @@ export default {
@media(max-width: $breakpoint) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
}
</style>

View File

@ -81,12 +81,12 @@
}
&.popover {
$color: #f9f9f9;
$color: #fff;
.popover-inner {
background: $color;
color: black;
padding: 24px;
padding: .5rem;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}