Reverted forum style, used for genres now

This commit is contained in:
Eduard Urbach 2016-11-20 03:02:33 +09:00
parent e17f377dc6
commit 9794a09f12
17 changed files with 127 additions and 70 deletions

View File

@ -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)

View File

@ -1,2 +1,5 @@
component Icon(name string)
i(class="fa fa-fw fa-" + name)
component GridIcon(name string)
span(class="fa fa-" + name + " grid-icon")

View File

@ -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))
}

View File

@ -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

View File

@ -1,3 +1,6 @@
.forum-header
text-align left
.forum-tags
text-align left
margin-bottom 1.5rem

11
pages/forums/forums.go Normal file
View File

@ -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)
}

26
pages/forums/forums.pixy Normal file
View File

@ -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

View File

@ -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) + ")")
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) + ")")

View File

@ -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

View File

@ -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

View File

@ -1,9 +0,0 @@
.genre-header
text-align center
.genre
font-size 1rem
.fa
font-size 2rem
margin-right 0
margin-bottom 1rem

View File

@ -1,5 +1,5 @@
html, body
color rgb(60, 60, 60)
color textColor
background-color rgb(254, 254, 254)
a

View File

@ -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%)
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)

59
styles/grid.styl Normal file
View File

@ -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

View File

@ -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

View File

@ -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