Rendering of menu on 'new post' page incorrect

[mrvdb]

One of our users has had this bug for a while but until now I was not able to reproduce it.

On the 'new post' page, the menu is rendered incorrectly, see screenshot below

I suspect a subtle CSS issue as it might be browser dependent. The effect only surfaced for myself after upgrading FireFox this morning to version 85.0
The user reported it worked ok on a chromium based browser, but I can't verify that.

Steps to reproduce

1. log in at qua.name as user 'demo' with pass 'demo'
2. either observe directly or start a new post

• multi-user mode
• mysql
• invites only / open registration
• federation enabled
• instance runs of develop branch

[thebaer]

Confirmed that this is happening for me in Chromium on your instance, but I can't replicate on other WF instances that are up to date with the develop branch. Inspecting the page, it looks like plenty of CSS rules are missing in your stylesheet -- particularly the ones that are set in less/pad.less. Did you make any changes to the stylesheet? Are you sure it all compiled correctly when running make ui?

[mrvdb]

make ui doesn't spit out errors.

make ui   
true
cd less/; make 
make[1]: Entering directory '/home/mrb/go/src/github.com/writeas/writefreely/less'
lessc app.less --clean-css="--s1 --advanced" ../static/css/write.css
lessc fonts.less --clean-css="--s1 --advanced" ../static/css/fonts.css
lessc icons.less --clean-css="--s1 --advanced" ../static/css/icons.css
make[1]: Leaving directory '/home/mrb/go/src/github.com/writeas/writefreely/less'
[mrb@t510] writefreely git:(qua.name) ✗ ➜ git hist             
[mrb@t510] writefreely git:(qua.name) ✗ ➜ lessc --version
lessc 4.1.0 (Less Compiler) [JavaScript]

Perhaps related to #425 ? which are changes at least to sources for the stylesheets.

[thebaer]

Ah yep, that's very possible. In particular, the .dropdown-nav rules need to be included here. Maybe they aren't getting applied?

[mrvdb]

Not sure what is happening, but afaics less produced the proper dropdown-nav related classes from pad.less in write.css, but they are not in the produced html.

Manualy applying this diff fixes it. I'm not familiar enough with the applicable templates to assess if this is a proper fix

--- a/templates/pad.tmpl
+++ b/templates/pad.tmpl
@@ -22,7 +22,7 @@
                <header id="tools">
                        <div id="clip">
                                {{if not .SingleUser}}<h1><a href="/me/c/" title="View blogs"><img class="ic-24dp" src="/img/ic_blogs_dark@2x.png" /></a></h1>{{end}}
-                               <nav id="target" {{if .SingleUser}}style="margin-left:0"{{end}}><ul>
+                               <nav class="dropdown-nav" id="target" {{if .SingleUser}}style="margin-left:0"{{end}}><ul>
                                                {{if .Editing}}<li>{{if .EditCollection}}<a href="{{.EditCollection.CanonicalURL}}">{{.EditCollection.Title}}</a>{{else}}<a>Draft</a>{{end}}</li>
                                                {{else}}<li class="has-submenu"><a id="publish-to"><span id="target-name">Draft</span> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
                                                <ul>
@@ -44,7 +44,7 @@
                                                </ul>
                                        </li>{{end}}
                                </ul></nav>
-                               <nav id="font-picker" class="if-room room-3 hidden" style="margin-left:-1em"><ul>
+                               <nav id="font-picker" class="dropdown-nav if-room room-3 hidden" style="margin-left:-1em"><ul>
                                                <li class="has-submenu"><a href="#" id="" onclick="return false"><img class="ic-24dp" src="/img/ic_font_dark@2x.png" /> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
                                                <ul style="text-align: center">
                                                        <li class="menu-heading">Font</li>

[mrvdb]

I traced this back to lessc changes indeed. Upstream changed their minds too (see https://github.com/less/less.js/releases/tag/v4.1.0 )

Using that release makes the problem disappear, so this issue is now irrelevant

lessc 3.x no problem
lessc 4.0 will generate errors on building: resolve by upgrading to 4.1
lessc 4.1 no problem

I'll retract PR #425 as well