Opened 21 months ago
Last modified 4 months ago
#25487 new enhancement
Add an example for cards that are also links
Reported by: | cypherpunks | Owned by: | hiro |
---|---|---|---|
Priority: | Medium | Milestone: | |
Component: | Webpages/Styleguide | Version: | |
Severity: | Normal | Keywords: | |
Cc: | irl, antonela | Actual Points: | |
Parent ID: | #25404 | Points: | |
Reviewer: | Sponsor: |
Description
The current Metrics homepage has some custom CSS for the links to the different analysis pages. I've attempted to recreate this with cards instead of completely custom CSS.
The HTML for the card looks like:
<a href="userstats-relay-country.html"> <div class="card mb-2" style="min-height: 150px;"> <div class="card-body"> <h4 class="card-title"><i class="fa fa-users fa-fw" aria-hidden="true"></i> Users</h4> <p class="card-text text-muted">Where Tor users are from and how they connect to Tor.</p> </div> </div> </a>
The extra CSS looks like:
<style type="text/css"> /* external links */ a[target="_blank"]:before { content: " \f08e"; font-family: 'FontAwesome'; font-size:14px; position:relative; top:1px; margin-right:3px; } a.btn[target="_blank"]:before { content: ""; } a .card:hover { background-color: #ccc; } a { text-decoration: none!important; } </style>
This CSS would need to be modified as currently it touches components that are unrelated, maybe a new class would need to be introduced.
Child Tickets
Attachments (1)
Change History (6)
comment:1 Changed 21 months ago by
Parent ID: | → #25404 |
---|
Changed 16 months ago by
Attachment: | metrics_screenshot.png added |
---|
comment:2 Changed 16 months ago by
.. meant the metrics page. Also with ff 61 the icons are shown. Did not try TBB 8. The cause could however also be an unclean TBB dir, will make a fresh one later.
comment:3 Changed 16 months ago by
Right. I think what we want to do is use PNGs here instead of the icon fonts. The reason that it doesn't work in TBB in high security mode is that the font loading is blocked. This is a problem for Metrics specifically, and a generalised version of the problem exists also for the styleguide, but it shouldn't be a problem in the example. The example probably just has a heading and some text to keep it simple.
comment:4 follow-up: 5 Changed 4 months ago by
Hi all,
It is suspected that Hiro has left the project, given that he never responds to tickets anymore.
Not having Font Awesome operable on the higher security setting is a problem.In another ticket on this subject I have asked:
- Can Font Awesome be supported by being packaged into Tor Browser itself? If not, due to licencing, should we aim to produce our own (minimal) version?
- Can we provide some support for popular webfonts in a similar manner?
comment:5 Changed 4 months ago by
Replying to torlove:
It is suspected that Hiro has left the project, given that he never responds to tickets anymore.
hiro does lots of things, not just the styleguide. Right now I'm not working on this project as I have higher priorities so this ticket isn't that urgent. Still, if you wanted to come up with a patch to the styleguide then someone could look at it. I've not abandoned this project, we will do it eventually.
Not having Font Awesome operable on the higher security setting is a problem.In another ticket on this subject I have asked:
This is off-topic on this ticket. If you're already discussing it somewhere else then please keep the discussion there, or if it was also off-topic there then we need a new ticket for it.
This is how it looks here with TBB "7.5.6 (based on Mozilla Firefox 52.9.0) (32-bit)". With ff nightly it looked fine. From the source it is impossible to know what is supposed to be shown in the squares. Inspector claimed some of the css values are invalid, for example
-webkit-text-size-adjust
.