fix link tpl -refs #2681

Author: aragonc

assets/css/scss/_base.scss

@@ -2667,7 +2667,39 @@ hr {
   color: #006633;
   text-align: center;
 }
-
+/****** LINKS ******/
+.link-page{
+  .list-group-item{
+    .link-title{
+      display: inline-block;
+      width: 100%;
+      .toolbar{
+        float: right;
+        opacity: 0;
+      }
+    }
+    &:hover{
+      .link-title{
+        .toolbar{
+          opacity: 1;
+        }
+      }
+    }
+  }
+  .link-accordion{
+    .card{
+      margin-bottom: 0;
+      .card-header{
+        padding: .5rem;
+        .title-card{
+          padding-top: 5px;
+          display: inline-block;
+          padding-left: 10px;
+        }
+      }
+    }
+  }
+}
 /****** SKILLS ******/
 .skill-options{
   .legend {

main/template/default/link/index.html.twig

@@ -1,47 +1,48 @@
 {% block content %}
     {% autoescape false %}
-        <ul>
+        <div class="link-page">
+        <ul class="list-group  mb-3">
         {% for item in list_not_category %}
-            <li>
-                <h4>
+            <li class="list-group-item">
+                <h5 class="link-title mb-1">
                     {{ item.link_validator }}
                     <a href="{{ item.url }}" class="{{ item.visibility == true ? '' : 'text-muted' }}" target="{{ item.target }}">{{ item.title }}</a>
-                </h4>
-                <div class="float-right">
-                    <div class="btn-group btn-group-sm">
-                        {{ item.toolbar }}
+                    <div class="toolbar">
+                        <div class="btn-group btn-group-sm">
+                            {{ item.toolbar }}
+                        </div>
                     </div>
-                </div>
+                </h5>
                 {{ item.description }}
             </li>
         {% endfor %}
         </ul>
 
         {% for item in list_in_category %}
-            <div class="accordion" id="accordion_category">
+            <div class="link-accordion accordion" id="accordion_category">
                 <div class="card">
-                    <h4 class="card-header" id="heading_{{ item.id }}">
-                        <a href="#" class="btn btn-link"  data-toggle="collapse" data-target="#collapse_{{ item.id }}" aria-expanded="true" aria-controls="collapse_{{ item.id }}">
+                    <h5 class="card-header" id="heading_{{ item.id }}">
+                        <a class="title-card" href="#" data-toggle="collapse" data-target="#collapse_{{ item.id }}" aria-expanded="true" aria-controls="collapse_{{ item.id }}">
                             {{ item.title }}
                         </a>
                         <div class="float-right">
                             <div class="btn-group btn-group-sm">
                                 {{ item.tools }}
                             </div>
                         </div>
-                    </h4>
+                    </h5>
                     <div id="collapse_{{ item.id }}" class="collapse show" aria-labelledby="heading_{{ item.id }}" data-parent="#accordion_category">
                         <div class="card-body">
                             {{ item.description }}
 
-                            <ul>
+                            <ul class="list-group">
                                 {% for row in item.children %}
-                                    <li>
-                                        <h4>
+                                    <li class="list-group-item list-group-item-action">
+                                        <h5 class="mb-1">
                                             {{ row.link_validator }}
                                             <a href="{{ row.url }}" class="{{ row.visibility == true ? '' : 'text-muted' }}" target="{{ row.target }}">{{ row.title }}</a>
-                                        </h4>
-                                        <div class="float-right">
+                                        </h5>
+                                        <div class="toolbar">
                                             <div class="btn-group btn-group-sm">
                                                 {{ row.toolbar }}
                                             </div>
@@ -56,5 +57,6 @@
                 </div>
             </div>
         {% endfor %}
+        </div>
     {% endautoescape %}
 {% endblock %}