Cyclone-Team/gramps
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Narrative web: Ancestor's tree Fix display looks weird (#929)

Browse Source 
* 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 2019-10-17 02:17:31 +02:00 committed by Sam Manzi
parent 75b0b66269
commit ee1d9be898
3 changed files with 106 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
data/css/ancestortree.css
View File

@ -9,7 +9,7 @@
# the Free Software Foundation; either version 2 of the License, or # the Free Software Foundation; either version 2 of the License, or
# (at your option) any later version. # (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 # but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details. # GNU General Public License for more details.
@ -20,10 +20,10 @@
# #
# $Id: $ # $Id: $
# #
************************************************************************************************** *******************************************************************************
GRAMPS Cascading Style Sheet GRAMPS Cascading Style Sheet
Style Name: Combined Ancestor Tree Style Sheet Style Name: Combined Ancestor Tree Style Sheet
*************************************************************************************************** *******************************************************************************
# #
===== Ancestor Graph Color Scheme ===== ===== Ancestor Graph Color Scheme =====
Males #BCEAF6 Males #BCEAF6
@ -33,10 +33,8 @@ Unknown #000
===== Web Graphics ===== ===== Web Graphics =====
Males Web_Gender_Male.png Males Web_Gender_Male.png
Females Web_Gender_Female.png Females Web_Gender_Female.png
# ------------------------------------------------------------------------------------------------- */ # -------------------------------------------------------------------------- #
/* Subsections : Ancestors Tree -------------------------------------------- */
/* Subsections : Ancestors Tree
----------------------------------------------------- */
#tree { #tree {
page-break-before:always; page-break-before:always;
margin:0; margin:0;
@ -52,8 +50,8 @@ Females Web_Gender_Female.png
} }
#treeContainer div.boxbg { #treeContainer div.boxbg {
position:absolute; position:absolute;
margin:0; margin:0px;
padding:0; padding:0px;
background:none; background:none;
} }
#treeContainer div.boxbg a, #treeContainer div.boxbg a,
@ -61,41 +59,43 @@ Females Web_Gender_Female.png
position:relative; position:relative;
z-index:10; z-index:10;
display:block; display:block;
font:normal .7em/1.4em sans-serif; font:normal 1.1em/1.4em sans-serif;
text-align:center; text-align:center;
word-break:break-word;
word-wrap:break-word;
text-decoration:none; text-decoration:none;
color: #00029D; color: #00029D;
width:118px; width:280px;
padding:5px 20px 7px 20px; min-height: 70px;
margin-left:16px; margin-left:16px;
background-color: #FFF; border: solid 2px #000;
border: solid 1px #000; border-radius: 10px;
} }
#treeContainer div.boxbg a.noThumb, #treeContainer div.boxbg a.noThumb,
#treeContainer div.AncCol3 a, #treeContainer div.AncCol4 a,
#treeContainer div.AncCol4 a,
#treeContainer div.AncCol3 span.unlinked,
#treeContainer div.AncCol4 span.unlinked { #treeContainer div.AncCol4 span.unlinked {
margin-top:10px; margin-top:10px;
float: right;
} }
#treeContainer div.boxbg a:hover { #treeContainer div.boxbg a:hover {
position:relative; position:relative;
z-index:999; z-index:999;
font-size:1em; font-size:1.3em;
word-break:break-word;
word-wrap:break-word;
text-decoration:none; text-decoration:none;
color: #00029D; color: #00029D;
width:190px; width:400px;
margin-left:-20px; margin-left:-20px;
padding:10px 25px 12px 25px; padding: 0px 0px 0px 40px;
border: solid 2px #000;
} }
#treeContainer div.boxbg a:hover, #treeContainer div.boxbg a:hover,
#treeContainer div.AncCol3 a:hover,
#treeContainer div.AncCol4 a:hover { #treeContainer div.AncCol4 a:hover {
margin-top:-44px; margin-top:-44px;
} }
#treeContainer div.boxbg a.noThumb:hover { #treeContainer div.boxbg a.noThumb:hover {
margin-top:0; margin-top:0;
padding-left: 10px;
} }
#treeContainer div.AncCol0 a:hover { #treeContainer div.AncCol0 a:hover {
margin-left:12px; margin-left:12px;
@ -105,48 +105,73 @@ Females Web_Gender_Female.png
} }
#treeContainer div.boxbg span.thumbnail { #treeContainer div.boxbg span.thumbnail {
display:block; display:block;
max-width:80px; position: absolute;
max-height:65px; max-width:85px;
margin:0 auto; max-height:75px;
padding:4px 0; left: 3px;
top: 3px;
} }
#treeContainer div.boxbg span.thumbnail img { #treeContainer div.boxbg a.thumbnail table td.img {
max-width:80px; padding-right: 5px;
max-height:65px;
margin:0 auto;
} }
#treeContainer div.boxbg a:hover span.thumbnail, #treeContainer div.boxbg a:hover span.thumbnail img { #treeContainer div.boxbg a.thumbnail:hover table td.img {
height:80px; 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; display:none;
} }
#treeContainer div.boxbg a:hover span.thumbnail { #treeContainer div.boxbg a:hover span.thumbnail {
display:block; display:block;
} }
#treeContainer div.boxbg span.fullname { #treeContainer div.boxbg span.fullname {
display: none; display: none;
} }
#treeContainer div.boxbg span.shortname { #treeContainer div.boxbg span.shortname {
display: inline; display: inline;
} }
#treeContainer div.boxbg a:hover span.fullname { #treeContainer div.boxbg a:hover span.fullname {
display: inline; display: inline;
} }
#treeContainer div.boxbg a:hover span.shortname { #treeContainer div.boxbg a:hover span.shortname {
display: none; display: none;
} }
#treeContainer div.boxbg a:hover {
float: right;
margin-top: 10px;
border: solid 4px #000;
}
#treeContainer div.male a, #treeContainer div.male a,
#treeContainer div.male span.unlinked { #treeContainer div.male span.unlinked {
background:url(../images/Web_Gender_Male.png) #BCEAF6 no-repeat top right; 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 { #treeContainer div.female span.unlinked {
background:url(../images/Web_Gender_Female.png) #FFC0CB no-repeat top right; background:url(../images/Web_Gender_Female.png) #FFC0CB no-repeat top right;
} }

