Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-18 02:41:15 +02:00
Code Issues Projects Releases Wiki Activity

vault layout

Browse Source
This commit is contained in:
Kyle Spearrin 2018-06-06 12:35:10 -04:00
parent e814b8ef09
commit cc9410602c
2 changed files with 157 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/app/vault/vault.component.html
View File

@ -39,44 +39,149 @@
</nav>
<div class="container page-content">
<div class="row">
<div class="col-3">
<div class="col-4">
<div class="card">
<div class="card-header">
Navigation
Filters
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">
Item 1
</a>
<a href="#" class="list-group-item list-group-item-action active">
Item 2
</a>
<a href="#" class="list-group-item list-group-item-action">
Item 3
</a>
</div>
</div>
</div>
<div class="col-6">
<h1>My Vault</h1>
<p>Stuff</p>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
All Items
<input type="search" class="form-control" id="search" placeholder="Search vault">
<ul class="fa-ul">
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-th"></i>All Items
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-star"></i>Favorites
</a>
</li>
</ul>
<h3>Types</h3>
<ul class="fa-ul">
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-globe"></i>Login
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-credit-card"></i>Card
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-id-card-o"></i>Identity
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-sticky-note-o"></i>
Secure Note
</a>
</li>
</ul>
<h3>Folders</h3>
<ul class="fa-ul">
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Folder 1
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Folder 1
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Folder 1
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Folder 1
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Folder 1
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Folder 1
</a>
</li>
</ul>
<h3>Collections</h3>
<ul class="fa-ul">
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Collection 1
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Collection 1
</a>
</li>
<li>
<a href="#">
<i class="fa-li fa fa-fw fa-caret-right"></i>
Collection 1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-8">
<table class="table table-hover table-sm">
<tbody>
<tr>
<td>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
<td>
<input type="checkbox">
</td>
<td>
<a href="#">Google</a>
<small class="text-muted">MyUsername</small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container footer text-muted">
<div class="row">
<div class="col">
&copy; 2015-2018 8bit Solutions LLC
&copy; 2015-2018 8bit Solutions LLC
</div>
<div class="col text-center">
</div>
<div class="col text-right">
Version 2.0.0

28
src/scss/styles.scss
View File

@ -72,3 +72,31 @@ body {
font-weight: bold;
padding-left: calc(#{$list-group-item-padding-x} - 3px);
}
app-vault {
.table {
line-height: 1;
tr:first-child {
td {
border: none;
}
}
td {
vertical-align: middle;
a {
display: block;
}
}
td:first-child {
width: 80px;
}
td:nth-child(2) {
width: 40px;
}
}
}