Replace custom badges with bootstrap badges

Clinical-Genomics · Oct 28, 2024 · 0c48ff2 · 0c48ff2
1 parent 78cbe89
commit 0c48ff2
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [unreleased]
 ### Added
 - Refseq transcripts names on coverage overview page
+### Changed
+- Replaced custom badges style with Bootstrap 5 badges
 ### Fixed
 - Addressed the `Starlette Denial of service (DoS) via multipart/form-data` by updating starlette library. among others
 

diff --git a/src/chanjo2/templates/gene-overview.html b/src/chanjo2/templates/gene-overview.html
@@ -2,19 +2,6 @@
 
 {% block css %}
 {{ super() }}
-<style>
-.badge {
-	color: white;
-	padding: 4px 8px;
-	text-align: center;
-	border-radius: 5px;
-	float: right;
-}
-
-.exon_blue {
-	color: #2874a6;
-}
-</style>
 {% endblock %}
 
 {% block pdf_export %}
@@ -33,16 +20,16 @@
 				<span> - Coordinates: {{interval_features.coordinates}}</span>
 				<span> - size: {{interval_features.length}}</span>
 				{% if interval_features.mane_select %}
-					<span class="badge" style="background-color: black;">MANE Select: {{interval_features.mane_select}}</span>
+					<span class="badge bg-dark float-end ms-1">MANE Select: {{interval_features.mane_select}}</span>
 				{% endif %}
 				{% if interval_features.mane_plus_clinical %}
-					<span class="badge" style="background-color: black;">MANE Plus Clinical: {{interval_features.mane_plus_clinical}}</span>
+					<span class="badge bg-dark float-end ms-1">MANE Plus Clinical: {{interval_features.mane_plus_clinical}}</span>
 				{% endif %}
 				{% if interval_features.mrna %}
-					<span class="badge" style="background-color: gray;">{{interval_features.mrna}}</span>
+					<span class="badge bg-secondary float-end ms-1">{{interval_features.mrna}}</span>
 				{% endif %}
 				{% if interval_features.transcript_rank %}
-					<span class="badge" style="background-color: #2874a6">rank: {{interval_features.transcript_rank}}</span>
+					<span class="badge bg-primary float-end ms-1">rank: {{interval_features.transcript_rank}}</span>
 				{% endif  %}
 			</div>
 		</div>

diff --git a/src/chanjo2/templates/mane-overview.html b/src/chanjo2/templates/mane-overview.html
@@ -2,16 +2,6 @@
 
 {% block css %}
 {{ super() }}
-<style>
-.badge {
-	background-color: black;
-	color: white;
-	padding: 4px 8px;
-	text-align: center;
-	border-radius: 5px;
-	float: right;
-}
-</style>
 {% endblock %}
 
 {% block pdf_export %}
@@ -83,10 +73,10 @@ <h2>MANE Transcripts coverage report</h2>
 									{{ gene_id or samples_stats.gene.hgnc_id }}
 								</a></strong>
 					{% if samples_stats.transcript.mane_select %}
-						<span class="badge">MANE Select: {{samples_stats.transcript.mane_select}}</span>
+						<span class="badge bg-dark float-end ms-1">MANE Select: {{samples_stats.transcript.mane_select}}</span>
 					{% endif %}
 					{% if samples_stats.transcript.mane_plus_clinical %}
-						<span class="badge">MANE Plus Clinical: {{samples_stats.transcript.mane_plus_clinical}}</span>
+						<span class="badge bg-dark float-end ms-1">MANE Plus Clinical: {{samples_stats.transcript.mane_plus_clinical}}</span>
 					{% endif %}
 
 				</div>

diff --git a/src/chanjo2/templates/overview.html b/src/chanjo2/templates/overview.html
@@ -54,7 +54,7 @@
 							<td>
 								{{ row[2] }} <!-- Ensembl ID -->
 								{% if row[3].mane_select %}
-									<span class="badge bg-dark float-end ">MANE Select: {{row[3].mane_select}}</span>
+									<span class="badge bg-dark float-end ms-1">MANE Select: {{row[3].mane_select}}</span>
 								{% endif %}
 								{% if row[3].mane_plus_clinical %}
 									<span class="badge bg-dark float-end">MANE Plus Clinical: {{row[3].mane_plus_clinical}}</span>