From 4d87064a79718ab69d89420b373997d53e57d30e Mon Sep 17 00:00:00 2001 From: Tykayn Date: Mon, 4 Oct 2021 12:10:56 +0200 Subject: [PATCH] styling form --- main.js | 55 +++++++++++++++++++++++----------------------- photo_mem.html | 54 +++++++++++++++++++++++++++++++++------------ style_photomem.css | 6 ++--- 3 files changed, 70 insertions(+), 45 deletions(-) diff --git a/main.js b/main.js index 4d10a2b..76e078f 100644 --- a/main.js +++ b/main.js @@ -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 } diff --git a/photo_mem.html b/photo_mem.html index aa5333b..33a443f 100644 --- a/photo_mem.html +++ b/photo_mem.html @@ -13,8 +13,8 @@ Licence AGPL v3.0+ Photo mem - - + +
@@ -46,7 +46,7 @@ Licence AGPL v3.0+
-
+
@@ -54,20 +54,46 @@ Licence AGPL v3.0+ diff --git a/style_photomem.css b/style_photomem.css index 89f10e5..8e2d57b 100644 --- a/style_photomem.css +++ b/style_photomem.css @@ -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; }