[DOCU-529] Modify the macros for the icons (node, folder, ...) in order to use images instead of the web-font Created: 24/Jul/14  Updated: 21/Jul/15  Resolved: 25/Jul/14

Status: Closed
Project: Documentation
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Task Priority: Neutral
Reporter: Christoph Meier Assignee: Christoph Meier
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Visible to:
Aleksandr Pchelintcev, Andreas Weder, Antti Hietala, Ben Price, Bill Beardslee, Boris Kraft, Brian Warrick, Cheng Hu, Christian Ringele, Christopher Justice, Christopher Zimmermann, Christoph Meier, Chunhua Liu, Daniel Lipp, Dominik Steinacher, Eric Hechinger, Espen Jervidalo, Evzen Fochr, Federico Grilli, Gavan Stockdale, Gökhan Mermer, Imported from previous wiki, Isabelle Dubach, Jana Štěpánů, Jan Haderka, Jan Schulte, Jaroslav Simak, Jose Maria Ruiz, Karel de Witte, Lars Fischer, Laura Gambell, Magnolia International, Magnolia International, Miguel Abreu, Mikaël Geljić, Milan Divilek, Monica Ullrich, Natascha Desmarais, Natascha Natum, Nicole Fior, Ondrej Chytil, Pascal Mangold, Peili Liang, Pete Ryland, Philip Mundt, Philipp Bärfuss, Richard Gange, Robert Šiška, Roman Kovařík, Samuel Schmitt, Samuel Staehelin, Sebastian Stang, Steph Chau, Teresa Miyar, Tobias Mattsson, Tomáš Gregovský, Veronika Altenbach, Vikram Vaswani, Zak Greant, Zdenek Skodik

 Description   

We use some macros (M5 folder icon, M5 property icon, M5 node icon) in config-trees to show icons.
"Sometimes" it happens that these icons look broken.
The icons are done with a webfont.



 Comments   
Comment by Christoph Meier [ 24/Jul/14 ]

Having a closer look at the "problem" it came out that is was "just" a css-problem.

There is some css for these icons:

@font-face {  
  font-family: 'MagnoliaIcons';  
  src:url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.eot?9c7rq');  
  src:url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.eot?#iefix9c7rq') format('embedded-opentype'),  
    url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.woff?9c7rq') format('woff'),  
    url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.ttf?9c7rq') format('truetype'),  
    url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.svg?9c7rq#MagnoliaIcons') format('svg');  
  font-weight: normal;  
  font-style: normal;  
}  

The above css is correct. It is in the css of the documentation workspace.
But actually it is only used for the Icons page (=> http://documentation.magnolia-cms.com/display/DOCS/Icons)

A similar - piece of css is in the wiki GLOBAL css.
And there has been an error.
The url there has been used a specific protocoll https:// instead of just //.
Now that's fixed on the GLOBAL css.
=> Now the problem should be resolved.

Anyway: (Probably?) the DOCS-space-css is not used (or it used somewhere else).
=> Think about cleaning up the css in DOCS-space

Comment by Christoph Meier [ 25/Jul/14 ]

In the GLOBAL css of wiki there is:

@font-face {
    font-family: "Mag-Icons";
    src: url("//dev.magnolia-cms.com/fonts/Mag-Icons.woff") format("woff");
}

This css is used e.g. for the macros in the DOC-space which renders the icons ("M5 folder icon", "M5 property icon", "M5 node icon").

Both css, the one in GLOBAL and the one in DOC -space refer to the same web-font. When comparing the 2 css @font-face directives, there are 2 difference:

  • the are defining 2 different font-family names: 'Mag-Icons', 'MagnoliaIcons'
  • the css in DOC refers to 4 files, whereas the css on the GLOBAL site just refers to one file
    And, by the way ... both directives refer to the same web-font.

So, to be on the safe side, i propose to do the following:
Extend the GLOBAL css adding all 4 files (and using the "short path" to the dev-server)

@font-face {
    font-family: "Mag-Icons";
    src:url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.eot?9c7rq');  
    src:url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.eot?#iefix9c7rq') format('embedded-opentype'),  
      url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.woff?9c7rq') format('woff'),  
      url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.ttf?9c7rq') format('truetype'),  
      url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.svg?9c7rq#MagnoliaIcons') format('svg');
}

The webfont-files are on wiki: http://git.magnolia-cms.com/gitweb/?p=magnolia_ui.pub.git;a=tree;f=magnolia-ui-vaadin-theme/src/main/resources/VAADIN/themes/magnolia/fonts.
So ... all the 4 used files should be or go to dev-server, too.

Finally, we can remove the directive in the DOC-space-css (and must fix the css for the Icons-page)

Comment by Christoph Meier [ 25/Jul/14 ]

The above mentioned changes for the GLOBAL css has been done! (thnx to Greg).

@font-face {
    font-family: "Mag-Icons";
    src:url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.eot?m23pt3');  
    src:url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.eot?#iefixm23pt3') format('embedded-opentype'),  
      url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.woff?m23pt3') format('woff'),  
      url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.ttf?m23pt3') format('truetype'),  
      url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.svg?m23pt3#MagnoliaIcons') format('svg');
}

Note "query-params" at the end of the files (?m23pt3) have been copied from the latest version of magnolia-icons.scss (see on git: http://git.magnolia-cms.com/gitweb/?p=magnolia_ui.pub.git;a=blob;f=magnolia-ui-vaadin-theme/src/main/resources/VAADIN/themes/magnolia/magnolia-icons.scss;h=b82e2bf0409136052a6ab3b899740ba661b8edf1;hb=HEAD)
These "query-params"usually change when creating bew version (with new files) to avoid caching problems.

And the css in the DOC-space is updated, too. https://documentation.magnolia-cms.com/display/DOCS/Icons works fine, too.
:^)

Finally the web-font for the icons is coming only from the GLOBAL css.
If the web-font is updated:

  • add the files to the dev-server
  • update the "qzey-param" in the urls of the font-files (on the GLOBAL css)
Generated at Mon Feb 12 01:09:57 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.