diff --git a/themes/hugo-bootstrap-premium/static/css/style.css b/themes/hugo-bootstrap-premium/static/css/style.css index 976bd82..c47888e 100644 --- a/themes/hugo-bootstrap-premium/static/css/style.css +++ b/themes/hugo-bootstrap-premium/static/css/style.css @@ -62,7 +62,7 @@ p { } .content p:last-child { - margin: 0 !important; + margin: 0; } /* Sections background */ @@ -209,20 +209,45 @@ body .medias .container { #instances-list .list-group-item { height: 70px; + display: flex; + flex-direction: row; + justify-content: center; +} + +#instances-list .list-group-item .left-div { display: flex; flex-direction: column; justify-content: center; + flex-grow: 1; +} + +#instances-list .list-group-item .right-div { + display: flex; + flex-direction: column; + justify-content: center; + width: 140px; +} + +#instances-list .list-group-item .right-div li { + font-size: 0.8em; + font-weight: bold; } #instances-list .list-group-item .list-group-item-heading { margin-bottom: 0; } +#instances-list .list-group-item .instance-host { + display: inline-block; + margin-left: 5px; +} + #instances-list .list-group-item .list-group-item-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 5px; + font-size: 0.8em; } .footer { diff --git a/themes/hugo-bootstrap-premium/static/js/instances.js b/themes/hugo-bootstrap-premium/static/js/instances.js index 761d67c..4f7a215 100644 --- a/themes/hugo-bootstrap-premium/static/js/instances.js +++ b/themes/hugo-bootstrap-premium/static/js/instances.js @@ -14,38 +14,70 @@ $(function () { const lis = [] instances.forEach(function (instance) { - const el = createInstanceElement(instance.host, instance.name, instance.shortDescription) + const el = createInstanceElement(instance) lis.push(el) }) instancesListElement.append(lis) }) - .fail(function (err) { + .fail(function () { $('#instances-list-error').css('display', 'block') }) - function createInstanceElement (host, name, description) { + function createInstanceElement (instance) { const a = $('', { class: 'list-group-item', - href: 'https://' + host, + href: 'https://' + instance.host, target: '_blank', - title: host + title: instance.host + }) + + const leftDiv = $('
', { + class: 'left-div' + }) + const rightDiv = $('
', { + class: 'right-div' }) const h4 = $('

', { - class: 'list-group-item-heading', - text: name + class: 'list-group-item-heading' }) - a.append(h4) + const spanName = $('', { + text: instance.name, + class: 'instance-name' + }) + const spanHost = $('', { + text: instance.host, + class: 'instance-host' + }) + h4.append(spanName, spanHost) + leftDiv.append(h4) - if (description) { + if (instance.shortDescription) { const p = $('

', { class: 'list-group-item-text', - text: description + text: instance.shortDescription }) - a.append(p) + leftDiv.append(p) } + if (instance.totalInstanceFollowers) { + const li = $('

  • ', { + text: instance.totalInstanceFollowers + ' followers' + }) + rightDiv.append(li) + + } + + if (instance.totalInstanceFollowing) { + const li = $('
  • ', { + text: 'Follows ' + instance.totalInstanceFollowing + ' instances' + }) + rightDiv.append(li) + } + + a.append(leftDiv, rightDiv) + return a } })