From 8cbdc2d005ef84e72485957ba72327aed29da9d5 Mon Sep 17 00:00:00 2001
From: Dave Lawrence <davmlaw@gmail.com>
Date: Mon, 16 Dec 2024 17:24:28 +1030
Subject: [PATCH] SACGF/variantgrid#803 - Nicer formatting on Gene ID page

---
 genes/templates/genes/view_gene.html | 178 +++++++++++++--------------
 1 file changed, 86 insertions(+), 92 deletions(-)

diff --git a/genes/templates/genes/view_gene.html b/genes/templates/genes/view_gene.html
index 003f144d2..c6f3626ed 100644
--- a/genes/templates/genes/view_gene.html
+++ b/genes/templates/genes/view_gene.html
@@ -30,111 +30,105 @@ <h3>{{ gene }}</h3>
             {% endif %}
         {% endwith %}
 
-        <div class="row">
-            <div class="col-12 col-lg-6" id="gene-versions">
-                <div class="card">
-                    <div class="card-header">Gene Versions</div>
-                    <div class="card-body">
-                        <table class="table">
-                            <thead>
+            <div class="card mt-4">
+                <div class="card-header">Gene Versions</div>
+                <div class="card-body">
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th></th>
+                            {% for genome_build_id in gene_genome_build_ids %}
+                                <th>{{ genome_build_id }}</th>
+                            {% endfor %}
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {% for version_data in gene_versions %}
                             <tr>
-                                <th></th>
-                                {% for genome_build_id in gene_genome_build_ids %}
-                                    <th>{{ genome_build_id }}</th>
-                                {% endfor %}
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {% for version_data in gene_versions %}
-                                <tr>
-                                    {% for d in version_data %}
-                                        {% if forloop.first %}
-                                            <td>{{ gene.identifier }}{% if d %}.{{ d }}{% endif %}</td>
-                                        {% else %}
-                                            <td>
-                                                {% if d %}
-                                                    {% if d.hgnc %}
+                                {% for d in version_data %}
+                                    {% if forloop.first %}
+                                        <td>{{ gene.identifier }}{% if d %}.{{ d }}{% endif %}</td>
+                                    {% else %}
+                                        <td>
+                                            {% if d %}
+                                                {% if d.hgnc %}
+                                                    <div>
+                                                        <a class="hover-link" href="{% url 'view_gene_symbol' d.hgnc.gene_symbol %}">{{ d.hgnc.gene_symbol }}</a>
+                                                         (<a class="hover-link" href="{{ d.hgnc.get_absolute_url }}">HGNC:{{ d.hgnc.pk }}</a>)
+                                                    </div>
+                                                    {% if d.hgnc.gene_symbol != d.gene_symbol %}
                                                         <div>
-                                                            <a class="hover-link" href="{% url 'view_gene_symbol' d.hgnc.gene_symbol %}">{{ d.hgnc.gene_symbol }}</a>
-                                                             (<a class="hover-link" href="{{ d.hgnc.get_absolute_url }}">HGNC:{{ d.hgnc.pk }}</a>)
-                                                        </div>
-                                                        {% if d.hgnc.gene_symbol != d.gene_symbol %}
-                                                            <div>
-                                                            <a class="hover-link" href="{% url 'view_gene_symbol' d.gene_symbol %}">{{ d.gene_symbol }}</a>
-                                                            ({{ gene.get_annotation_consortium_display }})
-                                                            </div>
-                                                        {% endif %}
-                                                    {% else %}
                                                         <a class="hover-link" href="{% url 'view_gene_symbol' d.gene_symbol %}">{{ d.gene_symbol }}</a>
+                                                        ({{ gene.get_annotation_consortium_display }})
+                                                        </div>
                                                     {% endif %}
-                                                    {{ d.coordinate }}
-                                                    <a class="toggle-link" data-toggle="collapse" href="#gene-import-{{ d.pk }}">Details...</a>
-                                                    <div id="gene-import-{{ d.pk }}" class="collapse">
-                                                        {{ d.import_source.url }} updated {{ d.import_source.modified|localtime }}
-                                                    </div>
+                                                {% else %}
+                                                    <a class="hover-link" href="{% url 'view_gene_symbol' d.gene_symbol %}">{{ d.gene_symbol }}</a>
                                                 {% endif %}
