forked from docs/docsportal
New CSS classes for fixing cards
This commit is contained in:
parent
3a128fc016
commit
53a08998c6
@ -138,13 +138,13 @@ def container_item_html(self, node):
|
|||||||
def navigator_html(self, node):
|
def navigator_html(self, node):
|
||||||
# This method renders containers of service groups with links to the
|
# This method renders containers of service groups with links to the
|
||||||
# document of the specified type
|
# 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:
|
for cat in METADATA.service_categories:
|
||||||
category = cat["name"]
|
category = cat["name"]
|
||||||
category_title = cat["title"]
|
category_title = cat["title"]
|
||||||
data += (
|
data += (
|
||||||
f'<div class="col"><div class="card">'
|
f'<div class="card item-docsportal">'
|
||||||
f'<div class="card-body">'
|
f'<div class="card-body">'
|
||||||
f'<h5 class="card-title">{category_title}</h5></div>'
|
f'<h5 class="card-title">{category_title}</h5></div>'
|
||||||
f'<ul class="list-group list-group-flush">'
|
f'<ul class="list-group list-group-flush">'
|
||||||
@ -170,7 +170,7 @@ def navigator_html(self, node):
|
|||||||
f'</div></a></li>'
|
f'</div></a></li>'
|
||||||
)
|
)
|
||||||
|
|
||||||
data += '</ul></div></div>'
|
data += '</ul></div>'
|
||||||
|
|
||||||
data += '</div>'
|
data += '</div>'
|
||||||
|
|
||||||
@ -181,12 +181,12 @@ def navigator_html(self, node):
|
|||||||
def service_group_html(self, node):
|
def service_group_html(self, node):
|
||||||
# This method renders containers per each service of the category with all
|
# This method renders containers per each service of the category with all
|
||||||
# links as individual list items
|
# 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(
|
for k, v in METADATA.services_with_docs_by_category(
|
||||||
node['service_category'], environment=node['environment']).items():
|
node['service_category'], environment=node['environment']).items():
|
||||||
title = v["service_title"]
|
title = v["service_title"]
|
||||||
data += (
|
data += (
|
||||||
f'<div class="col"><div class="card">'
|
f'<div class="card item-docsportal">'
|
||||||
f'<div class="card-body"><h5 class="card-title">'
|
f'<div class="card-body"><h5 class="card-title">'
|
||||||
f'{title}</h5></div>'
|
f'{title}</h5></div>'
|
||||||
f'<ul class="list-group list-group-flush">'
|
f'<ul class="list-group list-group-flush">'
|
||||||
@ -203,7 +203,7 @@ def service_group_html(self, node):
|
|||||||
f'</div></a></li>'
|
f'</div></a></li>'
|
||||||
)
|
)
|
||||||
# Row end
|
# Row end
|
||||||
data += '</ul></div></div>'
|
data += '</ul></div>'
|
||||||
data += '</div>'
|
data += '</div>'
|
||||||
|
|
||||||
self.body.append(data)
|
self.body.append(data)
|
||||||
|
@ -56,3 +56,41 @@
|
|||||||
.docs-sidebar-toc li.toctree-l2:not(.current) > ul {
|
.docs-sidebar-toc li.toctree-l2:not(.current) > ul {
|
||||||
display: none;
|
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