stubbing out some layout

2025-12-19 17:53:39 +00:00 · 2018-06-06 09:43:28 -04:00
parent db5a5e1b37
commit ce34ef902f
11 changed files with 198 additions and 18 deletions
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -12,7 +12,7 @@ import { TwoFactorComponent } from './accounts/two-factor.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: '2fa', component: TwoFactorComponent },
    { path: 'register', component: RegisterComponent },
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -0,0 +1,2 @@
+<toaster-container [toasterconfig]="toasterConfig"></toaster-container>
+<router-outlet></router-outlet>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -11,10 +11,7 @@ import { Router } from '@angular/router';

@Component({
    selector: 'app-root',
-    styles: [],
-    template: `
-        <toaster-container [toasterconfig]="toasterConfig"></toaster-container>
-        <router-outlet></router-outlet>`,
+    templateUrl: 'app.component.html',
 })
 export class AppComponent {
    toasterConfig: ToasterConfig = new ToasterConfig({
--- a/src/app/main.ts
+++ b/src/app/main.ts
@@ -1,6 +1,12 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

+import './polyfills';
+
+import 'bootstrap';
+import 'jquery';
+import 'popper.js';
+
 // tslint:disable-next-line
 require('../scss/styles.scss');

--- a/src/app/polyfills.ts
+++ b/src/app/polyfills.ts
@@ -0,0 +1,23 @@
+import 'whatwg-fetch';
+import '../scripts/webcrypto-shim';
+
+// IE9, IE10 and IE11 requires all of the following polyfills.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/weak-map';
+import 'core-js/es6/set';
+
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+import 'zone.js/dist/zone';
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -1 +1,75 @@
-<b>The vault!! {{ 'hello' | i18n }}</b>
+<nav class="navbar navbar-expand navbar-dark bg-dark">
+    <div class="container">
+        <a class="navbar-brand" href="#">
+            <i class="fa fa-shield fa-lg"></i>
+        </a>
+        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+            <ul class="navbar-nav">
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">My Vault</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Settings</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="nav-list" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Some link
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="nav-list">
+                        <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>
+                </li>
+            </ul>
+        </div>
+        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
+            <li class="nav-item dropdown">
+                <a class="nav-item nav-link dropdown-toggle" href="#" id="nav-profile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="fa fa-user"></i>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
+                    <a class="dropdown-item" href="#">Option 1</a>
+                    <a class="dropdown-item" href="#">Option 2</a>
+                    <a class="dropdown-item" href="#">Option 3</a>
+                </div>
+            </li>
+        </ul>
+    </div>
+</nav>
+<div class="container page-content">
+    <div class="row">
+        <div class="col-3">
+            <div class="card">
+                <div class="card-header">
+                    Navigation
+                </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">
+                        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
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container footer">
+    &copy; 2015-2018 8bit Solutions LLC
+</div>
--- a/src/index.html
+++ b/src/index.html
@@ -2,18 +2,21 @@
 <html>

 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="theme-color" content="#3c8dbc">
-  <base href="" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=768, initial-scale=1.0, maximum-scale=1.0" />
+    <meta name="theme-color" content="#3c8dbc">
+    <base href="" />

-  <title page-title>Bitwarden Web Vault</title>
+    <title page-title>Bitwarden Web Vault</title>

-  <link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
-  <link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="#3c8dbc">
-  <link rel="manifest" href="manifest.json">
+    <link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
+    <link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="#3c8dbc">
+    <link rel="manifest" href="manifest.json">
+
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+        crossorigin="anonymous">
 </head>

 <body>
@@ -22,4 +25,4 @@
    </app-root>
 </body>

-</html>
+</html>
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -1,3 +1,48 @@
+$theme-colors: ( 
+    "primary": #3c8dbc, 
+    "primary-accent": #286090, 
+    "danger": #dd4b39, 
+    "success": #00a65a, 
+    "info": #555555, 
+    "warning": #bf7e16
+);
+
+$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,
+    Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+
+$h1-font-size: 2rem;
+$h2-font-size: 1.3rem;
+$h3-font-size: 1rem;
+$h4-font-size: 1rem;
+$h5-font-size: 1rem;
+$h6-font-size: 1rem;
+
+$grid-gutter-width: 20px;
+
+@import "../../node_modules/bootstrap/scss/bootstrap";
+
 body {
-    background-color: gray;
+    min-width: 1010px;
+}
+
+.navbar {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.container {
+    width: 980px;
+    margin: 0 auto;
+    padding: 0;
+    max-width: none !important;
+}
+
+.page-content {
+    margin-top: 20px;
+}
+
+.footer {
+    margin-top: 40px;
+    padding: 40px 0 10px 0;
+    border-top: 1px solid $border-color;
 }
--- a/src/services/webPlatformUtils.service.ts
+++ b/src/services/webPlatformUtils.service.ts
@@ -33,6 +33,8 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
            this.deviceCache = DeviceType.Safari;
        } else if ((window as any).chrome && navigator.userAgent.indexOf(' Chrome/') !== -1) {
            this.deviceCache = DeviceType.Chrome;
+        } else if (navigator.userAgent.indexOf(' Trident/') !== -1) {
+            this.deviceCache = DeviceType.IE;
        }

        return this.deviceCache;
@@ -54,6 +56,10 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
        return this.getDevice() === DeviceType.Edge;
    }

+    isIE(): boolean {
+        return this.getDevice() === DeviceType.IE;
+    }
+
    isOpera(): boolean {
        return this.getDevice() === DeviceType.Opera;
    }