1111838 - Add a circular border around the Interest Pie graph

Status: RESOLVED FIXED

(Content Services Graveyard :: Interest Dashboard, defect)

Description

[Marina Samuel [:emtwo]]

Attachment: UP-Cleo_Interface_STYLE_GUIDE_V1.pdf

This border can be seen on page 6 of the attached style guide.

Comment 1

[Martin Pinto-Bazurco]

Hi Marina,

I would like to contribute fixing this bug. This is my first time at Mozilla so I need some help. Could you please point me out where I can get the code to start with the fix?

Kind regards,
Martin

Comment 2

[Martin Pinto-Bazurco]

Dear Marina,

I fixed this bug. It was a little tricky so I hope you are happy with the solution.

The solution was to add a div with position: absolute BEFORE the <div class="row-fluid visual-header">
and AFTER the <div class="fade-out" id="visual-header-overlay"> which more or less set the boundaries for the circle.

The whole code:
<div style="z-index: 15; position: absolute; border: 2px solid rgb(230, 230, 230); border-radius: 390px; top: 218px; left: 64px; width: 284px; padding: 143px;"></div>

Where and how can I upload the code?

Kind regards,
Martin

Comment 3

[Martin Pinto-Bazurco]

Attachment: 1111838_20141230_screen_01.PNG

Comment 4

[Martin Pinto-Bazurco]

Code is now zoom in/out enabled :-)

Code:

<div class="row-fluid visual-header">
    <div class="col-md-2">
	  	  <div style="z-index: 15; position: absolute; border: 2px solid rgb(230, 230, 230); top: 24px; padding: 144px; left: -11px; border-radius: 390px;"></div>

Of course this code would be prettier if the style was put on a class.      

Kind regards,
Martin

Comment 5

[Ed Lee :Mardak]

You can create a pull request on GitHub to get the code reviewed and merged: https://github.com/mozilla/interest-dashboard/pulls

Comment 6

[Martin Pinto-Bazurco]

done. Pull request can be found here:
https://github.com/mozilla/interest-dashboard/pull/32

Comment 7

[Marina Samuel [:emtwo]]

Left a comment for you on the pull request, Martin

Comment 8

[[github robot]]

Commits pushed to master at https://github.com/mozilla/interest-dashboard

https://github.com/mozilla/interest-dashboard/commit/b2b747c4762126eb6105294befbe41fde9784abc
Bug 1111838 - Add a circular border around the Interest Pie graph

Added a circular border around the Interest Pie graph which is zoom
in/out scalable.

https://github.com/mozilla/interest-dashboard/commit/5c22ebe262af85b1ea1a890bebfd826542630259
Merge pull request #44 from mozilla/pie-circle

Closes Bug 1111838 - Add a circular border around the Interest Pie graph