consolidate pagination bar for async lists (bookmarks, snippets, search results)

Author: 4drianMatei

frontend/src/app/app.component.html

@@ -45,14 +45,14 @@
         >
           <i class="fas fa-cog mr-1"></i> Settings
         </a>
-        <a
-          class="list-group-item list-group-item-action bg-light"
-          title="History"
-          [routerLink]="['/history']"
-        >
-          <i class="fas fa-history mr-1"></i> History bookmarks:
-        </a>
         <div *ngIf="(latestVisitedBookmarks$ | async) as latestVisitedBookmarks" class="mt-1" (mouseout)="resetHoveringLastVisited()">
+          <a
+            class="list-group-item list-group-item-action bg-light"
+            title="Ctrl+H for quick access"
+            [routerLink]="['/history']"
+          >
+            <i class="fas fa-history mr-1"></i> History bookmarks
+          </a>
           <ng-container *ngFor="let bookmark of latestVisitedBookmarks; let i = index" class="mt-1">
               <span class="mt-1 mr-2 on-top">
                   <a
@@ -76,7 +76,7 @@
         </div>
 
         <ng-container *ngIf="(latestSearches$ | async) as latestSearches">
-          <span class="list-group-item list-group-item-action bg-light"><i class="fa fa-search mr-1"></i> Latest searches:</span>
+          <span class="list-group-item list-group-item-action bg-light"><i class="fa fa-search mr-1"></i> Latest searches</span>
           <div class="mt-1" (mouseout)="resetHoveringLastSearches()">
             <ng-container *ngFor="let mySearch of latestSearches; let i = index" class="mt-1">
               <span class="mt-1 mr-2 on-top">

frontend/src/app/public/bookmarks/homepage.component.html

@@ -9,7 +9,8 @@
         <div class="alert alert-info mt-2">
           <button type="button" class="btn btn-primary btn-sm mr-2" (click)="login('feed')"><i
             class="fas fa-unlock"></i> Login / Register
-          </button> to <strong>Codever</strong>
+          </button>
+          to <strong>Codever</strong>
           to see posts from your favorite topics in your feed
         </div>
       </div>
@@ -99,18 +100,13 @@
         to access this functionality.
       </div>
       <ng-template #isLoggedInLastVisited>
-        <div *ngIf="(history$ | async)?.length === 0 && currentPageHistory === 1; else historyQuickAccess"
+        <div *ngIf="(history$ | async)?.length === 0 && currentPageHistory === 1"
              class="tabs-headline-message mt-2 alert alert-info">
           <p>
             In <strong>History</strong> you have a list of your last visited, created or updated bookmarks. Quick access
             with <strong>Ctrl + H</strong>
           </p>
         </div>
-        <ng-template #historyQuickAccess>
-          <div class="mt-2 lead alert alert-info">
-            <strong>Ctrl + H</strong> hot key for quick access
-          </div>
-        </ng-template>
         <app-async-bookmark-list
           [bookmarks$]="history$"
           [userData$]="userData$"
@@ -137,17 +133,12 @@
           to access this functionality.
         </div>
         <ng-template #isLoggedInToPin>
-          <div *ngIf="(pinned$ | async)?.length === 0 && currentPagePinned === 1; else pinnedQuickAccess"
+          <div *ngIf="(pinned$ | async)?.length === 0 && currentPagePinned === 1"
                class="tabs-headline-message mt-2 alert alert-info">
             Got some bookmarks you will use a lot today? Just pin it <i
             class="fas fa-thumbtack"></i>
             and it will appear in the <strong>Pinned</strong> list. Quick access with <strong>Ctrl + P</strong>
           </div>
-          <ng-template #pinnedQuickAccess>
-            <div class="mt-2 lead alert alert-info">
-              <strong>Ctrl + P</strong> hot key for quick access
-            </div>
-          </ng-template>
           <app-async-bookmark-list
             [bookmarks$]="pinned$"
             [userData$]="userData$"

