Skip to content

Commit

Permalink
Merge pull request #11633 from nanaya/forum-stripe-restructure
Browse files Browse the repository at this point in the history
Restructure forum colour stripe
  • Loading branch information
notbakaneko authored Nov 13, 2024
2 parents 08e72f1 + 1992ad0 commit dbee1df
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 25 deletions.
52 changes: 29 additions & 23 deletions resources/css/bem/forum-item-stripe.less
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,24 @@
// See the LICENCE file in the repository root for full licence text.

.forum-item-stripe {
--width: 7px;
--width-desktop: 9px;
--arrow-opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 10px;
padding-right: 5px;
height: 100%;
overflow: hidden;
inset: 0 auto 0 0;
padding-right: @border-radius-base;
width: var(--width);
.center-content();
color: transparent;
transition: @forum-item-animate;
background-color: inherit;

&::after {
content: "";
.full-size();
position: absolute;
inset: 0 0 0 auto;
width: @border-radius-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
background-color: var(--forum-item-background-color);
top: 0;
will-change: transform;
transition: @forum-item-animate;
left: 3px;

@media @desktop {
left: 5px;
}
background-color: inherit;
}

&::before {
Expand All @@ -37,15 +31,27 @@

.forum-item:hover &,
.forum-topic-entry:hover & {
--width-desktop: 24px;
--arrow-opacity: 1;
}

@media @desktop {
width: var(--width-desktop);
}

&__arrow {
.fas();
color: var(--forum-item-background-color-hover);
width: 25px;
position: relative;
opacity: var(--arrow-opacity);
display: none;

&::after {
background-color: var(--forum-item-background-color-hover);
&::before {
content: @fa-var-angle-right;
}

@media @desktop {
transform: translateX(15px);
}
@media @desktop {
display: block;
}
}
}
2 changes: 1 addition & 1 deletion resources/views/forum/forums/_forum.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
See the LICENCE file in the repository root for full licence text.
--}}
<li class="clickable-row forum-item">
<div class="forum-item-stripe"><span class="u-relative fas fa-angle-right"></span></div>
<div class="forum-item-stripe"><div class="forum-item-stripe__arrow"></div></div>

<div class="forum-item__details">
{!! link_to(
Expand Down
2 changes: 1 addition & 1 deletion resources/views/forum/forums/_topic.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ class="
"
data-topic-id="{{ $topic->topic_id }}"
>
<div class="forum-item-stripe"><span class="u-relative fas fa-angle-right"></span></div>
<div class="forum-item-stripe"><div class="forum-item-stripe__arrow"></div></div>

<div class="forum-topic-entry__col forum-topic-entry__col--icon">
@if (isset($topicReplyStatus[$topic->getKey()]))
Expand Down

0 comments on commit dbee1df

Please sign in to comment.