Gestione_Utenti

In this example below you will see how to do a Gestione_Utenti with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by danilocavalli, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright danilocavalli ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Gestione_Utenti</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- collegamento a FontAwesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">  

<header>
  
  <nav>
    <ul class="main_navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">Gestione <i class="fa fa-caret-down" aria-hidden="true"></i></a>
        <ul><!-- sottomenu gestione -->
          <li><a href="#">Sedi</a></li>
            <li><a href="#">Utenti</a></li>
            <li><a href="#">Tag Esterni</a></li>
            <li><a href="#">Tipologie Link</a></li>
            <li><a href="#">Tipologie Asset Interni <i class="fa fa-caret-right" aria-hidden="true"></i></a>
              <ul><!-- sottomenu asset interni -->
                <li><a href="#">Tipologie</a></li>
                <li><a href="#">Categorie</a></li>
                <li><a href="#">Edita Asset Interni</a></li>
              </ul>
        </ul>
      <li><a href="#">Report</a></li>
      <li><a href="#">Filter</a></li>
      <li><a href="#">History</a></li>
    </ul><!-- chiudo main_navigation -->
  </nav><!-- fine nav -->
  
  <div class="menu_action">
    <input class="form-control" type="search" placeholder="cerca indirizzo" id="example-search-input"><button type="button"><i class="fa fa-search" aria-hidden="true" style="color:white"></i></button></input>
    <a href="#"> Log Out</a>
  </div>

</header>


<!-- testata -->
<div class="testata">
  <h1>Gestione Utenti</h1>
</div>

<!-- lista utenti -->
<div class="tab">
  <div class="tab_head">
    <div class="col-md-3">Nominativo</div>
    <div class="col-md-2">UserName</div>
    <div class="col-md-3">E-Mail</div>
    <div class="col-md-1">Profilo</div>
    <div class="col-md-3">Azioni</div>
  </div>
  <div class="tbody_wrapper"><!-- wrapper lista -->
    <!-- nuova riga -->
    <div class="tab_body_row">
      <div class="col-md-3">Administrator</div>
      <div class="col-md-2">Administrator</div>
      <div class="col-md-3">administrator@administrator.it</div>
      <div class="col-md-1">Admin</div>
      <div class="col-md-3 azioni">
        <button type="button" id="addUtente"><i class="fa fa-pencil" aria-hidden="true"></i></button>
        <button type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
        <button type="button" id="addPermessi"><i class="fa fa-tags" aria-hidden="true"></i></button>
        <button type="button" id="viewPermessi"><i class="fa fa-calendar" aria-hidden="true"></i></button>
      </div>
    </div>
  </div><!-- chiudo tbody_wrapper -->
</div><!-- chiudo tab -->

<!-- aggiungi utente e legenda -->
<section>
  <button type="button" id="aggiungiUtente">Aggiungi Utente <i class="fa fa-plus" aria-hidden="true"></i></button>

  <article class="legenda">
    <b>Legenda:</b> 
    <p>Edita <i class="fa fa-pencil" aria-hidden="true"></i></p>
    <p>Elimina <i class="fa fa-trash-o" aria-hidden="true"></i></p>
    <p>Permessi <i class="fa fa-tags" aria-hidden="true"></i></p>
    <p>Report <i class="fa fa-calendar" aria-hidden="true"></i></p>
  </article>
</section>

<!-- modal window aggiungi nuovo utente -->
<div class="row">
  <div class="nuovo_utente" id="nuovoUtente">
    <!-- modal content -->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Gestione Utenti</h4>
      </div>
      <div class="modal-body">
        <table>
          <tbody>
            <tr>
              <th scope="row">Nominativo:</th>
              <td>
                <input type="text" class="form-control" name="nome"></input>
              </td>
            </tr>
            <tr>
              <th scope="row">UserName:</th>
              <td>
                <input type="text" class="form-control" name="nome"></input>
              </td>
          </tr>
          <tr>
            <th scope="row">E-Mail:</th>
            <td>
              <input type="email" class="form-control"></input>
            </td>
          </tr>
          <tr>
            <th scope="row">Profilo:</th>
            <td>
              <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Guest
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" href="#">Admin</a>
                  <a class="dropdown-item" href="#">User</a>
                  <a class="dropdown-item" href="#">Guest</a>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="modal-footer">
      <button type="button">Torna Indietro <i class="fa fa-undo" aria-hidden="true"></i>
      </button>
      <button type="button">Salva <i class="fa fa-floppy-o" aria-hidden="true"></i>
      </button>
    </div>
  </div><!-- chiudo modal -->
</div><!-- chiudo row -->

