strk/friendica
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Added active response support to frost-mobile

Browse source 
- Added active class to wall_thread.tpl
- Added styles
- Fixed background-size declarations to be able to add padding to icons
This commit is contained in:
Hypolite Petovan 2016-09-25 10:29:59 -04:00 committed by Tobias Diekershoff
parent 065c12e652
commit b98f23dcd4
2 changed files with 38 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
view/theme/frost-mobile/style.css
View file

@ -1549,8 +1549,16 @@ input#dfrn-url {
background-repeat: repeat-x;*/ background-repeat: repeat-x;*/
padding: 5px 5px 0px; padding: 5px 5px 0px;
height: 32px; height: 32px;
} }
.wall-item-tools a {
border-radius: 8px;
padding: 2px;
background-position: center;
}
.wall-item-tools a.active {
background-color: rgba(59, 101, 164, 0.5);
}
.wall-item-author { .wall-item-author {
/* margin-top: 10px;*/ /* margin-top: 10px;*/
margin-top: 0px; margin-top: 0px;
@ -3896,7 +3904,7 @@ aside input[type='text'] {
.icon.like { .icon.like {
display: block; width: 26px; height: 28px;/*31 33*/ display: block; width: 26px; height: 28px;/*31 33*/
margin-right: 7px; margin-right: 7px;
background-size: 100% 100%; background-size: 26px 28px;
background-image: url('images/approve.png'); background-image: url('images/approve.png');
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
@ -3904,7 +3912,7 @@ aside input[type='text'] {
.icon.link { .icon.link {
display: block; width: 22px; height: 24px; display: block; width: 22px; height: 24px;
background-size: 100% 100%; background-size: 22px 24px;
background-image: url('images/link.png'); background-image: url('images/link.png');
background-repeat: no-repeat; background-repeat: no-repeat;
@ -3913,14 +3921,14 @@ aside input[type='text'] {
/*.globe { background-position: 0px -16px;}*/ /*.globe { background-position: 0px -16px;}*/
.icon.globe { .icon.globe {
display: block; width: 28px; height: 28px; display: block; width: 28px; height: 28px;
background-size: 100% 100%; background-size: 28px 28px;
background-image: url('images/globe.png'); background-image: url('images/globe.png');
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/*.noglobe { background-position: -16px -16px;}*/ /*.noglobe { background-position: -16px -16px;}*/
.icon.noglobe { .icon.noglobe {
display: block; width: 24px; height: 24px; display: block; width: 24px; height: 24px;
background-size: 100% 100%; background-size: 24px 24px;
background-image: url('images/noglobe.png'); background-image: url('images/noglobe.png');
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -3931,14 +3939,14 @@ aside input[type='text'] {
.small-pencil { background-position: -96px -16px;}*/ .small-pencil { background-position: -96px -16px;}*/
.icon.pencil { .icon.pencil {
display: block; width: 28px; height: 28px; display: block; width: 28px; height: 28px;
background-size: 100% 100%; background-size: 28px 28px;
background-image: url('images/pencil.png'); background-image: url('images/pencil.png');
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
} }
.icon.small-pencil { .icon.small-pencil {
display: block; width: 28px; height: 28px; display: block; width: 28px; height: 28px;
background-size: 100% 100%; background-size: 28px 28px;
background-image: url('images/pencil.png'); background-image: url('images/pencil.png');
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
@ -3947,7 +3955,7 @@ aside input[type='text'] {
.icon.recycle { .icon.recycle {
display: block; display: block;
width: 28px; height: 27px;/*33 32*/ width: 28px; height: 27px;/*33 32*/
background-size: 100% 100%; background-size: 28px 27px;
background-image: url('images/recycle.png'); background-image: url('images/recycle.png');
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
@ -3957,7 +3965,7 @@ aside input[type='text'] {
/* display: block;*/ /* display: block;*/
display: none; display: none;
width: 28px; height: 28px; width: 28px; height: 28px;
background-size: 100% 100%; background-size: 28px 28px;
background-image: url('images/remote-link.png'); background-image: url('images/remote-link.png');
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
@ -3969,7 +3977,7 @@ aside input[type='text'] {
.icon.lock { .icon.lock {
display: block; width: 17px; height: 25px; display: block; width: 17px; height: 25px;
margin-top: 1px; margin-top: 1px;
background-size: 100% 100%; background-size: 17px 25px;
background-image: url('images/lock.png'); background-image: url('images/lock.png');
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -3977,7 +3985,7 @@ aside input[type='text'] {
.icon.unlock { .icon.unlock {
display: block; width: 17px; height: 28px; display: block; width: 17px; height: 28px;
margin-top: -2px; margin-top: -2px;
background-size: 100% 100%; background-size: 17px 28px;
background-image: url('images/unlock.png'); background-image: url('images/unlock.png');
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -3987,7 +3995,7 @@ aside input[type='text'] {
/*.attach { background-position: -80px -32px; }*/ /*.attach { background-position: -80px -32px; }*/
.icon.attach { .icon.attach {
display: block; width: 28px; height: 28px; display: block; width: 28px; height: 28px;
background-size: 100% 100%; background-size: 28px 28px;
background-image: url('images/paperclip.png'); background-image: url('images/paperclip.png');
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -4000,14 +4008,14 @@ aside input[type='text'] {
/*.starred { background-position: -16px -48px; }*/ /*.starred { background-position: -16px -48px; }*/
.icon.starred { .icon.starred {
display: block; width: 28px; height: 28px; display: block; width: 28px; height: 28px;
background-size: 100% 100%; background-size: 28px 28px;
background-image: url('images/star-yellow.png'); background-image: url('images/star-yellow.png');
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/*.unstarred { background-position: -32px -48px; }*/ /*.unstarred { background-position: -32px -48px; }*/
.icon.unstarred { .icon.unstarred {
display: block; width: 28px; height: 28px; display: block; width: 28px; height: 28px;
background-size: 100% 100%; background-size: 28px 28px;
background-image: url('images/star.png'); background-image: url('images/star.png');
background-repeat: no-repeat; background-repeat: no-repeat;
@ -4016,7 +4024,7 @@ aside input[type='text'] {
/*.tagged { background-position: -48px -48px; }*/ /*.tagged { background-position: -48px -48px; }*/
.icon.tagged { .icon.tagged {
display: block; width: 28px; height: 28px; display: block; width: 28px; height: 28px;
background-size: 100% 100%; background-size: 28px 28px;
background-image: url('images/tag.png'); background-image: url('images/tag.png');
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
@ -4026,7 +4034,7 @@ aside input[type='text'] {
.filer-icon { .filer-icon {
display: block; width: 24px; height: 24px; display: block; width: 24px; height: 24px;
background-size: 100% 100%; background-size: 24px 24px;
background-image: url('images/folder.png'); background-image: url('images/folder.png');
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
@ -4034,7 +4042,7 @@ aside input[type='text'] {
.event-icon { .event-icon {
display: block; width: 33px; height: 33px; display: block; width: 33px; height: 33px;
background-size: 100% 100%; background-size: 33px 33px;
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.5; opacity: 0.5;
} }

26
view/theme/frost-mobile/templates/wall_thread.tpl
View file

@ -18,7 +18,7 @@
</div> </div>
<div class="wall-item-arrowphoto-wrapper" ><img src="images/larrow.gif" alt="{{$item.wall}}" /></div> <div class="wall-item-arrowphoto-wrapper" ><img src="images/larrow.gif" alt="{{$item.wall}}" /></div>
{{/if}} {{/if}}
{{*<!--<div class="wall-item-photo-wrapper wwfrom" id="wall-item-photo-wrapper-{{$item.id}}" {{*<!--<div class="wall-item-photo-wrapper wwfrom" id="wall-item-photo-wrapper-{{$item.id}}"
onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')" onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')"
onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)">-->*}} onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)">-->*}}
{{*<!--<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}}" id="wall-item-photo-wrapper-{{$item.id}}">-->*}} {{*<!--<div class="wall-item-photo-wrapper{{if $item.owner_url}} wwfrom{{/if}}" id="wall-item-photo-wrapper-{{$item.id}}">-->*}}
@ -38,7 +38,7 @@
{{*<!--<div class="wall-item-photo-end"></div>-->*}} {{*<!--<div class="wall-item-photo-end"></div>-->*}}
<div class="wall-item-wrapper" id="wall-item-wrapper-{{$item.id}}" > <div class="wall-item-wrapper" id="wall-item-wrapper-{{$item.id}}" >
{{if $item.lock}}{{*<!--<div class="wall-item-lock">-->*}}<img src="images/lock_icon.gif" class="wall-item-lock lockview" alt="{{$item.lock}}" onclick="lockview(event,{{$item.id}});" />{{*<!--</div>-->*}} {{if $item.lock}}{{*<!--<div class="wall-item-lock">-->*}}<img src="images/lock_icon.gif" class="wall-item-lock lockview" alt="{{$item.lock}}" onclick="lockview(event,{{$item.id}});" />{{*<!--</div>-->*}}
{{else}}<div class="wall-item-lock"></div>{{/if}} {{else}}<div class="wall-item-lock"></div>{{/if}}
<div class="wall-item-location" id="wall-item-location-{{$item.id}}">{{$item.location}}</div> <div class="wall-item-location" id="wall-item-location-{{$item.id}}">{{$item.location}}</div>
</div> </div>
</div> </div>
@ -71,9 +71,9 @@
<div class="wall-item-tools" id="wall-item-tools-{{$item.id}}"> <div class="wall-item-tools" id="wall-item-tools-{{$item.id}}">
{{if $item.vote}} {{if $item.vote}}
<div class="wall-item-like-buttons" id="wall-item-like-buttons-{{$item.id}}"> <div class="wall-item-like-buttons" id="wall-item-like-buttons-{{$item.id}}">
<a href="#" class="icon like" title="{{$item.vote.like.0}}" onclick="dolike({{$item.id}},'like'); return false"></a> <a href="#" class="icon like{{if $item.responses.like.self}} active{{/if}}" title="{{$item.vote.like.0}}" onclick="dolike({{$item.id}},'like'); return false"></a>
{{if $item.vote.dislike}} {{if $item.vote.dislike}}
<a href="#" class="icon dislike" title="{{$item.vote.dislike.0}}" onclick="dolike({{$item.id}},'dislike'); return false"></a> <a href="#" class="icon dislike{{if $item.responses.dislike.self}} active{{/if}}" title="{{$item.vote.dislike.0}}" onclick="dolike({{$item.id}},'dislike'); return false"></a>
{{/if}} {{/if}}
{{if $item.vote.share}}<a href="#" class="icon recycle wall-item-share-buttons" title="{{$item.vote.share.0}}" onclick="jotShare({{$item.id}}); return false"></a>{{/if}} {{if $item.vote.share}}<a href="#" class="icon recycle wall-item-share-buttons" title="{{$item.vote.share.0}}" onclick="jotShare({{$item.id}}); return false"></a>{{/if}}
<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;" />
@ -85,7 +85,7 @@
{{if $item.edpost}} {{if $item.edpost}}
<a class="editpost icon pencil" href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"></a> <a class="editpost icon pencil" href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"></a>
{{/if}} {{/if}}
{{if $item.star}} {{if $item.star}}
<a href="#" id="starred-{{$item.id}}" onclick="dostar({{$item.id}}); return false;" class="star-item icon {{$item.isstarred}}" title="{{$item.star.toggle}}"></a> <a href="#" id="starred-{{$item.id}}" onclick="dostar({{$item.id}}); return false;" class="star-item icon {{$item.isstarred}}" title="{{$item.star.toggle}}"></a>
{{/if}} {{/if}}
@ -94,21 +94,21 @@
{{/if}} {{/if}}
{{if $item.filer}} {{if $item.filer}}
<a href="#" id="filer-{{$item.id}}" onclick="itemFiler({{$item.id}}); return false;" class="filer-item filer-icon" title="{{$item.filer}}"></a> <a href="#" id="filer-{{$item.id}}" onclick="itemFiler({{$item.id}}); return false;" class="filer-item filer-icon" title="{{$item.filer}}"></a>
{{/if}}
{{if $item.isevent}}
<a href="#" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="dolike({{$item.id}},'attendyes'); return false;" class="event-item event-icon event-attend-icon"></a>
<a href="#" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="dolike({{$item.id}},'attendno'); return false;" class="event-item event-icon event-dontattend-icon"></a>
<a href="#" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="dolike({{$item.id}},'attendmaybe'); return false;" class="event-item event-icon event-maybeattend-icon"></a>
{{/if}} {{/if}}
{{if $item.isevent}}
<a href="#" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="dolike({{$item.id}},'attendyes'); return false;" class="event-item event-icon event-attend-icon{{if $item.responses.attendyes.self}} active{{/if}}"></a>
<a href="#" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="dolike({{$item.id}},'attendno'); return false;" class="event-item event-icon event-dontattend-icon{{if $item.responses.attendno.self}} active{{/if}}"></a>
<a href="#" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="dolike({{$item.id}},'attendmaybe'); return false;" class="event-item event-icon event-maybeattend-icon{{if $item.responses.attendmaybe.self}} active{{/if}}"></a>
{{/if}}
{{*<!--<div class="wall-item-delete-wrapper" id="wall-item-delete-wrapper-{{$item.id}}" >-->*}} {{*<!--<div class="wall-item-delete-wrapper" id="wall-item-delete-wrapper-{{$item.id}}" >-->*}}
{{if $item.drop.dropping}}<a href="item/drop/{{$item.id}}" onclick="return confirmDelete();" class="wall-item-delete-wrapper icon drophide" title="{{$item.drop.delete}}" id="wall-item-delete-wrapper-{{$item.id}}" {{*onmouseover="imgbright(this);" onmouseout="imgdull(this);" *}}></a>{{/if}} {{if $item.drop.dropping}}<a href="item/drop/{{$item.id}}" onclick="return confirmDelete();" class="wall-item-delete-wrapper icon drophide" title="{{$item.drop.delete}}" id="wall-item-delete-wrapper-{{$item.id}}" {{*onmouseover="imgbright(this);" onmouseout="imgdull(this);" *}}></a>{{/if}}
{{*<!--</div>-->*}} {{*<!--</div>-->*}}
{{if $item.drop.pagedrop}}<input type="checkbox" onclick="checkboxhighlight(this);" title="{{$item.drop.select}}" class="item-select" name="itemselected[]" value="{{$item.id}}" />{{/if}} {{if $item.drop.pagedrop}}<input type="checkbox" onclick="checkboxhighlight(this);" title="{{$item.drop.select}}" class="item-select" name="itemselected[]" value="{{$item.id}}" />{{/if}}
{{*<!--<div class="wall-item-delete-end"></div>-->*}} {{*<!--<div class="wall-item-delete-end"></div>-->*}}
</div> </div>
</div> </div>
{{*<!--<div class="wall-item-wrapper-end"></div>-->*}} {{*<!--<div class="wall-item-wrapper-end"></div>-->*}}
{{if $item.responses}} {{if $item.responses}}
{{foreach $item.responses as $verb=>$response}} {{foreach $item.responses as $verb=>$response}}