From b858b29b7cdabf7ec88749d351e827a51bcfae45 Mon Sep 17 00:00:00 2001 From: flashwave Date: Sat, 12 Nov 2016 19:49:38 +0100 Subject: [PATCH] we did it reddit --- resources/assets/less/yuuno/bem/comment.less | 118 +++++++ .../assets/less/yuuno/bem/forum-list.less | 5 + resources/assets/less/yuuno/bem/input.less | 24 +- resources/assets/less/yuuno/bem/post.less | 106 +++++++ resources/assets/less/yuuno/bem/topic.less | 3 +- resources/assets/less/yuuno/legacy.less | 300 ------------------ resources/assets/less/yuuno/main.less | 2 + resources/views/yuuno/elements/comment.twig | 62 ++-- resources/views/yuuno/elements/comments.twig | 26 +- .../views/yuuno/forum/elements/forumBtns.twig | 5 +- resources/views/yuuno/forum/topic.twig | 150 +++++---- 11 files changed, 392 insertions(+), 409 deletions(-) create mode 100644 resources/assets/less/yuuno/bem/comment.less create mode 100644 resources/assets/less/yuuno/bem/post.less delete mode 100644 resources/assets/less/yuuno/legacy.less diff --git a/resources/assets/less/yuuno/bem/comment.less b/resources/assets/less/yuuno/bem/comment.less new file mode 100644 index 0000000..7339569 --- /dev/null +++ b/resources/assets/less/yuuno/bem/comment.less @@ -0,0 +1,118 @@ +.comment-container { + list-style: none; +} + +.comments { + overflow: auto; +} + +.comment { + display: flex; + align-items: stretch; + font-family: "Open Sans", sans-serif; + + &__avatar { + width: 40px; + height: 40px; + display: inline-flex; + justify-content: center; + align-items: center; + font-size: 0; + text-decoration: none !important; + font-weight: bold; + margin: 4px 2px; + transition: font-size .1s; + + &:hover { + color: inherit; + font-size: 1em; + } + + &--big { + width: 50px; + height: 50px; + } + } + + &__pointer { + width: 0; + height: 0; + border-style: solid; + border-width: 0 15px 15px 0; + border-color: transparent #f6f6f6 transparent transparent; + margin-top: 10px; + } + + &__content { + border-radius: 5px; + border: 0; + min-height: 50px; + flex-grow: 2; + padding: 5px; + margin: 2px; + margin-left: 0; + background: #f6f6f6; + + &--create { + border-radius: 5px 0 0 5px; + margin-right: 0; + } + + &:not(.comment__content--create) { + background: linear-gradient(270deg, #c6c6c6 0, #f6f6f6 50px); + } + } + + &__controls { + float: right; + display: inline-flex; + align-items: center; + z-index: 2; + } + + &__control { + margin: 0 5px; + cursor: pointer; + + &--vote { + font-size: 1.5em; + + &-up { + color: #0A0; + } + + &-down { + color: #C00; + } + } + } + + &__submit { + flex-shrink: 0; + font-family: FontAwesome; + width: 50px; + border: 0; + border-radius: 0 5px 5px 0; + margin: 2px; + margin-left: 0; + font-size: 2em; + background: linear-gradient(90deg, #f6f6f6 0%, #c6c6c6 100%); + cursor: pointer; + + &--new { + width: 60px; + } + + &:hover { + background: linear-gradient(90deg, #f6f6f6 0%, #d6d6d6 100%); + } + + &:active { + background: linear-gradient(90deg, #f6f6f6 0%, #b6b6b6 100%); + } + } + + &__replies { + margin-left: 40px; + } +} diff --git a/resources/assets/less/yuuno/bem/forum-list.less b/resources/assets/less/yuuno/bem/forum-list.less index 101d05a..c856b03 100644 --- a/resources/assets/less/yuuno/bem/forum-list.less +++ b/resources/assets/less/yuuno/bem/forum-list.less @@ -13,4 +13,9 @@ color: inherit !important; } } + + &__buttons { + display: flex; + justify-content: space-between; + } } diff --git a/resources/assets/less/yuuno/bem/input.less b/resources/assets/less/yuuno/bem/input.less index e3f98ce..6bf8245 100644 --- a/resources/assets/less/yuuno/bem/input.less +++ b/resources/assets/less/yuuno/bem/input.less @@ -14,9 +14,9 @@ text-decoration: none !important; &--disabled { - background: linear-gradient(180deg, #858585 0%, #858585 50%, #787878 50%) #858585 !important; - box-shadow: inset #222 0 0 1px !important; - text-shadow: #888 0 0 2px !important; + background: linear-gradient(0deg, #787878 10%, #858585 90%) #858585 !important; + color: #444 !important; + cursor: not-allowed; } &--current { @@ -36,14 +36,20 @@ } } - &:hover { - color: #306; - background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%); + &--frozen { + color: #306 !important; } - &:active { - color: #306; - background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%); + &:not(.input__button--frozen) { + &:hover { + color: #306; + background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%); + } + + &:active { + color: #306; + background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%); + } } } diff --git a/resources/assets/less/yuuno/bem/post.less b/resources/assets/less/yuuno/bem/post.less new file mode 100644 index 0000000..0876195 --- /dev/null +++ b/resources/assets/less/yuuno/bem/post.less @@ -0,0 +1,106 @@ +.post { + display: flex; + word-wrap: break-word; + border-top: 1px solid #9475B2; + + &:first-child { + border-top: 0; + } + + &__details { + text-align: center; + width: 200px; + background: linear-gradient(270deg, transparent, #C2AFFE); + display: flex; + flex-direction: column; + flex-shrink: 0; + + @media (max-width: 768px) { + width: 120px; + } + } + + &__user { + padding: 6px 2px; + flex-grow: 1; + } + + &__avatar { + width: 150px; + height: 150px; + margin: 5px auto; + + &--online { + box-shadow: 0 3px 7px #484; + } + + @media (max-width: 768px) { + width: 100px; + height: 100px; + } + } + + &__username { + font-family: "Open Sans", sans-serif; + font-size: 1.5em; + + &--deleted { + font-style: italic; + } + } + + &__usertitle { + font-size: 0.8em; + } + + &__actions { + font-size: 2em; + line-height: 2em; + } + + &__action { + color: #8364A1; + text-decoration: none !important; + text-shadow: 0 0 2px #9475B2; + transition: color .2s, text-shadow .2s; + + &:hover { + text-shadow: 0 0 6px #9475B2; + } + + &:active { + color: #725390; + text-shadow: 0 0 8px #8364A1; + } + } + + &__contents { + font-size: 11px; + line-height: 14px; + flex-grow: 1; + } + + &__info { + border-bottom: 1px solid #B19EED; + color: #222; + display: flex; + justify-content: space-between; + line-height: 16px; + } + + &__title, + &__date { + color: inherit !important; + text-decoration: none !important; + } + + &__signature { + border-top: 1px solid #B19EED; + padding: 2px 0; + margin-top: 20px; + display: block; + width: 100%; + max-height: 200px; + overflow: auto; + } +} diff --git a/resources/assets/less/yuuno/bem/topic.less b/resources/assets/less/yuuno/bem/topic.less index 91d1324..ff7a572 100644 --- a/resources/assets/less/yuuno/bem/topic.less +++ b/resources/assets/less/yuuno/bem/topic.less @@ -33,13 +33,14 @@ &__stats { text-align: center; + padding: 0 10px; + min-width: 50px; } &__stat { font-size: 0.8em; color: #555; line-height: 1em; - padding: 0 10px; &--big { font-size: 1.3em; diff --git a/resources/assets/less/yuuno/legacy.less b/resources/assets/less/yuuno/legacy.less deleted file mode 100644 index e35689d..0000000 --- a/resources/assets/less/yuuno/legacy.less +++ /dev/null @@ -1,300 +0,0 @@ -/* - * Forum Styling - */ -.forum.viewtopic .posts { - width: 100%; - border-spacing: 0; - table-layout: fixed; - word-break: break-word; -} - -.forum.viewtopic .posts td { - vertical-align: top; - word-wrap: break-word; -} - -.forum.viewtopic .posts tr:not(:last-child) td { - border-bottom: 1px solid #9475B2; -} - -.forum.viewtopic .posts .userpanel { - width: 200px; - text-align: center; - background: linear-gradient(270deg, transparent, #C2AFFE); - padding-bottom: 6px; -} - -.forum.viewtopic .posts .userpanel .username { - font: 1.5em/1.7em "Open Sans", sans-serif; - text-shadow: 0 0 7px #888; padding: 0 0 2px; - display: inline-block; -} - -.forum.viewtopic .posts .userpanel .avatar { - max-width: 150px; - max-height: 150px; - border: 3px solid #EEE; - background: #EEE; - box-shadow: 0 3px 7px #888; - border-radius: 3px; - display: block; - margin: 0 auto 10px; -} - -.forum.viewtopic .posts .userpanel .usertitle { - font-size: .8em; - line-height: 1.5em; -} - -.forum.viewtopic .posts .userpanel .actions { - font-size: 2em; - line-height: 1.4em; -} - -.forum.viewtopic .posts .userpanel .actions a { - color: #8364A1; - text-decoration: none; - text-shadow: 0 0 2px #9475B2; - transition: all .2s; -} - -.forum.viewtopic .posts .userpanel .actions a:hover { - text-shadow: 0 0 6px #9475B2; -} - -.forum.viewtopic .posts .userpanel .actions a:active { - color: #725390; - text-shadow: 0 0 8px #8364A1; -} - -.forum.viewtopic .posts .post-content { - font-size: .9em; -} - -.forum.viewtopic .posts .post-content .details { - border-bottom: 1px solid #B19EED; - color: #222; -} - -.forum.viewtopic .posts .post-content .details .subject { - float: left; -} - -.forum.viewtopic .posts .post-content .details .date { - float: right; -} - -.forum.viewtopic .posts .post-content .signature { - border-top: 1px solid #B19EED; - padding-top: 2px; - margin-top: 20px; - display: block; - width: 100%; - max-height: 200px; - overflow: auto; -} - -.forum.viewtopic .posts .post-content .signature img { - vertical-align: middle; -} - -.posting-subject { - padding: 3px 0 2px; -} - -.posting-bbcodes { - padding: 4px 0 2px; -} - -.posting-bbcode-description { - font: .9em/1.2em "Open Sans", sans-serif; - padding: 2px 0 3px; -} - -.posting-text { - padding: 2px 0 0; - margin: 0 0 -1px; -} - -.posting-emotes { - text-align: center; - padding: 10px 0; -} - -.posting-emotes img { - vertical-align: middle; - cursor: pointer; - margin: 0 3px; -} - -.posting-text textarea { - min-height: 200px; -} - -.posting-options > div { - float: left; - padding: 10px 10px 0; -} - -.posting-buttons { - text-align: center; -} - -.forum .buttonRow .leftSide { - float: left; -} - -.forum .buttonRow .rightSide { - float: right; -} - -/* - * Comments - */ -#comments .comment-input-section { - border-bottom: 1px solid #9475B2; -} - -#comments .comment { - display: flex; - align-items: stretch; - margin-bottom: 3px; -} - -#comments .comments-discussion .comment { - margin-top: 3px; -} - -#comments .comment > .comment-avatar { - height: 60px; - width: 60px; - background: rgba(0, 0, 0, .2) url("/images/pixel.png") no-repeat scroll left center / contain; - flex-shrink: 0; - margin-right: 2px; - border-radius: 4px; - border: 0; - display: block; - text-align: center; - word-wrap: break-word; - transition: .2s; -} - -#comments .comment > .comment-avatar:hover { - background-color: transparent; -} - -#comments .comment > .comment-avatar > span { - opacity: 0; - transition: .2s; -} - -#comments .comment > .comment-avatar:hover > span { - opacity: 1; -} - -#comments .comment > .comment-pointer { - width: 0; - height: 0; - border-style: solid; - border-width: 0 15px 15px 0; - border-color: transparent #F6F6F6 transparent transparent; - margin-top: 10px; -} - -#comments .comment > .comment-content { - border-radius: 5px; - border: 0; - min-height: 50px; - min-width: 300px; - flex-grow: 2; - padding: 5px; - font: 12px/20px "Open Sans", sans-serif; - background: #F6F6F6; -} - -#comments .comment > textarea.comment-content { - height: 50px; -} - -#comments .comment > .comment-content > .comment-controls { - float: right; -} - -#comments .comment > .comment-content > .comment-controls > ul > li { - float: left; - margin: 0 5px; - opacity: 0; - transition: .5s; -} - -#comments .comment > .comment-content:hover > .comment-controls > ul > li, -#comments .comment > .comment-content > .comment-controls > ul > li.shown { - opacity: 1; -} - -#comments .comment > .comment-content > .comment-controls > ul > li.voting { - font-size: 1.5em; -} - -#comments .comment > .comment-content > .comment-controls > ul > li.like { - color: #0A0; -} - -#comments .comment > .comment-content > .comment-controls > ul > li.dislike { - color: #C00; -} - -#comments .comment > .comment-submit { - flex-shrink: 0; - font-family: FontAwesome; - width: 50px; - border-radius: 4px; - margin-left: 2px; - font-size: 2em; - background: linear-gradient(0deg, #9475B2 10%, #C2AFFE 90%); - color: #306; - border: 1px solid #9475B2; - cursor: pointer; -} - -#comments .comment > .comment-submit.new { - width: 60px; -} - -#comments .comment > .comment-submit:hover { - background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%); -} - -#comments .comment > .comment-submit:active { - background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%); -} - -#comments .comments-discussion { - overflow: auto; -} - -#comments ul { - list-style: none; -} - -#comments .comments-list > li > ul, -#comments .comments-list > li > ul > li > ul, -#comments .comments-list > li > ul > li > ul > li > ul, -#comments .comments-list > li > ul > li > ul > li > ul > li > ul { - margin-left: 40px; -} - -#comments ul > li > ul .comment > .comment-avatar { - height: 50px; - width: 50px; - font-size: .9em; - line-height: 1.1em; -} - -#comments ul > li > ul .comment > .comment-content { - min-height: 40px; -} - -#comments ul > li > ul .comment > textarea.comment-content { - height: 40px; -} diff --git a/resources/assets/less/yuuno/main.less b/resources/assets/less/yuuno/main.less index 67d03bf..e1b22c5 100644 --- a/resources/assets/less/yuuno/main.less +++ b/resources/assets/less/yuuno/main.less @@ -12,6 +12,7 @@ @import "bem/banned"; @import "bem/bbcode"; @import "bem/busy"; +@import "bem/comment"; @import "bem/container"; @import "bem/content"; @import "bem/dialogue"; @@ -26,6 +27,7 @@ @import "bem/link"; @import "bem/members"; @import "bem/news"; +@import "bem/post"; @import "bem/profile"; @import "bem/settings"; @import "bem/sidepanel-table"; diff --git a/resources/views/yuuno/elements/comment.twig b/resources/views/yuuno/elements/comment.twig index a18a328..b8db7bb 100644 --- a/resources/views/yuuno/elements/comment.twig +++ b/resources/views/yuuno/elements/comment.twig @@ -1,29 +1,35 @@ -
  • -
    - {{ comment.userData.username }} -
    -
    -
    - -
    -
    -
    - {{ comment.parsed|raw|nl2br }} -
    -
    +
  • +
    + + + {{ comment.userData.username }} + + +
    +
    +
    + {% if comment.userData.id == user.id %} +
    + {% endif %} +
    +
    + + {{ comment.upvotes }}
    -
      - {% for comment in comment.replies %} - {% include 'elements/comment.twig' %} - {% endfor %} -
    -
    • +
    + + {{ comment.downvotes }} +
    + +
    + {{ comment.parsed|raw|nl2br }} +
    + + + + diff --git a/resources/views/yuuno/elements/comments.twig b/resources/views/yuuno/elements/comments.twig index 4e6dfbc..240595b 100644 --- a/resources/views/yuuno/elements/comments.twig +++ b/resources/views/yuuno/elements/comments.twig @@ -2,19 +2,31 @@
    {% if user.isActive %}
    -
    -
    - - +
    + + {{ user.username }} + +
    +
    + +
    {% else %}

    Log in to comment!

    {% endif %}
    -
    -