<!-- modal window permessi utente -->
<div class="row">
  <div class="permessi_utente" id="gestionePermessi">
    <div class="modalContent_permessi">
      <div class="modalHeader_permessi">
        <h4 class="modal-title">Gestione Permessi Utente</h4>
      </div>
      <div class="modalBody_permessi">
        <table>
          <tbody>
            <tr>
              <th scope="row">UserName:</th>
              <td>
                <input type="text" class="form-control" name="nome"></input>
              </td>
            </tr>
            <tr>
              <th scope="row">Sede:</th>
              <td>
                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Seleziona Sede
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Tutte le sedi</a>
                    <a class="dropdown-item" href="#">Viale Europa</a>
                    <a class="dropdown-item" href="#">Arte Antica</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row">Permessi Asset:</th>
              <td>
                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" disabled type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Seleziona Sede
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Tutte le sedi</a>
                    <a class="dropdown-item" href="#">Viale Europa</a>
                    <a class="dropdown-item" href="#">Arte Antica</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row">Permessi Checklists:</th>
              <td>
                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" disabled type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Seleziona Sede
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Tutte le sedi</a>
                    <a class="dropdown-item" href="#">Viale Europa</a>
                    <a class="dropdown-item" href="#">Arte Antica</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row">Permessi Segnalazioni:</th>
              <td>
                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" disabled type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Seleziona Sede
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Tutte le sedi</a>
                    <a class="dropdown-item" href="#">Viale Europa</a>
                    <a class="dropdown-item" href="#">Arte Antica</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row">Permessi Report:</th>
              <td>
                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" disabled type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Seleziona Sede
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Tutte le sedi</a>
                    <a class="dropdown-item" href="#">Viale Europa</a>
                    <a class="dropdown-item" href="#">Arte Antica</a>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <th scope="row">Permessi Export:</th>
              <td>
                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" disabled type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Seleziona Sede
                  </button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Tutte le sedi</a>
                    <a class="dropdown-item" href="#">Viale Europa</a>
                    <a class="dropdown-item" href="#">Arte Antica</a>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button">Torna Indietro <i class="fa fa-undo" aria-hidden="true"></i>
        </button>
        <button type="button">Salva <i class="fa fa-floppy-o" aria-hidden="true"></i>
        </button>
    </div>
    </div>
  </div><!-- chiudo modal permessi -->
</div><!-- chiudo row -->

<!-- modal visualizza permessi -->
<div class="row">
  <div class="visualizza_permessi" id="visualizzaPermessi">
    <div class="modalContent_visualizzaPermessi">
      <div class="modalHeader_visualizzaPermessi">
        <h4 class="modal-title">Visualizza Permessi Utente - rete/amicialb</h4>
      </div>
      <div class="modalBody_visualizzaPermessi">
        <!-- lista permessi -->
        <div class="tabPermessi">
          <div class="tabPermessi_head">
            <div class="col-md-4">Sede</div>
            <div class="col-md-2">Asset</div>
            <div class="col-md-2">Tags</div>
            <div class="col-md-2">Report</div>
            <div class="col-md-2">Export</div>
          </div>
          <div class="tbodyPermessi_wrapper">
            <div class="tab_body_row">
              <div class="col-md-4">Nome Sede</div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
            </div>
            <div class="tab_body_row">
              <div class="col-md-4">Nome Sede</div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
            </div>
            <div class="tab_body_row">
              <div class="col-md-4">Nome Sede</div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
            </div>
            <div class="tab_body_row">
              <div class="col-md-4">Nome Sede</div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
            </div>
            <div class="tab_body_row">
              <div class="col-md-4">Nome Sede</div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
            </div>
            <div class="tab_body_row">
              <div class="col-md-4">Nome Sede</div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
            </div>
            <div class="tab_body_row">
              <div class="col-md-4">Nome Sede</div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
              <div class="col-md-2"><i class="fa fa-ban" aria-hidden="true"></i></div>
            </div>
          </div>
          <section>
            <button type="button" id="aggiungiUtente">Torna Indietro <i class="fa fa-refresh" aria-hidden="true"></i></button>

            <article class="legenda">
              <b>Legenda:</b> 
              <p>Disabilitato <i class="fa fa-ban" aria-hidden="true"></i></p>
              <p>Visualizza <i class="fa fa-eye" aria-hidden="true"></i></p>
              <p>Modifica <i class="fa fa-pencil" aria-hidden="true"></i></p>
            </article>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/danilocavalli/gestione_utenti-rwygav */
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700");
header {
  display: flex;
  background: #03063D;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  width: 100%;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #03063D;
}
nav ul li {
  display: block;
  position: relative;
  float: left;
  background: #03063D;
}
nav li ul {
  display: none;
}
nav ul li a {
  display: block;
  padding: 1.5em 1em 1em;
  text-decoration: none !important;
  white-space: no-wrap;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
}
nav ul li a:hover {
  color: #34CCC1;
}
nav li:hover > ul {
  display: block;
  position: absolute;
  width: 280px;
}
nav li:hover li {
  float: none;
}
nav .main_navigation ul li ul {
  border-top: 0;
}
nav ul ul ul {
  left: 100%;
  top: 0;
}
nav .fa {
  padding-left: 5px;
}
nav ul:before, nav ul:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
nav ul:after {
  clear: both;
}

