styling form
This commit is contained in:
parent
df37fd2b63
commit
4d87064a79
55
main.js
55
main.js
@ -307,31 +307,31 @@ function position_souris(canvas, evt) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function tracer_cercle(e) {
|
function tracer_cercle(e) {
|
||||||
document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight);
|
// document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight);
|
||||||
document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth);
|
// document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth);
|
||||||
let pos_x = position_souris(ima_fond, e).x;
|
// let pos_x = position_souris(ima_fond, e).x;
|
||||||
let pos_y = position_souris(ima_fond, e).y;
|
// let pos_y = position_souris(ima_fond, e).y;
|
||||||
for (let i = 0; i < nb_pers; i++) {
|
// for (let i = 0; i < nb_pers; i++) {
|
||||||
let dx = posx[i] - pos_x;
|
// let dx = posx[i] - pos_x;
|
||||||
let dy = posy[i] - pos_y;
|
// let dy = posy[i] - pos_y;
|
||||||
let dist2 = dx * dx + dy * dy;
|
// let dist2 = dx * dx + dy * dy;
|
||||||
let rayon2 = rayon * rayon;
|
// let rayon2 = rayon * rayon;
|
||||||
|
//
|
||||||
if (dist2 < rayon2) {
|
// if (dist2 < rayon2) {
|
||||||
ibac = i
|
// ibac = i
|
||||||
can_etiq[i].style.background = "palegreen"
|
// can_etiq[i].style.background = "palegreen"
|
||||||
cercle.setAttribute("cx", posx[i]);
|
// cercle.setAttribute("cx", posx[i]);
|
||||||
cercle.setAttribute("cy", posy[i]);
|
// cercle.setAttribute("cy", posy[i]);
|
||||||
cercle.setAttribute("r", rayon);
|
// cercle.setAttribute("r", rayon);
|
||||||
cercle.style.visibility = "visible";
|
// cercle.style.visibility = "visible";
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
;
|
// ;
|
||||||
cercle.style.visibility = "hidden";
|
// cercle.style.visibility = "hidden";
|
||||||
if (nb_pers != 0) {
|
// if (nb_pers != 0) {
|
||||||
can_etiq[ibac].style.backgroundColor = "oldlace";
|
// can_etiq[ibac].style.backgroundColor = "oldlace";
|
||||||
}
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -342,8 +342,9 @@ function tracer_cercle(e) {
|
|||||||
function afficher_formulaire(e) {
|
function afficher_formulaire(e) {
|
||||||
let formulaire_ajout = document.getElementById('ajout')
|
let formulaire_ajout = document.getElementById('ajout')
|
||||||
let highlight_circle = document.getElementById('circle_svg')
|
let highlight_circle = document.getElementById('circle_svg')
|
||||||
souris_x = e.clientX;
|
souris_x = e.clientX ;
|
||||||
souris_y = e.clientY;
|
souris_y = e.clientY + document.documentElement.scrollTop;
|
||||||
|
console.log('souris_x, souris_y, document.body.scrollTop', souris_x, souris_y, document.documentElement.scrollTop);
|
||||||
if (souris_y - document.getElementById('ajout').height < 0) {
|
if (souris_y - document.getElementById('ajout').height < 0) {
|
||||||
sourisy = 50
|
sourisy = 50
|
||||||
}
|
}
|
||||||
|
@ -13,8 +13,8 @@ Licence AGPL v3.0+
|
|||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<title>Photo mem</title>
|
<title>Photo mem</title>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/bulma.min.css"></link>
|
<link rel="stylesheet" type="text/css" href="bulma.min.css"></link>
|
||||||
<link rel="stylesheet" type="text/css" href="/style_photomem.css"></link>
|
<link rel="stylesheet" type="text/css" href="style_photomem.css"></link>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -46,7 +46,7 @@ Licence AGPL v3.0+
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
<main class="section is-large">
|
<main class="section is-medium">
|
||||||
|
|
||||||
|
|
||||||
<!-- cercle indiquant la position où on a cliqué-->
|
<!-- cercle indiquant la position où on a cliqué-->
|
||||||
@ -54,20 +54,46 @@ Licence AGPL v3.0+
|
|||||||
|
|
||||||
<!-- formulaire d'ajout ou de modification d'une personne-->
|
<!-- formulaire d'ajout ou de modification d'une personne-->
|
||||||
<div id="ajout" class="invisible" style="position: absolute; z-index: 1;">
|
<div id="ajout" class="invisible" style="position: absolute; z-index: 1;">
|
||||||
<form class="content" name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
|
<form class="content " name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
|
||||||
<h2 class="title">
|
<h2 class="title">
|
||||||
NOUVELLE PERSONNE
|
NOUVELLE PERSONNE
|
||||||
</h2>
|
</h2>
|
||||||
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" autofocus><BR>
|
<div class="field is-horizontal">
|
||||||
<label for="nom_jeune_fille">Née : </label><input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
|
<label for="nom">Nom : </label><input class="input" type="text" name="nom" id="nom" autofocus>
|
||||||
<label for="prenom">Prénom : </label><input type="text" name="prénom" id="prenom"><BR>
|
</div>
|
||||||
<label for="annee">Année : </label><input type="text" name="année" id="annee"><BR>
|
<div class="field is-horizontal">
|
||||||
<label for="note">Note : </label><input type="text" name="note" id="note"><BR>
|
<label for="nom_jeune_fille">Née : </label><input class="input" type="text" name="nom_jf" id="nom_jeune_fille">
|
||||||
<label for="titre">Titre photo : </label><input type="text" name="titre" id="titre"><BR>
|
</div>
|
||||||
<input id="reset" type="reset" value="Annuler"
|
<div class="field is-horizontal">
|
||||||
|
<label for="prenom">Prénom : </label><input class="input"type="text" name="prénom" id="prenom">
|
||||||
|
</div>
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<label for="annee">Année : </label><input class="input" type="text" name="année" id="annee">
|
||||||
|
</div>
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<label for="note">Note : </label><input class="input" type="text" name="note" id="note">
|
||||||
|
</div>
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<label for="titre">Titre photo : </label><input class="input" type="text" name="titre" id="titre">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<input class="button is-warning" id="reset" type="reset" value="Annuler"
|
||||||
onClick=document.getElementById("ajout").className="invisible";>
|
onClick=document.getElementById("ajout").className="invisible";>
|
||||||
<input id="enreg" type="reset" value="Ajouter"
|
</div>
|
||||||
|
<div class="column has-text-right">
|
||||||
|
<input class="button is-primary" id="enreg" type="reset" value="Ajouter"
|
||||||
onClick=envoi_formulaire_ajout()>
|
onClick=envoi_formulaire_ajout()>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -37,11 +37,9 @@ circle {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
top: 100px;
|
top: 100px;
|
||||||
left: 200px;
|
left: 200px;
|
||||||
padding-top: 0.5em;
|
padding: 1em 2em ;
|
||||||
padding-bottom: 0.5em;
|
|
||||||
padding-left: 1em;
|
|
||||||
background-color: Azure;
|
background-color: Azure;
|
||||||
width: 24em;
|
width: 30em;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user