Liness
/
photo_mem
5
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

styling form

This commit is contained in:
Tykayn 2021-10-04 12:10:56 +02:00 committed by tykayn
parent df37fd2b63
commit 4d87064a79
3 changed files with 70 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
main.js
View File

@ -307,31 +307,31 @@ function position_souris(canvas, evt) {
};
function tracer_cercle(e) {
document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight);
document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth);
let pos_x = position_souris(ima_fond, e).x;
let pos_y = position_souris(ima_fond, e).y;
for (let i = 0; i < nb_pers; i++) {
let dx = posx[i] - pos_x;
let dy = posy[i] - pos_y;
let dist2 = dx * dx + dy * dy;
let rayon2 = rayon * rayon;
if (dist2 < rayon2) {
ibac = i
can_etiq[i].style.background = "palegreen"
cercle.setAttribute("cx", posx[i]);
cercle.setAttribute("cy", posy[i]);
cercle.setAttribute("r", rayon);
cercle.style.visibility = "visible";
return
}
}
;
cercle.style.visibility = "hidden";
if (nb_pers != 0) {
can_etiq[ibac].style.backgroundColor = "oldlace";
}
// document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight);
// document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth);
// let pos_x = position_souris(ima_fond, e).x;
// let pos_y = position_souris(ima_fond, e).y;
// for (let i = 0; i < nb_pers; i++) {
// let dx = posx[i] - pos_x;
// let dy = posy[i] - pos_y;
// let dist2 = dx * dx + dy * dy;
// let rayon2 = rayon * rayon;
//
// if (dist2 < rayon2) {
// ibac = i
// can_etiq[i].style.background = "palegreen"
// cercle.setAttribute("cx", posx[i]);
// cercle.setAttribute("cy", posy[i]);
// cercle.setAttribute("r", rayon);
// cercle.style.visibility = "visible";
// return
// }
// }
// ;
// cercle.style.visibility = "hidden";
// if (nb_pers != 0) {
// can_etiq[ibac].style.backgroundColor = "oldlace";
// }
};
@ -342,8 +342,9 @@ function tracer_cercle(e) {
function afficher_formulaire(e) {
let formulaire_ajout = document.getElementById('ajout')
let highlight_circle = document.getElementById('circle_svg')
souris_x = e.clientX;
souris_y = e.clientY;
souris_x = e.clientX ;
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) {
sourisy = 50
}

54
photo_mem.html
View File

@ -13,8 +13,8 @@ Licence AGPL v3.0+
<meta charset="utf-8"/>
<title>Photo mem</title>
<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="bulma.min.css"></link>
<link rel="stylesheet" type="text/css" href="style_photomem.css"></link>
</head>
<body>
<header>
@ -46,7 +46,7 @@ Licence AGPL v3.0+
</div>
</section>
</header>
<main class="section is-large">
<main class="section is-medium">
<!-- 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-->
<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">
NOUVELLE PERSONNE
</h2>
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" autofocus><BR>
<label for="nom_jeune_fille">Née : </label><input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
<label for="prenom">Prénom : </label><input type="text" name="prénom" id="prenom"><BR>
<label for="annee">Année : </label><input type="text" name="année" id="annee"><BR>
<label for="note">Note : </label><input type="text" name="note" id="note"><BR>
<label for="titre">Titre photo : </label><input type="text" name="titre" id="titre"><BR>
<input id="reset" type="reset" value="Annuler"
onClick=document.getElementById("ajout").className="invisible";>
<input id="enreg" type="reset" value="Ajouter"
onClick=envoi_formulaire_ajout()>
<div class="field is-horizontal">
<label for="nom">Nom : </label><input class="input" type="text" name="nom" id="nom" autofocus>
</div>
<div class="field is-horizontal">
<label for="nom_jeune_fille">Née : </label><input class="input" type="text" name="nom_jf" id="nom_jeune_fille">
</div>
<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";>
</div>
<div class="column has-text-right">
<input class="button is-primary" id="enreg" type="reset" value="Ajouter"
onClick=envoi_formulaire_ajout()>
</div>
</div>
</form>
</div>

6
style_photomem.css
View File

@ -37,11 +37,9 @@ circle {
border-radius: 10px;
top: 100px;
left: 200px;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 1em;
padding: 1em 2em ;
background-color: Azure;
width: 24em;
width: 30em;
z-index: 3;
}