Commit 216df245 authored by Philippe Dpt35's avatar Philippe Dpt35

Amélioration de la vue adaptative

parent c19e738e
......@@ -147,6 +147,8 @@ p {
}
.pre {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 51%;
position: relative;
......@@ -223,6 +225,7 @@ padding-bottom: 5px;
.erreur {
position: relative;
display: block;
color: red;
font-weight: bold;
font-size: 5vh;
......@@ -232,20 +235,21 @@ padding-bottom: 5px;
display: flex;
flex-wrap: wrap;
width: 75%;
/* background-color: red;
opacity: 0.5; */
background-color: red;
opacity: 0.5;
margin-top: -12%;
}
#enclos1, #enclos2 {
margin-left: 14%;
margin-top: 20%;
height: 58%;
/* margin-top: -10%; */
height: 60%;
}
#enclos3, #enclos4 {
margin-left: 15%;
margin-top: 5%;
height: 64%;
margin-left: 18%;
/* margin-top: -5%; */
height: 58%;
}
#reserve img.animal {
......@@ -298,37 +302,58 @@ img.animal1 {
margin-top: 5%;
}
@media (min-aspect-ratio: 16/11) {
.enclos {
width: 65%;
}
@media (min-aspect-ratio: 14/11) {
#enclos1, #enclos2 {
margin-top: 15%;
height: 62%;
margin-left: 16%;
/* margin-top: -10%; */
height: 64%;
}
#enclos1, #enclos3 {
#enclos3 {
margin-left: 18%;
/* margin-top: -5%; */
height: 68%;
width: 68%;
}
#enclos4 {
margin-left: 20%;
/* margin-top: -5%; */
height: 68%;
width: 68%;
}
}
@media (min-aspect-ratio: 16/11) {
#enclos1, #enclos2 {
margin-top: -10%;
height: 62%;
}
#enclos1 {
margin-left: 17%;
width: 64%;
margin-left: 20%;
}
#enclos3 {
#enclos2 {
width: 64%;
margin-left: 20%;
}
#enclos2, #enclos4 {
#enclos3 {
margin-left: 20%;
width: 64%;
}
#enclos4 {
margin-left: 24%;
width: 60%;
}
}
@media (min-aspect-ratio: 18/11) {
#enclos1, #enclos2 {
margin-top: 12%;
height: 60%;
margin-top: -4%;
height: 62%;
}
#enclos1 {
margin-left: 19%;
width: 65%;
margin-left: 22%;
width: 60%;
}
#enclos2, #enclos4 {
margin-left: 22%;
......@@ -337,15 +362,19 @@ img.animal1 {
width: 60%;
}
#enclos3 {
margin-left: 22%;
width: 62%;
margin-left: 25%;
width: 54%;
height: 62%;
margin-top: -4%;
}
#modele3, #modele4 {
/* #modele3, #modele4 {
margin-left: 20%;
}
} */
#enclos4 {
margin-left: 25%;
width: 56%;
width: 52%;
height: 62%;
margin-top: -4%;
}
}
......@@ -368,10 +397,6 @@ img.animal1 {
}
@media (min-aspect-ratio: 22/11) {
#modele1, #modele2, #modele3, #modele4 {
margin-left: 25%;
margin-right: 40%;
}
#enclos1 {
margin-left: 25%;
width: 52%;
......@@ -390,14 +415,14 @@ img.animal1 {
#enclos1 {
margin-left: 29%;
width: 43%;
margin-top: 10%;
margin-top: -4%;
}
#enclos2, #enclos3 {
margin-left: 31%;
width: 38%;
}
#enclos2 {
margin-top: 10%;
margin-top: -4%;
height: 56%;
}
#enclos4 {
......@@ -405,15 +430,21 @@ img.animal1 {
width: 38%;
}
}
@media (min-aspect-ratio: 27/11) {
#enclos1 {
margin-left: 31%;
width: 40%;
}
#enclos2 {
height: 60%;
}
}
@media (min-aspect-ratio: 30/11) {
#enclos1 {
margin-left: 32%;
width: 38%;
margin-top: 8%;
}
#enclos2 {
margin-top: 8%;
height: 58%;
margin-left: 34%;
width: 35%;
......@@ -430,22 +461,20 @@ img.animal1 {
}
@media (min-aspect-ratio: 36/11) {
#enclos1 {
margin-top: 6%;
margin-left: 35%;
width: 30%;
width: 29%;
}
#enclos2 {
margin-top: 6%;
margin-left: 37%;
width: 28%;
margin-left: 35%;
width: 29%;
}
#enclos3 {
margin-left: 36%;
width: 28%;
width: 27%;
}
#enclos4 {
margin-left: 37%;
width: 27%;
width: 25%;
}
}
......
......@@ -318,6 +318,14 @@ function drag(ev) {
ev.dataTransfer.setData("text", infosObjet);
}
function finDrag(ev) {
// Remet les images au premier plan
let Eolienne = document.getElementById('eolienne');
let Arbre = document.getElementById('arbre');
Eolienne.style.zIndex = '10';
Arbre.style.zIndex = '10';
}
// Elimine les animaux des enclos quand on les fait glisser dans la zone de suppression
function detruit(ev) {
ev.preventDefault();
......@@ -364,11 +372,6 @@ function drop(ev) {
proposition[NoAnimal][getIndiceEnclos(IdDepart)] -= 1;
proposition[NoAnimal][NoEnclos] += 1;
}
// Remet les images au premier plan
let Eolienne = document.getElementById('eolienne');
let Arbre = document.getElementById('arbre');
Eolienne.style.zIndex = '10';
Arbre.style.zIndex = '10';
}
// Affiche le nombre d'animaux à placer dans les enclos
......
This diff is collapsed.
This diff is collapsed.
......@@ -29,10 +29,10 @@
<!-- Zone d'affichage de la réserve des animaux à déplacer -->
<div id="reserve" class="reserve">
<img src="img/enclos.png" id="poubelle" ondrop="detruit(event)" ondragover="allowDrop(event)">
<img src="img/lapin.png" id="animal1" class="animal1 animal" alt="animal1" draggable="true" ondragstart="drag(event)">
<img src="img/mouton.png" id="animal2" class="animal2 animal" alt="animal2" draggable="true" ondragstart="drag(event)">
<img src="img/vache.png" id="animal3" class="animal3 animal" alt="animal3" draggable="true" ondragstart="drag(event)">
<img src="img/poule.png" id="animal4" class="animal4 animal" alt="animal4" draggable="true" ondragstart="drag(event)">
<img src="img/lapin.png" id="animal1" class="animal1 animal" alt="animal1" draggable="true" ondragstart="drag(event)" onmouseout="finDrag(event)">
<img src="img/mouton.png" id="animal2" class="animal2 animal" alt="animal2" draggable="true" ondragstart="drag(event)" onmouseout="finDrag(event)">
<img src="img/vache.png" id="animal3" class="animal3 animal" alt="animal3" draggable="true" ondragstart="drag(event)" onmouseout="finDrag(event)">
<img src="img/poule.png" id="animal4" class="animal4 animal" alt="animal4" draggable="true" ondragstart="drag(event)" onmouseout="finDrag(event)">
</div>
<div id="action" class="action">
<div id="ligne1" class="ligne">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment