turbotraktor
/
ladylilia.com
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Tweak styling of Angular apps and add comment linkification

Browse Source
master
Nikola Forró 6 years ago
parent 73c006a188
commit cbbb3f503d
15 changed files with 194 additions and 47 deletions
Show Stats Download Patch File Download Diff File

5
apps/gifted-subs/src/app/giftedsubs/giftedsubs.component.css
Unescape View File

@ -18,6 +18,11 @@
font-size: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
}
.mat-cell:last-child {
padding-right: 0;
}
.spinner-container {

5
apps/quotes/src/app/quotes/quotes.component.css
Unescape View File

@ -18,6 +18,11 @@
font-size: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
}
.mat-cell:last-child {
padding-right: 0;
}
.spinner-container {

5
apps/regular-subs/src/app/regularsubs/regularsubs.component.css
Unescape View File

@ -18,6 +18,11 @@
font-size: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
}
.mat-cell:last-child {
padding-right: 0;
}
.spinner-container {

9
apps/schedule/src/app/schedule/schedule.component.css
Unescape View File

@ -1,3 +1,7 @@
.timezone-picker {
width: 100%;
}
.schedule {
text-align: center;
}
@ -26,6 +30,11 @@
font-size: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
}
.mat-cell:last-child {
padding-right: 0;
}
.mat-cell img {

4
apps/schedule/src/app/schedule/schedule.component.html
Unescape View File

@ -2,7 +2,7 @@
<mat-toolbar>
<timezone-picker (timeZoneChange)="changeTimeZone($event)"></timezone-picker>
<timezone-picker class="timezone-picker" (timeZoneChange)="changeTimeZone($event)"></timezone-picker>
</mat-toolbar>
@ -44,7 +44,7 @@
<mat-cell fxFlex="20%" *matCellDef="let event">
<a mat-button href="https://www.twitch.tv/events/{{event.id}}" target="_blank">
<a href="https://www.twitch.tv/events/{{event.id}}" target="_blank">
{{event.title}}

129
apps/twitch-logs/package-lock.json generated
Unescape View File

@ -648,7 +648,6 @@
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
"dev": true,
"optional": true
},
"asn1": {
@ -2613,6 +2612,15 @@
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
"dev": true
},
"encoding": {
"version": "0.1.12",
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
"integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
"optional": true,
"requires": {
"iconv-lite": "~0.4.13"
}
},
"end-of-stream": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@ -3232,6 +3240,29 @@
"websocket-driver": ">=0.5.1"
}
},
"fbjs": {
"version": "0.8.17",
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
"integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
"optional": true,
"requires": {
"core-js": "^1.0.0",
"isomorphic-fetch": "^2.1.1",
"loose-envify": "^1.0.0",
"object-assign": "^4.1.0",
"promise": "^7.1.1",
"setimmediate": "^1.0.5",
"ua-parser-js": "^0.7.18"
},
"dependencies": {
"core-js": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
"optional": true
}
}
},
"file-loader": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
@ -4744,8 +4775,7 @@
"iconv-lite": {
"version": "0.4.19",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
"integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
"dev": true
"integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
},
"ieee754": {
"version": "1.1.11",
@ -5123,8 +5153,7 @@
"is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
"dev": true
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
},
"is-symbol": {
"version": "1.0.1",
@ -5179,6 +5208,16 @@
"isarray": "1.0.0"
}
},
"isomorphic-fetch": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
"integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
"optional": true,
"requires": {
"node-fetch": "^1.0.1",
"whatwg-fetch": ">=0.10.0"
}
},
"isstream": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@ -5371,6 +5410,12 @@
"integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
"dev": true
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
"optional": true
},
"js-base64": {
"version": "2.4.5",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.5.tgz",
@ -5379,8 +5424,7 @@
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
"dev": true
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
},
"js-yaml": {
"version": "3.12.0",
@ -5695,6 +5739,16 @@
"ejs": "^2.5.7"
}
},
"linkifyjs": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.6.tgz",
"integrity": "sha512-nA94bEM9rmt7Iu4OEIYSKpW+Dy6fhlBTjk2Bg9bFuxHQYcy+lWq2EleHb0rp/ev8oBO82vLHZctM5YlSR5DTzw==",
"requires": {
"jquery": "^3.3.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
},
"load-json-file": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@ -5940,7 +5994,6 @@
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
"integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
"dev": true,
"requires": {
"js-tokens": "^3.0.0"
}
@ -6404,6 +6457,16 @@
"lower-case": "^1.1.1"
}
},
"node-fetch": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
"integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
"optional": true,
"requires": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
}
},
"node-forge": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@ -7444,7 +7507,6 @@
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dev": true,
"optional": true,
"requires": {
"asap": "~2.0.3"
@ -7466,6 +7528,16 @@
"with-callback": "^1.0.2"
}
},
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"optional": true,
"requires": {
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
},
"protractor": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/protractor/-/protractor-5.1.2.tgz",
@ -7802,6 +7874,30 @@
"integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
"dev": true
},
"react": {
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/react/-/react-16.4.2.tgz",
"integrity": "sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==",
"optional": true,
"requires": {
"fbjs": "^0.8.16",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.0"
}
},
"react-dom": {
"version": "16.4.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.4.2.tgz",
"integrity": "sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw==",
"optional": true,
"requires": {
"fbjs": "^0.8.16",
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.0"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -8488,8 +8584,7 @@
"setimmediate": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
"dev": true
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
},
"setprototypeof": {
"version": "1.1.0",
@ -9664,6 +9759,12 @@
"integrity": "sha512-ptLSQs2S4QuS6/OD1eAKG+S5G8QQtrU5RT32JULdZQtM1L3WTi34Wsu48Yndzi8xsObRAB9RPt/KhA9wlpEF6w==",
"dev": true
},
"ua-parser-js": {
"version": "0.7.18",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
"integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==",
"optional": true
},
"uglify-js": {
"version": "3.3.28",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.28.tgz",
@ -11316,6 +11417,12 @@
"integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
"dev": true
},
"whatwg-fetch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==",
"optional": true
},
"when": {
"version": "3.6.4",
"resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",

1
apps/twitch-logs/package.json
Unescape View File

@ -26,6 +26,7 @@
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"linkifyjs": "^2.1.6",
"node-sass": "^4.9.0",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"

5
apps/twitch-logs/src/app/comments/comments.component.css
Unescape View File

@ -34,6 +34,11 @@
font-size: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
}
.mat-cell:last-child {
padding-right: 0;
}
.spinner-container {

4
apps/twitch-logs/src/app/comments/comments.component.html
Unescape View File

@ -29,7 +29,7 @@
<mat-cell fxFlex="15%" *matCellDef="let comment">
<a mat-button href="https://www.twitch.tv/videos/{{videoID}}?comment={{comment.id}}&t={{comment.offset | tohms}}" target="_blank">
<a href="https://www.twitch.tv/videos/{{videoID}}?comment={{comment.id}}&t={{comment.offset | tohms}}" target="_blank">
{{comment.offset | totime : comment.video_recorded_at | tohms : 'colons'}}
@ -75,7 +75,7 @@
<img src="{{token.url}}" alt="{{token.title}}" *ngIf="token.hasOwnProperty('url')">
<span *ngIf="!token.hasOwnProperty('url')">{{token}}</span>
<span *ngIf="!token.hasOwnProperty('url')" [innerHtml]="token"></span>
</ng-template>

5
apps/twitch-logs/src/app/pipes/splitmessage.pipe.ts
Unescape View File

@ -3,6 +3,8 @@ import {
PipeTransform
} from '@angular/core';
import * as linkifyString from 'linkifyjs/string';
@Pipe({
name: 'splitmessage'
@ -20,12 +22,13 @@ export class SplitMessagePipe implements PipeTransform {
let regexp = RegExp('(' + exps.join('|') + ')');
// FIXME: do not split URLs
let tokens = message.split(regexp);
return tokens.map((token: any) => {
let e = emotes.filter((emote: any) => emote.title == token);
return e.length > 0 ? e[0] : token;
return e.length > 0 ? e[0] : linkifyString(token);
});
}
}

13
apps/twitch-logs/src/app/search/search.component.css
Unescape View File

@ -6,12 +6,8 @@
text-align: left;
}
.mat-column-video_title {
white-space: nowrap;
}
.mat-column-video_title img, .mat-column-video_title a {
vertical-align: middle;
.mat-column-video_title img {
margin-top: 0.5em;
}
.mat-column-commenter_display_name {
@ -46,6 +42,11 @@
font-size: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
}
.mat-cell:last-child {
padding-right: 0;
}
.spinner-container {

21
apps/twitch-logs/src/app/search/search.component.html
Unescape View File

@ -33,27 +33,29 @@
<ng-container matColumnDef="video_title">
<mat-header-cell fxFlex="20%" *matHeaderCellDef mat-sort-header>Video</mat-header-cell>
<mat-header-cell fxFlex="18%" *matHeaderCellDef mat-sort-header>Video</mat-header-cell>
<mat-cell fxFlex="20%" *matCellDef="let result">
<img src="{{result.video_thumbnail_small}}" alt="{{result.video_title}}">
<mat-cell fxFlex="18%" *matCellDef="let result">
<a mat-button [routerLink]="['/videos', result.video_id]">
<a [routerLink]="['/videos', result.video_id]">
{{result.video_title}}
</a>
<br>
<img src="{{result.video_thumbnail_small}}" alt="{{result.video_title}}">
</mat-cell>
</ng-container>
<ng-container matColumnDef="video_recorded_at">
<mat-header-cell fxFlex="8%" *matHeaderCellDef mat-sort-header>Recorded</mat-header-cell>
<mat-header-cell fxFlex="10%" *matHeaderCellDef mat-sort-header>Recorded</mat-header-cell>
<mat-cell fxFlex="8%" *matCellDef="let result">{{result.video_recorded_at | date : 'yyyy-MM-dd'}}</mat-cell>
<mat-cell fxFlex="10%" *matCellDef="let result">{{result.video_recorded_at | date : 'yyyy-MM-dd'}}</mat-cell>
</ng-container>
@ -63,7 +65,8 @@
<mat-cell fxFlex="8%" *matCellDef="let result">
<a mat-button href="https://www.twitch.tv/videos/{{result.video_id}}?comment={{result.id}}&t={{result.offset | tohms}}" target="_blank">
<a href="https://www.twitch.tv/videos/{{result.video_id}}?comment={{result.id}}&t={{result.offset | tohms}}"
target="_blank">
{{result.offset | totime : result.video_recorded_at | tohms : 'colons'}}
@ -109,7 +112,7 @@
<img src="{{token.url}}" alt="{{token.title}}" *ngIf="token.hasOwnProperty('url')">
<span *ngIf="!token.hasOwnProperty('url')">{{token}}</span>
<span *ngIf="!token.hasOwnProperty('url')" [innerHtml]="token"></span>
</ng-template>

4
apps/twitch-logs/src/app/search/search.component.ts
Unescape View File

@ -85,7 +85,7 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
fromEvent(this.input1.nativeElement, 'keyup')
.pipe(
debounceTime(300),
debounceTime(600),
distinctUntilChanged(),
tap(() => {
this.paginator.pageIndex = 0;
@ -96,7 +96,7 @@ export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
fromEvent(this.input2.nativeElement, 'keyup')
.pipe(
debounceTime(300),
debounceTime(600),
distinctUntilChanged(),
tap(() => {
this.paginator.pageIndex = 0;

9
apps/twitch-logs/src/app/videos/videos.component.css
Unescape View File

@ -18,14 +18,15 @@
font-size: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
}
.mat-column-title {
white-space: nowrap;
.mat-cell:last-child {
padding-right: 0;
}
.mat-column-title img, .mat-column-title a {
vertical-align: middle;
.mat-column-title img {
margin-top: 0.5em;
}
.spinner-container {

20
apps/twitch-logs/src/app/videos/videos.component.html
Unescape View File

@ -25,26 +25,28 @@
<ng-container matColumnDef="recorded_at">
<mat-header-cell fxFlex="10%" *matHeaderCellDef mat-sort-header>Recorded</mat-header-cell>
<mat-header-cell fxFlex="15%" *matHeaderCellDef mat-sort-header>Recorded</mat-header-cell>
<mat-cell fxFlex="10%" *matCellDef="let video">{{video.recorded_at | date : 'yyyy-MM-dd'}}</mat-cell>
<mat-cell fxFlex="15%" *matCellDef="let video">{{video.recorded_at | date : 'yyyy-MM-dd'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="title">
<mat-header-cell fxFlex="50%" *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
<mat-header-cell fxFlex="42%" *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
<mat-cell fxFlex="50%" *matCellDef="let video">
<mat-cell fxFlex="42%" *matCellDef="let video">
<img src="{{video.thumbnail_small}}" alt="{{video.title}}">
<a mat-button [routerLink]="['/videos', video.id]">
<a [routerLink]="['/videos', video.id]">
{{video.title}}
</a>
<br>
<img src="{{video.thumbnail_small}}" alt="{{video.title}}">
</mat-cell>
</ng-container>
@ -59,9 +61,9 @@
<ng-container matColumnDef="length">
<mat-header-cell fxFlex="12%" *matHeaderCellDef mat-sort-header>Length</mat-header-cell>
<mat-header-cell fxFlex="15%" *matHeaderCellDef mat-sort-header>Length</mat-header-cell>
<mat-cell fxFlex="12%" *matCellDef="let video">{{video.length | tohms : 'spaces'}}</mat-cell>
<mat-cell fxFlex="15%" *matCellDef="let video">{{video.length | tohms : 'spaces'}}</mat-cell>
</ng-container>

Write Preview
Loading…
Cancel
Save