Upstream/bitwarden-desktop
1
0
Fork 0
mirror of https://github.com/bitwarden/desktop.git synced 2024-12-26 16:58:00 +01:00
Code Issues Projects Releases Wiki Activity

vault flex layout

Browse Source
This commit is contained in:
Kyle Spearrin 2018-01-20 23:45:22 -05:00
parent 98552c8124
commit d90d26dcb6
4 changed files with 174 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing.module.ts
View File

@ -8,7 +8,7 @@ import { LoginComponent } from './accounts/login.component';
import { VaultComponent } from './vault/vault.component';
const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: '', redirectTo: '/vault', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'vault', component: VaultComponent },
];

2
src/app/app.component.ts
View File

@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styles: [],
template: 'App<br /><router-outlet></router-outlet>',
template: '<router-outlet></router-outlet>',
})
export class AppComponent {
}

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

@ -1 +1,67 @@
My Vault!!
<div id="vault">
<div id="nav">
<ul class="top">
<li><a href="#">V</a></li>
<li><a href="#">G</a></li>
<li><a href="#">S</a></li>
</ul>
<ul class="bottom">
<li><a href="#">L</a></li>
<li><a href="#">U</a></li>
</ul>
</div>
<div id="categories">
<div class="header">
Search Bar
</div>
<div class="content">
<div>Something</div><div>Something</div><div>Something</div>
</div>
</div>
<div id="items">
<div class="header">
Search Bar
</div>
<div class="content">
<div>Something Something Something Something Something Something</div>
<div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
</div>
<div class="footer">
Add
</div>
</div>
<div id="details">
<div class="header">
View Item
</div>
<div class="content">
<div>Something Something Something Something Something Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
<div>Something</div><div>Something</div><div>Something</div><div>Something</div>
</div>
<div class="footer">
Edit
</div>
</div>
</div>

106
src/scss/styles.scss
View File

@ -1,6 +1,110 @@
html, body {
* {
box-sizing: border-box;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #aaa;
}
*::-webkit-scrollbar-thumb {
background: #888;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: gray;
overflow-x: hidden;
overflow-y: hidden;
font-family: Arial;
font-size: 14px;
color: #000;
}
#vault {
height: 100vh;
display: flex;
#nav {
background-color: #1a2226;
min-width: 50px;
color: white;
display: flex;
flex-direction: column;
ul {
padding: 0;
margin: 0;
li {
padding: 0;
margin: 0;
list-style: none;
a {
display: block;
text-align: center;
padding: 20px 0;
text-decoration: none;
color: #fff;
}
}
&.top {
flex: 1;
}
}
}
#categories {
background-color: #222d32;
width: 15%;
min-width: 175px;
max-width: 250px;
color: white;
.header {
background-color: #367fa9;
}
}
#items {
background-color: #ecf0f5;
width: 25%;
min-width: 200px;
max-width: 350px;
}
#details {
background-color: #f9fafc;
flex: 1;
min-width: 400px;
}
#categories, #items, #details {
display: flex;
flex-direction: column;
}
.header {
height: 50px;
background-color: #3c8dbc;
color: #fff;
flex: 0 0 auto;
}
.content {
flex: 1 1 auto;
position: relative;
overflow: overlay;
}
.footer {
height: 50px;
background-color: #fff;
flex: 0 0 auto;
}
}