From 9a64c013eacd5d6e56bcc8619cc21d71503e0f02 Mon Sep 17 00:00:00 2001
From: Pasq G <pasq@riseup.net>
Date: Wed, 25 Dec 2024 16:15:28 +0100
Subject: [PATCH] =?UTF-8?q?Avan=C3=A7os=20en=20Pobles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 imports/ui/Pobles.jsx | 120 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 97 insertions(+), 23 deletions(-)

diff --git a/imports/ui/Pobles.jsx b/imports/ui/Pobles.jsx
index 8b7498b..00b0e2f 100644
--- a/imports/ui/Pobles.jsx
+++ b/imports/ui/Pobles.jsx
@@ -113,30 +113,104 @@ export const Pobles = () => {
           }}>{
           pobles
                .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
-               .map(pob => <li
-                    key={`pob_${pob._id}`}
-                    style={{
-                         display: `block`,
-                         border: `1px solid #6666`,
-                         borderRadius: `.4em`,
-                         padding: `4px`,
-                         listStyle: `none`,
-                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
-                    }}
-               >
-                    <Link to={`/poble/${pob.ambitAssociat}`}>
-                         {pob.nomPoble}{esEditor && <button 
-                              onClick={(ev) => {
-                                   ev.preventDefault();
-                                   ev.stopPropagation();
-                                   
-                                   setPobleSeleccionat(pob);
-                              }
-                         }>Edita</button>}
-                    </Link>
-               </li>)
-                    
+               .map(pob =>
+                    <li
+                         key={`pob_${pob._id}`}
+                         style={{
+                              display: `block`,
+                              border: `1px solid #6666`,
+                              borderRadius: `.4em`,
+                              padding: `4px`,
+                              listStyle: `none`,
+                              backgroundColor: `${'lightgreen' || 'lightcoral'}`,
+                              position: 'relative',
+                              margin: '.2em'
+                         }}
+                    >
+                         {
+                              <div style={{
+                                   position: `absolute`,
+                                   // display: `inline-block`,
+                                   display: `flex`,
+                                   justifyContent: `space-around`,
+                                   left: `0`,
+                                   top: `-.8em`,
+                                   width: `100%`,
+                                   fontSize: `60%`,
+                                   textAlign: `center`,
+                                   pointerEvents: `none`
+                              }}>
+                                   <span style={{
+                                        border: `1px solid #6666`,
+                                        borderRadius: `50%`,
+                                        minWidth: `1rem`,
+                                        backgroundColor: `#fffa`
+                                   }}>1</span>
+                                   <span style={{
+                                        border: `1px solid #6666`,
+                                        borderRadius: `50%`,
+                                        minWidth: `1rem`,
+                                        backgroundColor: `#fffa`
+                                   }}>2</span>
+                                   <span style={{
+                                        border: `1px solid #6666`,
+                                        borderRadius: `50%`,
+                                        minWidth: `1rem`,
+                                        backgroundColor: `#fffa`
+                                   }}>3</span>
+                              </div>
+                         }
+
+                         {
+                              <div style={{
+                                   position: `absolute`,
+                                   // display: `inline-block`,
+                                   display: `flex`,
+                                   // justifyContent: `space-around`,
+                                   left: `-1.5em`,
+                                   // top: `-.8em`,
+                                   width: `100%`,
+                                   fontSize: `60%`,
+                                   textAlign: `center`,
+                                   // lineHeight: `100%`
+                                   top: `.8em`,
+                                   pointerEvents: `none`
+                              }}>
+                                   <span style={{
+                                        border: `1px solid #6666`,
+                                        borderRadius: `50%`,
+                                        minWidth: `1rem`,
+                                        backgroundColor: `#fffa`
+                                   }}>0</span>
+                                   {/* <span style={{
+                                        border: `1px solid #6666`,
+                                        borderRadius: `50%`,
+                                        minWidth: `1rem`,
+                                        backgroundColor: `#fffa`
+                                   }}>2</span>
+                                   <span style={{
+                                        border: `1px solid #6666`,
+                                        borderRadius: `50%`,
+                                        minWidth: `1rem`,
+                                        backgroundColor: `#fffa`
+                                   }}>3</span> */}
+                              </div>
+                         }
+
+                         <Link to={`/poble/${pob.ambitAssociat}`}>
+                              {pob.nomPoble} {esEditor && <button 
+                                   onClick={(ev) => {
+                                        ev.preventDefault();
+                                        ev.stopPropagation();
+
+                                        setPobleSeleccionat(pob);
+                                   }
+                              }>Edita</button>}
+                         </Link>
+                    </li>
+               )
           }</ul>
+
           {esEditor && <button
                onPointerUp={ev => {
                     setCreantPoble(!creantPoble);