Narrative web: Ancestor's tree Fix display looks weird (#929)
* Narrative web: Ancestor's tree display looks weird Solves the following: - Person boxes overlap - Some person boxes partially visible or hidden Fixes #11382 * Narrative web: some cleanup in ancestortree.css * Narrative web : ancestor tree and long names. * Adapt ancestor tree css file for all themes
This commit is contained in:
Serge Noiraud
Sam Manzi
parent
75b0b66269
commit
ee1d9be898
@ -9,7 +9,7 @@
|
||||
# the Free Software Foundation; either version 2 of the License, or
|
||||
# (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU General Public License for more details.
|
||||
@ -20,10 +20,10 @@
|
||||
#
|
||||
# $Id: $
|
||||
#
|
||||
**************************************************************************************************
|
||||
*******************************************************************************
|
||||
GRAMPS Cascading Style Sheet
|
||||
Style Name: Combined Ancestor Tree Style Sheet
|
||||
***************************************************************************************************
|
||||
*******************************************************************************
|
||||
#
|
||||
===== Ancestor Graph Color Scheme =====
|
||||
Males #BCEAF6
|
||||
@ -33,10 +33,8 @@ Unknown #000
|
||||
===== Web Graphics =====
|
||||
Males Web_Gender_Male.png
|
||||
Females Web_Gender_Female.png
|
||||
# ------------------------------------------------------------------------------------------------- */
|
||||
|
||||
/* Subsections : Ancestors Tree
|
||||
----------------------------------------------------- */
|
||||
# -------------------------------------------------------------------------- #
|
||||
/* Subsections : Ancestors Tree -------------------------------------------- */
|
||||
#tree {
|
||||
page-break-before:always;
|
||||
margin:0;
|
||||
@ -52,8 +50,8 @@ Females Web_Gender_Female.png
|
||||
}
|
||||
#treeContainer div.boxbg {
|
||||
position:absolute;
|
||||
margin:0;
|
||||
padding:0;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
background:none;
|
||||
}
|
||||
#treeContainer div.boxbg a,
|
||||
@ -61,41 +59,43 @@ Females Web_Gender_Female.png
|
||||
position:relative;
|
||||
z-index:10;
|
||||
display:block;
|
||||
font:normal .7em/1.4em sans-serif;
|
||||
font:normal 1.1em/1.4em sans-serif;
|
||||
text-align:center;
|
||||
word-break:break-word;
|
||||
word-wrap:break-word;
|
||||
text-decoration:none;
|
||||
color: #00029D;
|
||||
width:118px;
|
||||
padding:5px 20px 7px 20px;
|
||||
width:280px;
|
||||
min-height: 70px;
|
||||
margin-left:16px;
|
||||
background-color: #FFF;
|
||||
border: solid 1px #000;
|
||||
border: solid 2px #000;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#treeContainer div.boxbg a.noThumb,
|
||||
#treeContainer div.AncCol3 a,
|
||||
#treeContainer div.AncCol4 a,
|
||||
#treeContainer div.AncCol3 span.unlinked,
|
||||
#treeContainer div.AncCol4 a,
|
||||
#treeContainer div.AncCol4 span.unlinked {
|
||||
margin-top:10px;
|
||||
float: right;
|
||||
}
|
||||
#treeContainer div.boxbg a:hover {
|
||||
position:relative;
|
||||
z-index:999;
|
||||
font-size:1em;
|
||||
font-size:1.3em;
|
||||
word-break:break-word;
|
||||
word-wrap:break-word;
|
||||
text-decoration:none;
|
||||
color: #00029D;
|
||||
width:190px;
|
||||
width:400px;
|
||||
margin-left:-20px;
|
||||
padding:10px 25px 12px 25px;
|
||||
border: solid 2px #000;
|
||||
padding: 0px 0px 0px 40px;
|
||||
}
|
||||
#treeContainer div.boxbg a:hover,
|
||||
#treeContainer div.AncCol3 a:hover,
|
||||
#treeContainer div.boxbg a:hover,
|
||||
#treeContainer div.AncCol4 a:hover {
|
||||
margin-top:-44px;
|
||||
}
|
||||
#treeContainer div.boxbg a.noThumb:hover {
|
||||
margin-top:0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#treeContainer div.AncCol0 a:hover {
|
||||
margin-left:12px;
|
||||
@ -105,48 +105,73 @@ Females Web_Gender_Female.png
|
||||
}
|
||||
#treeContainer div.boxbg span.thumbnail {
|
||||
display:block;
|
||||
max-width:80px;
|
||||
max-height:65px;
|
||||
margin:0 auto;
|
||||
padding:4px 0;
|
||||
position: absolute;
|
||||
max-width:85px;
|
||||
max-height:75px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
}
|
||||
#treeContainer div.boxbg span.thumbnail img {
|
||||
max-width:80px;
|
||||
max-height:65px;
|
||||
margin:0 auto;
|
||||
#treeContainer div.boxbg a.thumbnail table td.img {
|
||||
padding-right: 5px;
|
||||
}
|
||||
#treeContainer div.boxbg a:hover span.thumbnail, #treeContainer div.boxbg a:hover span.thumbnail img {
|
||||
height:80px;
|
||||
#treeContainer div.boxbg a.thumbnail:hover table td.img {
|
||||
padding-right: 9px;
|
||||
}
|
||||
#treeContainer div.AncCol3 span.thumbnail, #treeContainer div.AncCol4 span.thumbnail {
|
||||
#treeContainer div.boxbg a.thumbnail table td.name {
|
||||
padding-top:3px;
|
||||
padding-left: 2px;
|
||||
padding-right: 23px;
|
||||
width: 90%;
|
||||
}
|
||||
#treeContainer div.boxbg a.thumbnail img {
|
||||
margin-left:0px;
|
||||
padding-left: 0px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#treeContainer div.boxbg a.thumbnail:hover img {
|
||||
max-height:90%;
|
||||
margin-left:5px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#treeContainer div.boxbg table td:first-child, table th:first-child {
|
||||
padding-left: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
#IndividualDetail div.subsection table tr td:first-child {
|
||||
padding-left: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
#treeContainer #treeContainer div.AncCol4 span.thumbnail {
|
||||
display:none;
|
||||
}
|
||||
#treeContainer div.boxbg a:hover span.thumbnail {
|
||||
display:block;
|
||||
}
|
||||
|
||||
#treeContainer div.boxbg span.fullname {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#treeContainer div.boxbg span.shortname {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#treeContainer div.boxbg a:hover span.fullname {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#treeContainer div.boxbg a:hover span.shortname {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#treeContainer div.boxbg a:hover {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
border: solid 4px #000;
|
||||
}
|
||||
#treeContainer div.male a,
|
||||
#treeContainer div.male span.unlinked {
|
||||
background:url(../images/Web_Gender_Male.png) #BCEAF6 no-repeat top right;
|
||||
}
|
||||
#treeContainer div.female a,
|
||||
#treeContainer div.female a,
|
||||
#treeContainer div.female span.unlinked {
|
||||
background:url(../images/Web_Gender_Female.png) #FFC0CB no-repeat top right;
|
||||
}
|
||||
|
||||
@ -132,7 +132,6 @@ class DrawTree(object):
|
||||
"""
|
||||
return self.tree.handle
|
||||
|
||||
|
||||
def buchheim(tree, node_width, h_separation, node_height, v_separation):
|
||||
"""
|
||||
Calculate the position of elements of the graph given a minimum
|
||||
@ -142,9 +141,30 @@ def buchheim(tree, node_width, h_separation, node_height, v_separation):
|
||||
min_x = second_walk(draw_tree, 0, node_width+h_separation, 0)
|
||||
if min_x < 0:
|
||||
third_walk(draw_tree, 0 - min_x)
|
||||
top = get_min_coord_y(draw_tree)
|
||||
height = get_max_coord_y(draw_tree)
|
||||
|
||||
return draw_tree
|
||||
return (draw_tree, top, height)
|
||||
|
||||
def get_min_coord_y(tree, min_value=100.0):
|
||||
""" Get the minimum coord_y """
|
||||
if tree.coord_y < min_value:
|
||||
min_value = tree.coord_y
|
||||
for child in tree.children:
|
||||
min_v = get_min_coord_y(child, min_value)
|
||||
if min_value > min_v:
|
||||
min_value = min_v
|
||||
return min_value
|
||||
|
||||
def get_max_coord_y(tree, max_value=0.0):
|
||||
""" Get the maximum coord_y """
|
||||
if tree.coord_y > max_value:
|
||||
max_value = tree.coord_y
|
||||
for child in tree.children:
|
||||
max_v = get_max_coord_y(child, max_value)
|
||||
if max_value < max_v:
|
||||
max_value = max_v
|
||||
return max_value
|
||||
|
||||
def third_walk(tree, adjust):
|
||||
"""
|
||||
@ -156,7 +176,6 @@ def third_walk(tree, adjust):
|
||||
for child in tree.children:
|
||||
third_walk(child, adjust)
|
||||
|
||||
|
||||
def firstwalk(tree, node_height, v_separation):
|
||||
"""
|
||||
Determine horizontal positions.
|
||||
@ -189,7 +208,6 @@ def firstwalk(tree, node_height, v_separation):
|
||||
tree.height = max(tree.height, tree.coord_y)
|
||||
return tree
|
||||
|
||||
|
||||
def apportion(tree, default_ancestor, v_separation):
|
||||
"""
|
||||
Figure out relative positions of node in a tree.
|
||||
@ -263,7 +281,6 @@ def execute_shifts(tree):
|
||||
child.height = max(child.height, child.coord_y)
|
||||
tree.height = max(tree.height, child.height)
|
||||
|
||||
|
||||
def ancestor(vil, tree, default_ancestor):
|
||||
"""
|
||||
The relevant text is at the bottom of page 7 of
|
||||
|
||||
@ -84,8 +84,8 @@ _ = glocale.translation.sgettext
|
||||
LOG = logging.getLogger(".NarrativeWeb")
|
||||
getcontext().prec = 8
|
||||
|
||||
_WIDTH = 160
|
||||
_HEIGHT = 120
|
||||
_WIDTH = 280
|
||||
_HEIGHT = 140
|
||||
_VGAP = 10
|
||||
_HGAP = 30
|
||||
_SHADOW = 5
|
||||
@ -1020,15 +1020,20 @@ class PersonPages(BasePage):
|
||||
death = self.rlocale.get_date(dd_event.get_date_object())
|
||||
if death == "":
|
||||
death = "..."
|
||||
value = person_name + "<br/>*", birth, "<br/>+", death
|
||||
value = person_name + "<br/>*"+ birth+ "<br/>+"+ death
|
||||
tdval = Html("td", value, class_="name")
|
||||
table = Html("table", class_="table")
|
||||
if thumbnail_url is None:
|
||||
boxbg += Html("a", href=url, class_="noThumb") + value
|
||||
else:
|
||||
thumb = Html("span", class_="thumbnail") + (
|
||||
Html("img", src=thumbnail_url, alt="Image: " + person_name))
|
||||
boxbg += Html("a", href=url) + thumb + value
|
||||
trow = Html("tr")
|
||||
img = Html("img", src=thumbnail_url, alt="Img: " + person_name)
|
||||
trow += Html("td", img, class_="img")
|
||||
trow += tdval
|
||||
table += trow
|
||||
boxbg += Html("a", table, href=url, class_="thumbnail")
|
||||
shadow = Html(
|
||||
"div", class_="shadow", inline=True,
|
||||
"div", "", class_="shadow", inline=True,
|
||||
style="top: %dpx; left: %dpx;" % (top + _SHADOW, xoff + _SHADOW))
|
||||
|
||||
return [boxbg, shadow]
|
||||
@ -1175,16 +1180,18 @@ class PersonPages(BasePage):
|
||||
|
||||
# We now apply the Buchheim algorith to this tree, and it assigns X
|
||||
# and Y positions to all elements in the tree.
|
||||
l_tree = buchheim(layout_tree, _WIDTH, _HGAP, _HEIGHT, _VGAP)
|
||||
l_tree, top, height = buchheim(layout_tree, _WIDTH, _HGAP,
|
||||
_HEIGHT, _VGAP)
|
||||
|
||||
top = abs(top)
|
||||
# We know the height in 'pixels' where every Ancestor will sit
|
||||
# precisely on an integer unit boundary.
|
||||
with Html("div", id="tree", class_="subsection") as tree:
|
||||
tree += Html("h4", _('Ancestors'), inline=True)
|
||||
with Html("div", id="treeContainer",
|
||||
style="width:%dpx; height:%dpx;" % (
|
||||
l_tree.width + _XOFFSET + _WIDTH,
|
||||
l_tree.height + _HEIGHT + _VGAP)
|
||||
style="width:%dpx; height:%dpx; top: %dpx" % (
|
||||
l_tree.width + _XOFFSET* (generations + 1) + _WIDTH,
|
||||
height + top + _HEIGHT + _VGAP, top)
|
||||
) as container:
|
||||
tree += container
|
||||
container += self.draw_tree(l_tree, 1, None)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user