Multiple languages for the narrative web and optional other additions (#1051)
* Navweb: multi-language configuration. * Navweb: multi-language exec, navigation menu, css * Navweb: make css responsive for multi-language * Language menu must work with a non english lang * Avoid to copy common files for each language * Use cms and archive in multi-languages * Add the default index. * Some cleanup. * Images: performances improvement with image_size Need to use the magic library (python-magic, python3-magic, ...) If this library don't exist on the system, continue to use the Gdk method. - force archive if we use CMS - remove some unused code - some strings are not translatable - stay on the same page when you change language - add image in the ancestor tree for all levels and not for the first 5 performances: - copy images and thumbs only for the first language * Some minor corrections and performances test * Update comments for methods and functions * Narweb: add show tags option * Try to translate tags and suppress the colon (:) * Narweb: integrate of webcal for multilang use For each lang, we use the related calendar if it exists * Death string only translated for the locale lang * set correct url for extrapage. * Add optional toggle for html sections * show birth and death date if close option selected * No background in references section with Mainz css * Remove photo from list incompatible with multilang * Add the first photo to the place page marker * Add associated persons. * Solves 'undefined' in map popup. * Calendar: Set the background for the current day * Thumbnail align problem with long description. * Set the contact page date to the note date * Add a scroll to top button. * Increase the nb of generations since we can scroll * Difficult to see the "go to top" icon. * Better management for the toggle switch
This commit is contained in:
Serge Noiraud
GitHub
+102
-4
@@ -162,6 +162,7 @@ a[href]:hover, a[href]:active {
|
||||
----------------------------------------------------- */
|
||||
div#nav, #subnavigation {
|
||||
border: solid 1px #EEE; /* needed by IE7 */
|
||||
position: relative;
|
||||
}
|
||||
#subnavigation ul {
|
||||
overflow: hidden;
|
||||
@@ -199,6 +200,35 @@ div#nav ul li.CurrentSection a {
|
||||
#subnavigation ul li.CurrentSection a {
|
||||
background-color: white;
|
||||
}
|
||||
div#nav li.lang {
|
||||
font-size: smaller;
|
||||
font-family: sans-serif;
|
||||
padding-top: .4em;
|
||||
padding-bottom: .2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
div#nav li.lang:hover > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
div#nav ul.lang {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
background-color: #EEE;
|
||||
top: -1em;
|
||||
font-size: larger;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div#nav ul.lang:hover {
|
||||
float: initial;
|
||||
padding-left: 0px;
|
||||
}
|
||||
div#nav ul.lang li {
|
||||
float: none;
|
||||
padding: 2px;
|
||||
}
|
||||
/* Alphabet Navigation
|
||||
----------------------------------------------------- */
|
||||
div#alphanav {
|
||||
@@ -316,6 +346,21 @@ div#nav::after {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
.lang {
|
||||
position: relative;
|
||||
}
|
||||
.lang > .lang {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.lang:hover > .lang {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
@@ -591,11 +636,13 @@ div#SourceDetail {
|
||||
|
||||
/* Subsection
|
||||
----------------------------------------------------- */
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay {
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay,
|
||||
#Contact #GalleryDisplay {
|
||||
float: right;
|
||||
margin: 1em;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
height: auto;
|
||||
@@ -613,7 +660,7 @@ div#SourceDetail {
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -625,6 +672,10 @@ div#SourceDetail {
|
||||
table.relationships tr:hover {
|
||||
background-color: #DDE;
|
||||
}
|
||||
div.content table.tags {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div#families table.fixed_subtables table.eventlist {
|
||||
table-layout: fixed;
|
||||
@@ -656,6 +707,12 @@ div#families table.fixed_subtables .Child table.eventlist .ColumnDate {
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
@@ -672,7 +729,8 @@ div#families table.fixed_subtables .Child table.eventlist .ColumnDate {
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
@@ -982,3 +1040,43 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
|
||||
border-radius: 45px;
|
||||
border: 5px solid;
|
||||
}
|
||||
h4 button.icon {
|
||||
width: 0.9em;
|
||||
border: 0px solid;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
background: transparent;
|
||||
}
|
||||
h4 button.icon-close {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
h4 button.icon-open {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
svg {
|
||||
fill: black;
|
||||
}
|
||||
/* Go to the top of the page */
|
||||
#gototop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#gototop:hover {
|
||||
background-color: #CCC;
|
||||
}
|
||||
|
||||
@@ -254,6 +254,7 @@ p#user_header {
|
||||
div#nav, #subnavigation {
|
||||
border: solid 1px #EEE; /* needed by IE7 */
|
||||
background-color: #13A926;
|
||||
position: relative;
|
||||
}
|
||||
#subnavigation ul {
|
||||
overflow: hidden;
|
||||
@@ -291,6 +292,33 @@ div#nav ul li.CurrentSection a {
|
||||
#nav ul li.CurrentSection a:hover {
|
||||
background-color: #903;
|
||||
}
|
||||
div#nav li.lang {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
padding-top: .5em;
|
||||
}
|
||||
div#nav li.lang:hover > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
div#nav ul.lang {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
background-color: #EEE;
|
||||
border-bottom: solid 1px #999;
|
||||
padding: 2px 1px;
|
||||
top: -1em;
|
||||
}
|
||||
div#nav ul.lang:hover {
|
||||
float: initial;
|
||||
}
|
||||
div#nav ul.lang li {
|
||||
float: none;
|
||||
font-size: larger;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* Webcal
|
||||
----------------------------------------------------- */
|
||||
@@ -470,6 +498,21 @@ div#nav::after {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
.lang {
|
||||
position: relative;
|
||||
}
|
||||
.lang > .lang {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.lang:hover > .lang {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
@@ -652,6 +695,10 @@ div#RelationshipList, div#RelationshipDetail {
|
||||
div#RelationshipDetail div#FamilyDetail table.infolist tbody tr td {
|
||||
border: none;
|
||||
}
|
||||
div.content table.tags {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Places
|
||||
=================================================----- */
|
||||
@@ -1393,7 +1440,8 @@ div.Residence table.infolist tr td {
|
||||
#indivgallery .thumbnail {
|
||||
margin: 0;
|
||||
float: left;
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
}
|
||||
@@ -1835,3 +1883,43 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
|
||||
border-radius: 45px;
|
||||
border: 5px solid;
|
||||
}
|
||||
h4 button.icon {
|
||||
width: 0.9em;
|
||||
border: 0px solid;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
background: transparent;
|
||||
}
|
||||
h4 button.icon-close {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
h4 button.icon-open {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
svg {
|
||||
fill: #13A926;
|
||||
}
|
||||
/* Go to the top of the page */
|
||||
#gototop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#gototop:hover {
|
||||
background-color: #BCEAF6;
|
||||
}
|
||||
|
||||
@@ -163,6 +163,7 @@ a[href]:hover, a[href]:active {
|
||||
----------------------------------------------------- */
|
||||
div#nav, #subnavigation {
|
||||
border: solid 1px #454; /* needed by IE7 */
|
||||
position: relative;
|
||||
}
|
||||
#subnavigation ul {
|
||||
overflow: hidden;
|
||||
@@ -203,6 +204,36 @@ div#nav ul li.CurrentSection a {
|
||||
color: #454;
|
||||
background-color: white;
|
||||
}
|
||||
div#nav li.lang {
|
||||
color: #E0E6E0;
|
||||
font-size: smaller;
|
||||
font-family: sans-serif;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
div#nav li.lang:hover > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
div#nav ul.lang {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
padding: 0px;
|
||||
background-color: #454;
|
||||
top: -1em;
|
||||
font-size: larger;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div#nav ul.lang:hover {
|
||||
float: initial;
|
||||
}
|
||||
div#nav ul.lang li {
|
||||
float: none;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
/* Alphabet Navigation
|
||||
----------------------------------------------------- */
|
||||
div#alphanav {
|
||||
@@ -326,6 +357,21 @@ div#nav::after {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
.lang {
|
||||
position: relative;
|
||||
}
|
||||
.lang > .lang {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.lang:hover > .lang {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
@@ -678,7 +724,7 @@ div#SourceDetail {
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -690,6 +736,10 @@ div#SourceDetail {
|
||||
table.relationships tr:hover {
|
||||
background-color: #9DBF9D;
|
||||
}
|
||||
div.content table.tags {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
}
|
||||
div#families table.fixed_subtables table.eventlist {
|
||||
table-layout: fixed;
|
||||
}
|
||||
@@ -711,6 +761,12 @@ div#families table.attrlist td.ColumnType {
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
@@ -727,7 +783,8 @@ div#families table.attrlist td.ColumnType {
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
@@ -1045,3 +1102,43 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
|
||||
border-radius: 45px;
|
||||
border: 5px solid;
|
||||
}
|
||||
h4 button.icon {
|
||||
width: 0.9em;
|
||||
border: 0px solid;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
background: transparent;
|
||||
}
|
||||
h4 button.icon-close {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
h4 button.icon-open {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
svg {
|
||||
fill: #9DBF9D;
|
||||
}
|
||||
/* Go to the top of the page */
|
||||
#gototop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: white;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#gototop:hover {
|
||||
background-color: #E0E6E0;
|
||||
}
|
||||
|
||||
@@ -164,6 +164,7 @@ a[href]:hover, a[href]:active {
|
||||
----------------------------------------------------- */
|
||||
div#nav, #subnavigation {
|
||||
border: solid 1px #E0E0E9; /* needed by IE7 */
|
||||
position: relative;
|
||||
}
|
||||
#subnavigation ul {
|
||||
overflow: hidden;
|
||||
@@ -201,6 +202,35 @@ div#nav ul li.CurrentSection a {
|
||||
#subnavigation ul li.CurrentSection a {
|
||||
background-color: #FAFAFF;
|
||||
}
|
||||
div#nav li.lang {
|
||||
font-size: smaller;
|
||||
font-family: sans-serif;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
div#nav li.lang:hover > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
div#nav ul.lang {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
padding: 2px;
|
||||
background-color: #E0E0E9;
|
||||
top: -1em;
|
||||
font-size: larger;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div#nav ul.lang:hover {
|
||||
float: initial;
|
||||
}
|
||||
div#nav ul.lang li {
|
||||
float: none;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
/* Alphabet Navigation
|
||||
----------------------------------------------------- */
|
||||
@@ -319,6 +349,21 @@ div#nav::after {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
.lang {
|
||||
position: relative;
|
||||
}
|
||||
.lang > .lang {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.lang:hover > .lang {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
@@ -675,7 +720,7 @@ div#SourceDetail {
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -687,6 +732,10 @@ div#SourceDetail {
|
||||
table.relationships tr:hover {
|
||||
background-color: #B4B4CB;
|
||||
}
|
||||
div.content table.tags {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
}
|
||||
div#families table.fixed_subtables table.eventlist {
|
||||
table-layout: fixed;
|
||||
}
|
||||
@@ -708,6 +757,12 @@ div#families table.attrlist td.ColumnType {
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
@@ -724,7 +779,8 @@ div#families table.attrlist td.ColumnType {
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
@@ -1045,3 +1101,43 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
|
||||
border-radius: 45px;
|
||||
border: 5px solid;
|
||||
}
|
||||
h4 button.icon {
|
||||
width: 0.9em;
|
||||
border: 0px solid;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
background: transparent;
|
||||
}
|
||||
h4 button.icon-close {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
h4 button.icon-open {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
svg {
|
||||
fill: #2E2E61;
|
||||
}
|
||||
/* Go to the top of the page */
|
||||
#gototop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#gototop:hover {
|
||||
background-color: #E0E0E9;
|
||||
}
|
||||
|
||||
@@ -164,6 +164,7 @@ a[href]:hover, a[href]:active {
|
||||
----------------------------------------------------- */
|
||||
div#nav, #subnavigation {
|
||||
border: solid 1px #FFE09F; /* needed by IE7 */
|
||||
position: relative;
|
||||
}
|
||||
#subnavigation ul {
|
||||
overflow: hidden;
|
||||
@@ -201,6 +202,35 @@ div#nav ul li.CurrentSection a {
|
||||
#subnavigation ul li.CurrentSection a {
|
||||
background-color: #FFFBE7;
|
||||
}
|
||||
div#nav li.lang {
|
||||
font-size: smaller;
|
||||
font-family: sans-serif;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
div#nav li.lang:hover > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
div#nav ul.lang {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
padding: 5px 2px;
|
||||
background-color: #FFE09F;
|
||||
top: -1em;
|
||||
font-size: larger;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div#nav ul.lang:hover {
|
||||
float: initial;
|
||||
}
|
||||
div#nav ul.lang li {
|
||||
float: none;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
/* Alphabet Navigation
|
||||
----------------------------------------------------- */
|
||||
@@ -319,6 +349,21 @@ div#nav::after {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
.lang {
|
||||
position: relative;
|
||||
}
|
||||
.lang > .lang {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.lang:hover > .lang {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
@@ -676,7 +721,7 @@ div#SourceDetail {
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: visible;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -688,6 +733,10 @@ div#SourceDetail {
|
||||
table.relationships tr:hover {
|
||||
background-color: #FFC35E;
|
||||
}
|
||||
div.content table.tags {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
}
|
||||
div#families table.fixed_subtables table.eventlist {
|
||||
table-layout: fixed;
|
||||
}
|
||||
@@ -709,6 +758,12 @@ div#families table.attrlist td.ColumnType {
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery a {
|
||||
color: #36220B;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
@@ -725,7 +780,8 @@ div#families table.attrlist td.ColumnType {
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
@@ -1055,3 +1111,43 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
|
||||
border-radius: 45px;
|
||||
border: 5px solid;
|
||||
}
|
||||
h4 button.icon {
|
||||
width: 0.9em;
|
||||
border: 0px solid;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
background: transparent;
|
||||
}
|
||||
h4 button.icon-close {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
h4 button.icon-open {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
svg {
|
||||
fill: #EA8414;
|
||||
}
|
||||
/* Go to the top of the page */
|
||||
#gototop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#gototop:hover {
|
||||
background-color: #FFE09F;
|
||||
}
|
||||
|
||||
@@ -165,6 +165,7 @@ a[href]:hover, a[href]:active {
|
||||
----------------------------------------------------- */
|
||||
div#nav, #subnavigation {
|
||||
border: solid 1px #EAEEF4; /* needed by IE7 */
|
||||
position: relative;
|
||||
}
|
||||
#subnavigation ul {
|
||||
overflow: hidden;
|
||||
@@ -202,6 +203,35 @@ div#nav ul li.CurrentSection a {
|
||||
#subnavigation ul li.CurrentSection a {
|
||||
background-color: #FFF;
|
||||
}
|
||||
div#nav li.lang {
|
||||
font-size: smaller;
|
||||
font-family: sans-serif;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
div#nav li.lang:hover > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
div#nav ul.lang {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
padding: 0px;
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
background-color: #EAEEF4;
|
||||
top: -1em;
|
||||
font-size: larger;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div#nav ul.lang:hover {
|
||||
float: initial;
|
||||
}
|
||||
div#nav ul.lang li {
|
||||
float: none;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
/* Alphabet Navigation
|
||||
----------------------------------------------------- */
|
||||
@@ -320,6 +350,21 @@ div#nav::after {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
.lang {
|
||||
position: relative;
|
||||
}
|
||||
.lang > .lang {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.lang:hover > .lang {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
@@ -588,7 +633,7 @@ table.eventlist td.ColumnPlace {
|
||||
font-weight: normal;
|
||||
}
|
||||
#GalleryDisplay {
|
||||
margin: 0px auto;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
}
|
||||
#GalleryDisplay img {
|
||||
@@ -662,6 +707,7 @@ div#SourceDetail {
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@@ -672,12 +718,12 @@ div#SourceDetail {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
#Home p, #Introduction p {
|
||||
#Home p, #Introduction p, #Contact p {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -689,6 +735,10 @@ div#SourceDetail {
|
||||
table.relationships tr:hover {
|
||||
background-color: #BFD0EA;
|
||||
}
|
||||
div.content table.tags {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
}
|
||||
div#families table.fixed_subtables table.eventlist {
|
||||
table-layout: fixed;
|
||||
}
|
||||
@@ -710,10 +760,16 @@ div#families table.attrlist td.ColumnType {
|
||||
#indivgallery {
|
||||
background-color: white;
|
||||
}
|
||||
#indivgallery a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
}
|
||||
#gallery .gallerycell {
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
height: 160px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
@@ -726,7 +782,8 @@ div#families table.attrlist td.ColumnType {
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.8em 0.5em;
|
||||
@@ -1047,3 +1104,43 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
|
||||
border-radius: 45px;
|
||||
border: 5px solid;
|
||||
}
|
||||
h4 button.icon {
|
||||
width: 0.9em;
|
||||
border: 0px solid;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
background: transparent;
|
||||
}
|
||||
h4 button.icon-close {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
h4 button.icon-open {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
svg {
|
||||
fill: #204D91;
|
||||
}
|
||||
/* Go to the top of the page */
|
||||
#gototop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#gototop:hover {
|
||||
background-color: #EAEEF4;
|
||||
}
|
||||
|
||||
+103
-12
@@ -169,6 +169,7 @@ a[href]:hover, a[href]:active {
|
||||
-----------------------------------------------------------------*/
|
||||
div#nav, #subnavigation {
|
||||
background: url(../images/Web_Mainz_Mid.png) repeat-x top left;
|
||||
position: relative;
|
||||
}
|
||||
div#nav ul, #subnavigation ul {
|
||||
list-style-type: none;
|
||||
@@ -199,6 +200,31 @@ div#nav ul li.CurrentSection a, #subnavigation ul li.CurrentSection a {
|
||||
#subnavigation ul li.CurrentSection a {
|
||||
border-width: 0px 1px 1px 1px;
|
||||
}
|
||||
div#nav li.lang {
|
||||
font-size: smaller;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
div#nav li.lang:hover > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
div#nav ul.lang {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
background-color: #D8C19F;
|
||||
top: -1em;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div#nav ul.lang:hover {
|
||||
float: initial;
|
||||
}
|
||||
div#nav ul.lang li {
|
||||
float: none;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
/* Alphabet Navigation
|
||||
-----------------------------------------------------------------*/
|
||||
@@ -291,7 +317,7 @@ div#nav::after {
|
||||
background: url(../images/Web_Mainz_Mid.png) #FFF2C6 repeat;
|
||||
}
|
||||
|
||||
.nav.responsive {position: absolute; display: block; z-index: 100;}
|
||||
.nav.responsive {position: relative; display: block; z-index: 100;}
|
||||
.nav.responsive a.icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -311,11 +337,27 @@ div#nav::after {
|
||||
|
||||
div#nav ul, #subnavigation ul {
|
||||
padding-left: 0px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
.lang {
|
||||
position: relative;
|
||||
}
|
||||
.lang > .lang {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.lang:hover > .lang {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
@@ -552,7 +594,7 @@ table.IndividualList tr:hover td.ColumnSurname {
|
||||
position: relative;
|
||||
}
|
||||
#GalleryDisplay img {
|
||||
margin: 0px auto;
|
||||
margin: 10px auto;
|
||||
display:block;
|
||||
border: solid 1px #7D5925;
|
||||
height: auto;
|
||||
@@ -581,11 +623,6 @@ div#SourceDetail {
|
||||
padding-bottom: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
#Contact #summaryarea #GalleryDisplay img {
|
||||
display: block;
|
||||
margin: 0px auto 1em auto;
|
||||
border: solid 1px #7D5925;
|
||||
}
|
||||
#Contact #researcher {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -611,17 +648,19 @@ div#SourceDetail {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay {
|
||||
#Contact #GalleryDisplay img {
|
||||
display: block;
|
||||
max-width: 950px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
|
||||
#Contact #GalleryDisplay {
|
||||
#Contact #GalleryDisplay img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -631,7 +670,7 @@ div#SourceDetail {
|
||||
}
|
||||
.subsection {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.subsection p {
|
||||
margin: 0px;
|
||||
@@ -643,6 +682,10 @@ div#SourceDetail {
|
||||
table.relationships tr:hover td {
|
||||
background-color: #D8C19F;
|
||||
}
|
||||
div.content table.tags {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
}
|
||||
div#families table.fixed_subtables table.eventlist {
|
||||
table-layout: fixed;
|
||||
}
|
||||
@@ -667,7 +710,6 @@ div#families .infolist h4 {
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
border-top: solid 1px #999;
|
||||
border-right: solid 1px #999;
|
||||
}
|
||||
@@ -679,9 +721,18 @@ div#families .infolist h4 {
|
||||
/* float container stretch, see www.quirksmode.org/css/clearing.html */
|
||||
overflow: hidden;
|
||||
}
|
||||
div#indivgallery div.thumbnail a,
|
||||
div#gallerycell div.thumbnail a {
|
||||
color: #7D5925;
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
width: 160px;
|
||||
display: block;
|
||||
}
|
||||
#indivgallery .thumbnail {
|
||||
float: left;
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
height: 220px;
|
||||
font-size: smaller;
|
||||
text-align: center;
|
||||
margin: 0.5em;
|
||||
@@ -1001,3 +1052,43 @@ body#fullyearlinked #YearGlance tbody td.highlight .date:hover {
|
||||
border: 5px solid;
|
||||
background: url(../images/Web_Mainz_Bkgd.png) black repeat;
|
||||
}
|
||||
h4 button.icon {
|
||||
width: 0.9em;
|
||||
border: 0px solid;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
background: transparent;
|
||||
}
|
||||
h4 button.icon-close {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
h4 button.icon-open {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
svg {
|
||||
fill: #7D5925;
|
||||
}
|
||||
/* Go to the top of the page */
|
||||
#gototop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#gototop:hover {
|
||||
background-color: #FFF2C6;
|
||||
}
|
||||
|
||||
+106
-3
@@ -238,10 +238,10 @@ div#alphanav, div#nav, div#subnavigation {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #A97;
|
||||
position: relative;
|
||||
}
|
||||
div#alphanav ul, div#nav ul, div#subnavigation ul {
|
||||
list-style: none;
|
||||
min-width: 770px;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
padding: 0px 0px 0px 16px;
|
||||
@@ -282,6 +282,43 @@ div#nav ul li.CurrentSection a:hover {
|
||||
div#subnavigation ul li.CurrentSection a {
|
||||
border-width: 0 0 1px 0;
|
||||
}
|
||||
div#nav li.lang {
|
||||
position: relative;
|
||||
padding-top: 3px;
|
||||
padding-left: 8px;
|
||||
font: bold .7em sans;
|
||||
}
|
||||
div#nav li.lang:hover > ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
div#nav ul.lang {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
z-index: 999;
|
||||
overflow: visible;
|
||||
background-color: #A97;
|
||||
top: -1em;
|
||||
border-width: 2px 0px 1px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
div#nav ul.lang li:after {
|
||||
content: "";
|
||||
}
|
||||
div#nav li.lang ul.lang li {
|
||||
float: none;
|
||||
background-color: #A97;
|
||||
margin-left: 10px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
div#nav li.lang ul.lang li a {
|
||||
float: none;
|
||||
width: auto;
|
||||
font: bold .9em sans;
|
||||
}
|
||||
|
||||
/* Responsive navigation */
|
||||
button.navIcon {
|
||||
@@ -347,7 +384,6 @@ div#nav::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nav.responsive ::after {
|
||||
/* need to remove the "|" when we are in the dropdown menu. */
|
||||
@@ -371,6 +407,28 @@ div#nav::after {
|
||||
.content {
|
||||
padding: 0em 0.5em;
|
||||
}
|
||||
div#nav ul li.lang {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
.lang {
|
||||
position: relative;
|
||||
padding-top: 3px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.lang > .lang {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
-webkit-border-radius: 0 6px 6px 6px;
|
||||
-moz-border-radius: 0 6px 6px 6px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
.lang:hover > .lang {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Table
|
||||
@@ -1113,6 +1171,10 @@ div#parents table.infolist tbody tr td.ColumnValue ol li {
|
||||
table.relationships tr:hover {
|
||||
background-color:#C1B398;
|
||||
}
|
||||
div.content table.tags {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
}
|
||||
div#families table.infolist {
|
||||
margin-top:.5em;
|
||||
}
|
||||
@@ -1185,7 +1247,8 @@ div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a {
|
||||
#indivgallery .thumbnail {
|
||||
margin:0;
|
||||
float:left;
|
||||
width:130px;
|
||||
width:160px;
|
||||
height:220px;
|
||||
text-align:center;
|
||||
background-color: #F6F2EE;
|
||||
}
|
||||
@@ -1632,3 +1695,43 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
|
||||
border-radius: 45px;
|
||||
border: 5px solid;
|
||||
}
|
||||
h4 button.icon {
|
||||
width: 0.9em;
|
||||
border: 0px solid;
|
||||
padding: 0;
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 200ms ease-out 0s;
|
||||
background: transparent;
|
||||
}
|
||||
h4 button.icon-close {
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
h4 button.icon-open {
|
||||
transform: rotate(180deg);
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
svg {
|
||||
fill: #542;
|
||||
}
|
||||
/* Go to the top of the page */
|
||||
#gototop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#gototop:hover {
|
||||
background-color: #696969;
|
||||
}
|
||||
|
||||
@@ -36,7 +36,12 @@ Females Web_Gender_Female.png
|
||||
# -------------------------------------------------------------------------- */
|
||||
/* Subsections : Ancestors Tree -------------------------------------------- */
|
||||
#tree {
|
||||
page-break-before:always;
|
||||
margin:0;
|
||||
padding:0;
|
||||
background:none;
|
||||
overflow-x:auto;
|
||||
}
|
||||
#toggle_anc {
|
||||
margin:0;
|
||||
padding:0;
|
||||
background:none;
|
||||
@@ -46,7 +51,6 @@ Females Web_Gender_Female.png
|
||||
position:relative;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
overflow: visible;
|
||||
z-index:1;
|
||||
}
|
||||
#treeContainer div.boxbg {
|
||||
|
||||
@@ -117,7 +117,15 @@ div#FamilyMapDetail div#references table.infolist tbody tr td.ColumnPlace {
|
||||
font: bold 0.9em sans-serif;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
padding: 0 0.5em 15px 0.5em;
|
||||
padding: 5px 0.5em 5px 0.5em;
|
||||
}
|
||||
#map_canvas .thumbnail {
|
||||
padding: 5px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
#map_canvas img {
|
||||
max-height: 300px;
|
||||
max-width: 400px;
|
||||
}
|
||||
#map_canvas .ol-popup-content a {
|
||||
color: #111;
|
||||
|
||||
Reference in New Issue
Block a user