From 76d43f9f43b6210be7f96d5bce8c3cd460d8ea2c Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Tue, 20 Jun 2017 15:46:49 +0200 Subject: [PATCH] Heavily improved forum readability --- .gitignore | 3 +++ pages/anime/anime.pixy | 6 ++++-- pages/anime/anime.scarlet | 4 +++- pages/forum/forum.pixy | 3 ++- pages/forum/forum.scarlet | 13 ++++++++++++- pages/threads/threads.scarlet | 2 +- scripts/AnimeNotifier.ts | 8 ++++++-- scripts/Application.ts | 19 ++++++++++++++++--- scripts/Diff.ts | 5 +++++ scripts/actions.ts | 9 +++++++-- styles/forum.scarlet | 2 +- styles/include/config.scarlet | 3 +++ 12 files changed, 63 insertions(+), 14 deletions(-) create mode 100644 scripts/Diff.ts diff --git a/.gitignore b/.gitignore index 48f263a5..ae04de90 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,9 @@ vendor/ node_modules/ tmp/ +# NPM +/package-lock.json + # debugger debug diff --git a/pages/anime/anime.pixy b/pages/anime/anime.pixy index 97173475..b79bc951 100644 --- a/pages/anime/anime.pixy +++ b/pages/anime/anime.pixy @@ -20,13 +20,15 @@ component Anime(anime *arn.Anime, user *arn.User) p.anime-summary= anime.Summary if user != nil - .anime-actions + .buttons.anime-actions if user.AnimeList().Contains(anime.ID) a.button.ajax(href="/+" + user.Nick + "/animelist/" + anime.ID) Icon("pencil") span Edit in collection else - button.action(data-action="addAnimeToCollection", data-anime-id=anime.ID, data-user-id=user.ID, data-user-nick=user.Nick) Add to collection + button.action(data-action="addAnimeToCollection", data-anime-id=anime.ID, data-user-id=user.ID, data-user-nick=user.Nick) + Icon("plus") + span Add to collection h3.anime-section-name Ratings .anime-rating-categories diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 30977a69..0efe7152 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -45,7 +45,9 @@ .anime-actions horizontal justify-content center - margin content-padding 0 + + // Action button margin + margin calc(content-padding - 0.5rem) -0.5rem // Setting z-index requires setting a background as well z-index 10 diff --git a/pages/forum/forum.pixy b/pages/forum/forum.pixy index 654e05da..bdc977ed 100644 --- a/pages/forum/forum.pixy +++ b/pages/forum/forum.pixy @@ -1,7 +1,8 @@ component Forum(tag string, threads []*arn.Thread) h2.page-title Forum ForumTags - ThreadList(threads) + .forum + ThreadList(threads) .buttons button diff --git a/pages/forum/forum.scarlet b/pages/forum/forum.scarlet index c119d3ad..b3b226b5 100644 --- a/pages/forum/forum.scarlet +++ b/pages/forum/forum.scarlet @@ -1,6 +1,17 @@ +.forum + vertical + align-items center + + .thread-link + width 100% + max-width forum-width + .forum-tag + color text-color !important + :hover + color white !important &.active - color white + color white !important background-color link-hover-color #load-more-threads diff --git a/pages/threads/threads.scarlet b/pages/threads/threads.scarlet index 1ac5f3e8..f6bf9857 100644 --- a/pages/threads/threads.scarlet +++ b/pages/threads/threads.scarlet @@ -5,7 +5,7 @@ .posts vertical width 100% - max-width 830px + max-width forum-width .post vertical diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index c901e17c..d33478f0 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -45,9 +45,13 @@ export class AnimeNotifier { onPopState(e: PopStateEvent) { if(e.state) { - this.app.load(e.state, false) + this.app.load(e.state, { + addToHistory: false + }) } else if(this.app.currentPath !== this.app.originalPath) { - this.app.load(this.app.originalPath, false) + this.app.load(this.app.originalPath, { + addToHistory: false + }) } } diff --git a/scripts/Application.ts b/scripts/Application.ts index 00dea2ce..308db6d1 100644 --- a/scripts/Application.ts +++ b/scripts/Application.ts @@ -1,3 +1,8 @@ +class LoadOptions { + addToHistory?: boolean + forceReload?: boolean +} + export class Application { ajaxClass: string fadeOutClass: string @@ -46,11 +51,19 @@ export class Application { }) } - load(url: string, addToHistory: boolean) { + load(url: string, options?: LoadOptions) { if(this.lastRequest) { this.lastRequest.abort() this.lastRequest = null } + + if(!options) { + options = new LoadOptions() + } + + if(options.addToHistory === undefined) { + options.addToHistory = true + } this.currentPath = url @@ -70,7 +83,7 @@ export class Application { // Wait for the network request to end. request.then(html => { // Add to browser history - if(addToHistory) + if(options.addToHistory) history.pushState(url, null, url) // Set content @@ -144,7 +157,7 @@ export class Application { return // Load requested page - self.load(url, true) + self.load(url) } } } diff --git a/scripts/Diff.ts b/scripts/Diff.ts new file mode 100644 index 00000000..d77eac83 --- /dev/null +++ b/scripts/Diff.ts @@ -0,0 +1,5 @@ +export class Diff { + static update(element: HTMLElement, html: string) { + element.innerHTML = html + } +} \ No newline at end of file diff --git a/scripts/actions.ts b/scripts/actions.ts index cfb460e2..dff331b3 100644 --- a/scripts/actions.ts +++ b/scripts/actions.ts @@ -1,5 +1,6 @@ import { Application } from "./Application" import { AnimeNotifier } from "./AnimeNotifier" +import { Diff } from "./Diff" // Add anime to collection export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) { @@ -19,7 +20,11 @@ export function addAnimeToCollection(arn: AnimeNotifier, button: HTMLElement) { throw body } - return arn.app.load("/+" + userNick + "/animelist/" + animeId, true) + return fetch("/_" + arn.app.currentPath, { + credentials: "same-origin" + }) + .then(response => response.text()) + .then(html => Diff.update(arn.app.content, html)) }) .catch(console.error) .then(() => arn.loading(false)) @@ -43,7 +48,7 @@ export function removeAnimeFromCollection(arn: AnimeNotifier, button: HTMLElemen throw body } - return arn.app.load("/+" + userNick + "/animelist", true) + return arn.app.load("/+" + userNick + "/animelist") }) .catch(console.error) .then(() => arn.loading(false)) diff --git a/styles/forum.scarlet b/styles/forum.scarlet index 8e3c402d..d652ab1e 100644 --- a/styles/forum.scarlet +++ b/styles/forum.scarlet @@ -54,7 +54,7 @@ color text-color .forum-tags - justify-content flex-start !important + // justify-content flex-start !important margin-bottom 1rem .post-author diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index f9104274..e5cb98c5 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -14,6 +14,9 @@ ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) ui-disabled-color = rgb(224, 224, 224) +// Forum +forum-width = 830px + // Avatar avatar-size = 50px