Improved forum
This commit is contained in:
parent
0a099bca72
commit
37a9b2d020
@ -7,6 +7,6 @@ component Avatar(user *arn.User)
|
|||||||
img.user-image(src=user.Avatar, alt=user.Nick)
|
img.user-image(src=user.Avatar, alt=user.Nick)
|
||||||
else
|
else
|
||||||
svg.user-image(width="50", height="50")
|
svg.user-image(width="50", height="50")
|
||||||
circle.head(cx="25", cy="19", r="10", fill="rgb(32, 32, 32)")
|
circle.head(cx="25", cy="19", r="10")
|
||||||
circle.body(cx="25", cy="50", r="20")
|
circle.body(cx="25", cy="50", r="20")
|
||||||
//- text(x="25", y="44", text-anchor="middle") TODO
|
//- text(x="25", y="44", text-anchor="middle") TODO
|
||||||
@ -14,7 +14,6 @@ component ThreadLink(thread *arn.Thread)
|
|||||||
if thread.Sticky
|
if thread.Sticky
|
||||||
i.fa.fa-thumb-tack.fa-fw.thread-icon
|
i.fa.fa-thumb-tack.fa-fw.thread-icon
|
||||||
a.thread-title.ajax(href="/threads/" + thread.ID)= thread.Title
|
a.thread-title.ajax(href="/threads/" + thread.ID)= thread.Title
|
||||||
//- .thread-icons
|
.thread-reply-count= thread.Replies
|
||||||
//- each icon in thread.Icons
|
.thread-icons
|
||||||
//- i(class='fa fa-' + icon + ' fa-fw thread-icon')
|
Icon(arn.GetForumIcon(thread.Tags[0]))
|
||||||
//- .thread-reply-count= 25
|
|
||||||
@ -10,15 +10,19 @@
|
|||||||
flex-flow row
|
flex-flow row
|
||||||
width 100%
|
width 100%
|
||||||
|
|
||||||
.thread-icons
|
|
||||||
.thread-reply-count
|
.thread-reply-count
|
||||||
flex 1
|
.thread-icons
|
||||||
text-align right
|
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
|
text-align right
|
||||||
|
position relative
|
||||||
|
|
||||||
.thread-reply-count
|
.thread-reply-count
|
||||||
&:after
|
font-size 0.8rem
|
||||||
content " replies"
|
flex 1
|
||||||
|
margin 0 1rem
|
||||||
|
|
||||||
|
.thread-icons
|
||||||
|
flex 0
|
||||||
|
|
||||||
.thread-content-container
|
.thread-content-container
|
||||||
display flex
|
display flex
|
||||||
@ -36,5 +40,5 @@
|
|||||||
&:hover
|
&:hover
|
||||||
color linkHoverColor !important
|
color linkHoverColor !important
|
||||||
|
|
||||||
.thread-icon
|
// .thread-icon
|
||||||
font-size 0.9em
|
// font-size 0.9em
|
||||||
@ -8,8 +8,18 @@ uiBorder = 1px solid rgba(0, 0, 0, 0.1)
|
|||||||
uiHoverBorder = 1px solid rgba(0, 0, 0, 0.15)
|
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%)
|
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%)
|
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)
|
outlineShadowLight = 0 0 6px alpha(black, 0.05)
|
||||||
outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15)
|
outlineShadowMedium = 0 0 6px alpha(black, 0.13)
|
||||||
outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4)
|
outlineShadowHeavy = 0 0 6px alpha(black, 0.6)
|
||||||
transitionSpeed = 290ms
|
transitionSpeed = 290ms
|
||||||
fadeSpeed = 200ms
|
fadeSpeed = 200ms
|
||||||
|
|
||||||
|
uiElement()
|
||||||
|
border uiBorder
|
||||||
|
background uiBackground
|
||||||
|
transition all transitionSpeed ease
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
border uiHoverBorder
|
||||||
|
background uiHoverBackground
|
||||||
|
box-shadow outlineShadowMedium
|
||||||
@ -74,17 +74,15 @@
|
|||||||
color rgb(255, 32, 12) !important
|
color rgb(255, 32, 12) !important
|
||||||
|
|
||||||
.post-content
|
.post-content
|
||||||
|
uiElement()
|
||||||
text-align left
|
text-align left
|
||||||
flex-grow 1
|
flex-grow 1
|
||||||
padding 0.4rem 1rem
|
padding 0.4rem 1rem
|
||||||
margin-left 0.3rem
|
margin-left 0.3rem
|
||||||
background uiBackground
|
|
||||||
border uiBorder
|
|
||||||
border-radius 3px
|
border-radius 3px
|
||||||
position relative
|
position relative
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background uiHoverBackground
|
|
||||||
.post-toolbar
|
.post-toolbar
|
||||||
opacity 1
|
opacity 1
|
||||||
|
|
||||||
|
|||||||
@ -5,6 +5,8 @@
|
|||||||
float none !important
|
float none !important
|
||||||
|
|
||||||
.grid-cell
|
.grid-cell
|
||||||
|
uiElement()
|
||||||
|
|
||||||
flex-grow 0
|
flex-grow 0
|
||||||
flex-shrink 0
|
flex-shrink 0
|
||||||
|
|
||||||
@ -19,13 +21,8 @@
|
|||||||
background-position 50% 50%
|
background-position 50% 50%
|
||||||
|
|
||||||
margin 0.5rem
|
margin 0.5rem
|
||||||
border uiBorder
|
|
||||||
background uiBackground
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
border uiHoverBorder
|
|
||||||
background uiHoverBackground
|
|
||||||
box-shadow outlineShadowMedium
|
|
||||||
transform scale(1.03)
|
transform scale(1.03)
|
||||||
// .grid-icon
|
// .grid-icon
|
||||||
// transform scale(1.3)
|
// transform scale(1.3)
|
||||||
|
|||||||
@ -5,7 +5,7 @@ size = 24px
|
|||||||
display block
|
display block
|
||||||
position fixed
|
position fixed
|
||||||
bottom 1.15rem
|
bottom 1.15rem
|
||||||
right calc(1.15rem + 17px)
|
right 1.15rem
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
.sk-cube-grid
|
.sk-cube-grid
|
||||||
|
|||||||
@ -26,8 +26,8 @@ avatarSize = 50px
|
|||||||
object-fit cover
|
object-fit cover
|
||||||
|
|
||||||
svg.user-image
|
svg.user-image
|
||||||
circle.body
|
circle.body, circle.head
|
||||||
fill rgb(60, 60, 60)
|
fill textColor
|
||||||
text
|
text
|
||||||
fill white
|
fill white
|
||||||
font-size 0.65rem
|
font-size 0.65rem
|
||||||
Loading…
Reference in New Issue
Block a user