From 9794a09f120651f8639ac83585c3354e48d84ec3 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sun, 20 Nov 2016 03:02:33 +0900 Subject: [PATCH] Reverted forum style, used for genres now --- main.go | 3 +- mixins/Icon.pixy | 5 +++- pages/forum/forum.go | 2 +- pages/forum/forum.pixy | 23 +++------------- pages/forum/forum.styl | 3 ++ pages/forums/forums.go | 11 ++++++++ pages/forums/forums.pixy | 26 ++++++++++++++++++ pages/genre/genre.pixy | 4 +-- pages/genre/genre.styl | 28 ------------------- pages/genres/genres.pixy | 8 +++--- pages/genres/genres.styl | 9 ------ styles/colors.styl | 2 +- styles/config.styl | 9 ++++-- styles/forum.styl | 2 +- styles/grid.styl | 59 ++++++++++++++++++++++++++++++++++++++++ styles/headers.styl | 1 + styles/user.styl | 2 +- 17 files changed, 127 insertions(+), 70 deletions(-) create mode 100644 pages/forums/forums.go create mode 100644 pages/forums/forums.pixy delete mode 100644 pages/genre/genre.styl delete mode 100644 pages/genres/genres.styl create mode 100644 styles/grid.styl diff --git a/main.go b/main.go index 5837918f..864f2278 100644 --- a/main.go +++ b/main.go @@ -8,6 +8,7 @@ import ( "github.com/animenotifier/notify.moe/pages/anime" "github.com/animenotifier/notify.moe/pages/dashboard" "github.com/animenotifier/notify.moe/pages/forum" + "github.com/animenotifier/notify.moe/pages/forums" "github.com/animenotifier/notify.moe/pages/genre" "github.com/animenotifier/notify.moe/pages/genres" "github.com/animenotifier/notify.moe/pages/threads" @@ -38,7 +39,7 @@ func main() { app.Ajax("/anime/:id", anime.Get) app.Ajax("/genres", genres.Get) app.Ajax("/genres/:name", genre.Get) - app.Ajax("/forum", forum.Get) + app.Ajax("/forum", forums.Get) app.Ajax("/forum/:tag", forum.Get) app.Ajax("/threads/:id", threads.Get) diff --git a/mixins/Icon.pixy b/mixins/Icon.pixy index 3ee06a4a..b5594def 100644 --- a/mixins/Icon.pixy +++ b/mixins/Icon.pixy @@ -1,2 +1,5 @@ component Icon(name string) - i(class="fa fa-fw fa-" + name) \ No newline at end of file + i(class="fa fa-fw fa-" + name) + +component GridIcon(name string) + span(class="fa fa-" + name + " grid-icon") \ No newline at end of file diff --git a/pages/forum/forum.go b/pages/forum/forum.go index 5a3577ad..0d49177a 100644 --- a/pages/forum/forum.go +++ b/pages/forum/forum.go @@ -25,5 +25,5 @@ func Get(ctx *aero.Context) string { thread.Init() } - return ctx.HTML(components.Forum(threads)) + return ctx.HTML(components.Forum(tag, threads)) } diff --git a/pages/forum/forum.pixy b/pages/forum/forum.pixy index ee7099e6..c984f060 100644 --- a/pages/forum/forum.pixy +++ b/pages/forum/forum.pixy @@ -1,25 +1,10 @@ -component Forum(threads []*arn.Thread) - h2 Forum - ForumHeader +component Forum(tag string, threads []*arn.Thread) + h2.forum-header Forum + ForumTags + each thread in threads ThreadLink(thread) -component ForumHeader - .forum-tags - a.ajax(href="/forum") All - span | - a.ajax(href="/forum/general") General - span | - a.ajax(href="/forum/news") News - span | - a.ajax(href="/forum/anime") Anime - span | - a.ajax(href="/forum/update") Updates - span | - a.ajax(href="/forum/suggestion") Suggestions - span | - a.ajax(href="/forum/bug") Bugs - component ThreadLink(thread *arn.Thread) .thread-link(data-sticky=thread.Sticky) .post-author.thread-author diff --git a/pages/forum/forum.styl b/pages/forum/forum.styl index 30b53341..738dd3da 100644 --- a/pages/forum/forum.styl +++ b/pages/forum/forum.styl @@ -1,3 +1,6 @@ +.forum-header + text-align left + .forum-tags text-align left margin-bottom 1.5rem diff --git a/pages/forums/forums.go b/pages/forums/forums.go new file mode 100644 index 00000000..8ebdc72d --- /dev/null +++ b/pages/forums/forums.go @@ -0,0 +1,11 @@ +package forums + +import ( + "github.com/aerogo/aero" + "github.com/animenotifier/notify.moe/pages/forum" +) + +// Get ... +func Get(ctx *aero.Context) string { + return forum.Get(ctx) +} diff --git a/pages/forums/forums.pixy b/pages/forums/forums.pixy new file mode 100644 index 00000000..5cb0cdc9 --- /dev/null +++ b/pages/forums/forums.pixy @@ -0,0 +1,26 @@ +component Forums + h2.forum-header Forum + ForumTags + +component ForumTags + .forum-tags + ForumCategory("All", "") + span | + ForumCategory("General", "/general") + span | + ForumCategory("News", "/news") + span | + ForumCategory("Anime", "/anime") + span | + ForumCategory("Updates", "/update") + span | + ForumCategory("Suggestions", "/suggestion") + span | + ForumCategory("Bugs", "/bug") + +component ForumCategory(title string, suffix string) + a.ajax(href="/forum" + suffix)= title + //- a.grid-cell.ajax(href="/forum/" + category) + //- .grid-text + //- GridIcon(arn.GetForumIcon(category)) + //- span= title \ No newline at end of file diff --git a/pages/genre/genre.pixy b/pages/genre/genre.pixy index 5555a996..985c9031 100644 --- a/pages/genre/genre.pixy +++ b/pages/genre/genre.pixy @@ -2,5 +2,5 @@ component Genre(genre string, animeList []*arn.Anime) h2.genre-header= arn.Capitalize(genre) .grid each anime in animeList - a.grid-cell.ajax(href="/anime/" + toString(anime.ID)) - img.anime-image.grid-cell-content.grid-cell-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")") \ No newline at end of file + a.grid-cell.grid-anime.ajax(href="/anime/" + toString(anime.ID)) + img.anime-image.grid-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")") \ No newline at end of file diff --git a/pages/genre/genre.styl b/pages/genre/genre.styl deleted file mode 100644 index 421e1ea3..00000000 --- a/pages/genre/genre.styl +++ /dev/null @@ -1,28 +0,0 @@ -.grid - display flex - flex-flow row wrap - float none !important - justify-content center - -.grid-cell - margin 0.5em - flex-grow 0 - flex-shrink 0 - -.grid-cell-content - width 16vw - height 9vw - min-width 90px - min-height 127px - max-width 200px - max-height 282px - -.grid-cell-image - object-fit cover - -.grid-cell-text - display flex - flex-flow column - align-items center - justify-content center - padding 0.75em \ No newline at end of file diff --git a/pages/genres/genres.pixy b/pages/genres/genres.pixy index c82c642a..988775d1 100644 --- a/pages/genres/genres.pixy +++ b/pages/genres/genres.pixy @@ -1,9 +1,9 @@ component Genres - h2.genre-header Genres + h2 Genres .grid each genre in arn.Genres - a.grid-cell.light-button.ajax(href="/genres/" + arn.FixGenre(genre)) - .genre.grid-cell-content.grid-cell-text - Icon(arn.GetGenreIcon(genre)) + a.grid-cell.ajax(href="/genres/" + arn.FixGenre(genre)) + .grid-text + GridIcon(arn.GetGenreIcon(genre)) span= genre \ No newline at end of file diff --git a/pages/genres/genres.styl b/pages/genres/genres.styl deleted file mode 100644 index aea02203..00000000 --- a/pages/genres/genres.styl +++ /dev/null @@ -1,9 +0,0 @@ -.genre-header - text-align center - -.genre - font-size 1rem - .fa - font-size 2rem - margin-right 0 - margin-bottom 1rem \ No newline at end of file diff --git a/styles/colors.styl b/styles/colors.styl index 21e35499..0092f888 100644 --- a/styles/colors.styl +++ b/styles/colors.styl @@ -1,5 +1,5 @@ html, body - color rgb(60, 60, 60) + color textColor background-color rgb(254, 254, 254) a diff --git a/styles/config.styl b/styles/config.styl index 6da3e4c6..7fec8a66 100644 --- a/styles/config.styl +++ b/styles/config.styl @@ -1,8 +1,13 @@ +textColor = rgb(60, 60, 60) mainColor = rgb(248, 165, 130) hoverColor = darken(mainColor, 10%) linkColor = darken(mainColor, 15%) linkHoverColor = darken(hoverColor, 20%) activeLinkColor = rgb(100, 149, 237) uiBorder = 1px solid rgba(0, 0, 0, 0.1) -uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%) -uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.03) 100%) \ No newline at end of file +uiHoverBorder = 1px solid rgba(0, 0, 0, 0.15) +uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%) +uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%) +outlineShadowLight = 0 0 6px rgba(0, 0, 0, 0.05) +outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15) +outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4) \ No newline at end of file diff --git a/styles/forum.styl b/styles/forum.styl index 9b665e70..f6afaf1c 100644 --- a/styles/forum.styl +++ b/styles/forum.styl @@ -116,7 +116,7 @@ .thread-title width auto - + .posts width 100% max-width 830px diff --git a/styles/grid.styl b/styles/grid.styl new file mode 100644 index 00000000..8ca555cf --- /dev/null +++ b/styles/grid.styl @@ -0,0 +1,59 @@ +.grid + display flex + flex-flow row wrap + justify-content center + float none !important + +.grid-cell + flex-grow 0 + flex-shrink 0 + + width 16vw + height 9vw + min-width 90px + min-height 127px + max-width 200px + max-height 282px + border-radius 3px + background-size cover + background-position 50% 50% + + margin 0.5rem + border uiBorder + background uiBackground + + &:hover + border uiHoverBorder + background uiHoverBackground + box-shadow outlineShadowMedium + transform scale(1.04) + // .grid-icon + // transform scale(1.3) + +.grid-anime + border none + &:hover + border none + +.grid-text + width 100% + height 100% + display flex + flex-flow column + align-items center + justify-content center + font-size 1rem + color rgb(160, 160, 160) + +.grid-icon + font-size 2.5rem + margin-top 2rem + margin-bottom 0.7rem + color linkColor + transition transform 200ms ease-in-out + +.grid-image + width 100% + height 100% + margin 0 + object-fit cover \ No newline at end of file diff --git a/styles/headers.styl b/styles/headers.styl index b4551da0..e025c4b0 100644 --- a/styles/headers.styl +++ b/styles/headers.styl @@ -7,6 +7,7 @@ h2 font-size 2em line-height 1.5em font-weight bold + text-align center width 100% &:first-of-type margin-top 0 diff --git a/styles/user.styl b/styles/user.styl index 5f526fb5..8088fff1 100644 --- a/styles/user.styl +++ b/styles/user.styl @@ -14,7 +14,7 @@ avatarSize = 50px margin 0.2em &:hover .user-image - box-shadow 0 0 8px rgb(0, 0, 0) + box-shadow outlineShadowHeavy .user-image opacity 0