Add a circular border around the Interest Pie graph

RESOLVED FIXED

Status

Content Services Graveyard
Interest Dashboard
RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: emtwo, Assigned: Martin Pinto-Bazurco, Mentored)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [good first bug][lang=js])

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8536836 [details]
UP-Cleo_Interface_STYLE_GUIDE_V1.pdf

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

Comment 1

3 years ago
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
Flags: needinfo?(msamuel)
(Assignee)

Comment 2

3 years ago
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
(Assignee)

Comment 3

3 years ago
Created attachment 8542460 [details]
1111838_20141230_screen_01.PNG
(Assignee)

Comment 4

3 years ago
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

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

Comment 6

3 years ago
done. Pull request can be found here:
https://github.com/mozilla/interest-dashboard/pull/32
(Reporter)

Updated

3 years ago
Assignee: nobody → martinpintob
Flags: needinfo?(msamuel)
(Reporter)

Comment 7

3 years ago
Left a comment for you on the pull request, Martin

Comment 8

3 years ago
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

Updated

3 years ago
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.