.menu_action {
  padding: 1.5em 1.5em 1em;
}
.menu_action input {
  display: inline-block !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid #fff !important;
  width: 200px !important;
}
.menu_action input::placeholder {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: white;
  opacity: .5;
}
.menu_action input[type="search"] {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
}
.menu_action button {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 15px;
}
.menu_action button .fa {
  font-size: 18px;
}
.menu_action a {
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #34CCC1;
  border-left: 2px solid #34CCC1;
  padding-left: 20px;
}

.testata {
  background-color: #03063D;
  height: 80px;
  margin-top: 80px;
}
.testata h1 {
  display: inline-block;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 2px;
  padding: 25px 0 0 20px;
}

.tab {
  margin-top: 30px;
}

.tab_head {
  display: flex;
  width: 100vw;
  background-color: #03063D;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 25px 0 10px 0;
  border-bottom: 3px solid #34CCC1;
}

.tab_head div:nth-child(5) {
  text-align: right;
  padding-right: 10px;
}

.tbody_wrapper {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 250px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.tab_body_row {
  display: flex;
  align-items: center;
  font-size: 14px;
  display: flex;
  padding: 40px 0;
  font-family: 'Monteserrat' , sans-serif;
  color: #03063D;
  border-bottom: 1px solid #03063D;
}

.tab_body_row div:nth-child(5) {
  text-align: right;
  margin-right: 5px;
}

.tab_body_row button {
  background-color: #03063D;
  border-style: none;
  border-radius: 3px;
  width: 28px;
  height: 28px;
  outline: none;
}
.tab_body_row button .fa {
  color: #34CCC1;
}
.tab_body_row button:hover, .tab_body_row button:active {
  opacity: .7;
}

.azioni {
  padding-right: 10px;
}
.azioni button:nth-child(2), .azioni button:nth-child(3), .azioni button:nth-child(4) {
  margin-left: 10px;
}

section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 30px 0px;
}

button#aggiungiUtente {
  background-color: #03063D;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  border-style: none;
  padding: 15px 25px;
  border-radius: 30px;
  box-shadow: 0px 6px 42px -14px rgba(0, 0, 0, 0.75);
  outline: none;
}
button#aggiungiUtente .fa {
  padding-left: 15px;
  color: #34CCC1;
}

button#aggiungiUtente:hover, button#aggiungiUtente:active {
  box-shadow: none;
  opacity: .7;
}

button .addUtente:hover {
  box-shadow: none;
  opacity: .8;
}

button .addUtente:active {
  box-shadow: none;
  opacity: .8;
}

.legenda {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  color: #03063D;
}
.legenda p {
  display: inline-block;
  padding-left: 30px;
  margin-bottom: 0;
}

p > .fa {
  background: #03063D;
  color: #34CCC1;
  padding: 10px;
  border-radius: 5px;
}

