Merge pull request #34 from Twitter-Clone-Group/gychu

Gychu
Twitter-Clone-Group · Sep 7, 2022 · c136056 · c136056
2 parents b27ac4b + 8e98426
commit c136056
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 13 deletions.
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -24,12 +24,12 @@
     <button class="sidebarButton" routerLink="/home">Home</button>
   </div>
 
-  <div class="sidebarOption">
+  <div class="sidebarOption" *ngIf="currentSqueaker.id==1">
     <span class="material-icons"> login </span>
     <button class="sidebarButton" routerLink="/login">Login</button>
   </div>
 
-  <div class="sidebarOption">
+  <div class="sidebarOption" *ngIf="currentSqueaker.id!=1">
     <span class="material-icons"> perm_identity </span>
     <button class="sidebarButton" routerLink="/profile">Profile</button>
   </div>

diff --git a/src/app/models/squeak.ts b/src/app/models/squeak.ts
@@ -3,7 +3,8 @@ import {Squeaker} from "./squeaker";
 export interface Squeak {
   id: number;
   content: string;
-  squeaker: Squeaker
+  squeaker: Squeaker;
   postedAtDate: number;
   postedAtTime: number;
+  image: string;
 }
diff --git a/src/app/models/squeakDTO.ts b/src/app/models/squeakDTO.ts
@@ -3,9 +3,11 @@ import {Squeaker} from "./squeaker";
 export class SqueakDTO {
   content: string;
   squeaker: Squeaker;
+  image: string
 
-  constructor(content: string, squeaker: Squeaker) {
+  constructor(content: string, squeaker: Squeaker, image: string) {
     this.content = content;
     this.squeaker = squeaker;
+    this.image = image;
   }
 }
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
@@ -24,12 +24,12 @@
     <button class="sidebarButton" routerLink="/home">Home</button>
   </div>
 
-  <div class="sidebarOption">
+  <div class="sidebarOption" *ngIf="currentSqueaker.id == 1">
     <span class="material-icons"> login </span>
     <button class="sidebarButton" routerLink="/login">Login</button>
   </div>
 
-  <div class="sidebarOption">
+  <div class="sidebarOption" *ngIf="currentSqueaker.id!=1">
     <span class="material-icons"> perm_identity </span>
     <button class="sidebarButton" routerLink="/profile">Profile</button>
   </div>
@@ -96,7 +96,7 @@ <h3>
               </div>
             </div>
             <img
-              src="https://cdn.discordapp.com/attachments/1009121959516315688/1016795716905078875/IMG_3518.png"
+              src="{{squeak.image}}"
               alt=""
             />
             <div class="post__footer">

diff --git a/src/app/squeak/squeak.component.html b/src/app/squeak/squeak.component.html
@@ -7,6 +7,7 @@
         alt=""
       />
       <input type="text" placeholder="Post squeak here" name="content" ngModel/>
+      <input type="text" placeholder="Image url here" name="imageUrl" [(ngModel)]="image">
       <button class="squeakBox__squeakButton" >Squeak</button>
     </div>
   </form>
@@ -39,8 +40,16 @@ <h3>
                 <p>{{squeak.content}}</p>
               </div>
             </div>
+<!--            <img *ngIf="squeak.id % 2 == 0"-->
+<!--              src="https://cdn.discordapp.com/attachments/1009121959516315688/1016795716905078875/IMG_3518.png"-->
+<!--              alt=""-->
+<!--            />-->
+<!--            <img *ngIf="squeak.id % 2 != 0"-->
+<!--              src="https://cdn.discordapp.com/attachments/1009121959516315688/1016899619453673502/IMG_3526.png"-->
+<!--              alt=""-->
+<!--            />-->
             <img
-              src="https://cdn.discordapp.com/attachments/1009121959516315688/1016795716905078875/IMG_3518.png"
+              src="{{squeak.image}}"
               alt=""
             />
             <div class="post__footer">

diff --git a/src/app/squeak/squeak.component.ts b/src/app/squeak/squeak.component.ts
@@ -17,7 +17,7 @@ export class SqueakComponent implements OnInit {
   // @ts-ignore
   currentSqueaker: Squeaker;
   squeaks: Squeak[] = [];
-  id = 0
+  image: string = "";
 
   constructor(private squeakService: SqueakService, private dataService: DataService, private squeakerService: SqueakerService) {
   }
@@ -44,7 +44,7 @@ export class SqueakComponent implements OnInit {
   }
 
   saveSqueak(sendForm: NgForm): void {
-    const squeakDTO = new SqueakDTO(sendForm.value.content, this.currentSqueaker)
+    const squeakDTO = new SqueakDTO(sendForm.value.content, this.currentSqueaker, this.image)
     this.squeakService.save(squeakDTO).subscribe();
     this.findAllSqueaks();
     this.findAllSqueaks();

diff --git a/src/styles.css b/src/styles.css
@@ -17,7 +17,7 @@ body {
 }
 
 .sidebarOption .material-icons
-/*.fa-twitter */
+  /*.fa-twitter */
 {
   padding: 20px;
 }
@@ -186,7 +186,7 @@ body {
 .post {
   display: flex;
   align-items: flex-start;
-  border-bottom: 1px solid var(--squeaker-background);
+  border-bottom: 5px solid var(--squeaker-background);
   padding-bottom: 10px;
 }
 
@@ -221,7 +221,10 @@ body {
 
 .post__headerDescription {
   margin-bottom: 10px;
-  font-size: 15px;
+  font-size: 30px;
+  font-family: Trebuchet MS;
+
+;
 }
 
 .post__body {
@@ -269,3 +272,6 @@ body {
   font-size: 18px;
   font-weight: 800;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }