<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://semantic-ui.com/javascript/sidebar.js"></script>
<div class="ui left vertical inverted menu sidebar" style="border-radius: 0;" id="sidebar_mobile">
<div class="item">
<div class="ui logo icon image">
<img src="https://semantic-ui.com/images/logo.png" style="max-width:36px">
</div>
<b>Menu Account</b>
</div>
<!-- Amministrazione Admin-->
<div class="item">
<div class="header"><i class="database icon"></i> Amministrazione</div>
<div class="menu">
<a class="item active" href="#">
Dashboard
</a>
<a class="item" href="#">
Avvisi
</a>
<a class="item" href="#">
News
</a>
<a class="item" href="#">
Documenti
</a>
<a class="item" href="#">
Utenti
</a>
<a class="item" href="#">
Slider
</a>
<a class="item" href="#">
Database
</a>
</div>
</div>
<!-- Aggiungi -->
<a class="item" href="#">
<b><i class="sticky note icon"></i>Aggiungi Documento</b>
</a>
<a class="item" href="#">
<b><i class="newspaper icon"></i> Pubblica News</b>
</a>
<!-- Account -->
<a class="item" href="#">
<b><i class="user icon"></i>Impostazioni account</b>
</a>
</div>
<div class="pusher">
<div class="ui black big launch right attached fixed button" id="mobile_floated_menu_account">
<i class="content icon"></i>
<span class="text"></span>
</div>
<div class="full height">
<div class="article mt-3" id="account_content">
<div class="ui grid container pt-1">
<!-- Account Content -->
<!-- Card in cima -->
<div class="ui four doubling stackable cards" style="width:100%">
<!-- Documenti -->
<div class="red card">
<div class="content">
<div class="header"><i class="sticky note icon"></i> Documenti</div>
<div class="meta">Resoconto Documenti</div>
<div class="description">
<div class="ui list">
<div class="item">
<div class="content">
<div class="right floated content">
<span class="header">
5000
</span>
</div>
<div class="header">Attivi</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="right floated content">
<span class="header">
0
</span>
</div>
<div class="header">Da approvare</div>
</div>
</div>
</div>
</div>
</div>
<div class="extra content">
<span class="right floated">
<a href="#">Gestisci <i class="right arrow icon"></i></a>
</span>
</div>
</div>
<!-- Assi Tematici -->
<div class="red card">
<div class="content">
<div class="header"><i class="th list icon"></i> Avvisi </div>
<div class="meta">Totale Avvisi</div>
<div class="description">
<div class="ui list">
<div class="item">
<div class="content">
<div class="right floated content">
<span class="header">
30
</span>
</div>
<div class="header">Errori</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="right floated content">
<span class="header">
18
</span>
</div>
<div class="header">Warning</div>
</div>
</div>
</div>
</div>
</div>
<div class="extra content">
<span class="right floated">
<a href="#">Gestisci <i class="right arrow icon"></i></a>
</span>
</div>
</div>
<!-- Utenti -->
<div class="red card">
<div class="content">
<div class="header"><i class="users icon"></i> Utenti</div>
<div class="meta">Utenti iscritti al progetto</div>
<div class="description">
<div class="ui list">
<div class="item">
<div class="content">
<div class="right floated content">
<span class="header">
24
</span>
</div>
<div class="header">Approvati</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="right floated content">
<span class="header">
3
</span>
</div>
<div class="header">Da Approvare</div>
</div>
</div>
</div>
</div>
</div>
<div class="extra content">
<span class="right floated">
<a href="#">Gestisci <i class="right arrow icon"></i></a>
</span>
</div>
</div>
<!-- Server -->
<div class="red card">
<div class="content">
<div class="header"><i class="server icon"></i> Server</div>
<div class="meta">Informazioni server</div>
<div class="description">
<div class="ui indicating progress" data-value="100" data-total="200" id="freeSpaceOnDisk_bar">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Spazio utilizzato</div>
</div>
<div class="ui list">
<div class="item">
<div class="content">
<div class="right floated content">
<span class="header">
100 GB
</span>
</div>
<div class="header">Spazio disponibile</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="right floated content">
<span class="header">
200 GB
</span>
</div>
<div class="header">Spazio totale</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tabella Uteni da approvare -->
<table class="ui sortable celled red table">
<thead class="full-width">
<tr >
<th><i class="tasks large icon"></i></th>
<th>Nome</th>
<th>Data Registrazione</th>
<th>Indirizzo Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">
<div class="ui toggle checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui toggle checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton@yahoo.com</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui toggle checkbox">
<input type="checkbox"> <label></label>
</div>
</td>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22@yahoo.com</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th></th>
<th colspan="4">
<div class="ui right floated green button">
Approva selezionati <i class="check icon"></i>
</div>
</th>
</tr>
</tfoot>
</table>
<!-- Ultimi documenti aggiunti -->
<table class="ui celled striped sortable red table">
<thead class="full-width">
<tr><th colspan="3">
Ultimi documenti aggiunti
</th>
</tr></thead>
<tbody>
<tr>
<td>
<i class="file pdf outline large icon"></i> Documento pdf
</td>
<td>Initial commit</td>
<td class="right aligned"> 6 ore fa</td>
</tr>
<tr>
<td>
<i class="file pdf outline large icon"></i> Documento pdf
</td>
<td>Initial commit</td>
<td class="right aligned"> 6 ore fa</td>
</tr>
<tr>
<td>
<i class="file pdf outline large icon"></i> Documento pdf
</td>
<td>Initial commit</td>
<td class="right aligned"> 6 ore fa</td>
</tr>
<tr>
<td>
<i class="file pdf outline large icon"></i> Documento pdf
</td>
<td>Initial commit</td>
<td class="right aligned"> 6 ore fa</td>
</tr>
<tr>
<td>
<i class="file pdf outline large icon"></i> Documento pdf
</td>
<td>Initial commit</td>
<td class="right aligned"> 6 ore fa</td>
</tr>
</tbody>
</table>
</div>
<!-- Fine Account Content -->
</div>
</div>
</div>
</div>
#mobile_floated_menu_account.fixed.launch.button {
z-index: 1;
position: fixed;
top: 7.2em;
left: -7px;
width: 45px;
height: auto;
white-space: nowrap;
overflow: hidden;
-webkit-transition: 0.3s width ease, 0.5s transform ease;
-moz-transition: 0.3s width ease, 0.5s transform ease;
-o-transition: 0.3s width ease, 0.5s transform ease;
-ms-transition: 0.3s width ease, 0.5s transform ease;
transition: 0.3s width ease, 0.5s transform ease;
}
#account_content{
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0px;
margin-left: 3%;
margin-top: 3%;
margin-bottom: 3%;
}
$(document).ready(function(){
$('#mobile_floated_menu_account').on('click',function(){
$('#sidebar_mobile')
.sidebar({
silent:true,
//context : $('.pusher'),
})
.sidebar('setting', 'transition', 'overlay')
.sidebar('toggle');
});
$('#freeSpaceOnDisk_bar')
.progress({
label: 'ratio',
text: {
ratio: '{percent}%'
}
});
if($('#freeSpaceOnDisk_bar').progress('get percent') >= 90){
$('#freeSpaceOnDisk_bar')
.progress({
text: {
active : 'Contatta un amministratore',
}
});
}
});