frontend/src/app/shared/async-bookmark-list/async-bookmark-list.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="(bookmarks$ | async) as bookmarks" class="mt-3">
   <div *ngIf="showFilterBox" class="form-group has-search float-right filter-box">
     <span class="fas fa-filter form-control-feedback"></span>
-    <input type="search" [(ngModel)]="filterText" class="form-control" placeholder="Filter...">
+    <input autofocus type="search" [(ngModel)]="filterText" class="form-control" placeholder="Filter...">
   </div>
   <div class="clear"></div>
   <div class="mt-3" *ngFor="let bookmark of bookmarks | bookmarkFilter: filterText">

frontend/src/app/shared/async-bookmark-list/async-bookmark-list.component.scss

@@ -1,49 +1,4 @@
 
-.title-content-separator {
-  margin: 0 0 0.5rem 0;
-}
-
-.header-wrapper {
-  display: flex;
-  justify-content: space-between;
-
-  .clock-wrapper {
-    font-size: 1.4rem;
-    margin-left: 1rem;
-    cursor: pointer;
-  }
-
-  .pinned {
-    color: red;
-  }
-}
-
-.share-action {
-  cursor: pointer;
-  margin-top: 0.3rem;
-}
-
-.external-link-hint {
-  font-size: 0.6rem;
-  margin-left: 0.2rem;
-}
-
-.youtube-icon {
-  color:red;
-  margin-right: 0.5rem;
-  cursor: pointer;
-}
-
-.stackoverflow-icon {
-  margin-right: 0.5rem;
-}
-
-.isDisabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  pointer-events: none;
-}
-
 .filter-box {
   width: 30%;
   margin-bottom: -0.5rem;

frontend/src/app/shared/async-bookmark-list/async-bookmark-list.component.ts

@@ -25,7 +25,7 @@ import { TagFollowingBaseComponent } from '../tag-following-base-component/tag-f
   templateUrl: './async-bookmark-list.component.html',
   styleUrls: ['./async-bookmark-list.component.scss']
 })
-export class AsyncBookmarkListComponent extends TagFollowingBaseComponent implements OnInit, OnChanges {
+export class AsyncBookmarkListComponent extends TagFollowingBaseComponent implements OnInit {
 
   verifyForWatchedTag: Observable<string>; // used to avoid looking in watchedTags for other tags in the html template
 
@@ -71,13 +71,4 @@ export class AsyncBookmarkListComponent extends TagFollowingBaseComponent implem
 
   ngOnInit(): void {
   }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    const page = this.route.snapshot.queryParamMap.get('page');
-    if (page) {
-      this.currentPage = parseInt(page, 0);
-    } else {
-      this.currentPage = 1;
-    }
-  }
 }

frontend/src/app/shared/async-search-result-list/async-search-result-list.component.scss

@@ -1,49 +1,3 @@
-
-.title-content-separator {
-  margin: 0 0 0.5rem 0;
-}
-
-.header-wrapper {
-  display: flex;
-  justify-content: space-between;
-
-  .clock-wrapper {
-    font-size: 1.4rem;
-    margin-left: 1rem;
-    cursor: pointer;
-  }
-
-  .pinned {
-    color: red;
-  }
-}
-
-.share-action {
-  cursor: pointer;
-  margin-top: 0.3rem;
-}
-
-.external-link-hint {
-  font-size: 0.6rem;
-  margin-left: 0.2rem;
-}
-
-.youtube-icon {
-  color:red;
-  margin-right: 0.5rem;
-  cursor: pointer;
-}
-
-.stackoverflow-icon {
-  margin-right: 0.5rem;
-}
-
-.isDisabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  pointer-events: none;
-}
-
 .filter-box {
   width: 30%;
   margin-bottom: -0.5rem;

frontend/src/app/shared/async-search-result-list/async-search-result-list.component.ts

@@ -13,7 +13,7 @@ import { Snippet } from '../../core/model/snippet';
   templateUrl: './async-search-result-list.component.html',
   styleUrls: ['./async-search-result-list.component.scss']
 })
