Friendica/friendica-github
1
0
Fork 0
mirror of https://github.com/friendica/friendica synced 2024-11-18 09:03:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

navbar: fix https://github.com/rabuzarus/frio/issues/1 - friendica logo isn't visible in firefox

Browse source 
we now use for ff a svg mask - thanks to pollygeek
This commit is contained in:
rabuzarus 2016-05-03 18:20:26 +02:00
parent 5215a9d766
commit 392169ca7a
3 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
css/style.css
View file

@ -199,8 +199,8 @@ header #banner {
}
header #banner #logo-img,
.navbar-brand #logo-img {
mask: url('img/friendica-logo.svg#logo_mask');
mask-image: url('img/friendica-25.png');
/*mask: url('network#m1');*/
/*mask-image: url('img/friendica-25.png');*/
-webkit-mask-image: url('img/friendica-25.png');
background-color: $nav_icon_color;
height: 25px;
@ -208,6 +208,7 @@ header #banner #logo-img,
margin-left: auto;
margin-right: auto;
}
#navbrand-container {
display: flex;
}

11
js/theme.js
View file

@ -49,6 +49,17 @@ $(document).ready(function(){
$("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
}
// add mask css url to the logo-img container
//
// This is for firefox - we use a mask which looks like the friendica logo to apply user collers
// to the friendica logo (the mask is in nav.tpl at the botom). To make it work we need to apply the
// correct url. The only way which comes to my mind was to do this with js
// So we apply the correct url (with the link to the id of the mask) after the page is loaded.
if($("#logo-img")) {
var path= "url('" + window.location.pathname + "#logo-mask')";
$("#logo-img").css({"mask": path});
}
// make responsive tabmenu with flexmenu.js
// the menupoints which doesn't fit in the second nav bar will moved to a
// dropdown menu. Look at common_tabs.tpl

13
templates/nav.tpl
View file

@ -9,6 +9,9 @@
{{if $nav.remote}}
<a href="{{$baseurl}}"><div id="remote-logo-img"></div></a>
{{else}}
{{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div
For Firefox we have to call the paths of the mask (look at the bottom of this file).
Because for FF we need relative paths we apply them with js after the page is loaded (look at theme.js *}}
<a href="{{$baseurl}}"><div id="logo-img"></div></a>
{{/if}}
</div>
@ -269,3 +272,13 @@
</li>
</ul>
{{/if}}
{{* This is the mask of the firefox logo. We set the background of #logo-img to the user icon color and apply this mask to it
The result is a friendica logo in the user icon color.*}}
<svg id="friendica-logo-mask" x="0px" y="0px" width="0px" height="0px" viewBox="0 0 250 250">
<defs>
<mask id="logo-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;" d="M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z"/>
</mask>
</defs>
</svg>