Commit de3ee83e authored by Ferry Jérémie's avatar Ferry Jérémie

divers correctifs de responsive

parent 03bb2b6b
......@@ -13,10 +13,6 @@ body {
overflow: hidden;
}
#reserve {
z-index: 20;
}
p {
margin: 5px 10px 5px 10px;
color: yellow;
......@@ -24,8 +20,6 @@ p {
}
#zone-commande {
display: flex;
flex-direction: column;
height: 10%;
}
......@@ -44,74 +38,56 @@ p {
font-size: 1.4vh;
}
#potager {
position: absolute;
background-image: url(img/potager.svg);
.decor {
position: relative;
background-position: center center;
margin: 0;
padding: 0;
background-repeat: no-repeat;
top: 80%;
}
#potager {
background-image: url(img/potager.svg);
top: -60%;
left: 10%;
width: 75%;
height: 20%;
}
#eolienne {
position: absolute;
background-image: url(img/eolienne.svg);
background-position: center center;
background-repeat: no-repeat;
top: 33%;
left: 26%;
top: -71%;
left: 23%;
width: 20%;
height: 30%;
}
#fermier {
position: absolute;
background-image: url(img/fermier.svg);
background-position: center center;
background-repeat: no-repeat;
top: 33%;
top: -55%;
left: 50%;
width: 10%;
height: 20%;
}
#arbre {
position: absolute;
background-image: url(img/arbre.svg);
background-position: center center;
margin: 0;
padding: 0;
background-repeat: no-repeat;
top: 35%;
left: 70%;
width: 27%;
top: -117%;
left: 25%;
width: 132%;
height: 40%;
}
#tracteur {
position: absolute;
background-image: url(img/tracteur.svg);
background-position: center center;
background-repeat: no-repeat;
top: 70%;
top: -129%;
height: 30%;
width: 20%;
left: 80%;
}
.devant#drag-zone-container {
z-index: 10;
left: 82%;
}
#drag-zone-container {
top: 27%;
position: absolute;
width: 100%;
z-index: -1;
}
#drag-zone,
#action {
......@@ -123,6 +99,7 @@ p {
}
#reserve {
padding: 3% 0 0 3%;
position: absolute;
top: 5%;
width: 10%;
......@@ -156,30 +133,20 @@ p {
background-position: center;
background-size: contain;
}
.pre img {
position: absolute;
z-index: 20;
.pre {
position: relative;
}
#pre1 {
background-image: url("img/enclos-lapins.svg");
position: relative;
}
#pre2 {
background-image: url("img/enclos-moutons.svg");
position: relative;
}
#pre3 {
background-image: url("img/enclos-poules.svg");
position: relative;
}
#pre4 {
background-image: url("img/enclos-vaches.svg");
position: relative;
}
.modele {
......@@ -232,10 +199,11 @@ padding-bottom: 5px;
}
.masque {
height: 70%;
position: relative;
width: 97%;
margin-top: -12%;
height: 62%;
width: 38%;
padding: 1% 7% 1% 8%;
margin-top: -13%;
clip-path: polygon(13.09% 8px, 99.66% 5.1%, 89.25% 125.15%, 1.84% 101.16%);
}
......@@ -306,8 +274,22 @@ img.animal1 {
}
@media screen and (orientation: portrait) {
#zone-exercice {
flex-direction: column;
#drag-zone-container,
#action {
width: 90vw;
height: 90vw;
margin-top: 15%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#drag-zone {
padding: 0;
width: 100%;
height: 100%;
margin-top: 19%;
margin-left: -1%;
}
#reserve {
width: 100%;
......@@ -315,19 +297,10 @@ img.animal1 {
#reserve img {
display: inline-block;
}
#drag-zone,
#action {
width: 90vw;
margin-top: 15%;
}
#eolienne {
top: 42%;
left: 25%;
}
#fermier {
top: 40%;
left: 45%;
#reserve img.animal {
margin-left: 5%;
margin-top: 0;
padding-bottom: 5%;
}
#masque-enclos3, #masque-enclos4,
#enclos3, #enclos4 {
......
......@@ -241,6 +241,9 @@ function getIdAccueil(objet) {
var IdAccueil = "";
var tableau = objet.split("-");
IdAccueil = tableau[2];
if (tableau[3]) {
IdAccueil += '-' + tableau[3];
}
return IdAccueil;
}
......@@ -280,11 +283,6 @@ function allowDrop(ev) {
ev.preventDefault();
}
function leave(ev) {
event.currentTarget.setAttribute('style', 'position: absolute; z-index: 20;');
document.getElementById('drag-zone-container').classList.remove('devant');
}
function drag(ev) {
var infosObjet;
// Grossit l'image de l'animal lors du drag
......@@ -315,7 +313,6 @@ function drag(ev) {
infosObjet = ev.target.alt + "-" + ev.target.id + "-" + ev.target.parentNode.id;
afficheImgZoom(ev.target.alt);
ev.dataTransfer.setData("text", infosObjet);
document.getElementById('drag-zone-container').classList.add('devant');
}
// Elimine les animaux des enclos quand on les fait glisser dans la zone de suppression
......@@ -344,10 +341,10 @@ function drop(ev) {
var nodeCopy = document.getElementById(IdAnimal).cloneNode(true);
nodeCopy.id = Animal + "_" + CtAnimaux[NoAnimal];
if (ev.target.id.startsWith("masque-enclos")) {
document.getElementById(ev.target.id.replace('masque-', '')).appendChild(nodeCopy);
document.getElementById(ev.target.id).appendChild(nodeCopy);
}
else {
document.getElementById(ev.target.parentNode.id.replace('masque-', '')).appendChild(nodeCopy);
document.getElementById(ev.target.parentNode.id).appendChild(nodeCopy);
NoEnclos = getIndiceEnclos(ev.target.parentNode.id);
}
CtAnimaux[NoAnimal] += 1;
......@@ -355,10 +352,10 @@ function drop(ev) {
}
else if ((IdDepart.startsWith("masque-enclos")) && ((ev.target.id.startsWith("masque-enclos")) || (ev.target.parentNode.id.startsWith("masque-enclos")))) {
if (ev.target.id.startsWith("masque-enclos")) {
document.getElementById(ev.target.id.replace('masque-', '')).appendChild(document.getElementById(IdAnimal));
document.getElementById(ev.target.id).appendChild(document.getElementById(IdAnimal));
}
else {
document.getElementById(ev.target.parentNode.id.replace('masque-', '')).appendChild(document.getElementById(IdAnimal));
document.getElementById(ev.target.parentNode.id).appendChild(document.getElementById(IdAnimal));
NoEnclos = getIndiceEnclos(ev.target.parentNode.id);
}
proposition[NoAnimal][getIndiceEnclos(IdDepart)] -= 1;
......
......@@ -27,55 +27,55 @@
<!-- zone d'affichage de l'image de fond et d'exécution de l'exercice -->
<div id="zone-exercice">
<!-- Zone d'affichage de la réserve des animaux à déplacer -->
<div id="potager"></div>
<div id="drag-zone-container">
<div id="drag-zone">
<div id="masque-ligne1" class="ligne">
<div id="masque-enclos1" class="masque" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="masque-enclos2" class="masque" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</div>
<div id="masque-ligne2" class="ligne">
<div id="masque-enclos3" class="masque" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="masque-enclos4" class="masque" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</div>
</div>
</div>
<div id="action" class="action">
<div id="ligne1" class="ligne">
<div id="pre1" class="pre">
<div id="modele1" class="modele"></div>
<div id="erreur1" class="erreur"></div>
<div id="enclos1" alt="enclos" class="enclos parc"></div>
<div id="enclos1" class="enclos parc"></div>
</div>
<div id="pre2" class="pre">
<div id="modele2" class="modele"></div>
<div id="erreur2" class="erreur"></div>
<div id="enclos2" alt="enclos" class="enclos parc"></div>
<div id="enclos2" class="enclos parc"></div>
</div>
</div>
<div id="fermier"></div>
<div id="eolienne"></div>
<div id="ligne2" class="ligne">
<div id="pre3" class="pre">
<div id="modele3" class="modele"></div>
<div id="erreur3" class="erreur"></div>
<div id="enclos3" alt="enclos" class="enclos parc"></div>
<div id="enclos3" class="enclos parc"></div>
</div>
<div id="pre4" class="pre">
<div id="modele4" class="modele"></div>
<div id="erreur4" class="erreur"></div>
<div id="enclos4" alt="enclos" class="enclos parc"></div>
<div id="enclos4" class="enclos parc"></div>
</div>
</div>
<div id="arbre"></div>
<div id="tracteur"></div>
<div id="fermier" class="decor"></div>
<div id="eolienne" class="decor"></div>
<div id="potager" class="decor"></div>
<div id="arbre" class="decor"></div>
<div id="tracteur" class="decor"></div>
</div>
<div id="drag-zone-container">
<div id="drag-zone">
<div id="masque-ligne1" class="ligne">
<div id="masque-enclos1" class="masque" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="masque-enclos2" class="masque" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</div>
<div id="masque-ligne2" class="ligne">
<div id="masque-enclos3" class="masque" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="masque-enclos4" class="masque" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</div>
</div>
</div>
<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)" ondragend="leave(event)">
<img src="img/mouton.png" id="animal2" class="animal2 animal" alt="animal2" draggable="true" ondragstart="drag(event)" ondragend="leave(event)">
<img src="img/vache.png" id="animal3" class="animal3 animal" alt="animal3" draggable="true" ondragstart="drag(event)" ondragend="leave(event)">
<img src="img/poule.png" id="animal4" class="animal4 animal" alt="animal4" draggable="true" ondragstart="drag(event)" ondragend="leave(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)">
</div>
</div>
<script src="dialogbox.js" type="text/javascript"></script>
......
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