Skip to content
Snippets Groups Projects
Commit fbca1a81 authored by Tormod Nygård's avatar Tormod Nygård
Browse files

Issue: Footer fixes and post list styling (#29)

parent 8ebccfc8
No related branches found
No related tags found
1 merge request!26"Add Sass styling to components"
Hide whitespace changes
Inline Side-by-side
Showing
with 129 additions and 37 deletions
client/src/app/app.component.html
+ 21
− 20
View file @ fbca1a81
<div class="navbar">
<span class="logo" (click)="navigate('/')">SellPoint</span>
<nav>
<span (click)="navigate('/annonse')">Annonser</span>
<span (click)="navigate('/annonse/ny')">Lag annonse</span>
<span *ngIf="!user.getUserId" (click)="navigate('/register')">Registrer</span>
<span *ngIf="!user.getUserId" (click)="navigate('/login')">Logg inn</span>
<span *ngIf="user.getUserId" (click)="navigate('/profile')">Profil</span>
<span *ngIf="user.getUserId" (click)="logout()">Logg ut</span>
</nav>
</div>
<div class="body">
<div class="navbar">
<span class="logo" (click)="navigate('/')">SellPoint</span>
<nav>
<span (click)="navigate('/annonse')">Annonser</span>
<span (click)="navigate('/annonse/ny')">Lag annonse</span>
<span *ngIf="!user.getUserId" (click)="navigate('/register')">Registrer</span>
<span *ngIf="!user.getUserId" (click)="navigate('/login')">Logg inn</span>
<span *ngIf="user.getUserId" (click)="navigate('/profile')">Profil</span>
<span *ngIf="user.getUserId" (click)="logout()">Logg ut</span>
</nav>
</div>
<div class="splash">
<div class="title"><h1>SELLPOINT</h1></div>
<div class="splash">
<div class="title"><h1>SELLPOINT</h1></div>
<div class="wave">
<div class="waveImg"></div>
<div class="wave">
<div class="waveImg"></div>
</div>
</div>
</div>
<div class="wrapper">
<router-outlet></router-outlet>
<div class="wrapper">
<router-outlet></router-outlet>
</div>
</div>
<div class="footer">
<div class="logo"><h1>SELLPOINT LOGO</h1></div>
<div class="info">
......@@ -50,4 +51,4 @@
</ul>
</div>
</div>
</div>
\ No newline at end of file
</div>
client/src/app/app.component.scss
+ 7
− 4
View file @ fbca1a81
div.body{
min-height: calc(100vh - 200px);
}
div.navbar {
background-color: #fff;
display: flex;
......@@ -19,7 +23,7 @@ div.navbar {
span{
padding: 10px;
cursor: pointer;
height: 100%;
margin: 20px;
font-size: 25px;
background-color: #fff;
}
......@@ -102,11 +106,10 @@ div.footer {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
font-family: 'Josefin Sans', sans-serif;
position: absolute;
clear: both;
height: 200px;
width: 100%;
bottom: 0;
div.info {
display: flex;
flex-direction: row;
......
client/src/app/home/home.component.scss
+ 4
− 1
View file @ fbca1a81
div.home {
position: relative;
width: 100%;
height: 600px;
background-size: cover;
display: flex;
justify-content: space-between;
......@@ -20,6 +21,7 @@ div.home {
background: linear-gradient(90deg, #14A35A 0%, #24e072 100%);
width: 40%;
height: 300px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
p {
padding-left: 10px;
padding-bottom: 5px;
......@@ -29,8 +31,9 @@ div.home {
}
div.whiteBox {
width: 100%;
height: 245px;
height: 250px;
background-color: #ffffff;
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
}
}
div.cta {
......
client/src/app/posts/post-list/post-list.component.html
+ 16
− 6
View file @ fbca1a81
<div>
<app-select [(inputModel)]="selectedCategory" (change)="filterCategory()">
<option value="0" selected>Ingen kategori</option>
<option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
</app-select>
<div class="title">
<h2>ANNONSER</h2>
</div>
<div class="container">
<div class="filterContainer">
<div class="whiteBox">
<app-select id="categorySelect" [(inputModel)]="selectedCategory" (change)="filterCategory()">
<option value="0" selected>Velg kategori . . .</option>
<option *ngFor="let category of categories" [value]="category.getCategoryId">{{category.getName}}</option>
</app-select>
</div>
</div>
<app-post-thumbnail *ngFor="let post of allPosts" [post]="post"></app-post-thumbnail>
<div class="postContainer">
<app-post-thumbnail *ngFor="let post of allPosts" [post]="post"></app-post-thumbnail>
</div>
</div>
client/src/app/posts/post-list/post-list.component.scss
+ 42
− 0
View file @ fbca1a81
div.title {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
font-family: 'Inter', sans-serif;
font-size: 2em;
text-shadow: -2px 2px 3px #000000;
color: white;
h1 {
letter-spacing: 10px;
}
}
div.container{
margin-bottom: 100px;
margin-top: 250px;
display: grid;
grid-template-columns: 400px 3fr;
gap: 25px;
div.filterContainer{
background: linear-gradient(#24e072 0%, #14A35A 100%);
height: 250px;
padding: 15px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
div.whiteBox{
background-color: #fff;
padding: 20px;
height: 100%;
box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.5);
}
}
div.postContainer{
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
}
}
\ No newline at end of file
client/src/app/posts/post-thumbnail/post-thumbnail.component.html
+ 5
− 2
View file @ fbca1a81
<div class="postthumb">
<a href="javascript:void(0)" (click)="goToPost()">{{post.getTitle}}</a>
<div class="postthumb" (click)="goToPost()">
<img [src]="post.getImageUrl">
<p class="price">{{post.getPrice}} kr</p>
<p class="title">{{post.getTitle}}</p>
</div>
client/src/app/posts/post-thumbnail/post-thumbnail.component.scss
+ 26
− 2
View file @ fbca1a81
div.postthumb {
padding: 10px;
margin: 10px;
background-color: rgba(0,0,0,.1);
background-color: #FFA1A1;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
font-family: 'Josefin Sans', sans-serif;
width: 384px;
cursor: pointer;
img{
object-fit: cover;
width: 364px;
height: 364px;
border: 4px #e98686 solid;
}
p.price{
position: relative;
top: -31px;
left: 15px;
text-shadow: -1px 1px 4px #000000;
color: white;
font-size: 16pt;
}
p.title{
margin-top: -10px;
font-size: 18pt;
}
}
client/src/app/shared/select/select.component.scss
+ 8
− 2
View file @ fbca1a81
select{
padding: 5px;
select {
padding: 15px 10px 15px 10px;
font-family: 'Josefin Sans', sans-serif;
font-size: 20px;
width: 100%;
background-color: #FFA1A1;
border: none;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment