Skip to content

feat: customise html styles #1567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sembauke merged 3 commits into from
Jul 3, 2025
Merged

feat: customise html styles #1567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1aba1b7
chore: add collection package
Nirajn2311 Jun 26, 2025
a162dfd
feat: customise html styles
Nirajn2311 Jun 26, 2025
d694cf3
fix: simplify css mastcher
Nirajn2311 Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions mobile-app/lib/ui/views/learn/block/templates/dialogue/dialogue_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_scroll_shadow/flutter_scroll_shadow.dart';
import 'package:freecodecamp/models/learn/curriculum_model.dart';
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
Expand Down Expand Up @@ -50,9 +51,13 @@ class BlockDialogueView extends StatelessWidget {
children: [
...parser.parse(
'<p>${block.description.join(' ')}</p>',
fontColor: FccColors.gray05,
removeParagraphMargin: true,
isSelectable: false,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
color: FccColors.gray05,
),
'p': Style(margin: Margins.zero),
},
),
_buildToggleButton(context),
_buildChallengeList(context, structure, dialogueHeaders),
Expand Down
9 changes: 7 additions & 2 deletions mobile-app/lib/ui/views/learn/block/templates/grid/grid_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_scroll_shadow/flutter_scroll_shadow.dart';
import 'package:freecodecamp/models/learn/curriculum_model.dart';
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
Expand Down Expand Up @@ -83,9 +84,13 @@ class BlockGridView extends StatelessWidget {
),
...parser.parse(
'<p>${block.description.join(' ')}</p>',
fontColor: FccColors.gray05,
removeParagraphMargin: true,
isSelectable: false,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
color: FccColors.gray05,
),
'p': Style(margin: Margins.zero),
},
),
Row(
children: [
Expand Down
9 changes: 7 additions & 2 deletions mobile-app/lib/ui/views/learn/block/templates/link/link_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freecodecamp/models/learn/curriculum_model.dart';
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
import 'package:freecodecamp/ui/views/learn/block/block_template_viewmodel.dart';
Expand Down Expand Up @@ -55,9 +56,13 @@ class BlockLinkView extends StatelessWidget {
),
...parser.parse(
'<p>${block.description.join(' ')}</p>',
fontColor: FccColors.gray05,
removeParagraphMargin: true,
isSelectable: false,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
color: FccColors.gray05,
),
'p': Style(margin: Margins.zero),
},
),
Row(
children: [
Expand Down
9 changes: 7 additions & 2 deletions mobile-app/lib/ui/views/learn/block/templates/list/list_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freecodecamp/models/learn/curriculum_model.dart';
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
import 'package:freecodecamp/ui/views/learn/block/block_template_viewmodel.dart';
Expand Down Expand Up @@ -77,9 +78,13 @@ class BlockListView extends StatelessWidget {
),
...parser.parse(
'<p>${block.description.join(' ')}</p>',
fontColor: FccColors.gray05,
removeParagraphMargin: true,
isSelectable: false,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
color: FccColors.gray05,
),
'p': Style(margin: Margins.zero),
},
),
Row(
children: [
Expand Down
9 changes: 7 additions & 2 deletions mobile-app/lib/ui/views/learn/challenge/challenge_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:freecodecamp/enums/panel_type.dart';
import 'package:freecodecamp/models/learn/challenge_model.dart';
Expand Down Expand Up @@ -497,8 +498,12 @@ class ChallengeView extends StatelessWidget {
final widgets = parser.parse(
test.instruction,
isSelectable: true,
removeParagraphMargin: true,
fontColor: FccColors.gray00,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
color: FccColors.gray00,
),
'p': Style(margin: Margins.zero),
},
);
return ExpansionTile(
backgroundColor: FccColors.gray90,
Expand Down
11 changes: 9 additions & 2 deletions mobile-app/lib/ui/views/learn/challenge/templates/english/english_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freecodecamp/models/learn/challenge_model.dart';
import 'package:freecodecamp/models/learn/curriculum_model.dart';
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
Expand Down Expand Up @@ -45,11 +46,17 @@ class EnglishView extends StatelessWidget {
children: [
...parser.parse(
challenge.instructions,
fontColor: FccColors.gray05,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)':
Style(color: FccColors.gray05),
},
),
...parser.parse(
challenge.description,
fontColor: FccColors.gray05,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)':
Style(color: FccColors.gray05),
},
),
],
),
Expand Down
11 changes: 9 additions & 2 deletions mobile-app/lib/ui/views/learn/challenge/templates/quiz/quiz_view.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freecodecamp/extensions/i18n_extension.dart';
import 'package:freecodecamp/models/learn/challenge_model.dart';
import 'package:freecodecamp/models/learn/curriculum_model.dart';
Expand Down Expand Up @@ -85,11 +86,17 @@ class QuizView extends StatelessWidget {
children: [
...parser.parse(
challenge.instructions,
fontColor: FccColors.gray05,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)':
Style(color: FccColors.gray05),
},
),
...parser.parse(
challenge.description,
fontColor: FccColors.gray05,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)':
Style(color: FccColors.gray05),
},
),
],
),
Expand Down
13 changes: 11 additions & 2 deletions mobile-app/lib/ui/views/learn/challenge/templates/review/review_viewmodel.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/widgets.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freecodecamp/app/app.locator.dart';
import 'package:freecodecamp/models/learn/challenge_model.dart';
import 'package:freecodecamp/service/learn/learn_service.dart';
Expand Down Expand Up @@ -49,12 +50,20 @@ class ReviewViewmodel extends BaseViewModel {

setParsedInstructions = parser.parse(
challenge.instructions,
fontColor: FccColors.gray05,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
color: FccColors.gray05,
),
},
);

setParsedDescription = parser.parse(
challenge.description,
fontColor: FccColors.gray05,
customStyles: {
'*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)': Style(
color: FccColors.gray05,
),
},
);
}
}
8 changes: 7 additions & 1 deletion mobile-app/lib/ui/views/learn/widgets/assignment_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
import 'package:freecodecamp/ui/views/news/html_handler/html_handler.dart';

class Assignment extends StatelessWidget {
Expand Down Expand Up @@ -53,7 +55,11 @@ class Assignment extends StatelessWidget {
children: parser.parse(
label,
isSelectable: false,
fontColor: value ? const Color(0xDEFFFFFF) : null,
customStyles: value
? {
'*': Style(color: FccColors.gray00),
}
: {},
),
),
),
Expand Down
11 changes: 9 additions & 2 deletions mobile-app/lib/ui/views/learn/widgets/quiz_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:freecodecamp/models/learn/challenge_model.dart';
import 'package:freecodecamp/ui/theme/fcc_theme.dart';
import 'package:freecodecamp/ui/views/learn/widgets/challenge_card.dart';
Expand Down Expand Up @@ -81,7 +82,9 @@ class _QuizWidgetState extends State<QuizWidget> {
.map((a) => parser.parse(
a.answer,
isSelectable: false,
removeParagraphMargin: true,
customStyles: {
'p': Style(margin: Margins.zero),
},
))
.toList())
.toList();
Expand Down Expand Up @@ -216,7 +219,11 @@ class _QuizWidgetState extends State<QuizWidget> {
feedbackWidgets.addAll(
parser.parse(
feedback,
fontColor: isCorrect == true ? FccColors.green40 : FccColors.red15,
customStyles: {
'*:not(pre):not(code)': Style(
color: isCorrect == true ? FccColors.green40 : FccColors.red15,
),
},
),
);
}
Expand Down
Loading
Loading