Use available space for post interaction buttons

Related: https://github.com/friendica/friendica/issues/12835
This commit is contained in:
Damian Wajer 2023-02-22 16:27:27 +01:00
parent 6870ccc00e
commit bc65ea9693
2 changed files with 137 additions and 122 deletions

View File

@ -1994,6 +1994,18 @@ code > .hl-main {
.wall-item-actions-right { .wall-item-actions-right {
display: flex; display: flex;
} }
.wall-item-actions-items {
flex-grow: 1;
}
.wall-item-actions-row {
display: flex;
}
.wall-item-actions-row .btn {
width: 100%;
}
.wall-item-actions-row > * {
flex: 1 1 0;
}
.wall-item-actions .checkbox { .wall-item-actions .checkbox {
margin: 0 0 0 15px; margin: 0 0 0 15px;
} }
@ -2001,14 +2013,17 @@ code > .hl-main {
.wall-item-actions .btn, .wall-item-actions .btn,
.wall-item-actions a, .wall-item-actions a,
.wall-item-actions button { .wall-item-actions button {
padding-right: 12px; padding-right: 0;
padding-left: 12px; padding-left: 0;
} }
.wall-item-actions .checkbox { .wall-item-actions .checkbox {
margin-top: 8px; margin-top: 8px;
flex: 0 1 auto;
} }
.wall-item-actions .like-rotator { .wall-item-actions .like-rotator {
padding-top: 8px; position: absolute;
top: 8px;
right: 0;
} }
} }
.wall-item-actions button:hover { .wall-item-actions button:hover {

View File

@ -436,7 +436,8 @@ as the value of $top_child_total (this is done at the end of this file)
</span> </span>
</span> </span>
<div class="btn-toolbar btn-group visible-xs" role="group"> <div class="wall-item-actions-items btn-toolbar btn-group visible-xs" role="group">
<div class="wall-item-actions-row">
{{* Buttons for like and dislike *}} {{* Buttons for like and dislike *}}
{{if $item.vote}} {{if $item.vote}}
{{if $item.vote.like}} {{if $item.vote.like}}
@ -488,9 +489,7 @@ as the value of $top_child_total (this is done at the end of this file)
{{* Put additional actions in a dropdown menu *}} {{* Put additional actions in a dropdown menu *}}
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" /> <img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
</div>
<div class="wall-item-actions-right visible-xs">
{{* Event attendance buttons *}} {{* Event attendance buttons *}}
{{if $item.isevent}} {{if $item.isevent}}
<div class="btn-group" role="group"> <div class="btn-group" role="group">
@ -577,6 +576,7 @@ as the value of $top_child_total (this is done at the end of this file)
{{/if}} {{/if}}
</span> </span>
</div> </div>
</div>
</div><!--./wall-item-actions--> </div><!--./wall-item-actions-->
<div class="wall-item-links"></div> <div class="wall-item-links"></div>