Reverted forum style, used for genres now
This commit is contained in:
parent
e17f377dc6
commit
9794a09f12
3
main.go
3
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)
|
||||
|
||||
|
@ -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")
|
@ -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))
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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
11
pages/forums/forums.go
Normal 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
26
pages/forums/forums.pixy
Normal 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
|
@ -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) + ")")
|
@ -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
|
@ -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
|
@ -1,9 +0,0 @@
|
||||
.genre-header
|
||||
text-align center
|
||||
|
||||
.genre
|
||||
font-size 1rem
|
||||
.fa
|
||||
font-size 2rem
|
||||
margin-right 0
|
||||
margin-bottom 1rem
|
@ -1,5 +1,5 @@
|
||||
html, body
|
||||
color rgb(60, 60, 60)
|
||||
color textColor
|
||||
background-color rgb(254, 254, 254)
|
||||
|
||||
a
|
||||
|
@ -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
59
styles/grid.styl
Normal 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
|
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user