New CSS classes for fixing cards

This commit is contained in:
Gode, Sebastian 2023-04-17 07:35:31 +00:00
parent 3a128fc016
commit 53a08998c6
2 changed files with 44 additions and 6 deletions

View File

@ -138,13 +138,13 @@ def container_item_html(self, node):
def navigator_html(self, node):
# This method renders containers of service groups with links to the
# document of the specified type
data = f'<div class="{node["class"]} row row-cols-1 row-cols-md-3 g-4">'
data = f'<div class="{node["class"]} container-docsportal">'
for cat in METADATA.service_categories:
category = cat["name"]
category_title = cat["title"]
data += (
f'<div class="col"><div class="card">'
f'<div class="card item-docsportal">'
f'<div class="card-body">'
f'<h5 class="card-title">{category_title}</h5></div>'
f'<ul class="list-group list-group-flush">'
@ -170,7 +170,7 @@ def navigator_html(self, node):
f'</div></a></li>'
)
data += '</ul></div></div>'
data += '</ul></div>'
data += '</div>'
@ -181,12 +181,12 @@ def navigator_html(self, node):
def service_group_html(self, node):
# This method renders containers per each service of the category with all
# links as individual list items
data = '<div class="row row-cols-1 row-cols-md-3 g-4">'
data = '<div class="container-docsportal">'
for k, v in METADATA.services_with_docs_by_category(
node['service_category'], environment=node['environment']).items():
title = v["service_title"]
data += (
f'<div class="col"><div class="card">'
f'<div class="card item-docsportal">'
f'<div class="card-body"><h5 class="card-title">'
f'{title}</h5></div>'
f'<ul class="list-group list-group-flush">'
@ -203,7 +203,7 @@ def service_group_html(self, node):
f'</div></a></li>'
)
# Row end
data += '</ul></div></div>'
data += '</ul></div>'
data += '</div>'
self.body.append(data)

View File

@ -56,3 +56,41 @@
.docs-sidebar-toc li.toctree-l2:not(.current) > ul {
display: none;
}
/* Card Design */
.container-docsportal {
display: flex;
align-items: stretch;
align-content: space-between;
flex-direction: row;
flex-wrap: wrap;
margin-top: 2em;
gap: 1em; /* needs to be substracted from item size */
}
@media (min-width: 768px) {
.item-docsportal {
flex-basis: calc(33.333% - 1em); /* needs gap in container-docsportal */
box-sizing: border-box;
align-self: stretch;
}
}
@media (max-width: 767.98px) {
.item-docsportal {
flex-basis: calc(100% - 1em); /* needs gap in container-docsportal */
box-sizing: border-box;
align-self: stretch;
}
}
.item-docsportal>.list-group:last-child {
margin-bottom: 1em;
}
.item-docsportal>.card-body {
flex: none;
}
/* End Card-Design */