Merge pull request #1 from Jason-Terry/auth

Remove styles, re-strucutre site layuout, prep for auth implementation

package.json

@@ -34,28 +34,29 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "@types/quill": "^1.3.10",
+    "bulma": "^0.7.4",
     "codelyzer": "~4.5.0",
+    "core-js": "^2.6.4",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.2.2",
-    "core-js": "^2.6.4",
     "katex": "^0.10.0",
     "ngx-quill": "^4.6.11",
+    "protractor": "~5.4.0",
     "quill": "^1.3.6",
     "quill-emoji": "^0.1.5",
     "quill-image-resize": "^3.0.9",
     "quill-image-resize-module": "^3.0.0",
     "quill-mention": "^2.0.9",
     "rxjs": "~6.4.0",
+    "ts-node": "~7.0.0",
     "tslib": "^1.9.3",
+    "tslint": "~5.11.0",
+    "typescript": "~3.2.2",
     "zone.js": "^0.8.29"
   }
 }

src/app/about/about.component.html

@@ -1,3 +1,5 @@
-<p>
-  about works!
-</p>
+<div class="container">
+  <p>
+    about works!
+  </p>
+</div>

src/app/app-routing.module.ts

@@ -1,16 +1,18 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { HomeComponent } from './home/home.component';
+import { EditorComponent } from './editor/editor.component';
 import { AboutComponent } from './about/about.component';
-import { ContactComponent } from './contact/contact.component';
 import { LoginComponent } from './login/login.component';
