diff --git a/Mamoth/Mamoth.njsproj b/Mamoth/Mamoth.njsproj
index 35efdcd4..dddc820c 100644
--- a/Mamoth/Mamoth.njsproj
+++ b/Mamoth/Mamoth.njsproj
@@ -49,6 +49,8 @@
+
+
@@ -72,6 +74,7 @@
+
@@ -91,9 +94,12 @@
+
+
Code
+
diff --git a/Mamoth/src/app/app.module.ts b/Mamoth/src/app/app.module.ts
index 6aff94bb..5fca86b6 100644
--- a/Mamoth/src/app/app.module.ts
+++ b/Mamoth/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { LeftSideBarComponent } from './components/left-side-bar/left-side-bar.c
import { StreamsMainDisplayComponent } from './components/streams-main-display/streams-main-display.component';
import { StreamComponent } from './components/stream/stream.component';
import { StreamsSelectionFooterComponent } from './components/streams-selection-footer/streams-selection-footer.component';
+import { TootComponent } from './components/toot/toot.component';
@NgModule({
@@ -16,7 +17,8 @@ import { StreamsSelectionFooterComponent } from './components/streams-selection-
LeftSideBarComponent,
StreamsMainDisplayComponent,
StreamComponent,
- StreamsSelectionFooterComponent
+ StreamsSelectionFooterComponent,
+ TootComponent
],
imports: [
BrowserModule,
diff --git a/Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts b/Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts
index 7eee16df..8568fad2 100644
--- a/Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts
+++ b/Mamoth/src/app/components/left-side-bar/left-side-bar.component.ts
@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { AccountWrapper } from '../../models/account.models';
+import { Component, OnInit } from "@angular/core";
+import { AccountWrapper } from "../../models/account.models";
@Component({
- selector: 'app-left-side-bar',
- templateUrl: './left-side-bar.component.html',
- styleUrls: ['./left-side-bar.component.css']
+ selector: "app-left-side-bar",
+ templateUrl: "./left-side-bar.component.html",
+ styleUrls: ["./left-side-bar.component.css"]
})
export class LeftSideBarComponent implements OnInit {
accounts: AccountWrapper[] = [];
diff --git a/Mamoth/src/app/components/stream/stream.component.css b/Mamoth/src/app/components/stream/stream.component.css
index db87d81d..44a7edc5 100644
--- a/Mamoth/src/app/components/stream/stream.component.css
+++ b/Mamoth/src/app/components/stream/stream.component.css
@@ -1,7 +1,31 @@
#mam-stream-column {
width: 300px;
- height: calc(100%);
+ height: calc(100% - 30px);
background-color: aqua;
}
+
+#mam-stream-header {
+ width: calc(100%);
+ height: 30px;
+
+ background-color: black;
+
+ border-bottom: 1px solid whitesmoke;
+}
+
+ #mam-stream-header h1 {
+ color: whitesmoke;
+ font-size: 0.8em;
+ font-weight: normal;
+ margin: 0;
+ padding: 8px 0 0 10px;
+ }
+
+
+#mam-stream-toots {
+ height: calc(100% - 30px);
+ overflow: auto;
+
+}
diff --git a/Mamoth/src/app/components/stream/stream.component.html b/Mamoth/src/app/components/stream/stream.component.html
index 008587cc..9d17804a 100644
--- a/Mamoth/src/app/components/stream/stream.component.html
+++ b/Mamoth/src/app/components/stream/stream.component.html
@@ -1,3 +1,10 @@
diff --git a/Mamoth/src/app/components/stream/stream.component.ts b/Mamoth/src/app/components/stream/stream.component.ts
index 406c616d..feccb4f1 100644
--- a/Mamoth/src/app/components/stream/stream.component.ts
+++ b/Mamoth/src/app/components/stream/stream.component.ts
@@ -1,15 +1,38 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { Stream, TootWrapper } from "../../models/stream.models";
+import { AccountWrapper } from "../../models/account.models";
@Component({
- selector: 'app-stream',
- templateUrl: './stream.component.html',
- styleUrls: ['./stream.component.css']
+ selector: "app-stream",
+ templateUrl: "./stream.component.html",
+ styleUrls: ["./stream.component.css"]
})
export class StreamComponent implements OnInit {
+ stream: Stream;
+ toots: TootWrapper[] = [];
constructor() { }
ngOnInit() {
+ //Stubs
+ const newStream = new Stream();
+ newStream.streamName = "Stream Name";
+ this.stream = newStream;
+
+ const acc1 = new AccountWrapper();
+ acc1.username = "@mastodon.social@Gargron";
+ acc1.avatar = "https://files.mastodon.social/accounts/avatars/000/000/001/original/4df197532c6b768c.png";
+
+ for (let i = 0; i < 20; i++) {
+ const newToot = new TootWrapper();
+ newToot.account = acc1;
+ newToot.content = "Lorem Elsass ipsum tristique semper elit jetz gehts los lacus habitant Hans sagittis baeckeoffe condimentum id, salu bredele ch'ai libero, ftomi! hop Pfourtz ! id munster auctor, Miss Dahlias rhoncus Yo dû. Salu bissame turpis ante amet non sed gal Spätzle Gal !";
+ this.toots.push(newToot);
+ }
+ }
+
+ goToTop(): boolean {
+ return false;
}
}
diff --git a/Mamoth/src/app/components/toot/toot.component.css b/Mamoth/src/app/components/toot/toot.component.css
new file mode 100644
index 00000000..c170c785
--- /dev/null
+++ b/Mamoth/src/app/components/toot/toot.component.css
@@ -0,0 +1,32 @@
+#mam-toot {
+ border: solid white;
+ border-width: 0 0 1px 0;
+ margin: 0;
+ padding: 0;
+}
+
+#mam-toot-avatar {
+ margin: 5px 0 0 5px;
+ width: 50px;
+ height: 50px;
+ float: left;
+
+}
+
+ #mam-toot-avatar img {
+ width: 50px;
+ height: 50px;
+ border-radius: 5px;
+ margin: 0;
+ }
+
+
+#mam-toot-content {
+ /*width: calc(100% - 50px);*/
+ margin: 5px 5px 5px 60px ;
+}
+
+#mam-toot-content p {
+ margin: 0;
+ font-size: 0.85em;
+}
diff --git a/Mamoth/src/app/components/toot/toot.component.html b/Mamoth/src/app/components/toot/toot.component.html
new file mode 100644
index 00000000..d3fbcd0e
--- /dev/null
+++ b/Mamoth/src/app/components/toot/toot.component.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
diff --git a/Mamoth/src/app/components/toot/toot.component.spec.ts b/Mamoth/src/app/components/toot/toot.component.spec.ts
new file mode 100644
index 00000000..856e2bb2
--- /dev/null
+++ b/Mamoth/src/app/components/toot/toot.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TootComponent } from './toot.component';
+
+describe('TootComponent', () => {
+ let component: TootComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ TootComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TootComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/Mamoth/src/app/components/toot/toot.component.ts b/Mamoth/src/app/components/toot/toot.component.ts
new file mode 100644
index 00000000..d67441b1
--- /dev/null
+++ b/Mamoth/src/app/components/toot/toot.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { TootWrapper } from "../../models/stream.models";
+
+@Component({
+ selector: "app-toot",
+ templateUrl: "./toot.component.html",
+ styleUrls: ["./toot.component.css"]
+})
+export class TootComponent implements OnInit {
+ @Input() toot: TootWrapper;
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/Mamoth/src/app/models/stream.models.ts b/Mamoth/src/app/models/stream.models.ts
new file mode 100644
index 00000000..efa94921
--- /dev/null
+++ b/Mamoth/src/app/models/stream.models.ts
@@ -0,0 +1,10 @@
+import { AccountWrapper } from "./account.models";
+
+export class Stream {
+ streamName: string;
+}
+
+export class TootWrapper {
+ account: AccountWrapper;
+ content: string;
+}
diff --git a/Mamoth/src/styles.css b/Mamoth/src/styles.css
index 2f22b29c..8e341263 100644
--- a/Mamoth/src/styles.css
+++ b/Mamoth/src/styles.css
@@ -1,9 +1,11 @@
/* You can add global styles to this file, and also import other style files */
html, body {
- background-color: lightcoral;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
+ font-family: sans-serif;
+
+ background-color: lightcoral;
}