ZMI: dbmain form, ordered folder icon

[drfho]

Hi, found 2 small css probs in ZMI:

I will provide a PR for that...
got some connection issues with VSCode now - so the code diff here in advance:

/Zope/src/zmi/styles/resources/zmi_base.css
L621
%< - - - - - -
/* CUSTOM ICON: Folder (Ordered) */
i.fa-folder.zmi-icon-folder-ordered:after {
	content: "\f338";
	font-family: "Font Awesome\ 5 Free",Fontawesome;
	font-weight:900;
	margin: .475rem 0 0 -.7rem;
	position:absolute;
	font-size:14px;
}
.zmi .breadcrumb i.fa-folder.zmi-icon-folder-ordered:after {
	font-size:12px;
}
%< - - - - - -

/Zope/src/App/dtml/dbMain.dtml
L49
%< - - - - - -
  <div class="zmi-controls mb-5">
    <form action="&dtml-URL1;/manage_pack" method="post">
      <div class="input-group">
        <input class="btn btn-primary" id="pack" type="submit"
          name="submit" value="Pack" />
        <input class="form-control col-sm-1 col-3 ml-2 text-right" type="text"
          name="days:float" value="0" size="3" />
        <label class="mt-2 ml-2">days</label>
      </div>
      <small class="form-text text-muted">
        Pack: Remove previous object revisions older than the selected
        number of days.
      </small>
    </form>
  </div>
%< - - - - - -

[dataflake]

@drfho Don't worry about the PR, I copied the changes from your description and tested them manually. It's all done.

[dataflake]

I'll need to reopen this:

This is a browser-specific issue. The symptom you saw appeared on Chrome/Chromium and your fix helped it. The issue did not show on Firefox, and the fix now breaks the Ordered Folder icon, but only in the main content list. Not in the left-hand side folder tree:

[drfho]

oh, that's really bad. After serveral approaches with the before/after icon aggregation i could not compsensate the surprising differences in Chrome, Edge, FF, Safari. The best mapping (with an acceptable pixel deviation) I got by putting the "sort" icon as a background data-url. So the icon's style definition is reduced to one CSS element that scales to the different contexts.

/Zope/src/zmi/styles/resources/zmi_base.css
L621
%< - - - - - -
/* CUSTOM ICON: Folder (Ordered) */
.far.fa-folder.zmi-icon-folder-ordered {
	background-image: url('data:image/svg+xml;utf8,<svg width="220.21" height="134.06" version="1.1" viewBox="0 0 220.21 134.06" xmlns="http://www.w3.org/2000/svg"><path d="m150.11 0h46.059c21.382 0 32.09 25.851 16.971 40.971l-86.059 86.059c-9.373 9.373-24.568 9.373-33.941 0l-86.059-86.059c-15.119-15.119-4.411-40.971 16.971-40.971h46.058z" fill="black"/></svg>');
	background-size: 42%;
	background-position: center 0.45em;
	background-repeat: no-repeat;
}
/* HEADER BAR */
%< - - - - - -

Thanks!

[dataflake]

Yes, that fixes it, thanks. It's on master and 4.x now.