Yann/Projet6
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed size of image in best film small screen

Browse Source
This commit is contained in:
yann 2025-03-11 09:41:25 +01:00
parent 8829df6d2b
commit b7f66d09a7
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -15,6 +15,11 @@
background-color: lightgray; background-color: lightgray;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.bfilm {
width: 100%;
padding-top: 80%;
}
.overlay { .overlay {
position: absolute; position: absolute;
top: 10rem; top: 10rem;
@ -28,6 +33,7 @@
} }
</style> </style>
</head> </head>

9
script.js
View File

@ -10,18 +10,19 @@ async function bestFilm(filmId) {
let blockToLook = document.getElementById("bestFilm"); let blockToLook = document.getElementById("bestFilm");
let detail = ` let detail = `
<div class="row">
<div class="col d-flex justify-content-center my-2"> <div class="col d-flex justify-content-center my-2">
<img class="img-fluid" src="${bfilm.image_url}" alt="film cover"> <img class="img-fluid d-none d-md-block" src="${bfilm.image_url}" alt="film cover">
</div> </div>
<div class="col-sm-12 col-md-9 my-3"> <div class="col-12 d-flex items- d-block d-md-none">
<div class="bfilm" style="background-image: url(${bfilm.image_url}); "></div>
</div>
<div class="col-12 col-md-9 my-3">
<div class="col-12 d-flex justify-content-start"><h2>${bfilm.title}</h2></div> <div class="col-12 d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
<div class="col-12">${bfilm.description}</div> <div class="col-12">${bfilm.description}</div>
<div class="col-12 d-flex justify-content-end"> <div class="col-12 d-flex justify-content-end">
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button> <button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
</div> </div>
</div> </div>
</div>
`; `;
blockToLook.innerHTML += detail; blockToLook.innerHTML += detail;
getModalDetail(bfilm, bfilm.id, blockToLook); getModalDetail(bfilm, bfilm.id, blockToLook);