From 392169ca7a80cd9f9fdc428b0208d72fd5856285 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Tue, 3 May 2016 18:20:26 +0200
Subject: [PATCH] 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
---
css/style.css | 5 +++--
js/theme.js | 11 +++++++++++
templates/nav.tpl | 13 +++++++++++++
3 files changed, 27 insertions(+), 2 deletions(-)
diff --git a/css/style.css b/css/style.css
index 15851cb067..5c55d43217 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;
}
diff --git a/js/theme.js b/js/theme.js
index 00008fc3e2..18eab67a5b 100644
--- a/js/theme.js
+++ b/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
diff --git a/templates/nav.tpl b/templates/nav.tpl
index e0eff64a9b..d6d5965e9c 100644
--- a/templates/nav.tpl
+++ b/templates/nav.tpl
@@ -9,6 +9,9 @@
{{if $nav.remote}}
{{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 *}}
{{/if}}
@@ -269,3 +272,13 @@
{{/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.*}}
+
--
2.39.5