forked from docs/docsportal
New CSS classes for fixing cards
Reviewed-by: tischrei <tino.schreiber@t-systems.com> Co-authored-by: Gode, Sebastian <sebastian.gode@t-systems.com> Co-committed-by: Gode, Sebastian <sebastian.gode@t-systems.com>
This commit is contained in:
parent
3a128fc016
commit
da043bd5eb
@ -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)
|
||||
|
@ -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 */
|
||||
|
Loading…
x
Reference in New Issue
Block a user