+import { HomeComponent } from './home/home.component';
+import { BlogPostComponent } from './blog-post/blog-post.component';
 
 const routes: Routes = [
-  { path: '', component: HomeComponent },
+  { path: '', component: HomeComponent},
+  { path: 'editor', component: EditorComponent },
   { path: 'about', component: AboutComponent },
-  { path: 'contact', component: ContactComponent },
   { path: 'login', component: LoginComponent },
+  { path: 'posts', component: BlogPostComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -6,18 +6,22 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavComponent } from './nav/nav.component';
 import { AboutComponent } from './about/about.component';
-import { ContactComponent } from './contact/contact.component';
-import { HomeComponent } from './home/home.component';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { LoginComponent } from './login/login.component';
+import { HomeComponent } from './home/home.component';
+import { EditorComponent } from './editor/editor.component';
+import { BlogPostComponent } from './blog-post/blog-post.component';
+
 @NgModule({
   declarations: [
     AppComponent,
     NavComponent,
     AboutComponent,
-    ContactComponent,
+    EditorComponent,
+    HomeComponent,
+    LoginComponent,
     HomeComponent,
-    LoginComponent
+    BlogPostComponent
   ],
   imports: [
     BrowserModule,

src/app/blog-post/blog-post.component.html

@@ -0,0 +1,41 @@
+<div class="container">
+  <div class="box">
+    <h1 class="blog-title">Blog Title</h1>
+    <h3>MM / DD / YYY </h3>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis purus, posuere sed ex sed, cursus auctor
+      nulla. Ut vitae mauris ante. Morbi commodo, mauris vitae mollis ornare, risus lectus bibendum elit, a facilisis
+      eros tellus quis arcu. Donec mattis rhoncus turpis. Donec maximus ultrices egestas. Fusce ullamcorper nisl id
+      eros aliquam, sit amet convallis dolor sollicitudin. Proin massa quam, accumsan ac aliquet in, finibus in magna.
+      Morbi in eros id dolor molestie vulputate. Ut a libero et orci vestibulum feugiat volutpat at justo. Vestibulum
+      vitae maximus urna. Donec vel ipsum eu justo suscipit euismod. Nam ultrices, lectus ac mollis semper, lorem urna
+      condimentum est, sit amet luctus nulla mi at nunc. Nunc mi sapien, semper sit amet vulputate nec, varius ut
+      metus. Cras vestibulum gravida lacus. Phasellus maximus vestibulum diam vel scelerisque. Phasellus quis nunc a
+      nisi elementum hendrerit a non turpis.
+
+      Nunc lobortis ex augue, bibendum finibus felis lacinia vitae. Vivamus rutrum magna arcu, id ultrices sapien
+      euismod non. Etiam tortor ligula, aliquet ac ante ac, suscipit malesuada odio. Aliquam luctus nulla nec nisl
+      ornare, a pharetra tellus sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+      cubilia Curae; In in eros tincidunt, placerat nisl et, ultricies lorem. In a mattis massa. Suspendisse potenti.
+
+      Curabitur ac consequat eros. Nullam non lectus eget lectus egestas mollis. Vestibulum posuere pellentesque
+      pellentesque. Nunc placerat quam non magna dictum, at sollicitudin massa lacinia. Pellentesque commodo volutpat
+      augue at ultricies. Vivamus ultricies pulvinar semper. Donec vel lobortis nulla. Nunc elit ante, dignissim non
+      vehicula faucibus, interdum ut lorem. Sed fringilla, lorem accumsan ultrices dapibus, ante lorem vestibulum est,
+      eget dapibus metus lacus quis libero. Cras ac orci ex. Mauris at molestie magna. In ullamcorper eros nec ex
+      consequat, non imperdiet ipsum rutrum. Integer imperdiet rutrum vehicula. Fusce sit amet efficitur tellus, vitae
+      mattis massa. Integer pellentesque dui eget aliquam tincidunt. Phasellus orci elit, dapibus eu facilisis et,
+      lobortis ac orci.
+
+      Sed vulputate fringilla cursus. Praesent at efficitur enim. Mauris placerat augue nec euismod rhoncus. Mauris
+      varius mauris ut augue hendrerit, ut euismod urna lacinia. Duis ut nisi rutrum, varius erat vel, ultricies velit.
+      Fusce venenatis congue nisl at malesuada. Nulla vel nibh varius, bibendum tortor et, ornare odio. Integer id ex
+      at tellus blandit ornare sit amet sit amet est. Donec sit amet sapien felis. Curabitur id ligula sem. Duis et
+      quam vulputate, auctor odio sit amet, rutrum enim. Nullam posuere, arcu at varius sodales, metus metus varius
+      nisi, in fermentum purus nisi ornare mi. Etiam feugiat purus et dignissim condimentum. Phasellus vestibulum
+      tellus et lorem rutrum, non vulputate arcu sollicitudin.
+
+      Vestibulum aliquam varius elementum. Vestibulum quis quam vel neque ultrices ornare sed in dolor. Sed et vehicula
+      magna. Curabitur porttitor convallis magna, vitae congue ex facilisis vitae. Proin in ullamcorper nisl. Quisque
+      fringilla justo vel placerat volutpat. Aliquam non risus urna.
+  </div>
+</div>

src/app/contact/contact.component.spec.ts → src/app/blog-post/blog-post.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ContactComponent } from './contact.component';
+import { BlogPostComponent } from './blog-post.component';
 
 describe('ContactComponent', () => {
-  let component: ContactComponent;
-  let fixture: ComponentFixture<ContactComponent>;
+  let component: BlogPostComponent;
+  let fixture: ComponentFixture<BlogPostComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ContactComponent ]
+      declarations: [ BlogPostComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ContactComponent);
+    fixture = TestBed.createComponent(BlogPostComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/blog-post/blog-post.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-blog-post',
+  templateUrl: './blog-post.component.html',
+  styleUrls: ['./blog-post.component.css']
+})
+export class BlogPostComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/editor/editor.component.html

@@ -0,0 +1,9 @@
+<div class="container">
+  <div class="title-wrapper">
+    <p>editor works!</p>
+    <button>SUBMIT</button>
+  </div>
+  <div class="editor-wrapper">
+    <quill-editor theme="bubble" [placeholder]="placeholder"></quill-editor>
+  </div>
+</div>

src/app/editor/editor.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditorComponent } from './editor.component';
+
+describe('EditorComponent', () => {
+  let component: EditorComponent;
+  let fixture: ComponentFixture<EditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/editor/editor.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { Form, FormGroup, FormControl, FormBuilder } from '@angular/forms';
+
+
+@Component({
+  selector: 'app-editor',
+  templateUrl: './editor.component.html',
+  styleUrls: ['./editor.component.css']
+})
+
+export class EditorComponent implements OnInit {
+  isReadOnly = false
+  isRequired = false
+  form: FormGroup
+
+  placeholder = "What's on your mind?"
+
+  constructor() {
+  }
+
+  ngOnInit() {
+
+  }
+
+  logChange($event: any) {
+    // tslint:disable-next-line:no-console
+    console.log($event)
+  }
+
+  logSelection($event: any) {
+    // tslint:disable-next-line:no-console
+    console.log($event)
+  }
+
+  toggleReadOnly() {
+    this.isReadOnly = !this.isReadOnly
+  }
+
+  toggleRequired() {
+    this.isRequired = !this.isRequired
+  }
+}

src/app/home/home.component.css

@@ -1,10 +0,0 @@
-.container {
-    border: solid 1px black;
-    border-right: solid 2px black;
-    border-bottom: solid 2px black;
-    border-radius: 2pc;
-}
-
-quill-editor {
-    display: block;
-  }

src/app/home/home.component.html

@@ -1,6 +1,5 @@
 <div class="container">
-  <h3>Bubble editor</h3>
-  <div class="editor-wrapper">
-    <quill-editor theme="bubble" [placeholder]="placeholder"></quill-editor>
-  </div>
-</div>
+  <p>
+    home works!
+  </p>
+</div>

src/app/home/home.component.ts

@@ -1,42 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { Form, FormGroup, FormControl, FormBuilder } from '@angular/forms';
-
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-
 export class HomeComponent implements OnInit {
-  isReadOnly = false
-  isRequired = false
-  form: FormGroup
-
-  placeholder = 'placeholder'
 
-  constructor() {
-  }
+  constructor() { }
 
   ngOnInit() {
-
-  }
-
-  logChange($event: any) {
-    // tslint:disable-next-line:no-console
-    console.log($event)
   }
 
-  logSelection($event: any) {
-    // tslint:disable-next-line:no-console
-    console.log($event)
-  }
-
-  toggleReadOnly() {
-    this.isReadOnly = !this.isReadOnly
-  }
-
-  toggleRequired() {
-    this.isRequired = !this.isRequired
-}
 }

src/app/login/login.component.html

@@ -1,3 +1,15 @@
-<p>
-  login works!
-</p>
+<div class="container">
+  <div calss="top-wrapper">
+    <h1>
+      login works!
+    </h1>
+
+  </div>
+  <div class="body-wrapper">
+    <form action="onSubmit()">
+      <input type="email" name="email" value="Email" autocomplete="off">
+      <input type="password" name="password" value="Password" autocomplete="off">
+      <input type="submit" value="submit">
+    </form> 
+  </div>
+</div>

src/app/login/login.component.ts

@@ -12,4 +12,8 @@ export class LoginComponent implements OnInit {
   ngOnInit() {
   }
 
+  onSubmit() {
+    console.log('Submit called');
+  }
+
 }