[#8546] Style statistics #5750
[#8546] Style statistics #5750
Conversation
sevfurneaux
changed the title
|
|
||
| .live_question__progress { | ||
| display: flex; | ||
| gap: 8px; | ||
| margin-bottom: 8px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .live_question__progress-bar { | ||
| background-color: $gray-lighter; | ||
| border-radius: 10px; | ||
| height: 100%; | ||
| position: absolute; | ||
| z-index: 0; | ||
| } | ||
|
|
||
| .live_question__progress-text { | ||
| padding-left: 8px; | ||
| padding-right: 8px; | ||
| position: relative; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .live_question__progress-percentage { | ||
| font-weight: bold; |
There was a problem hiding this comment.
Can you use live-question instead of live_question? Is more BEM-like and already defined like that in the rest of the file.
| padding-left: 8px; | ||
| padding-right: 8px; |
There was a problem hiding this comment.
can you use em or rem more, where it makes sense please? I think we prefer that over px, unless its some specific number or similar.
There was a problem hiding this comment.
Could you convert this to a functional component as well? Or did you plan to do that in another PR?
There was a problem hiding this comment.
This is now converted.
| const questionAnsweredTag = django.gettext('Questions Answered') | ||
| const categoriesTag = django.gettext('Categories') | ||
| const categoriesAnsweredTag = django.gettext('Affiliation Of Answered Questions') |
There was a problem hiding this comment.
Could you move these outside the component, if possible? Thanks!
| const countPerCategory = this.countCategory(category) | ||
| const style = { width: countPerCategory + '%' } | ||
| return ( | ||
| <div className="live_question__progress" key={index}> |
There was a problem hiding this comment.
I know it's been like that in the code before, but could you change it to use something other than index?
There was a problem hiding this comment.
Thanks, I've now added category_dict here, as the keys are the category ids: https://github.com/liqd/a4-meinberlin/pull/5750/files#diff-2d2b8a5601ea372ea7c39a1e981837692b43614c93d46ab5c0a13f39c8196dd3R54
sevfurneaux
force-pushed
the
sf-2024-style-event-statistics
branch
from
6937bea
to
d2ab3c0
Compare
| @@ -1,13 +0,0 @@ | |||
| import StatisticsBox from './StatisticsBox' | |||
There was a problem hiding this comment.
@vellip I noticed that <StatisticsBox /> was also rendered in react_questions_statistics.jsx, but react_questions_statistics.jsx isn't used anywhere or referenced in webpack.common.js, so have removed it.
Thanks for the review, I've now made the changes 👍 |
Describe your changes
This PR styles the statistics box
Tasks