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
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
# (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;
}