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

we now use for ff a svg mask - thanks to pollygeek

diff --git a/css/style.css b/css/style.css
index 15851cb067ac2ccf071878ac22716cd6f8d00d75..5c55d432179875c96339a2413a842dc08df57c68 100644 (file)
--- 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 00008fc3e212462489509f0868d153e7a2f66155..18eab67a5b8eb6164d3454f7a5b922297941c050 100644 (file)
--- 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 e0eff64a9b79ee7da124ec7c0cb0abc8a4208667..d6d5965e9c4955b2f87f48e6646fcf42cddba549 100644 (file)
--- a/templates/nav.tpl
+++ b/templates/nav.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>