-                                            </td>
-                                        {% endif %}
-                                    {% endfor %}
-                                </tr>
-                            {% endfor %}
-                            </tbody>
-                        </table>
-                    </div>
+                                                {{ d.coordinate }}
+                                                <a class="toggle-link" data-toggle="collapse" href="#gene-import-{{ d.pk }}">Details...</a>
+                                                <div id="gene-import-{{ d.pk }}" class="collapse">
+                                                    {{ d.import_source.url }} updated {{ d.import_source.modified|localtime }}
+                                                </div>
+                                            {% endif %}
+                                        </td>
+                                    {% endif %}
+                                {% endfor %}
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
                 </div>
             </div>
 
-            <div class="col-12 col-lg-6 mt-4 mt-lg-0" id="transcripts">
-                <div class="card">
-                    <div class="card-header">Transcript Versions</div>
-                    <div class="card-body card-body-list">
-                        <table class="table">
-                            <thead>
-                            <tr>
-                                <th>Transcript ID</th>
-                                {% if has_biotype %}
-                                    <th>Biotype</th>
-                                {% endif %}
-                                {% for genome_build_id in transcript_genome_build_ids %}
-                                    <th>{{ genome_build_id }}</th>
-                                {% endfor %}
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {% if transcript_versions %}
-                                {% for version_data in transcript_versions %}
-                                    <tr>
+            <div class="card mt-4">
+                <div class="card-header">Transcript Versions</div>
+                <div class="card-body card-body-list">
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th>Transcript ID</th>
+                            {% if has_biotype %}
+                                <th>Biotype</th>
+                            {% endif %}
+                            {% for genome_build_id in transcript_genome_build_ids %}
+                                <th>{{ genome_build_id }}</th>
+                            {% endfor %}
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {% if transcript_versions %}
+                            {% for version_data in transcript_versions %}
+                                <tr>
+                                    <td>
+                                        <a class="hover-link" href="{% url 'view_transcript' version_data.0 %}">{{ version_data.0 }}</a>
+                                    </td>
+                                    {% if has_biotype %}
+                                        <td>{{ version_data.1 }}</td>
+                                    {% endif %}
+                                    {% for tv_set in version_data.2 %}
                                         <td>
-                                            <a class="hover-link" href="{% url 'view_transcript' version_data.0 %}">{{ version_data.0 }}</a>
-                                        </td>
-                                        {% if has_biotype %}
-                                            <td>{{ version_data.1 }}</td>
-                                        {% endif %}
-                                        {% for tv_set in version_data.2 %}
-                                            <td>
-                                                {% for tv in tv_set %}
-                                                    <a class="d-inline-block mx-2 hover-link" href="{% url 'view_transcript_version' tv.transcript_id tv.version %}">v.{{ tv.version }}</a>
-                                                    <span class="pills">
-                                                    {% for t_tag in tv.tags %}
-                                                        <span class="pill transcript-tag-{{ t_tag }}">{{ t_tag }}</span>
-                                                    {% endfor %}
-                                                    </span>
+                                            {% for tv in tv_set %}
+                                                <a class="d-inline-block mx-2 hover-link" href="{% url 'view_transcript_version' tv.transcript_id tv.version %}">v.{{ tv.version }}</a>
+                                                <span class="pills">
+                                                {% for t_tag in tv.tags %}
+                                                    <span class="pill transcript-tag-{{ t_tag }}">{{ t_tag }}</span>
                                                 {% endfor %}
-                                            </td>
-                                        {% endfor %}
-                                    </tr>
-                                {% endfor %}
-                            {% else %}
-                                <tr>
-                                    <td>No transcripts.</td>
+                                                </span>
+                                            {% endfor %}
+                                        </td>
+                                    {% endfor %}
                                 </tr>
-                            {% endif %}
-                            </tbody>
-                        </table>
-                    </div>
+                            {% endfor %}
+                        {% else %}
+                            <tr>
+                                <td>No transcripts.</td>
+                            </tr>
+                        {% endif %}
+                        </tbody>
+                    </table>
                 </div>
             </div>
-        </div>
     </div>
 
 {% endblock content %}
\ No newline at end of file