do not reload on back to items link, colorize by item type

rolandtoth · Nov 19, 2019 · 2243d16 · 2243d16
1 parent 8524e6f
commit 2243d16
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/ng/src/app/item-list/item-list.component.html b/ng/src/app/item-list/item-list.component.html
@@ -1,5 +1,4 @@
-<div *ngFor="let item of visibleItems; let i = index" class="item">
-
+<div *ngFor="let item of visibleItems; let i = index" class="item" [attr.item-type]="item.template">
   <a class="item__thumblink img-hover-effect" [routerLink]="['/' + (item.template | itemType:true), item.name]">
     <app-picture *ngIf="item.featured_image as img" [img]="img.variants.md" [alt]="img.description" [lazyLoad]="i > 5 ? 'lazy' : 'eager'"></app-picture>
   </a>

diff --git a/ng/src/app/item/item.component.html b/ng/src/app/item/item.component.html
@@ -1,5 +1,5 @@
 <div class="container clearfix">
-  <a href="" routerlink="/" class="back">
+  <a [routerLink]="['/']" class="back">
     <svg-icon [name]="'chevron-left'"></svg-icon>
   </a>
 

diff --git a/ng/src/app/item/item.component.ts b/ng/src/app/item/item.component.ts
@@ -42,7 +42,7 @@ export class ItemComponent implements OnInit, AfterViewInit {
           '../assets/scripts/baguetteBox/baguetteBox.min.js',
           () => {
             baguetteBox.run('.lightbox', {
-              animation: 'fadeIn',
+              // animation: 'fadeIn',
               async: true,
               fullScreen: false,
               noScrollbars: false

diff --git a/ng/src/app/masthead/masthead.component.html b/ng/src/app/masthead/masthead.component.html
@@ -11,7 +11,8 @@ <h2>
     </div>
     <div class="navs">
       <nav class="filters">
-        <span class="type-filter" *ngFor="let navItem of nav" [class.active]="currentFilter === navItem.type" (click)="setFilterBy(navItem.type)">{{ navItem.name }}</span>
+        <span class="type-filter" *ngFor="let navItem of nav" [class.active]="currentFilter === navItem.type" [attr.filter-type]="navItem.type"
+          (click)="setFilterBy(navItem.type)">{{ navItem.name }}</span>
       </nav>
       <nav class="contacts">
         <a [routerLink]="['oneletrajz']" (click)="resetFilters()" routerLinkActive="active" class="biography" title="Önéletrajz">

diff --git a/ng/src/app/services/api.service.ts b/ng/src/app/services/api.service.ts
@@ -46,7 +46,6 @@ export class ApiService {
   }
 
   saveContact(formData: Contact): Observable<Contact> {
-    console.log(formData)
     return this.http
       .post<Contact>('/pw/api/contact', formData, this.httpOptions)
       .pipe(catchError(this.handleError<Contact>('saveContact', null)))

diff --git a/ng/src/scss/styles.scss b/ng/src/scss/styles.scss
@@ -3,6 +3,8 @@ $base: #333;
 $lightbase: lighten($base, 25%);
 $plum: #CF2543;
 $images: "/assets/images";
+$colorCritic: #693790;
+$colorInterview: #008a7c;
 
 // breakpoints
 $_mobile: 480;
@@ -315,6 +317,14 @@ a.img-hover-effect {
     position: relative;
     z-index: 4;
 
+    [item-type="critic"] & {
+      @include highlightLines($size: $size, $color: $colorCritic);
+    }
+
+    [item-type="interview"] & {
+      @include highlightLines($size: $size, $color: $colorInterview);
+    }
+
     a {
       text-decoration: none;
       color: white;
@@ -660,8 +670,16 @@ h3 {
     }
 
     &.active {
-      color: $plum !important;
+      color: $plum;
     }
+
+    // &[filter-type="critic"].active {
+    //   color: $colorCritic;
+    // }
+
+    // &[filter-type="interview"].active {
+    //   color: $colorInterview;
+    // }
   }
 
   a {
@@ -1011,4 +1029,4 @@ form {
   overflow-x: hidden;
   border: none;
   background: #eee;
-}
+}