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
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user