search

intermine / im-tables-3

clojurescript library to display and manipulate intermine query results on a webpage
http://www.intermine.org
GNU Lesser General Public License v2.1
5 stars 5 forks source link

replace easily-breakable fontawesome icons with inline svg instead. #24

Open yochannah opened 7 years ago

yochannah commented 7 years ago

icons should be svg. svg is trusty. icon fonts invariably break at some point.

Example:

by contrast, inline svg is embedded in the page and can't suffer from CORS

yochannah commented 6 years ago

The icon fonts are breaking.

yochannah commented 6 years ago

See

for a basic example of how it's done in bluegenes.

vvijayalakshmi21 commented 4 years ago

Hi, I am an Outreachy applicant and would like to contribute. Kindly assign this issue to me

heralden commented 4 years ago

Glad to hear! I have assigned you the issue.

vvijayalakshmi21 commented 4 years ago

Thanks so much. Request you to help me set up the project in my local machine. Is there any documentation available? Also, please could you let me know how to replicate the issue

vvijayalakshmi21 commented 4 years ago

I have set up my windows machine. I need some clarifications about the issue. 1) What is the way to replicate the issue? 2) Is it that the icons are currently working as expected for Bluegenes or am I required to make changes for Bluegenes? 3) How do I get started? I see a lot of files and I do not know the list of files that need changing. Request you to help me with these

heralden commented 4 years ago

Sorry for the delayed response; we have been swamped by communications from Outreachy applicants.

Follow the README to run this project. You will need node, npm, leiningen and Java (eg. openjdk). https://github.com/intermine/im-tables-3#building

  1. I believe you can replicate the font breaking by changing the font URL in https://github.com/intermine/im-tables-3/blob/dev/resources/public/index.html#L7 to something invalid.
  2. This project is used by Bluegenes, and you'll need to make changes in this project im-tables-3.
  3. This project is written in ClojureScript, but you might be able to figure this out by referencing the files Yo linked above. Skim through this tutorial to understand how Hiccup compiles to HTML so you can map your html knowledge to this task.

At the top of https://github.com/intermine/bluegenes/blob/dev/src/cljs/bluegenes/components/icons.cljs you will find instructions on how to attain similar icons from Icomoon to replace the ones imported with fontawesome. Then create a similar icons.cljs file in this repo, with the svg converted to hiccup, and reference it at the top level like done in https://github.com/intermine/bluegenes/blob/dev/src/cljs/bluegenes/views.cljs#L70. Lastly, replace all uses of fontawesome in im-tables-3 to use the svg instead, like so [:svg.icon.icon-search [:use {:xlinkHref "#icon-search"}]] (also documented in the first link in this paragraph).

It is a bit of a difficult and involved task, but you are welcome to tackle it if you wish!

vvijayalakshmi21 commented 4 years ago

Thanks for the response. I can now understand the changes needed. I would like to know if I need to get the equivalent of all the icons present in font-awesome.css file? And when you say this project is used by Bluegenes, does that mean these icons are used in Bluegenes project and not in im-tables? Kindly confirm

heralden commented 4 years ago

I would like to know if I need to get the equivalent of all the icons present in font-awesome.css file?

You only need to add Icomoon equivalents of the icons that are currently used. font-awesome icons are used like [:i.fa.fa-filter] (in HTML this becomes <i class="fa fa-filter"></i>), so you'll need to scan the codebase for these uses and replace them with Icomoon equivalents.

And when you say this project is used by Bluegenes, does that mean these icons are used in Bluegenes project and not in im-tables?

These icons are used in im-tables-3 (this project), which is used by Bluegenes.