-export class AsyncSearchResultListComponent extends TagFollowingBaseComponent implements OnInit, OnChanges {
+export class AsyncSearchResultListComponent extends TagFollowingBaseComponent implements OnInit {
 
   verifyForWatchedTag: Observable<string>; // used to avoid looking in watchedTags for other tags in the html template
 
@@ -58,15 +58,6 @@ export class AsyncSearchResultListComponent extends TagFollowingBaseComponent im
   ngOnInit(): void {
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    const page = this.route.snapshot.queryParamMap.get('page');
-    if (page) {
-      this.currentPage = parseInt(page, 0);
-    } else {
-      this.currentPage = 1;
-    }
-  }
-
 
   isBookmark(searchResult: Bookmark | Snippet) {
     return 'location' in searchResult;

frontend/src/app/shared/async-snippet-list/async-snippet-list.component.scss

@@ -1,50 +0,0 @@
-
-.title-content-separator {
-  margin: 0 0 0.5rem 0;
-}
-
-.header-wrapper {
-  display: flex;
-  justify-content: space-between;
-
-  .clock-wrapper {
-    font-size: 1.4rem;
-    margin-left: 1rem;
-    cursor: pointer;
-  }
-
-  .pinned {
-    color: red;
-  }
-}
-
-.share-action {
-  cursor: pointer;
-  margin-top: 0.3rem;
-}
-
-.external-link-hint {
-  font-size: 0.6rem;
-  margin-left: 0.2rem;
-}
-
-.youtube-icon {
-  color:red;
-  margin-right: 0.5rem;
-  cursor: pointer;
-}
-
-.stackoverflow-icon {
-  margin-right: 0.5rem;
-}
-
-.isDisabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.filter-box {
-  width: 30%;
-  margin-bottom: -0.5rem;
-}

frontend/src/app/shared/async-snippet-list/async-snippet-list.component.ts

@@ -9,7 +9,7 @@ import { Bookmark } from '../../core/model/bookmark';
   templateUrl: './async-snippet-list.component.html',
   styleUrls: ['./async-snippet-list.component.scss']
 })
-export class AsyncSnippetListComponent implements OnInit, OnChanges {
+export class AsyncSnippetListComponent implements OnInit {
 
   @Input()
   snippets$: Observable<Snippet[]>;
@@ -32,15 +32,6 @@ export class AsyncSnippetListComponent implements OnInit, OnChanges {
 
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    const page = this.route.snapshot.queryParamMap.get('page');
-    if (page) {
-      this.currentPage = parseInt(page, 0);
-    } else {
-      this.currentPage = 1;
-    }
-  }
-
   of(searchResult: Snippet | Bookmark) {
     return of(searchResult);
   }

frontend/src/app/shared/page-navigation-bar/page-navigation-bar.component.scss

@@ -1,45 +1,5 @@
-.add-new-bookmark {
-  margin-top: 0.3rem;
+.isDisabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  pointer-events: none;
 }
-
-.navbar-brand {
-  line-height:12px;
-  padding-top:10px;
-
-  font-size: 25px;
-}
-
-.navbar-brand small {
-  font-size:11px;
-}
-
-.app-brand {
-  display: flex;
-  padding-right: 15px;
-  align-items: center;
-
-  .app-brand-text {
-    margin-left: 0.5rem;
-  }
-}
-.logo-text {
-  font-size: smaller;
-  margin-bottom: 10px;
-}
-
-.logo-image {
-  margin-top: -10px;
-  margin-bottom: -5px;
-}
-
-.large-displays {
-  display: none;
-}
-
-@media (min-width: 1400px) {
-  .large-displays {
-    display: block ;
-  }
-}
-
-