.nuovo_utente, .permessi_utente, .visualizza_permessi {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.modal-content, .modalContent_permessi, .modalContent_visualizzaPermessi {
  background-color: #fefefe;
  margin: auto;
  padding: 25px;
  border: 1px solid #888;
  width: 90%;
  max-width: 900px;
}

.modal-header, .modalHeader_permessi, .modalHeader_visualizzaPermessi {
  background-color: #03063D;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 1px;
  border-bottom: 4px solid #34CCC1;
  padding: 15px;
}

.modal-body table, .modalBody_permessi table {
  margin-top: 35px;
}
.modal-body table th, .modal-body table td, .modalBody_permessi table th, .modalBody_permessi table td {
  color: #03063D;
  font-family: 'Montserrat', sans-serif;
}
.modal-body table th, .modalBody_permessi table th {
  font-size: 18px;
  text-align: right;
}
.modal-body table td, .modalBody_permessi table td {
  padding: 15px 0;
}
.modal-body table td input, .modalBody_permessi table td input {
  width: 550px;
  height: 40px;
  margin-left: 20px;
}

.dropdown {
  margin-left: 20px;
}

.modal-footer {
  border: none;
}
.modal-footer button {
  background: #03063D;
  border-style: none;
  color: white;
  padding: 15px 30px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 30px;
  font-size: 18px;
  box-shadow: 0px 6px 42px -14px rgba(0, 0, 0, 0.75);
  outline: none;
}
.modal-footer button .fa {
  padding-left: 15px;
  color: #34CCC1;
}

.modal-footer button:nth-child(2) .fa {
  color: #03063D;
}

.modal-footer button:hover {
  box-shadow: none;
  opacity: .8;
}
.modal-footer button:active {
  box-shadow: none;
  opacity: .8;
  outline: none;
}

.modal-footer > :not(:first-child) {
  margin-left: 20px;
  color: #03063D;
  background: #34CCC1;
}

.tabPermessi_head {
  display: flex;
  width: 100%;
  background-color: #03063D;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 25px 0px 10px 0px;
  border-bottom: 3px solid #34CCC1;
  justify-content: space-between;
  margin-top: 30px;
  text-align: center;
}

.tabPermessi_head div:nth-child(1) {
  text-align: left;
}

#visualizzaPermessi .tbodyPermessi_wrapper {
  height: 450px;
  overflow-y: scroll;
  overflow-x: hidden;
}
#visualizzaPermessi .tab_body_row {
  text-align: center;
}
#visualizzaPermessi .tab_body_row div:nth-child(1) {
  text-align: left;
}
#visualizzaPermessi .tab_body_row div:nth-child(5) {
  text-align: center;
}
#visualizzaPermessi section {
  padding: 50px 0;
}
#visualizzaPermessi section button:hover, #visualizzaPermessi section button:active {
  box-shadow: none;
  opacity: .7;
}

@media (min-width: 1000px) {
  .tab_head {
    width: 100vw;
    font-size: 20px;
    padding: 35px 0 10px 0;
    border-bottom: 5px solid #34CCC1;
  }

  .tbody_wrapper {
    width: 100vw;
  }

  .tab_head div:nth-child(5) {
    padding-right: 20px;
  }

  .tab_body_row {
    font-size: 18px;
    padding: 40px 0;
  }
  .tab_body_row button {
    width: 35px;
    height: 35px;
    border-radius: 5px;
  }

  .azioni {
    padding-right: 15px;
  }
  .azioni button:nth-child(2), .azioni button:nth-child(3), .azioni button:nth-child(4) {
    margin-left: 20px;
  }
}
@media (min-width: 1300px) {
  .tab {
    padding-left: 15px;
  }

  .tab_head {
    width: 98vw;
  }

  .tbody_wrapper {
    width: 99.1vw;
  }
}
@media (min-width: 1300px) {
  nav ul li a {
    padding: 1.5em 1.2em 1em;
    font-size: 20px;
  }
  nav li:hover > ul {
    width: 300px;
  }

  .menu_action {
    padding: 1.5em 1em 1em;
  }
  .menu_action input {
    width: 250px !important;
  }
  .menu_action input::placeholder {
    font-size: 18px;
  }
  .menu_action input[type="search"] {
    font-size: 18px;
  }
  .menu_action button {
    width: 35px;
    height: 35px;
    margin-right: 10px;
  }
  .menu_action button .fa {
    font-size: 20px;
  }
  .menu_action a {
    font-size: 18px;
    padding-left: 20px;
  }
}


/*Downloaded from https://www.codeseek.co/danilocavalli/gestione_utenti-rwygav */
// Get the modal window
var modal_nuovoUtente = document.getElementById('nuovoUtente');
var modal_addUtente = document.getElementById('nuovoUtente');
var modal_addPermessi = document.getElementById('gestionePermessi');
var modal_visualizzaPermessi = document.getElementById('visualizzaPermessi');

// Get the button that opens the modal window
var btn_nuovoUtente = document.getElementById("aggiungiUtente");
var btn_addUtente = document.getElementById("addUtente");
var btn_addPermessi = document.getElementById("addPermessi");
var btn_viewPermessi = document.getElementById("viewPermessi");

// When the user clicks the button, open the modal 
btn_nuovoUtente.onclick = function() {
    modal_nuovoUtente.style.display = "block";
}

btn_addUtente.onclick = function() {
    modal_addUtente.style.display = "block";
}

btn_addPermessi.onclick = function() {
    modal_addPermessi.style.display = "block";
}

btn_viewPermessi.onclick = function() {
    modal_visualizzaPermessi.style.display = "block";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal_nuovoUtente) {
        modal_nuovoUtente.style.display = "none";
    }
  
    if (event.target == modal_addUtente) {
        modal_addUtente.style.display = "none";
    }
  
    if (event.target == modal_addPermessi) {
        modal_addPermessi.style.display = "none";
    }
  
    if (event.target == modal_visualizzaPermessi) {
        modal_visualizzaPermessi.style.display = "none";
    }
}

Comments