navbar: fix https://github.com/rabuzarus/frio/issues/1 - friendica logo isn't visible in firefox
we now use for ff a svg mask - thanks to pollygeek
This commit is contained in:
parent
5215a9d766
commit
392169ca7a
|
@ -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
11
js/theme.js
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue