Merge pull request #12836 from damianwajer/post-interactions

[frio] Use all available space for post interaction buttons (mobile)
This commit is contained in:
Hypolite Petovan 2023-03-01 12:41:18 -05:00 committed by GitHub
commit 180b81c6e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 140 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}}
@ -478,19 +479,20 @@ as the value of $top_child_total (this is done at the end of this file)
</a> </a>
</li> </li>
{{/if}} {{/if}}
{{if $item.browsershare}}
<li role="menuitem">
<button type="button" class="btn-link button-browser-share" onclick="navigator.share({url: '{{$item.plink.orig}}'})" title="{{$item.browsershare.1}}">
<i class="fa fa-share-alt" aria-hidden="true"></i> {{$item.browsershare.0}}
</button>
</li>
{{/if}}
</ul> </ul>
</div> </div>
{{/if}} {{/if}}
{{if $item.browsershare}}
<button type="button" class="btn button-browser-share" onclick="navigator.share({url: '{{$item.plink.orig}}'})" title="{{$item.browsershare.1}}"><i class="fa fa-share-alt"></i></button>
{{/if}}
{{* 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 +579,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>