Opened 17 months ago

Last modified 11 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)

metrics_screenshot.png (107.1 KB) - added by traumschule 11 months ago.
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.

Download all attachments as: .zip

Change History (4)

comment:1 Changed 17 months ago by cypherpunks

Parent ID: #25404

Changed 11 months ago by traumschule

Attachment: metrics_screenshot.png added

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.

comment:2 Changed 11 months ago by traumschule

.. 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 11 months ago by irl

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.

Note: See TracTickets for help on using tickets.