mirror of
https://github.com/friendica/friendica
synced 2024-11-18 13:03:41 +00:00
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
3 changed files with 27 additions and 2 deletions
|
@ -199,8 +199,8 @@ header #banner {
|
||||||
}
|
}
|
||||||
header #banner #logo-img,
|
header #banner #logo-img,
|
||||||
.navbar-brand #logo-img {
|
.navbar-brand #logo-img {
|
||||||
mask: url('img/friendica-logo.svg#logo_mask');
|
/*mask: url('network#m1');*/
|
||||||
mask-image: url('img/friendica-25.png');
|
/*mask-image: url('img/friendica-25.png');*/
|
||||||
-webkit-mask-image: url('img/friendica-25.png');
|
-webkit-mask-image: url('img/friendica-25.png');
|
||||||
background-color: $nav_icon_color;
|
background-color: $nav_icon_color;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
|
@ -208,6 +208,7 @@ header #banner #logo-img,
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbrand-container {
|
#navbrand-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
11
js/theme.js
11
js/theme.js
|
@ -49,6 +49,17 @@ $(document).ready(function(){
|
||||||
$("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
|
$("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
|
// make responsive tabmenu with flexmenu.js
|
||||||
// the menupoints which doesn't fit in the second nav bar will moved to a
|
// the menupoints which doesn't fit in the second nav bar will moved to a
|
||||||
// dropdown menu. Look at common_tabs.tpl
|
// dropdown menu. Look at common_tabs.tpl
|
||||||
|
|
|
@ -9,6 +9,9 @@
|
||||||
{{if $nav.remote}}
|
{{if $nav.remote}}
|
||||||
<a href="{{$baseurl}}"><div id="remote-logo-img"></div></a>
|
<a href="{{$baseurl}}"><div id="remote-logo-img"></div></a>
|
||||||
{{else}}
|
{{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>
|
<a href="{{$baseurl}}"><div id="logo-img"></div></a>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
@ -269,3 +272,13 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
{{/if}}
|
{{/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