27
gramps/plugins/webreport/buchheim.py
View File

@ -132,7 +132,6 @@ class DrawTree(object):
""" """
return self.tree.handle return self.tree.handle
def buchheim(tree, node_width, h_separation, node_height, v_separation): def buchheim(tree, node_width, h_separation, node_height, v_separation):
""" """
Calculate the position of elements of the graph given a minimum 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) min_x = second_walk(draw_tree, 0, node_width+h_separation, 0)
if min_x < 0: if min_x < 0:
third_walk(draw_tree, 0 - min_x) 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): def third_walk(tree, adjust):
""" """
@ -156,7 +176,6 @@ def third_walk(tree, adjust):
for child in tree.children: for child in tree.children:
third_walk(child, adjust) third_walk(child, adjust)
def firstwalk(tree, node_height, v_separation): def firstwalk(tree, node_height, v_separation):
""" """
Determine horizontal positions. Determine horizontal positions.
@ -189,7 +208,6 @@ def firstwalk(tree, node_height, v_separation):
tree.height = max(tree.height, tree.coord_y) tree.height = max(tree.height, tree.coord_y)
return tree return tree
def apportion(tree, default_ancestor, v_separation): def apportion(tree, default_ancestor, v_separation):
""" """
Figure out relative positions of node in a tree. 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) child.height = max(child.height, child.coord_y)
tree.height = max(tree.height, child.height) tree.height = max(tree.height, child.height)
def ancestor(vil, tree, default_ancestor): def ancestor(vil, tree, default_ancestor):
""" """
The relevant text is at the bottom of page 7 of The relevant text is at the bottom of page 7 of

29
gramps/plugins/webreport/person.py
View File

@ -84,8 +84,8 @@ _ = glocale.translation.sgettext
LOG = logging.getLogger(".NarrativeWeb") LOG = logging.getLogger(".NarrativeWeb")
getcontext().prec = 8 getcontext().prec = 8
_WIDTH = 160 _WIDTH = 280
_HEIGHT = 120 _HEIGHT = 140
_VGAP = 10 _VGAP = 10
_HGAP = 30 _HGAP = 30
_SHADOW = 5 _SHADOW = 5
@ -1020,15 +1020,20 @@ class PersonPages(BasePage):
death = self.rlocale.get_date(dd_event.get_date_object()) death = self.rlocale.get_date(dd_event.get_date_object())
if death == "": if death == "":
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: if thumbnail_url is None:
boxbg += Html("a", href=url, class_="noThumb") + value boxbg += Html("a", href=url, class_="noThumb") + value
else: else:
thumb = Html("span", class_="thumbnail") + ( trow = Html("tr")
Html("img", src=thumbnail_url, alt="Image: " + person_name)) img = Html("img", src=thumbnail_url, alt="Img: " + person_name)
boxbg += Html("a", href=url) + thumb + value trow += Html("td", img, class_="img")
trow += tdval
table += trow
boxbg += Html("a", table, href=url, class_="thumbnail")
shadow = Html( shadow = Html(
"div", class_="shadow", inline=True, "div", "", class_="shadow", inline=True,
style="top: %dpx; left: %dpx;" % (top + _SHADOW, xoff + _SHADOW)) style="top: %dpx; left: %dpx;" % (top + _SHADOW, xoff + _SHADOW))
return [boxbg, shadow] return [boxbg, shadow]
@ -1175,16 +1180,18 @@ class PersonPages(BasePage):
# We now apply the Buchheim algorith to this tree, and it assigns X # We now apply the Buchheim algorith to this tree, and it assigns X
# and Y positions to all elements in the tree. # 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 # We know the height in 'pixels' where every Ancestor will sit
# precisely on an integer unit boundary. # precisely on an integer unit boundary.
with Html("div", id="tree", class_="subsection") as tree: with Html("div", id="tree", class_="subsection") as tree:
tree += Html("h4", _('Ancestors'), inline=True) tree += Html("h4", _('Ancestors'), inline=True)
with Html("div", id="treeContainer", with Html("div", id="treeContainer",
style="width:%dpx; height:%dpx;" % ( style="width:%dpx; height:%dpx; top: %dpx" % (
l_tree.width + _XOFFSET + _WIDTH, l_tree.width + _XOFFSET* (generations + 1) + _WIDTH,
l_tree.height + _HEIGHT + _VGAP) height + top + _HEIGHT + _VGAP, top)
) as container: ) as container:
tree += container tree += container
container += self.draw_tree(l_tree, 1, None) container += self.draw_tree(l_tree, 1, None)