commit b689646aa0f5ec322fac1cc0628b0b22c7c97675
parent 134c5bae16baaadddff9b26f4d84ef4cd58f4f54
Author: MTRNord <mtrnord1@gmail.com>
Date: Wed, 14 Mar 2018 18:07:46 +0100
Start reworking the Design (Lots to do)
Diffstat:
11 files changed, 275 insertions(+), 117 deletions(-)
diff --git a/src/app/api.service.ts b/src/app/api.service.ts
@@ -11,6 +11,7 @@ export interface TweetsEntity {
user_id: string;
display_name: string;
userprofile_link: string;
+ tweet_link?: string;
text: string;
image_urls?: (string)[];
created_at: string;
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1 +1,14 @@
-<router-outlet></router-outlet>
+<header>
+ <a href="#" class="header__icon" id="header__icon"></a>
+ <a href="#" class="header__logo">Social Networks News</a>
+
+ <nav class="menu">
+ <a routerLink="" [routerLinkActive]="checkCurrent()">Home</a>
+ <a routerLink="/features" [routerLinkActive]="checkCurrent('/features')">Features</a>
+ <a routerLink="/papers" [routerLinkActive]="checkCurrent('/papers')">Papers</a>
+ </nav>
+
+</header>
+<div class="main-container">
+ <router-outlet></router-outlet>
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,5 @@
-import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {Component} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
@Component({
selector: 'app-root',
@@ -6,5 +7,17 @@ import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
+ currentUrl: string;
+ constructor(router: Router) {
+ router.events.subscribe((value) => {
+ if (value instanceof NavigationEnd ) {
+ this.currentUrl = value.url;
+ }
+ });
+ }
+
+ checkCurrent(path = '/'): string {
+ return (this.currentUrl === path) ? null : 'active';
+ }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MDBBootstrapModule } from 'angular-bootstrap-md';
+// import { MDBBootstrapModule } from 'angular-bootstrap-md';
import {GalleryConfig, GalleryModule} from 'ng-gallery';
import { AvatarModule } from 'ngx-avatar';
@@ -59,7 +59,7 @@ export const config: GalleryConfig = {
],
imports: [
BrowserModule.withServerTransition({appId: 'snn-app'}),
- MDBBootstrapModule.forRoot(),
+ // MDBBootstrapModule.forRoot(),
AppRoutingModule,
BrowserAnimationsModule,
GalleryModule.forRoot(config),
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
@@ -1,24 +1,4 @@
-<header>
- <mdb-navbar *ngIf="isBrowser" SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" [containerInside]="false">
- <logo>
- <a class="logo navbar-brand" href="#"><strong>Social Networks News</strong></a>
- </logo>
- <links>
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active waves-light" mdbRippleRadius>
- <a class="nav-link" routerLink="" routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item waves-light" mdbRippleRadius>
- <a class="nav-link">Features</a>
- </li>
- <li class="nav-item waves-light" mdbRippleRadius>
- <a class="nav-link" routerLink="/papers" routerLinkActive="active">Papers</a>
- </li>
- </ul>
- </links>
- </mdb-navbar>
- <!-- Main -->
- <div class="view intro hm-purple-light" style="">
+<!-- <div class="view intro hm-purple-light" style="">
<div class="full-bg-img flex-center">
<div class="container text-center white-text wow fadeInUp">
<h2>Social Networks News is a FOSS App to generate a Newspaper of your needs</h2>
@@ -30,9 +10,7 @@
</div>
</div>
</div>
- <!-- /.Main -->
-</header>
-<!--Main Navigation-->
+-->
<!--Main Layout-->
<main class="text-center py-5">
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -1,56 +1,22 @@
-<header>
- <mdb-navbar *ngIf="isBrowser" SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" [containerInside]="false">
- <logo>
- <a class="logo navbar-brand" href="#"><strong>Social Networks News</strong></a>
- </logo>
- <links>
- <ul class="navbar-nav mr-auto">
- <li class="nav-item waves-light" mdbRippleRadius>
- <a class="nav-link" routerLink="">Home</a>
- </li>
- <li class="nav-item waves-light" mdbRippleRadius>
- <a class="nav-link">Features</a>
- </li>
- <li class="nav-item active waves-light" mdbRippleRadius>
- <a class="nav-link" routerLink="/papers" routerLinkActive="active">Papers <span class="sr-only">(current)</span></a>
- </li>
- </ul>
- </links>
- </mdb-navbar>
- <!-- Main -->
- <div class="view intro hm-orange-light">
- <div class="full-bg-img flex-center">
- <div class="container text-center white-text wow fadeInUp">
- <h2>{{data.name}}</h2>
- <br>
- <h5>{{data.description}}</h5>
- </div>
+<!--<div class="view intro hm-orange-light">
+ <div class="full-bg-img flex-center">
+ <div class="container text-center white-text wow fadeInUp">
+ <h2>{{data.name}}</h2>
+ <br>
+ <h5>{{data.description}}</h5>
</div>
</div>
- <!-- /.Main -->
-</header>
-<!--Main Navigation-->
+</div>-->
<!--Main Layout-->
<main class="text-center py-5">
<section class="mb-5 mr-5 ml-5">
- <mdb-navbar *ngIf="isBrowser" SideClass="navbar navbar-expand-lg navbar-light blue-grey lighten-5" [containerInside]="false">
- <links class="middle">
- <!-- TODO use *ngFor -->
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active waves-light" mdbRippleRadius>
- <a class="nav-link" routerLinkActive="active">Titelthemen <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item waves-light" mdbRippleRadius>
- <a class="nav-link">Fotos</a>
- </li>
- <li class="nav-item waves-light" mdbRippleRadius>
- <a class="nav-link">Videos</a>
- </li>
- </ul>
- </links>
- </mdb-navbar>
+ <nav class="menu">
+ <a routerLinkActive="active">Titelthemen</a>
+ <a>Fotos</a>
+ <a>Videos</a>
+ </nav>
</section>
<div class="container-fluid" *ngIf="isBrowser" gallerize>
diff --git a/src/app/papers/papers.component.html b/src/app/papers/papers.component.html
@@ -1,35 +1,14 @@
-<header>
- <mdb-navbar *ngIf="isBrowser" SideClass="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" [containerInside]="false">
- <logo>
- <a class="logo navbar-brand" href="#"><strong>Social Networks News</strong></a>
- </logo>
- <links>
- <ul class="navbar-nav mr-auto">
- <li class="nav-item waves-light" mdbRippleRadius>
- <a class="nav-link" routerLink="">Home</a>
- </li>
- <li class="nav-item waves-light" mdbRippleRadius>
- <a class="nav-link">Features</a>
- </li>
- <li class="nav-item active waves-light" mdbRippleRadius>
- <a class="nav-link" routerLink="/papers" routerLinkActive="active">Papers <span class="sr-only">(current)</span></a>
- </li>
- </ul>
- </links>
- </mdb-navbar>
- <!-- Main -->
- <div class="view intro hm-orange-light" style="">
- <div class="full-bg-img flex-center">
- <div class="container text-center white-text wow fadeInUp">
- <h2>{{pageTitle}}</h2>
- <br>
- <h5>{{pageSubtitle}}</h5>
- </div>
+<!--
+<div class="view intro hm-orange-light" style="">
+ <div class="full-bg-img flex-center">
+ <div class="container text-center white-text wow fadeInUp">
+ <h2>{{pageTitle}}</h2>
+ <br>
+ <h5>{{pageSubtitle}}</h5>
</div>
</div>
- <!-- /.Main -->
-</header>
-<!--Main Navigation-->
+</div>
+-->
<!--Main Layout-->
<main class="text-center py-5">
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,6 +1,22 @@
-<div class="row mb-5" *ngFor="let rows of data">
- <div class="card-deck col-md-4" *ngFor="let item of rows">
- <div class="card card-cascade">
+<div class="rowGrid">
+ <div [class]="'item-' + String(rows.length)" *ngFor="let item of data">
+ <a href="{{item.tweet_link}}" class="card">
+ <!--Retweet Badge-->
+ <div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true" style="max-width: 22rem">
+ <i class="fa fa-retweet"></i>
+ </div>
+ <div *ngIf="item.image_urls && item.image_urls[0]" class="thumb" [style.background-image]="'url('+ item.image_urls[0] +')'"></div>
+ <article>
+ <h1>{{item.display_name}}</h1>
+ <p *ngIf="item.text">{{item.text}}</p>
+ <ul>
+ <li><i class="fa fa-clock-o"> </i>{{item.created_at.toLocaleString()}}</li>
+ <li><i class="fa fa-heart"> </i>{{item.favorites.toLocaleString()}}</li>
+ <li><i class="fa fa-retweet"> </i>{{item.retweets.toLocaleString()}}</li>
+ </ul>
+ </article>
+ </a>
+ <div class="card">
<!--Retweet Badge-->
<div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true" style="max-width: 22rem">
<i class="fa fa-retweet"></i>
diff --git a/src/app/tweet-list/tweet-list.component.scss b/src/app/tweet-list/tweet-list.component.scss
@@ -0,0 +1,88 @@
+.grid {
+ display: grid;
+ width: 100%;
+ grid-template-columns: auto;
+ grid-gap: 20px;
+ @media (min-width: 30em) {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ @media (min-width: 60em) {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+.card {
+ background: white;
+ text-decoration: none;
+ color: #444;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+
+ // sets up hover state
+ position: relative;
+ top: 0;
+ transition: all .1s ease-in;
+
+ &:hover {
+ top: -2px;
+ box-shadow: 0 4px 5px rgba(0,0,0,0.2);
+ }
+
+ article {
+ padding: 20px;
+ flex: 1;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ h1 {
+ font-size: 20px;
+ margin: 0;
+ color: #333;
+ }
+
+ p {
+ flex: 1;
+ line-height: 1.4;
+ }
+
+ span {
+ font-size: 12px;
+ font-weight: bold;
+ color: #999;
+ text-transform: uppercase;
+ letter-spacing: .05em;
+ margin: 2em 0 0 0;
+ }
+
+ ul {
+ padding: 10px;
+ text-align: center;
+ margin-bottom: 0;
+ font-size: .9rem;
+ li {
+ display: inline;
+ }
+ }
+
+ .thumb {
+ padding-bottom: 60%;
+ background-size: cover;
+ background-position: center center;
+ }
+}
+
+/*.item-1 {
+ @media (min-width: 60em) {
+ grid-column: 1 / span 2;
+
+ h1 {
+ font-size: 24px;
+ }
+ }
+}*/
diff --git a/src/app/tweet-list/tweet-list.component.ts b/src/app/tweet-list/tweet-list.component.ts
@@ -19,7 +19,7 @@ import {ToastrService} from 'ngx-toastr';
})
export class TweetListComponent implements OnInit {
@Input() uuid;
- data: (TweetsEntity)[][];
+ data: (TweetsEntity)[];
constructor(private apiService: ApiService, private toastr: ToastrService) {
Raven.captureBreadcrumb({
@@ -53,7 +53,7 @@ export class TweetListComponent implements OnInit {
.concat(Observable.throw({error: 'Sorry, there was an error (after 5 retries). This probably means we can\'t reach our API Server :('}));
})
.subscribe(
- data => { this.data = this.chunk(data.tweets, 3); },
+ data => { this.data = data.tweets; },
err => {
this.toastr.error(err['error'], 'Error connecting API', {
positionClass: 'toast-top-center',
@@ -65,12 +65,4 @@ export class TweetListComponent implements OnInit {
);
}
- private chunk(arr: (TweetsEntity)[], size: number): (TweetsEntity)[][] {
- const newArr = [];
- for (let i = 0; i < arr.length; i += size) {
- newArr.push(arr.slice(i, i + size));
- }
- return newArr;
- }
-
}
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,6 +1,117 @@
/* You can add global styles to this file, and also import other style files */
html { overflow:auto; }
+/* VARIABLES */
+$header-bg: #f9a825;
+$menu-width: 250px!default;
+
+.container {
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.main-container {
+ padding-top: 66px;
+}
+
+@media (min-width: 992px) {
+ .container {
+ width: 970px;
+ }
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+/* HEADER */
+header {
+ position: fixed;
+ left: 0;
+ right: 0;
+ height: 66px;
+
+ line-height: 66px;
+ color: #fff;
+
+ background-color: $header-bg;
+}
+
+.header__logo {
+ font-weight: 700;
+ padding: 0 25px;
+ float: left;
+}
+
+/* MENU */
+.menu {
+ float: left;
+
+ a {
+ padding: 0 10px;
+ }
+
+ a:hover {
+ color: #c5cae9;
+ }
+}
+
+/* RESPONSIVE */
+@media only screen and (max-width: 768px) {
+ header {
+ position: static;
+ }
+
+ .header__icon {
+ position: relative;
+ display: block;
+ float: left;
+ width: 50px;
+ height: 66px;
+
+ cursor: pointer;
+
+ &:after {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 1rem;
+ height: 0;
+ top: 16px;
+ left: 15px;
+ }
+ }
+
+ .menu {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ background-color: darken($header-bg, 5);
+ /* overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;*/
+
+ width: $menu-width;
+
+ transform: translateX($menu-width * -1);
+ a {
+ display: block;
+ height: 40px;
+
+ text-align: center;
+ line-height: 40px;
+
+ border-bottom: 1px solid $header-bg;
+ }
+ }
+}
+
+
+// OLD CSS
+/*
.nav-link {
border-radius: 5px;
}
@@ -103,6 +214,7 @@ html { overflow:auto; }
-webkit-tap-highlight-color: transparent;
z-index: 1;
}
+*/
/* The ribbons by https://codepen.io/eode9/pen/twkKm*/
