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> </nav>
</div> </div>
<form <Search class="search-full" />
class="search"
@submit.prevent="search" <v-popover class="search-compact">
>
<input
v-model="query"
type="search"
class="search-input"
placeholder="Search..."
>
<button <button
type="submit" type="button"
class="search-button" class="search-button"
><Icon ><Icon
icon="search" icon="search"
/></button> /></button>
</form>
<Search
slot="popover"
class="compact"
/>
</v-popover>
</header> </header>
</template> </template>
<script> <script>
async function search() { import Search from './search.vue';
this.$router.push({ name: 'search', query: { q: this.query } });
}
export default { export default {
components: {
Search,
},
data() { data() {
return { return {
query: this.$route.query ? this.$route.query.q : null, query: this.$route.query ? this.$route.query.q : null,
}; };
}, },
methods: {
search,
},
}; };
</script> </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 { .search-button {
height: 100%; height: 100%;
padding: 0 1rem; padding: 0 1rem;
background: none; background: none;
border: none; border: none;
margin: .3rem 0 0 0; outline: none;
margin: .2rem 0 0 0;
.icon {
fill: $shadow-weak;
}
&:hover {
cursor: pointer;
.icon { .icon {
fill: $shadow; 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 { .nav-item {
flex-grow: 1; flex-grow: 1;
} }
.nav-link {
}
} }
</style> </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 { .tiles {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr)); grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
grid-gap: 1rem; grid-gap: 1rem;
} }
@ -85,6 +85,12 @@ export default {
} }
@media(max-width: $breakpoint4) { @media(max-width: $breakpoint4) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
}
}
@media(max-width: $breakpoint3) {
.tiles { .tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr)); grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
} }
@ -92,7 +98,7 @@ export default {
@media(max-width: $breakpoint) { @media(max-width: $breakpoint) {
.tiles { .tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
} }
} }
</style> </style>

View File

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