From 791c859e01a3d0c812b1b78d73568d1ad90b2e59 Mon Sep 17 00:00:00 2001
From: shirajuki <shirajuki00@gmail.com>
Date: Thu, 18 Feb 2021 11:33:01 +0100
Subject: [PATCH] feat: added navbar and a minimal styling of components
---
client/src/app/app.component.html | 13 ++++++++--
client/src/app/app.component.scss | 25 ++++++++++++++++++
.../post-details/post-details.component.html | 6 ++---
.../posts/post-form/post-form.component.html | 26 ++++++++++---------
.../posts/post-form/post-form.component.scss | 4 +++
.../post-thumbnail.component.html | 4 ++-
.../post-thumbnail.component.scss | 5 ++++
client/src/styles.scss | 5 ++++
8 files changed, 70 insertions(+), 18 deletions(-)
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 60ff332..dda8c3e 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,3 +1,12 @@
-<h1>SellPoint</h1>
+<div class="navbar">
+ <a class="logo" href="/">SELLPOINT</a>
+ <nav>
+ <a href="/">/</a>
+ <a href="/annonse">/annonse</a>
+ <a href="/annonse/ny">/annonse/ny</a>
+ </nav>
+</div>
-<router-outlet></router-outlet>
\ No newline at end of file
+<div class="wrapper">
+ <router-outlet></router-outlet>
+</div>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e69de29..ae8ad49 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -0,0 +1,25 @@
+div.navbar {
+ background-color: #666;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 70px;
+
+ a.logo {
+ padding: 10px;
+ background-color: white;
+ width: 200px;
+ margin-left: 10px;
+ }
+ nav {
+ a{
+ padding: 10px;
+ margin: 10px;
+ background-color: white;
+ }
+ }
+}
+
+div.wrapper {
+ padding: 10px;
+}
diff --git a/client/src/app/posts/post-details/post-details.component.html b/client/src/app/posts/post-details/post-details.component.html
index 80cbaaf..82d2c97 100644
--- a/client/src/app/posts/post-details/post-details.component.html
+++ b/client/src/app/posts/post-details/post-details.component.html
@@ -1,7 +1,7 @@
-<h3>{{post.getTitle}}</h3>
+<h3>Tittel: {{post.getTitle}}</h3>
<img [src]="post.getImageUrl">
-<p>{{post.getDescription}}</p>
+<p>Beskrivelse: {{post.getDescription}}</p>
<br>
<p>Publiseringstidspunkt: {{post.getTimestamp}}</p>
-<p>Eier: {{post.getOwner}}</p>
\ No newline at end of file
+<p>Eier: {{post.getOwner}}</p>
diff --git a/client/src/app/posts/post-form/post-form.component.html b/client/src/app/posts/post-form/post-form.component.html
index c0cde4b..0ea8224 100644
--- a/client/src/app/posts/post-form/post-form.component.html
+++ b/client/src/app/posts/post-form/post-form.component.html
@@ -1,19 +1,21 @@
-<h3>Lag annonse</h3>
+<div class="postform">
+ <h3>Lag annonse</h3>
-<app-text-input [(inputModel)]="title" label="Tittel" (blur)="checkForm()"></app-text-input>
+ <app-text-input [(inputModel)]="title" label="Tittel" (blur)="checkForm()"></app-text-input>
-<app-text-input [(inputModel)]="description" label="Beskrivelse" (blur)="checkForm()"></app-text-input>
+ <app-text-input [(inputModel)]="description" label="Beskrivelse" (blur)="checkForm()"></app-text-input>
-<app-number-input [(inputModel)]="price" label="Pris" (blur)="checkForm()"></app-number-input>
+ <app-number-input [(inputModel)]="price" label="Pris" (blur)="checkForm()"></app-number-input>
-<app-select [(inputModel)]="categoryid" (change)="checkForm()" label="Kategori">
- <option value="0" selected hidden>Velg kategori</option>
- <option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
-</app-select>
+ <app-select [(inputModel)]="categoryid" (change)="checkForm()" label="Kategori">
+ <option value="0" selected hidden>Velg kategori</option>
+ <option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
+ </app-select>
-<app-text-input [(inputModel)]="imageUrl" label="Bilde URL" (blur)="showImage(imageUrl)"></app-text-input>
-<img [src]="displayImageUrl" (error)="showImage('https://i.stack.imgur.com/y9DpT.jpg')">
+ <app-text-input [(inputModel)]="imageUrl" label="Bilde URL" (blur)="showImage(imageUrl)"></app-text-input>
+ <img [src]="displayImageUrl" (error)="showImage('https://i.stack.imgur.com/y9DpT.jpg')">
-<p>{{statusMessage}}</p>
+ <p>{{statusMessage}}</p>
-<app-button (click)="publishPost()" text="Publiser"></app-button>
+ <app-button (click)="publishPost()" text="Publiser"></app-button>
+</div>
diff --git a/client/src/app/posts/post-form/post-form.component.scss b/client/src/app/posts/post-form/post-form.component.scss
index e69de29..26460c8 100644
--- a/client/src/app/posts/post-form/post-form.component.scss
+++ b/client/src/app/posts/post-form/post-form.component.scss
@@ -0,0 +1,4 @@
+div.postform {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/client/src/app/posts/post-thumbnail/post-thumbnail.component.html b/client/src/app/posts/post-thumbnail/post-thumbnail.component.html
index 5dc8e9f..5dc53d6 100644
--- a/client/src/app/posts/post-thumbnail/post-thumbnail.component.html
+++ b/client/src/app/posts/post-thumbnail/post-thumbnail.component.html
@@ -1 +1,3 @@
-<p (click)="goToPost()">{{post.getTitle}}</p>
+<div class="postthumb">
+ <a href="javascript:void(0)"(click)="goToPost()">{{post.getTitle}}</a>
+</div>
diff --git a/client/src/app/posts/post-thumbnail/post-thumbnail.component.scss b/client/src/app/posts/post-thumbnail/post-thumbnail.component.scss
index e69de29..7be5993 100644
--- a/client/src/app/posts/post-thumbnail/post-thumbnail.component.scss
+++ b/client/src/app/posts/post-thumbnail/post-thumbnail.component.scss
@@ -0,0 +1,5 @@
+div.postthumb {
+ padding: 10px;
+ margin: 10px;
+ background-color: rgba(0,0,0,.1);
+}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 90d4ee0..06cad1e 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -1 +1,6 @@
/* You can add global styles to this file, and also import other style files */
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
--
GitLab