wazolab/ghibli-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle responsivness on Grid + Film components

Browse Source
This commit is contained in:
Noé Viricel
2020-12-18 02:37:32 +01:00
parent f2ba114d26
commit 3782c90647
3 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/Film/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<article
class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
class="film flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
>
<header class="p-4 rounded-t-md">
<h1>
@@ -56,6 +56,19 @@ export default {
</script>
<style lang="css" scoped>
@media screen and (min-width: 640px) {
.film {
margin: 1rem;
flex: 1 1 calc(50% - 2rem);
}
}
@media screen and (min-width: 1024px) {
.film {
flex: 1 1 calc(33% - 2rem);
}
}
header {
background-color: #85ffbd;
background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);

2
components/Grid/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-wrap">
<div class="flex flex-wrap justify-center">
<Film :key="film.id" v-for="film in dataSource" :film="film" />
</div>
</template>

2
components/Header/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<header
id="header"
class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md flex items-center justify-between"
class="fixed top-0 left-0 w-screen bg-white h-16 px-4 md:px-8 py-3 shadow-md flex items-center justify-between"
>
<router-link to="/" class="flex w-auto h-full items-center">
<img