From 16cbd5167fc7ad55da3d2cdf69c84bce2bee8e9c Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sat, 22 Jul 2017 15:04:54 +0200 Subject: [PATCH] Redesign --- layout/layout.pixy | 17 ++-- main.go | 8 +- mixins/ForumTags.pixy | 4 +- mixins/Navigation.pixy | 20 ++--- mixins/Sidebar.pixy | 4 + mixins/StatusTabs.pixy | 21 +++++ pages/amvs/amvs.go | 10 +++ pages/anime/anime.scarlet | 2 +- pages/animelist/animelist.go | 2 +- pages/animelist/animelist.pixy | 13 +-- pages/animelist/animelist.scarlet | 2 +- pages/animelist/status.go | 2 +- pages/animelist/status.pixy | 7 +- pages/artworks/artworks.go | 10 +++ pages/dashboard/dashboard.go | 14 +-- pages/home/home.go | 31 +++++++ pages/profile/profile.pixy | 38 ++------ pages/statistics/statistics.pixy | 6 +- pages/users/users.pixy | 10 +-- scripts/AnimeNotifier.ts | 144 +++++++++++++++--------------- styles/base.scarlet | 6 +- styles/include/config.scarlet | 11 +-- styles/layout.scarlet | 6 +- styles/mountable.scarlet | 14 +-- styles/navigation.scarlet | 6 +- styles/sidebar.scarlet | 26 ++++-- styles/table.scarlet | 2 +- styles/tabs.scarlet | 16 +++- utils/ItemCSSClass.go | 14 --- 29 files changed, 262 insertions(+), 204 deletions(-) create mode 100644 mixins/StatusTabs.pixy create mode 100644 pages/amvs/amvs.go create mode 100644 pages/artworks/artworks.go create mode 100644 pages/home/home.go delete mode 100644 utils/ItemCSSClass.go diff --git a/layout/layout.pixy b/layout/layout.pixy index 21ce0324..b8241502 100644 --- a/layout/layout.pixy +++ b/layout/layout.pixy @@ -20,14 +20,15 @@ component Layout(app *aero.Application, ctx *aero.Context, user *arn.User, openG link(rel="manifest", href="/manifest.json") body #container(class=utils.GetContainerClass(ctx)) - #header - Navigation(user) - #content-container - main#content.fade!= content - LoadingAnimation - StatusMessage - aside#sidebar - Sidebar(user) + //- #header + //- Navigation(user) + #columns + aside#sidebar + Sidebar(user) + #content-container + main#content.fade!= content + LoadingAnimation + StatusMessage if user != nil #user(data-id=user.ID) script(src="/scripts") \ No newline at end of file diff --git a/main.go b/main.go index 534ed8b5..4cdb14ed 100644 --- a/main.go +++ b/main.go @@ -10,19 +10,21 @@ import ( "github.com/animenotifier/notify.moe/layout" "github.com/animenotifier/notify.moe/middleware" "github.com/animenotifier/notify.moe/pages/admin" + "github.com/animenotifier/notify.moe/pages/amvs" "github.com/animenotifier/notify.moe/pages/anime" "github.com/animenotifier/notify.moe/pages/animelist" "github.com/animenotifier/notify.moe/pages/animelistitem" "github.com/animenotifier/notify.moe/pages/apiview" + "github.com/animenotifier/notify.moe/pages/artworks" "github.com/animenotifier/notify.moe/pages/best" "github.com/animenotifier/notify.moe/pages/character" - "github.com/animenotifier/notify.moe/pages/dashboard" "github.com/animenotifier/notify.moe/pages/editanime" "github.com/animenotifier/notify.moe/pages/editor" "github.com/animenotifier/notify.moe/pages/embed" "github.com/animenotifier/notify.moe/pages/explore" "github.com/animenotifier/notify.moe/pages/forum" "github.com/animenotifier/notify.moe/pages/forums" + "github.com/animenotifier/notify.moe/pages/home" "github.com/animenotifier/notify.moe/pages/listimport" "github.com/animenotifier/notify.moe/pages/listimport/listimportanilist" "github.com/animenotifier/notify.moe/pages/listimport/listimportkitsu" @@ -68,7 +70,7 @@ func configure(app *aero.Application) *aero.Application { app.Layout = layout.Render // Ajax routes - app.Ajax("/", dashboard.Get) + app.Ajax("/", home.Get) app.Ajax("/anime/:id", anime.Get) app.Ajax("/anime/:id/edit", editanime.Get) app.Ajax("/api", apiview.Get) @@ -84,6 +86,8 @@ func configure(app *aero.Application) *aero.Application { app.Ajax("/new/soundtrack", newsoundtrack.Get) app.Ajax("/settings", settings.Get) app.Ajax("/soundtracks", music.Get) + app.Ajax("/artworks", artworks.Get) + app.Ajax("/amvs", amvs.Get) app.Ajax("/users", users.Active) app.Ajax("/users/osu", users.Osu) app.Ajax("/users/staff", users.Staff) diff --git a/mixins/ForumTags.pixy b/mixins/ForumTags.pixy index 44f40672..d89a59be 100644 --- a/mixins/ForumTags.pixy +++ b/mixins/ForumTags.pixy @@ -1,5 +1,5 @@ component ForumTags - .buttons.tabs + .tabs ForumTag("All", "", "list") ForumTag("General", "general", "list") ForumTag("News", "news", "list") @@ -9,6 +9,6 @@ component ForumTags ForumTag("Bugs", "bug", "list") component ForumTag(title string, category string, icon string) - a.button.tab.action(href=strings.TrimSuffix("/forum/" + category, "/"), data-action="diff", data-trigger="click") + a.tab.action(href=strings.TrimSuffix("/forum/" + category, "/"), data-action="diff", data-trigger="click") Icon(arn.GetForumIcon(category)) span.tab-text= title \ No newline at end of file diff --git a/mixins/Navigation.pixy b/mixins/Navigation.pixy index e612aae7..c4548ab6 100644 --- a/mixins/Navigation.pixy +++ b/mixins/Navigation.pixy @@ -33,28 +33,28 @@ component LoggedInMenu(user *arn.User) Icon("bars") span.navigation-text Menu - .extra-navigation - NavigationButton("Profile", "/+", "user") + //- .extra-navigation + //- NavigationButton("Profile", "/+", "user") - .extra-navigation - NavigationButton("Forum", "/forum", "comment") + //- .extra-navigation + //- NavigationButton("Forum", "/forum", "comment") //- .extra-navigation //- NavigationButton("Soundtracks", "/soundtracks", "headphones") FuzzySearch - .extra-navigation - NavigationButton("Users", "/users", "globe") + //- .extra-navigation + //- NavigationButton("Users", "/users", "globe") - .extra-navigation - NavigationButton("Explore", "/explore", "th") + //- .extra-navigation + //- NavigationButton("Explore", "/explore", "th") //- .extra-navigation //- NavigationButton("Statistics", "/statistics", "pie-chart") - .hide-landscape - NavigationButton("Settings", "/settings", "cog") + //- .hide-landscape + //- NavigationButton("Settings", "/settings", "cog") //- .extra-navigation.hide-landscape //- NavigationButtonNoAJAX("Logout", "/logout", "sign-out") diff --git a/mixins/Sidebar.pixy b/mixins/Sidebar.pixy index b26deaee..7b1d0ee5 100644 --- a/mixins/Sidebar.pixy +++ b/mixins/Sidebar.pixy @@ -8,7 +8,9 @@ component Sidebar(user *arn.User) SidebarButton("Home", "/", "home") SidebarButton("Forum", "/forum", "comment") SidebarButton("Explore", "/explore", "th") + SidebarButton("Artworks", "/artworks", "paint-brush") SidebarButton("Soundtracks", "/soundtracks", "headphones") + SidebarButton("AMVs", "/amvs", "video-camera") SidebarButton("Users", "/users", "globe") if user != nil @@ -17,6 +19,8 @@ component Sidebar(user *arn.User) SidebarButton("Settings", "/settings", "cog") + .spacer + SidebarButton("Help", "/thread/I3MMiOtzR", "question") if user != nil diff --git a/mixins/StatusTabs.pixy b/mixins/StatusTabs.pixy new file mode 100644 index 00000000..a526a69b --- /dev/null +++ b/mixins/StatusTabs.pixy @@ -0,0 +1,21 @@ +component StatusTabs(urlPrefix string) + .tabs.status-tabs + a.tab.status-tab.action(href=urlPrefix + "/watching", data-action="diff", data-trigger="click") + Icon("play") + span.tab-text Watching + + a.tab.status-tab.action(href=urlPrefix + "/completed", data-action="diff", data-trigger="click") + Icon("check") + span.tab-text Completed + + a.tab.status-tab.action(href=urlPrefix + "/planned", data-action="diff", data-trigger="click") + Icon("forward") + span.tab-text Planned + + a.tab.status-tab.action(href=urlPrefix + "/hold", data-action="diff", data-trigger="click") + Icon("pause") + span.tab-text On Hold + + a.tab.status-tab.action(href=urlPrefix + "/dropped", data-action="diff", data-trigger="click") + Icon("stop") + span.tab-text Dropped \ No newline at end of file diff --git a/pages/amvs/amvs.go b/pages/amvs/amvs.go new file mode 100644 index 00000000..f90db340 --- /dev/null +++ b/pages/amvs/amvs.go @@ -0,0 +1,10 @@ +package amvs + +import ( + "github.com/aerogo/aero" +) + +// Get AMVs. +func Get(ctx *aero.Context) string { + return ctx.HTML("Coming soon™.") +} diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet index 5f32a9e5..cde6a43c 100644 --- a/pages/anime/anime.scarlet +++ b/pages/anime/anime.scarlet @@ -14,7 +14,7 @@ align-items flex-start .anime-cover-image - width 230px + width 142px height auto border-radius 3px diff --git a/pages/animelist/animelist.go b/pages/animelist/animelist.go index c5daf656..71198c7c 100644 --- a/pages/animelist/animelist.go +++ b/pages/animelist/animelist.go @@ -28,5 +28,5 @@ func Get(ctx *aero.Context) string { animeList.PrefetchAnime() animeList.Sort() - return ctx.HTML(components.AnimeLists(animeList.SplitByStatus(), animeList.User(), user, ctx.URI())) + return ctx.HTML(components.ProfileAnimeLists(animeList.SplitByStatus(), animeList.User(), user, ctx.URI())) } diff --git a/pages/animelist/animelist.pixy b/pages/animelist/animelist.pixy index 741f6bf9..96de01db 100644 --- a/pages/animelist/animelist.pixy +++ b/pages/animelist/animelist.pixy @@ -1,8 +1,15 @@ -component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, user *arn.User, uri string) +component ProfileAnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, user *arn.User, uri string) ProfileHeader(viewUser, user, uri) h1.page-title.anime-list-owner= viewUser.Nick + "'s collection" + AnimeLists(animeLists, viewUser, user) + + //- for status, animeList := range animeLists + //- h3= status + //- AnimeList(animeList, user) + +component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, user *arn.User) if len(animeLists[arn.AnimeListStatusWatching].Items) == 0 && len(animeLists[arn.AnimeListStatusCompleted].Items) == 0 && len(animeLists[arn.AnimeListStatusPlanned].Items) == 0 && len(animeLists[arn.AnimeListStatusHold].Items) == 0 && len(animeLists[arn.AnimeListStatusDropped].Items) == 0 p.no-data.mountable= viewUser.Nick + " hasn't added any anime yet." else @@ -30,10 +37,6 @@ component AnimeLists(animeLists map[string]*arn.AnimeList, viewUser *arn.User, u .anime-list-container h3.status-name Dropped AnimeList(animeLists[arn.AnimeListStatusDropped], viewUser, user) - - //- for status, animeList := range animeLists - //- h3= status - //- AnimeList(animeList, user) component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User) table.anime-list diff --git a/pages/animelist/animelist.scarlet b/pages/animelist/animelist.scarlet index 475afdc5..82ed74f2 100644 --- a/pages/animelist/animelist.scarlet +++ b/pages/animelist/animelist.scarlet @@ -2,7 +2,7 @@ vertical width 100% max-width table-width-normal - margin 0 auto + // margin 0 auto margin-bottom 1rem .anime-list diff --git a/pages/animelist/status.go b/pages/animelist/status.go index cf66fd4a..567fe1af 100644 --- a/pages/animelist/status.go +++ b/pages/animelist/status.go @@ -19,7 +19,7 @@ func FilterByStatus(status string) aero.Handle { return response } - return ctx.HTML(components.AnimeListFilteredByStatus(list, list.User(), user, status, ctx.URI())) + return ctx.HTML(components.ProfileAnimeListFilteredByStatus(list, list.User(), user, status, ctx.URI())) } } diff --git a/pages/animelist/status.pixy b/pages/animelist/status.pixy index 4b30fa3b..ff66a1c7 100644 --- a/pages/animelist/status.pixy +++ b/pages/animelist/status.pixy @@ -1,9 +1,12 @@ -component AnimeListFilteredByStatus(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string, uri string) +component ProfileAnimeListFilteredByStatus(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string, uri string) ProfileHeader(viewUser, user, uri) + AnimeListFilteredByStatus(animeList, viewUser, user, status) + +component AnimeListFilteredByStatus(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string) if len(animeList.Items) == 0 p.no-data.mountable= viewUser.Nick + " hasn't added any anime to this list yet." else .anime-list-container.fill-screen - h3.status-name= arn.ListItemStatusName(status) + //- h3.status-name= arn.ListItemStatusName(status) AnimeList(animeList, viewUser, user) \ No newline at end of file diff --git a/pages/artworks/artworks.go b/pages/artworks/artworks.go new file mode 100644 index 00000000..58b0893e --- /dev/null +++ b/pages/artworks/artworks.go @@ -0,0 +1,10 @@ +package artworks + +import ( + "github.com/aerogo/aero" +) + +// Get artworks. +func Get(ctx *aero.Context) string { + return ctx.HTML("Coming soon™.") +} diff --git a/pages/dashboard/dashboard.go b/pages/dashboard/dashboard.go index 7f40c968..fe0649ae 100644 --- a/pages/dashboard/dashboard.go +++ b/pages/dashboard/dashboard.go @@ -7,7 +7,6 @@ import ( "github.com/aerogo/flow" "github.com/animenotifier/arn" "github.com/animenotifier/notify.moe/components" - "github.com/animenotifier/notify.moe/pages/frontpage" "github.com/animenotifier/notify.moe/utils" ) @@ -16,19 +15,8 @@ const maxFollowing = 5 const maxSoundTracks = 5 const maxScheduleItems = 5 -// Get the dashboard or the frontpage when logged out. +// Get the dashboard. func Get(ctx *aero.Context) string { - user := utils.GetUser(ctx) - - if user == nil { - return frontpage.Get(ctx) - } - - return dashboard(ctx) -} - -// Render the dashboard. -func dashboard(ctx *aero.Context) string { var forumActivity []arn.Postable var followingList []*arn.User var soundTracks []*arn.SoundTrack diff --git a/pages/home/home.go b/pages/home/home.go new file mode 100644 index 00000000..8de999c3 --- /dev/null +++ b/pages/home/home.go @@ -0,0 +1,31 @@ +package home + +import ( + "net/http" + + "github.com/aerogo/aero" + "github.com/animenotifier/notify.moe/components" + "github.com/animenotifier/notify.moe/pages/frontpage" + "github.com/animenotifier/notify.moe/utils" +) + +// Get the dashboard or the frontpage when logged out. +func Get(ctx *aero.Context) string { + user := utils.GetUser(ctx) + + if user == nil { + return frontpage.Get(ctx) + } + + viewUser := user + animeList := viewUser.AnimeList() + + if animeList == nil { + return ctx.Error(http.StatusNotFound, "Anime list not found", nil) + } + + animeList.PrefetchAnime() + animeList.Sort() + + return ctx.HTML(components.AnimeLists(animeList.SplitByStatus(), animeList.User(), user)) +} diff --git a/pages/profile/profile.pixy b/pages/profile/profile.pixy index 0226f6d9..2ff3b5cc 100644 --- a/pages/profile/profile.pixy +++ b/pages/profile/profile.pixy @@ -59,60 +59,38 @@ component ProfileHeader(viewUser *arn.User, user *arn.User, uri string) ProfileNavigation(viewUser, uri) component ProfileNavigation(viewUser *arn.User, uri string) - .buttons.tabs - a.button.tab.action(href="/+" + viewUser.Nick, data-action="diff", data-trigger="click") + .tabs + a.tab.action(href="/+" + viewUser.Nick, data-action="diff", data-trigger="click") Icon("th") span.tab-text Anime - a.button.tab.action(href="/+" + viewUser.Nick + "/animelist/watching", data-action="diff", data-trigger="click") + a.tab.action(href="/+" + viewUser.Nick + "/animelist/watching", data-action="diff", data-trigger="click") Icon("list") span.tab-text Collection - a.button.tab.action(href="/+" + viewUser.Nick + "/threads", data-action="diff", data-trigger="click") + a.tab.action(href="/+" + viewUser.Nick + "/threads", data-action="diff", data-trigger="click") Icon("comment") span.tab-text Threads - a.button.tab.action(href="/+" + viewUser.Nick + "/posts", data-action="diff", data-trigger="click") + a.tab.action(href="/+" + viewUser.Nick + "/posts", data-action="diff", data-trigger="click") Icon("comments") span.tab-text Posts - a.button.tab.action(href="/+" + viewUser.Nick + "/soundtracks", data-action="diff", data-trigger="click") + a.tab.action(href="/+" + viewUser.Nick + "/soundtracks", data-action="diff", data-trigger="click") Icon("music") span.tab-text Tracks - a.button.tab.action(href="/+" + viewUser.Nick + "/stats", data-action="diff", data-trigger="click") + a.tab.action(href="/+" + viewUser.Nick + "/stats", data-action="diff", data-trigger="click") Icon("area-chart") span.tab-text Stats - a.button.tab.action(href="/+" + viewUser.Nick + "/followers", data-action="diff", data-trigger="click") + a.tab.action(href="/+" + viewUser.Nick + "/followers", data-action="diff", data-trigger="click") Icon("users") span.tab-text Followers if strings.Contains(uri, "/animelist") hr StatusTabs("/+" + viewUser.Nick + "/animelist") - -component StatusTabs(urlPrefix string) - .buttons.tabs.status-tabs - a.button.tab.status-tab.action(href=urlPrefix + "/watching", data-action="diff", data-trigger="click") - Icon("play") - span.tab-text Watching - - a.button.tab.status-tab.action(href=urlPrefix + "/completed", data-action="diff", data-trigger="click") - Icon("check") - span.tab-text Completed - - a.button.tab.status-tab.action(href=urlPrefix + "/planned", data-action="diff", data-trigger="click") - Icon("forward") - span.tab-text Planned - - a.button.tab.status-tab.action(href=urlPrefix + "/hold", data-action="diff", data-trigger="click") - Icon("pause") - span.tab-text On Hold - - a.button.tab.status-tab.action(href=urlPrefix + "/dropped", data-action="diff", data-trigger="click") - Icon("stop") - span.tab-text Dropped component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList, threads []*arn.Thread, posts []*arn.Post, tracks []*arn.SoundTrack, uri string) ProfileHeader(viewUser, user, uri) diff --git a/pages/statistics/statistics.pixy b/pages/statistics/statistics.pixy index ef8b42ad..c9fad809 100644 --- a/pages/statistics/statistics.pixy +++ b/pages/statistics/statistics.pixy @@ -14,12 +14,12 @@ component Statistics(pieCharts ...*arn.PieChart) p Data is collected for statistical purposes only. We respect user privacy and we will never display or sell critical data to 3rd party services. component StatisticsHeader - .buttons.tabs - a.button.tab.action(href="/statistics", data-action="diff", data-trigger="click") + .tabs + a.tab.action(href="/statistics", data-action="diff", data-trigger="click") Icon("user") span.tab-text Users - a.button.tab.action(href="/statistics/anime", data-action="diff", data-trigger="click") + a.tab.action(href="/statistics/anime", data-action="diff", data-trigger="click") Icon("tv") span.tab-text Anime diff --git a/pages/users/users.pixy b/pages/users/users.pixy index 33f2f1fd..5dbfd80a 100644 --- a/pages/users/users.pixy +++ b/pages/users/users.pixy @@ -1,20 +1,20 @@ component Users(users []*arn.User) h1.page-title Users - .buttons.tabs - a.button.tab.action(href="/users", data-action="diff", data-trigger="click") + .tabs + a.tab.action(href="/users", data-action="diff", data-trigger="click") Icon("users") span.tab-text Active - a.button.tab.action(href="/users/anime/watching", data-action="diff", data-trigger="click") + a.tab.action(href="/users/anime/watching", data-action="diff", data-trigger="click") Icon("tv") span.tab-text Watching - a.button.tab.action(href="/users/osu", data-action="diff", data-trigger="click") + a.tab.action(href="/users/osu", data-action="diff", data-trigger="click") Icon("gamepad") span.tab-text Osu - a.button.tab.action(href="/users/staff", data-action="diff", data-trigger="click") + a.tab.action(href="/users/staff", data-action="diff", data-trigger="click") Icon("user-secret") span.tab-text Staff diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index db588825..5eb56c9d 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -24,7 +24,7 @@ export class AnimeNotifier { imageFound: MutationQueue imageNotFound: MutationQueue - unmount: MutationQueue + // unmount: MutationQueue constructor(app: Application) { this.app = app @@ -33,7 +33,7 @@ export class AnimeNotifier { this.imageFound = new MutationQueue(elem => elem.classList.add("image-found")) this.imageNotFound = new MutationQueue(elem => elem.classList.add("image-not-found")) - this.unmount = new MutationQueue(elem => elem.classList.remove("mounted")) + // this.unmount = new MutationQueue(elem => elem.classList.remove("mounted")) // These classes will never be removed on DOM diffs Diff.persistentClasses.add("mounted") @@ -140,7 +140,7 @@ export class AnimeNotifier { this.visibilityObserver.disconnect() this.contentLoadedActions = Promise.all([ - Promise.resolve().then(() => this.mountMountables()), + // Promise.resolve().then(() => this.mountMountables()), Promise.resolve().then(() => this.lazyLoadImages()), Promise.resolve().then(() => this.displayLocalDates()), Promise.resolve().then(() => this.setSelectBoxValue()), @@ -471,87 +471,87 @@ export class AnimeNotifier { this.visibilityObserver.observe(img) } - mountMountables() { - this.modifyDelayed("mountable", element => element.classList.add("mounted")) - } + // mountMountables() { + // this.modifyDelayed("mountable", element => element.classList.add("mounted")) + // } - unmountMountables() { - for(let element of findAll("mountable")) { - if(element.classList.contains("never-unmount")) { - continue - } + // unmountMountables() { + // for(let element of findAll("mountable")) { + // if(element.classList.contains("never-unmount")) { + // continue + // } - this.unmount.queue(element) - } - } + // this.unmount.queue(element) + // } + // } - modifyDelayed(className: string, func: (element: HTMLElement) => void) { - const maxDelay = 1000 - const delay = 20 + // modifyDelayed(className: string, func: (element: HTMLElement) => void) { + // const maxDelay = 1000 + // const delay = 20 - let time = 0 - let start = Date.now() - let maxTime = start + maxDelay + // let time = 0 + // let start = Date.now() + // let maxTime = start + maxDelay - let mountableTypes = new Map() - let mountableTypeMutations = new Map>() + // let mountableTypes = new Map() + // let mountableTypeMutations = new Map>() - let collection = document.getElementsByClassName(className) + // let collection = document.getElementsByClassName(className) - if(collection.length === 0) { - return - } + // if(collection.length === 0) { + // return + // } - // let delay = Math.min(maxDelay / collection.length, 20) + // // let delay = Math.min(maxDelay / collection.length, 20) - for(let i = 0; i < collection.length; i++) { - let element = collection.item(i) as HTMLElement - let type = element.dataset.mountableType || "general" + // for(let i = 0; i < collection.length; i++) { + // let element = collection.item(i) as HTMLElement + // let type = element.dataset.mountableType || "general" - if(mountableTypes.has(type)) { - time = mountableTypes.get(type) + delay - mountableTypes.set(type, time) - } else { - time = start - mountableTypes.set(type, time) - mountableTypeMutations.set(type, []) - } + // if(mountableTypes.has(type)) { + // time = mountableTypes.get(type) + delay + // mountableTypes.set(type, time) + // } else { + // time = start + // mountableTypes.set(type, time) + // mountableTypeMutations.set(type, []) + // } - if(time > maxTime) { - time = maxTime - } + // if(time > maxTime) { + // time = maxTime + // } - mountableTypeMutations.get(type).push({ - element, - time - }) - } + // mountableTypeMutations.get(type).push({ + // element, + // time + // }) + // } - for(let mountableType of mountableTypeMutations.keys()) { - let mutations = mountableTypeMutations.get(mountableType) - let mutationIndex = 0 + // for(let mountableType of mountableTypeMutations.keys()) { + // let mutations = mountableTypeMutations.get(mountableType) + // let mutationIndex = 0 - let updateBatch = () => { - let now = Date.now() + // let updateBatch = () => { + // let now = Date.now() - for(; mutationIndex < mutations.length; mutationIndex++) { - let mutation = mutations[mutationIndex] + // for(; mutationIndex < mutations.length; mutationIndex++) { + // let mutation = mutations[mutationIndex] - if(mutation.time > now) { - break - } + // if(mutation.time > now) { + // break + // } - func(mutation.element) - } + // func(mutation.element) + // } - if(mutationIndex < mutations.length) { - window.requestAnimationFrame(updateBatch) - } - } + // if(mutationIndex < mutations.length) { + // window.requestAnimationFrame(updateBatch) + // } + // } - window.requestAnimationFrame(updateBatch) - } - } + // window.requestAnimationFrame(updateBatch) + // } + // } diff(url: string) { if(url === this.app.currentPath) { @@ -570,17 +570,15 @@ export class AnimeNotifier { history.pushState(url, null, url) this.app.currentPath = url this.app.markActiveLinks() - this.unmountMountables() + // this.unmountMountables() this.loading(true) // Delay by transition-speed - return delay(300).then(() => { - return request - .then(html => this.app.setContent(html, true)) - .then(() => this.app.emit("DOMContentLoaded")) - .then(() => this.loading(false)) - .catch(console.error) - }) + return request + .then(html => this.app.setContent(html, true)) + .then(() => this.app.emit("DOMContentLoaded")) + .then(() => this.loading(false)) + .catch(console.error) } post(url, body) { diff --git a/styles/base.scarlet b/styles/base.scarlet index c2eb31d3..a2f45946 100644 --- a/styles/base.scarlet +++ b/styles/base.scarlet @@ -1,10 +1,7 @@ html height 100% font-family "Ubuntu", "Trebuchet MS", sans-serif - font-size 100% - -.osx - font-size 95% + font-size 105% body tab-size 4 @@ -12,7 +9,6 @@ body height 100% color text-color background-color bg-color - font-size 1.05rem a color link-color diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index e108721a..0bbe4ead 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -23,7 +23,8 @@ input-focus-border-color = rgb(248, 165, 130) // Button button-hover-color = link-hover-color -forum-tag-hover-color = rgb(46, 85, 160) +forum-tag-hover-color = #225db5 +// forum-tag-hover-color = rgb(46, 85, 160) // Forum forum-width = 830px @@ -42,7 +43,7 @@ nav-link-hover-slide-color = main-color // nav-link-hover-color = rgb(80, 80, 80) // Tables -table-width-normal = 1200px +table-width-normal = 900px // Loading animation loading-anim-color = nav-link-hover-slide-color @@ -65,6 +66,6 @@ nav-height = 3.11rem typography-margin = 0.4rem // Timings -fade-speed = 200ms -transition-speed = 250ms -mountable-transition-speed = 300ms +fade-speed = 1ms +transition-speed = 200ms +// mountable-transition-speed = 300ms diff --git a/styles/layout.scarlet b/styles/layout.scarlet index 6e425f76..34fd2637 100644 --- a/styles/layout.scarlet +++ b/styles/layout.scarlet @@ -7,4 +7,8 @@ overflow-x hidden overflow-y scroll position relative - // will-change transform \ No newline at end of file + // will-change transform + +#columns + horizontal + height 100% \ No newline at end of file diff --git a/styles/mountable.scarlet b/styles/mountable.scarlet index 78becc67..8a55f28d 100644 --- a/styles/mountable.scarlet +++ b/styles/mountable.scarlet @@ -1,8 +1,8 @@ -.mountable - opacity 0 - transform translateY(0.85rem) - transition opacity mountable-transition-speed ease, transform mountable-transition-speed ease +// .mountable +// opacity 0 +// transform translateY(0.85rem) +// transition opacity mountable-transition-speed ease, transform mountable-transition-speed ease -.mounted - opacity 1 !important - transform translateY(0) \ No newline at end of file +// .mounted +// opacity 1 !important +// transform translateY(0) \ No newline at end of file diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet index 1820f459..bbfde471 100644 --- a/styles/navigation.scarlet +++ b/styles/navigation.scarlet @@ -68,9 +68,9 @@ .navigation-button, #search font-size 1.3em -> 550px - #navigation - padding 0 content-padding +// > 550px +// #navigation +// padding 0 content-padding > 930px .navigation-button, #search diff --git a/styles/sidebar.scarlet b/styles/sidebar.scarlet index 6dbe64f2..e15631ba 100644 --- a/styles/sidebar.scarlet +++ b/styles/sidebar.scarlet @@ -1,11 +1,12 @@ -sidebar-spacing-y = 0.75rem +sidebar-spacing-y = 0.7rem #sidebar vertical position fixed left 0 top 0 - min-width 265px + z-index 10 + min-width 200px height 100% background ui-background transform translateX(-100%) @@ -22,23 +23,34 @@ sidebar-spacing-y = 0.75rem justify-content center margin 0.8rem 0 +> 700px + #sidebar + opacity 1 + transform none + position static + pointer-events all + box-shadow none + border-right ui-border + .sidebar-visible transform translateX(0) !important pointer-events all !important opacity 1 !important .sidebar-link - // color text-color + color text-color &.active .sidebar-button - background rgb(245, 245, 245) + background forum-tag-hover-color + color white .sidebar-button horizontal align-items center - padding sidebar-spacing-y content-padding + padding sidebar-spacing-y 1rem + font-size 0.92rem // background ui-background .icon - font-size 1.3rem - margin-right content-padding \ No newline at end of file + font-size 1rem + margin-right 0.75rem \ No newline at end of file diff --git a/styles/table.scarlet b/styles/table.scarlet index 713df6bc..5379e938 100644 --- a/styles/table.scarlet +++ b/styles/table.scarlet @@ -1,7 +1,7 @@ table width 100% max-width table-width-normal - margin 0 auto + // margin 0 auto tr border-bottom-width 1px diff --git a/styles/tabs.scarlet b/styles/tabs.scarlet index 7881b8bf..e736750d 100644 --- a/styles/tabs.scarlet +++ b/styles/tabs.scarlet @@ -1,10 +1,13 @@ .tab color text-color !important + padding 0.5rem 1rem + border-right ui-border + background-color rgb(224, 224, 224) !important :hover, &.active - color white !important - background-color forum-tag-hover-color !important + background-color bg-color !important + transform none // color text-color !important // :hover @@ -22,6 +25,11 @@ display none .tabs + horizontal + margin-left calc(content-padding * -1) + margin-top calc(content-padding * -1) + margin-right calc(content-padding * -2) + border-bottom ui-border // justify-content flex-start !important - margin-bottom 1rem - margin-top -0.6rem \ No newline at end of file + // margin-bottom 1rem + // margin-top -0.6rem \ No newline at end of file diff --git a/utils/ItemCSSClass.go b/utils/ItemCSSClass.go deleted file mode 100644 index 0f175ea5..00000000 --- a/utils/ItemCSSClass.go +++ /dev/null @@ -1,14 +0,0 @@ -package utils - -import ( - "github.com/animenotifier/arn" -) - -// ItemCSSClass removes mountable class if the list has too many items. -func ItemCSSClass(list *arn.AnimeList, index int) string { - if index > 20 || len(list.Items) > 50 { - return "anime-list-item" - } - - return "anime-list-item mountable" -}