phc
/
website
6
4
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Wiki Activity

utenti.html: Aggiunte sezioni, lista di test

Browse Source
main-old
Antonio De Lucreziis 4 years ago
parent 168ef97460
commit 77c73713d4
1 changed files with 52 additions and 252 deletions
Show Stats Download Patch File Download Diff File

258
views/utenti.html
Unescape Escape View File

@ -4,15 +4,15 @@
{{define "body"}} {{define "body"}}
&nbsp; <section>
<h2> <h2>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" /> <img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" />
Utenti Utenti
</h2> </h2>
<p> <p>
Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente per filtrare la lista in tempo reale. Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente
per filtrare la lista in tempo reale.
</p> </p>
<div class="search"> <div class="search">
@ -21,234 +21,19 @@
</div> </div>
<div class="user-list"> <div class="user-list">
<div class="user"> <!-- Dummy data -->
<div class="contact">
<h3 class="fullname">Persona 1</h3>
<h4 class="username">persona1</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 2</h3>
<h4 class="username">persona2</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 3</h3>
<h4 class="username">persona3</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 4</h3>
<h4 class="username">persona4</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 5</h3>
<h4 class="username">persona5</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 6</h3>
<h4 class="username">persona6</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 7</h3>
<h4 class="username">persona7</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 8</h3>
<h4 class="username">persona8</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 9</h3>
<h4 class="username">persona9</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 10</h3>
<h4 class="username">persona10</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 11</h3>
<h4 class="username">persona11</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 12</h3>
<h4 class="username">persona12</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 13</h3>
<h4 class="username">persona13</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 14</h3>
<h4 class="username">persona14</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 15</h3>
<h4 class="username">persona15</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div>
<div class="user">
<div class="contact">
<h3 class="fullname">Persona 16</h3>
<h4 class="username">persona16</h4>
</div>
<div class="links">
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/web.png"/>
</a>
<a href="#">
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
</a>
</div>
</div> </div>
</section>
<script>
document.addEventListener('DOMContentLoaded', ({ }) => {
const $userList = document.querySelector('.user-list');
const $user = document.createElement('div');
$user.innerHTML = `
<div class="user"> <div class="user">
<div class="contact"> <div class="contact">
<h3 class="fullname">Persona 17</h3> <h3 class="fullname"></h3>
<h4 class="username">persona17</h4> <h4 class="username"></h4>
</div> </div>
<div class="links"> <div class="links">
<a href="#"> <a href="#">
@ -259,6 +44,21 @@
</a> </a>
</div> </div>
</div> </div>
</div> `;
// Per mostrare che la pagina regge molti utenti senza laggare troppo
Array(1400).fill(0).map(({ }, i) => {
setTimeout(() => {
// Pare che questa riga sia la più dispendiosa
const $newUser = $user.cloneNode(true);
$newUser.querySelector('.fullname').innerHTML = `Persona ${i + 1}`;
$newUser.querySelector('.username').innerHTML = `persona${i + 1}`;
$userList.appendChild($newUser.firstElementChild);
}, 0)
});
})
</script>
{{end}} {{end}}
Write Preview
Loading…
Cancel
Save