marmulle/docsportal
1
0
Fork 0
forked from docs/docsportal
Code Pull Requests Activity

New CSS classes for fixing cards

Browse Source 
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:
Gode, Sebastian 2023-04-17 08:47:18 +00:00 committed by zuul
parent 3a128fc016
commit da043bd5eb
2 changed files with 44 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/source/_ext/cont.py
View File

@ -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)

38
doc/source/_static/css/default.css
View File

@ -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 */