From 37a9b2d020c0116cf7223533e82c584470b28669 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Sun, 20 Nov 2016 04:07:10 +0900 Subject: [PATCH] Improved forum --- mixins/Avatar.pixy | 2 +- pages/forum/forum.pixy | 7 +++---- pages/forum/forum.styl | 18 +++++++++++------- styles/config.styl | 18 ++++++++++++++---- styles/forum.styl | 4 +--- styles/grid.styl | 7 ++----- styles/loading.styl | 2 +- styles/user.styl | 4 ++-- 8 files changed, 35 insertions(+), 27 deletions(-) diff --git a/mixins/Avatar.pixy b/mixins/Avatar.pixy index 8be88841..879ff6b0 100644 --- a/mixins/Avatar.pixy +++ b/mixins/Avatar.pixy @@ -7,6 +7,6 @@ component Avatar(user *arn.User) img.user-image(src=user.Avatar, alt=user.Nick) else 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") //- text(x="25", y="44", text-anchor="middle") TODO \ No newline at end of file diff --git a/pages/forum/forum.pixy b/pages/forum/forum.pixy index c984f060..1989dbc6 100644 --- a/pages/forum/forum.pixy +++ b/pages/forum/forum.pixy @@ -14,7 +14,6 @@ component ThreadLink(thread *arn.Thread) if thread.Sticky i.fa.fa-thumb-tack.fa-fw.thread-icon a.thread-title.ajax(href="/threads/" + thread.ID)= thread.Title - //- .thread-icons - //- each icon in thread.Icons - //- i(class='fa fa-' + icon + ' fa-fw thread-icon') - //- .thread-reply-count= 25 \ No newline at end of file + .thread-reply-count= thread.Replies + .thread-icons + Icon(arn.GetForumIcon(thread.Tags[0])) \ No newline at end of file diff --git a/pages/forum/forum.styl b/pages/forum/forum.styl index 738dd3da..995cd58b 100644 --- a/pages/forum/forum.styl +++ b/pages/forum/forum.styl @@ -10,15 +10,19 @@ flex-flow row width 100% -.thread-icons .thread-reply-count - flex 1 - text-align right +.thread-icons opacity 0.5 + text-align right + position relative .thread-reply-count - &:after - content " replies" + font-size 0.8rem + flex 1 + margin 0 1rem + +.thread-icons + flex 0 .thread-content-container display flex @@ -36,5 +40,5 @@ &:hover color linkHoverColor !important -.thread-icon - font-size 0.9em \ No newline at end of file +// .thread-icon +// font-size 0.9em \ No newline at end of file diff --git a/styles/config.styl b/styles/config.styl index c797e1c0..d6d7639e 100644 --- a/styles/config.styl +++ b/styles/config.styl @@ -8,8 +8,18 @@ uiBorder = 1px solid rgba(0, 0, 0, 0.1) 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) +outlineShadowLight = 0 0 6px alpha(black, 0.05) +outlineShadowMedium = 0 0 6px alpha(black, 0.13) +outlineShadowHeavy = 0 0 6px alpha(black, 0.6) transitionSpeed = 290ms -fadeSpeed = 200ms \ No newline at end of file +fadeSpeed = 200ms + +uiElement() + border uiBorder + background uiBackground + transition all transitionSpeed ease + + &:hover + border uiHoverBorder + background uiHoverBackground + box-shadow outlineShadowMedium \ No newline at end of file diff --git a/styles/forum.styl b/styles/forum.styl index f6afaf1c..f040c386 100644 --- a/styles/forum.styl +++ b/styles/forum.styl @@ -74,17 +74,15 @@ color rgb(255, 32, 12) !important .post-content + uiElement() text-align left flex-grow 1 padding 0.4rem 1rem margin-left 0.3rem - background uiBackground - border uiBorder border-radius 3px position relative &:hover - background uiHoverBackground .post-toolbar opacity 1 diff --git a/styles/grid.styl b/styles/grid.styl index 5595c1dd..37b14608 100644 --- a/styles/grid.styl +++ b/styles/grid.styl @@ -5,6 +5,8 @@ float none !important .grid-cell + uiElement() + flex-grow 0 flex-shrink 0 @@ -19,13 +21,8 @@ background-position 50% 50% margin 0.5rem - border uiBorder - background uiBackground &:hover - border uiHoverBorder - background uiHoverBackground - box-shadow outlineShadowMedium transform scale(1.03) // .grid-icon // transform scale(1.3) diff --git a/styles/loading.styl b/styles/loading.styl index 574142c3..b3e9a672 100644 --- a/styles/loading.styl +++ b/styles/loading.styl @@ -5,7 +5,7 @@ size = 24px display block position fixed bottom 1.15rem - right calc(1.15rem + 17px) + right 1.15rem pointer-events none .sk-cube-grid diff --git a/styles/user.styl b/styles/user.styl index 8088fff1..e93b640d 100644 --- a/styles/user.styl +++ b/styles/user.styl @@ -26,8 +26,8 @@ avatarSize = 50px object-fit cover svg.user-image - circle.body - fill rgb(60, 60, 60) + circle.body, circle.head + fill textColor text fill white font-size 0.65rem \ No newline at end of file