Fix focused button box-shadow being clipped (#2910)

This has been a thorn in my eye for a very long time. <img width="181" alt="pre_button" src="https://github.com/comic/grand-challenge.org/assets/7871310/d8749718-3bbe-4192-a06f-e3101819203d"> Any button rendered near the bottom of a content (e.g. towards the footer) would have its border occluded when pressed. By adding some margin that matches the border radius of `.btn` this is fixed: <img width="176" alt="post" src="https://github.com/comic/grand-challenge.org/assets/7871310/2dcefaca-6c98-490a-a370-a1c3156c143f"> For existing elements with `.btn` and `.m-1` (or variant) the margin is removed.
comic · Jul 4, 2023 · ef709e7 · ef709e7
1 parent 350adbb
commit ef709e7
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/app/grandchallenge/algorithms/templates/algorithms/algorithm_detail.html b/app/grandchallenge/algorithms/templates/algorithms/algorithm_detail.html
@@ -113,7 +113,7 @@
                 <h2 class="col-9 p-0">{{ object.title }}</h2>
                 {% if 'change_algorithm' in algorithm_perms %}
                     <span class="col-3 p-0 text-right my-auto">
-                        <a class="btn btn-primary btn-block mb-1"
+                        <a class="btn btn-primary btn-block"
                            href="{% url 'algorithms:update' slug=object.slug %}">
                             <i class="fa fa-cog"></i> Update Settings
                         </a>
@@ -170,7 +170,7 @@ <h3 class="my-3">About</h3>
                     <div class="col-9">
                         {% for publication in object.publications.all %}
                             <div class="row px-3">
-                                <div class="col-1 px-0 my-auto text-center align-middle"><a class="btn btn-outline-primary p-1 btn-sm btn-block mb-1 mr-1" href="{{ publication.identifier.url }}" target="_blank"
+                                <div class="col-1 px-0 my-auto text-center align-middle"><a class="btn btn-outline-primary p-1 btn-sm btn-block" href="{{ publication.identifier.url }}" target="_blank"
                                    title="{{ publication.title }}">
                                     <i class="fa fa-link"></i>
                                 </a></div>

diff --git a/app/grandchallenge/core/static/css/base.scss b/app/grandchallenge/core/static/css/base.scss
@@ -37,3 +37,8 @@ $pagination-disabled-bg: lighten($blue, 15%) !default;
 :is(h1, h2, h3, h4, h5, h6):hover > .headerlink {
     display: inline;
 }
+
+// Reserve space for focus box-shadow
+.btn {
+  margin: $btn-focus-width;
+}
diff --git a/app/grandchallenge/documentation/templates/documentation/docpage_detail.html b/app/grandchallenge/documentation/templates/documentation/docpage_detail.html
@@ -118,9 +118,9 @@
         <div class="row mt-3">
             <div class="col-12 col-sm-6 col-md-7 d-inline-block text-left">
                 {% if 'documentation.change_docpage' in perms %}
-                    <a class="btn btn-md btn-outline-dark d-inline-flex mb-1" href="{% url 'documentation:list' %}">Page overview</a>
-                    <a class="btn btn-md btn-outline-dark d-inline-flex mb-1" href="{% url 'documentation:create' %}">Add</a>
-                    <a class="btn btn-md btn-outline-dark mb-1" href="{% url 'documentation:update' slug=currentdocpage.slug %}">Edit</a>
+                    <a class="btn btn-md btn-outline-dark d-inline-flex" href="{% url 'documentation:list' %}">Page overview</a>
+                    <a class="btn btn-md btn-outline-dark d-inline-flex" href="{% url 'documentation:create' %}">Add</a>
+                    <a class="btn btn-md btn-outline-dark" href="{% url 'documentation:update' slug=currentdocpage.slug %}">Edit</a>
                 {% endif %}
             </div>
             <div class="col-12 col-sm-6 col-md-5 justify-content-start justify-content-sm-end form-inline">

diff --git a/app/grandchallenge/publications/templates/publications/publication_list.html b/app/grandchallenge/publications/templates/publications/publication_list.html
@@ -32,11 +32,11 @@ <h6 class="ml-1 mt-2">{{ paginator.count }} publications | {{ num_citations }} c
                         {{ publication.citation|clean }}
                     </div>
                     <div class="pt-1 pb-2 pl-3">
-                        <a class="btn btn-outline-primary btn-sm mb-1 mr-1" href="{{ publication.identifier.url }}"><i class="fa fa-link"></i></a>
+                        <a class="btn btn-outline-primary btn-sm" href="{{ publication.identifier.url }}"><i class="fa fa-link"></i></a>
                         {% get_associated_objects publication=publication checker=checker as publication_objects %}
                         {% if publication_objects %}
                             {% for obj, obj_model in publication_objects.items %}
-                                <a class="btn btn-outline-primary btn-sm mb-1 mr-1" href="{{ obj.get_absolute_url }}">{{ obj }}</a>
+                                <a class="btn btn-outline-primary btn-sm" href="{{ obj.get_absolute_url }}">{{ obj }}</a>
                             {% endfor %}
                         {% endif %}
                     </div>