Have a better narrative web site

10341:
When we are on a mobile phone or a small device, we suppress the navigation tab.
In place, we have a new icon on the upper left which is used to show the dropdown menu.
Thanks to Theo van Rijn for showing me the way to do that.

10962:
For Home, Introduction and Contact, If we have an image and this image contains regions,
show the regions. We can go directly to the person page associated to this region.
If we click on the image, we go directly to the associated media page. This will be true only if we selected "include images and media objects" and "create and only use thumbnail" is unselected

11018:
The first line identifying a family will be more legible.
The link is not useful in the parents and pedigree section for the current person.
Adapt some css files.

11029:
sort the place references either by date or by name.

Resolves #10341, #10962, #11018, #11029

data/css/Web_Basic-Ash.css

@@ -21,6 +21,8 @@ Copyright 2008 Jason M. Simanek
 Copyright 2009 Stephane Charette
 Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
 Copyright 2011 Michiel D. Nauta
+Copyright 2018 Theo van Rijn
+Copyright (C) 2019      Serge Noiraud
 
 This file is part of the GRAMPS program.
 
@@ -59,7 +61,7 @@ the page.
 
 body {
     font-family: sans-serif;
-    font-size: 90%;
+    font-size: 100%;
     color: black;
     margin: 0px;
     background-color: #EEE;
@@ -67,6 +69,13 @@ body {
 body > div {
     clear: both;
 }
+#outerwrapper {
+    margin: 5px auto;
+    width: 98%;
+}
+#outerwrapper > div {
+    clear: both;
+}
 .content {
     background-color: white;
     border-top: solid 1px #999;
@@ -75,9 +84,19 @@ body > div {
     float: right;
     margin: 2em;
 }
+#ThumbnailPreview div.snapshot {
+    float: right;
+    margin: 0;
+}
 .fullclear {
     clear: both;
 }
+/* Less whitespace on smaller real estate. */
+@media only screen and (max-width: 1080px) {
+    .content {
+        padding: 0em 0.5em;
+    }
+}
 
 /* General Text
 ----------------------------------------------------- */
@@ -205,6 +224,93 @@ div#alphanav ul li a:hover {
     color: white;
 }
 
+/* Responsive navigation */
+a.navIcon {
+    display: none;
+}
+
+div#header::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+div#nav::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 1080px) {
+
+    /* Use less & all realestate on mobiles. */
+    div#outerwrapper {
+        margin: 5px auto;
+        width: 100%;
+    }
+
+    .nav {
+        background: none; /* Works in IE too. */
+/*
+        width: 200px;
+        position: absolute;
+        z-index: 10;
+*/
+    }
+
+    /* Undo some of the #nav styles  - to enable the class .nav */
+    .nav ul, #subnavigation ul {
+        list-style: none;
+        min-width: unset;
+        width: 200px;
+        height: 32px;
+        margin: 0;
+        padding: 0;
+    }
+    .nav ul li, #subnavigation ul li {
+        float: unset;
+        display: unset
+    }
+
+    /* Start with hidden menu options */
+    /* .nav li:not(:first-child) {display: none;} */
+    .nav li {display: none;}
+    .nav ul {display: none;}
+
+    a.navIcon {
+        font-size:1.3em;
+        display: block;
+        margin: 0.1em 0.4em 0.4em 0.4em;
+        float: left;
+    }
+
+    .nav.responsive {position: absolute; display: block; z-index: 100;}
+    .nav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-right: 10px;
+    }
+    .nav.responsive li {
+        /* float: left; */
+        display: block;
+        text-align: left;
+        background-color: #EEE;
+        /* required by IE */
+        float: left;
+        clear: both;
+        width: 200px;
+    }
+
+    div#nav ul, #subnavigation ul {
+        padding-left: 0px;
+    }
+
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 /* Main Table
 ----------------------------------------------------- */
 table {
@@ -367,7 +473,16 @@ table.eventlist tbody tr td.ColumnSources {
     margin: 0px auto;
     display: block;
     border: solid 1px #999;
+    max-width: 800px;
+    height: auto;
 }
+
+@media only screen and (max-width: 1080px) {
+    #GalleryDisplay img {
+        max-width: 100%;
+    }
+}
+
 #GalleryDetail h3 {
     text-align: center;
 }
@@ -384,13 +499,10 @@ div#SourceDetail {
     overflow: hidden;
 }
 #Contact #summaryarea {
-    width: 50em;
-    margin: 2em auto;
-    padding: 3em;
     background-color: #EEE;
     border: solid 1px #999;
 }
-#Contact img {
+#Contact #GalleryDisplay img {
     float: right;
     border: solid 1px #999;
 }
@@ -404,6 +516,12 @@ div#SourceDetail {
 #Contact #city:after {
     content: ",";
 }
+@media only screen and (max-width: 1080px) {
+    #Contact,
+    #Contact #GalleryDisplay img {
+        max-width: 100%;
+    }
+}
 
 /* Download
 ----------------------------------------------------- */
@@ -413,20 +531,29 @@ div#SourceDetail {
 
 /* Subsection
 ----------------------------------------------------- */
-#Home, #Introduction {
+#Home #GalleryDisplay, #Introduction #GalleryDisplay {
-    overflow: hidden;
-}
-#Home img, #Introduction img {
     float: right;
     margin: 1em;
+}
+#Home #GalleryDisplay img, #Introduction #GalleryDisplay img {
+    display: block;
     max-width: 950px;
+    height: auto;
+    float: right;
+}
+@media only screen and (max-width: 1080px) {
+    #Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+          #Contact #GalleryDisplay img {
+        margin: 0 auto;
+        max-width: 100%;
+    }
 }
 #Home p, #Introduction p {
     padding-left: 15px;
 }
 .subsection {
     clear: both;
-    overflow: visible;
+    overflow: hidden;
 }
 .subsection p {
     margin: 0px;
@@ -449,12 +576,33 @@ div#families table.attrlist td.ColumnType {
 
 /* Subsection : Gallery
 ----------------------------------------------------- */
+#gallery {
+    background-color: green;
+}
+#indivgallery {
+    background-color: white;
+}
+#gallery .gallerycell {
+    float: left;
+    width: 130px;
+    height: 150px;
+    text-align: center;
+    margin: 0;
+    background-color: white;
+    border-top: solid 1px #999;
+    border-right: solid 1px #999;
+}
+#gallery .thumbnail {
+    font-size: smaller;
+    margin: 3em auto;
+}
 #indivgallery .thumbnail {
     float: left;
     width: 130px;
     font-size: smaller;
     text-align: center;
     margin: 0.8em 0.5em;
+    background-color: white;
 }
 #indivgallery h4 + .thumbnail {
     margin-left: 15px;
@@ -462,6 +610,40 @@ div#families table.attrlist td.ColumnType {
      *          first thumnail on each next row should also have a margin-left
      *          of 15 px. */
 }
+#gallery div.indexno {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+    margin: 0;
+}
+#indivgallery div.date {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+}
+#indivgallery .thumbnail ul {
+    font-size: smaller;
+    list-style: none;
+    padding: 0px;
+}
+#indivgallery .thumbnail ul li:first-child {
+    border-style: none;
+}
+#indivgallery .thumbnail ul li {
+    border-top: dashed 1px #CCC;
+    border-top-style: dashed;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+#gallery img {
+    border: solid 1px #999;
+}
 #indivgallery img {
     border: solid 1px #999;
 }
@@ -469,6 +651,9 @@ div#families table.attrlist td.ColumnType {
 /* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
     display: none; */
 }
+div.snapshot div.thumbnail {
+    text-align: center;
+}
 
 /* Subsection : Narrative
 ----------------------------------------------------- */
@@ -532,6 +717,7 @@ a.familymap {
 }
 #footer > * {
     background-color: #EEE;
+    font-size: 80%;
 }
 #footer p#createdate {
     float: left;

data/css/Web_Basic-Blue.css

@@ -3,6 +3,8 @@
 # Gramps - a GTK+/GNOME based genealogy program
 #
 # Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
+# Copyright (C) 2018      Theo van Rijn
+# Copyright (C) 2019      Serge Noiraud
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -72,6 +74,13 @@ img {
 .thumbnail a:hover {
     background: none;
 }
+#outerwrapper {
+    margin: 5px auto;
+    width: 98%;
+}
+#outerwrapper > div {
+    clear: both;
+}
 .content {
     background-color: #FFF;
     color: #000;
@@ -94,6 +103,10 @@ img {
     width: 96px;
     margin: 0 auto;
 }
+#ThumbnailPreview div.snapshot {
+    float: right;
+    margin: 0;
+}
 .fullclear {
     width: 100%;
     height: 1px;
@@ -101,6 +114,12 @@ img {
     padding: 0;
     clear: both;
 }
+/* Less whitespace on smaller real estate. */
+@media only screen and (max-width: 1080px) {
+    .content {
+        padding: 0em 0.5em;
+    }
+}
 
 /* General Text
 ----------------------------------------------------- */
@@ -221,6 +240,55 @@ p#user_header {
     margin-right: 10px;
 }
 
+/* Navigation
+----------------------------------------------------- */
+div#nav, #subnavigation {
+    border: solid 1px #EEE; /* needed by IE7 */
+    background-color: #13A926;
+}
+#subnavigation ul {
+    overflow: hidden;
+}
+div#nav ul, #subnavigation ul {
+    list-style: none;
+    margin: 0px;
+    padding-left: 15px;
+}
+#subnavigation ul {
+    border-bottom: solid 1px #999;
+}
+div#nav ul li, #subnavigation ul li {
+    float: left;
+}
+div#nav ul li a, #subnavigation ul li a {
+    display: block;
+    font-size: smaller;
+    font-weight: bold;
+    padding: 5px;
+    border-bottom: solid 1px #EEE;
+}
+div#nav ul li a:hover, #subnavigation ul li a:hover {
+    text-decoration: none;
+    background-color: #CCC;
+    border-bottom: solid 1px black;
+}
+div#nav ul li.CurrentSection a {
+    position: relative;
+    top: 1px;
+    border: solid 1px #999;
+    border-bottom-style: none;
+    background-color: white;
+}
+#nav ul li.CurrentSection a:hover {
+    background-color: #903;
+}
+
+/* Webcal
+----------------------------------------------------- */
+#subnavigation ul li.CurrentSection a {
+    background-color: white;
+}
+
 /* Footer
 ----------------------------------------------------- */
 div#footer {
@@ -270,6 +338,129 @@ div#footer p#copyright img {
     padding: 0;
 }
 
+/* Responsive navigation */
+a.navIcon {
+    display: none;
+}
+
+div#header::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+/* Alphabet Navigation
+----------------------------------------------------- */
+div#alphanav {
+    background-color: #EEE;
+}
+div#alphanav ul {
+    list-style: none;
+    border-width: 2px 0px 4px 0px;
+    border-style: solid;
+    border-color: black;
+    margin: 0px;
+    padding-left: 15px;
+    /* float container stretch, see www.quirksmode.org/css/clearing.html */
+    overflow: hidden;
+}
+div#alphanav ul li {
+    float: left;
+    font-size: larger;
+    font-weight: bold;
+}
+div#alphanav ul li:after {
+    content: " |";
+}
+div#alphanav ul li a {
+    display: block;
+    padding: 4px 8px;
+    line-height: 100%;
+    float: left;
+
+}
+div#alphanav ul li a:hover {
+    text-decoration: none;
+    background-color: black;
+    color: white;
+}
+
+div#nav::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 1080px) {
+
+    /* Use less & all realestate on mobiles. */
+    div#outerwrapper {
+        margin: 5px auto;
+        width: 100%;
+    }
+
+    .nav {
+        background: none; /* Works in IE too. */
+/*
+        width: 200px;
+        position: absolute;
+        z-index: 10;
+*/
+    }
+
+    /* Undo some of the #nav styles  - to enable the class .nav */
+    .nav ul, #subnavigation ul {
+        list-style: none;
+        min-width: unset;
+        width: 200px;
+        height: 32px;
+        margin: 0;
+        padding: 0;
+    }
+    .nav ul li, #subnavigation ul li {
+        float: unset;
+        display: unset
+    }
+
+    /* Start with hidden menu options */
+    /* .nav li:not(:first-child) {display: none;} */
+    .nav li {display: none;}
+    .nav ul {display: none;}
+
+    a.navIcon {
+        font-size:1.3em;
+        display: block;
+        margin: 0.1em 0.4em 0.4em 0.4em;
+        float: left;
+    }
+
+    .nav.responsive {position: absolute; display: block; z-index: 100;}
+    .nav.responsive a.icon {
+        /* position: absolute; */
+        right: 0;
+        top: 0;
+        margin-right: 10px;
+    }
+    .nav.responsive li {
+        /* float: left; */
+        display: block;
+        text-align: left;
+        background-color: #13A926;
+        /* required by IE */
+        float: left;
+        clear: both;
+        width: 200px;
+    }
+
+    div#nav ul, #subnavigation ul {
+        padding-left: 0px;
+    }
+
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 /* Main Table
 ----------------------------------------------------- */
 table.infolist {
@@ -578,6 +769,26 @@ div#EventDetail table.eventlist tbody tr td.ColumnDate {
     margin: 0;
     padding: 0;
 }
+#gallery {
+    background-color: green;
+}
+#indivgallery {
+    background-color: white;
+}
+#gallery .gallerycell {
+    float: left;
+    width: 130px;
+    height: 150px;
+    text-align: center;
+    margin: 0;
+    background-color: white;
+    border-top: solid 1px #999;
+    border-right: solid 1px #999;
+}
+#gallery .thumbnail {
+    font-size: smaller;
+    margin: 3em auto;
+}
 #Gallery table.infolist tbody tr td {
     border-bottom: dashed 1px #000;
 }
@@ -627,7 +838,16 @@ div#EventDetail table.eventlist tbody tr td.ColumnDate {
 }
 #GalleryDisplay img {
     margin: 0 auto;
+    max-width: 800px;
+    height: auto;
 }
+
+@media only screen and (max-width: 1080px) {
+    #GalleryDisplay img {
+        max-width: 100%;
+    }
+}
+
 #GalleryDetail div#summaryarea{
     margin: 0;
     padding: 2em 0 0 0;
@@ -679,48 +899,51 @@ body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName {
 /* Contact
 ------------------------------------------------- */
 #Contact #summaryarea {
-    width: 500px;
-    margin: 0 auto;
-    padding: 3em;
     border: double 4px #000;
     background-color: #BCEAF6;
 }
-#Contact #summaryarea img {
+#Contact #summaryarea #GalleryDisplay img {
     float: right;
     margin: 0;
 }
-#researcher {
+@media only screen and (max-width: 1080px) {
+    #Contact, #Contact #summaryarea #researcher,
+    #Contact #summaryarea #GalleryDisplay img {
+        max-width: 100%;
+    }
+}
+
+#Contact #summaryarea #researcher {
     font: normal 1.5em/1.4em serif;
     margin-top: .3em;
 }
-#researcher h3 {
+#Contact #summaryarea #researcher h3 {
     font: normal 1.2em/1.4em serif;
     padding: 0;
     text-align: left;
 }
-#researcher span {
+#Contact #summaryarea #researcher span {
-    float: left;
     display: block;
     font: normal .9em/1.4em serif;
     margin-right: .4em;
 }
-#streetaddress {
+#Contact #summaryarea #streetaddress {
     width: 100%;
 }
-#locality, .locality {
+#Contact #summaryarea #locality, .locality {
     display: block;
     width: 100%;
 }
-#city:after {
+#Contact #summaryarea #city:after {
     content: ",";
 }
-#country {
+#Contact #summaryarea #country {
     clear: left;
 }
-#email {
+#Contact #summaryarea #email {
     clear: left;
 }
-#email a {
+#Contact #summaryarea #email a {
     text-decoration: none;
 }
 
@@ -813,17 +1036,29 @@ div#AddressBookList table.addressbook tbody tr td.ColumnWebLinks {
 
 /* Subsections
 ----------------------------------------------------- */
-#Home, #Introduction, #Contact {
+#Home #GalleryDisplay, #Introduction #GalleryDisplay,
-    padding: 2em 0 3em 0;
+                       #Contact #GalleryDisplay {
+    float: right;
+    margin: 0;
+    border: 0px;
+}
+#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+                       #Contact #GalleryDisplay img {
+    display: block;
+    max-width: 950px;
+    height: auto;
+    float: right;
+}
+@media only screen and (max-width: 1080px) {
+    #Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+          #Contact #GalleryDisplay img {
+        margin: 0 auto;
+        max-width: 100%;
+    }
 }
 #Home p, #Introduction p {
     margin: 0 20px 1em 20px;
 }
-#Home img, #Introduction img {
-    float: right;
-    margin: 0;
-    padding: 0 20px 3em 2em;
-}
 #Home a, #Introduction a, #Contact a {
     color: #000;
     text-decoration: none;
@@ -927,6 +1162,15 @@ div#families {
     margin: 0;
     padding: 0;
 }
+div#families .infolist h4 {
+    font: bold 1.2em sans-serif;
+    color: #FFF;
+    padding: 0px 0px 0px 20px;
+    border-width: 4px 0px 4px 0px;
+    border-style: solid;
+    border-color: #00029D;
+    background-color: #13A926;
+}
 div#families table.infolist tbody tr.BeginFamily {
     border-top: solid 1px #000;
 }
@@ -1094,6 +1338,7 @@ div.Residence table.infolist tr td {
     float: left;
     width: 130px;
     text-align: center;
+    background-color: white;
 }
 #indivgallery div.thumbnail a {
     display: block;
@@ -1117,6 +1362,43 @@ div.Residence table.infolist tr td {
     margin: 0 auto;
     padding: 0;
 }
+#gallery div.indexno {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+    margin: 0;
+}
+#indivgallery div.date {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+}
+#indivgallery .thumbnail ul {
+    font-size: smaller;
+    list-style: none;
+    padding: 0px;
+}
+#indivgallery .thumbnail ul li:first-child {
+    border-style: none;
+}
+#indivgallery .thumbnail ul li {
+    border-top: dashed 1px #CCC;
+    border-top-style: dashed;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+#gallery img {
+    border: solid 1px #999;
+}
+div.snapshot div.thumbnail {
+    text-align: center;
+}
 
 /* Subsections : Narrative
 ----------------------------------------------------- */

data/css/Web_Basic-Cypress.css

@@ -21,6 +21,8 @@ Copyright 2008 Jason M. Simanek
 Copyright 2009 Stephane Charette
 Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
 Copyright 2011 Michiel D. Nauta
+Copyright 2018 Theo van Rijn
+Copyright (C) 2019      Serge Noiraud
 
 This file is part of the GRAMPS program.
 
@@ -59,7 +61,7 @@ the page.
 
 body {
     font-family: sans-serif;
-    font-size: 90%;
+    font-size: 100%;
     color: black;
     margin: 0px;
     background-color: #454;
@@ -67,6 +69,13 @@ body {
 body > div {
     clear: both;
 }
+#outerwrapper {
+    margin: 5px auto;
+    width: 98%;
+}
+#outerwrapper > div {
+    clear: both;
+}
 .content {
     background-color: white;
     border-top: solid 1px #7C8F7C;
@@ -75,9 +84,19 @@ body > div {
     float: right;
     margin: 2em;
 }
+#ThumbnailPreview div.snapshot {
+    float: right;
+    margin: 0;
+}
 .fullclear {
     clear: both;
 }
+/* Less whitespace on smaller real estate. */
+@media only screen and (max-width: 1080px) {
+    .content {
+        padding: 0em 0.5em;
+    }
+}
 
 /* General Text
 ----------------------------------------------------- */
@@ -209,6 +228,98 @@ div#alphanav ul li a:hover {
     color: white;
 }
 
+/* Responsive navigation */
+a.navIcon {
+    display: none;
+}
+
+div#header::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+div#nav::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 1080px) {
+
+    /* Use less & all realestate on mobiles. */
+    div#outerwrapper {
+        margin: 5px auto;
+        width: 100%;
+    }
+
+    .nav {
+        background: none; /* Works in IE too. */
+/*
+        width: 200px;
+        position: absolute;
+        z-index: 10;
+*/
+    }
+
+    /* Undo some of the #nav styles  - to enable the class .nav */
+    .nav ul, #subnavigation ul {
+        list-style: none;
+        min-width: unset;
+        width: 200px;
+        height: 32px;
+        margin: 0;
+        padding: 0;
+    }
+    .nav ul li, #subnavigation ul li {
+        float: unset;
+        display: unset
+    }
+
+    /* Start with hidden menu options */
+    /* .nav li:not(:first-child) {display: none;} */
+    .nav li {display: none;}
+    .nav ul {display: none;}
+
+    a.navIcon {
+        font-size:1.3em;
+        display: block;
+        margin: 0.1em 0.4em 0.4em 0.4em;
+        float: left;
+    }
+
+    .nav.responsive {position: absolute; display: block; z-index: 100;}
+    .nav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-right: 10px;
+    }
+    .nav.responsive li {
+        /* float: left; */
+        display: block;
+        text-align: left;
+        color: #454;
+        background-color: #E0E6E0;
+        /* required by IE */
+        float: left;
+        clear: both;
+        width: 200px;
+    }
+    .nav.responsive li#CurrentSection a {
+        color: #454;
+        background-color: white;
+    }
+
+    div#nav ul, #subnavigation ul {
+        padding-left: 0px;
+    }
+
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 /* Main Table
 ----------------------------------------------------- */
 table {
@@ -413,7 +524,16 @@ table.eventlist tbody tr td.ColumnSources {
     margin: 0px auto;
     display: block;
     border: solid 1px #7C8F7C;
+    max-width: 800px;
+    height: auto;
 }
+
+@media only screen and (max-width: 1080px) {
+    #GalleryDisplay img {
+        max-width: 100%;
+    }
+}
+
 #GalleryDetail h3 {
     text-align: center;
 }
@@ -430,13 +550,10 @@ div#SourceDetail {
     overflow: hidden;
 }
 #Contact #summaryarea {
-    width: 40em;
-    margin: 2em auto;
-    padding: 3em;
     background-color: #E0E6E0;
     border: solid 1px #7C8F7C;
 }
-#Contact img {
+#Contact #summaryarea #GalleryDisplay img {
     float: right;
     border: solid 1px #7C8F7C;
 }
@@ -463,20 +580,31 @@ div#SourceDetail {
 
 /* Subsection
 ----------------------------------------------------- */
-#Home, #Introduction {
+#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
-    overflow: hidden;
-}
-#Home img, #Introduction img {
     float: right;
-    margin: 1em;
+    margin: 0;
+    border: 0px;
+}
+#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+      #Contact #GalleryDisplay img {
+    display: block;
     max-width: 950px;
+    height: auto;
+    float: right;
+}
+@media only screen and (max-width: 1080px) {
+    #Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+          #Contact #GalleryDisplay img {
+        margin: 0 auto;
+        max-width: 100%;
+    }
 }
 #Home p, #Introduction p {
     padding-left: 15px;
 }
 .subsection {
     clear: both;
-    overflow: visible;
+    overflow: hidden;
 }
 .subsection p {
     margin: 0px;
@@ -499,12 +627,33 @@ div#families table.attrlist td.ColumnType {
 
 /* Subsection : Gallery
 ----------------------------------------------------- */
+#gallery {
+    background-color: green;
+}
+#indivgallery {
+    background-color: white;
+}
+#gallery .gallerycell {
+    float: left;
+    width: 130px;
+    height: 150px;
+    text-align: center;
+    margin: 0;
+    background-color: white;
+    border-top: solid 1px #999;
+    border-right: solid 1px #999;
+}
+#gallery .thumbnail {
+    font-size: smaller;
+    margin: 3em auto;
+}
 #indivgallery .thumbnail {
     float: left;
     width: 130px;
     font-size: smaller;
     text-align: center;
     margin: 0.8em 0.5em;
+    background-color: white;
 }
 #indivgallery h4 + .thumbnail {
     margin-left: 15px;
@@ -512,6 +661,40 @@ div#families table.attrlist td.ColumnType {
      *          first thumnail on each next row should also have a margin-left
      *          of 15 px. */
 }
+#gallery div.indexno {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+    margin: 0;
+}
+#indivgallery div.date {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+}
+#indivgallery .thumbnail ul {
+    font-size: smaller;
+    list-style: none;
+    padding: 0px;
+}
+#indivgallery .thumbnail ul li:first-child {
+    border-style: none;
+}
+#indivgallery .thumbnail ul li {
+    border-top: dashed 1px #CCC;
+    border-top-style: dashed;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+#gallery img {
+    border: solid 1px #999;
+}
 #indivgallery img {
     border: solid 1px #7C8F7C;
 }
@@ -519,6 +702,9 @@ div#families table.attrlist td.ColumnType {
 /* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
     display: none; */
 }
+div.snapshot div.thumbnail {
+    text-align: center;
+}
 
 /* Subsection : Narrative
 ----------------------------------------------------- */
@@ -577,6 +763,7 @@ a.familymap {
 #footer {
     clear: both;
     color: #E0E6E0;
+    font-size: 80%;
     padding-top: 1em;
     background-color: #9DBF9D;
     border-top: solid 1px #454;

data/css/Web_Basic-Lilac.css

@@ -21,6 +21,8 @@ Copyright 2008 Jason M. Simanek
 Copyright 2009 Stephane Charette
 Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
 Copyright 2011 Michiel D. Nauta
+Copyright 2018 Theo van Rijn
+Copyright (C) 2019      Serge Noiraud
 
 This file is part of the GRAMPS program.
 
@@ -67,6 +69,13 @@ body {
 body > div {
     clear: both;
 }
+#outerwrapper {
+    margin: 5px auto;
+    width: 98%;
+}
+#outerwrapper > div {
+    clear: both;
+}
 .content {
     background-color: #FAFAFF;
     border-top: solid 1px #669;
@@ -75,9 +84,19 @@ body > div {
     float: right;
     margin: 2em;
 }
+#ThumbnailPreview div.snapshot {
+    float: right;
+    margin: 0;
+}
 .fullclear {
     clear: both;
 }
+/* Less whitespace on smaller real estate. */
+@media only screen and (max-width: 1080px) {
+    .content {
+        padding: 0em 0.5em;
+    }
+}
 
 /* General Text
 ----------------------------------------------------- */
@@ -207,6 +226,93 @@ div#alphanav ul li a:hover {
     color: #FAFAFF;
 }
 
+/* Responsive navigation */
+a.navIcon {
+    display: none;
+}
+
+div#header::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+div#nav::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 1080px) {
+
+    /* Use less & all realestate on mobiles. */
+    div#outerwrapper {
+        margin: 5px auto;
+        width: 100%;
+    }
+
+    .nav {
+        background: none; /* Works in IE too. */
+/*
+        width: 200px;
+        position: absolute;
+        z-index: 10;
+*/
+    }
+
+    /* Undo some of the #nav styles  - to enable the class .nav */
+    .nav ul, #subnavigation ul {
+        list-style: none;
+        min-width: unset;
+        width: 200px;
+        height: 32px;
+        margin: 0;
+        padding: 0;
+    }
+    .nav ul li, #subnavigation ul li {
+        float: unset;
+        display: unset
+    }
+
+    /* Start with hidden menu options */
+    /* .nav li:not(:first-child) {display: none;} */
+    .nav li {display: none;}
+    .nav ul {display: none;}
+
+    a.navIcon {
+        font-size:1.3em;
+        display: block;
+        margin: 0.1em 0.4em 0.4em 0.4em;
+        float: left;
+    }
+
+    .nav.responsive {position: absolute; display: block; z-index: 100;}
+    .nav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-right: 10px;
+    }
+    .nav.responsive li {
+        /* float: left; */
+        display: block;
+        text-align: left;
+        background-color: #669;
+        /* required by IE */
+        float: left;
+        clear: both;
+        width: 200px;
+    }
+
+    div#nav ul, #subnavigation ul {
+        padding-left: 0px;
+    }
+
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 /* Main Table
 ----------------------------------------------------- */
 table {
@@ -406,6 +512,14 @@ table.eventlist tbody tr td.ColumnSources {
     margin: 0px auto;
     display: block;
     border: solid 1px #669;
+    max-width: 800px;
+    height: auto;
+}
+
+@media only screen and (max-width: 1080px) {
+    #GalleryDisplay img {
+        max-width: 100%;
+    }
 }
 #GalleryDetail h3 {
     text-align: center;
@@ -423,13 +537,10 @@ div#SourceDetail {
     overflow: hidden;
 }
 #Contact #summaryarea {
-    width: 40em;
-    margin: 2em auto;
-    padding: 3em;
     background-color: #E0E0E9;
     border: solid 1px #669;
 }
-#Contact img {
+#Contact #summaryarea #GalleryDisplay img {
     float: right;
     border: solid 1px #669;
 }
@@ -456,20 +567,31 @@ div#SourceDetail {
 
 /* Subsection
 ----------------------------------------------------- */
-#Home, #Introduction {
+#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
-    overflow: hidden;
-}
-#Home img, #Introduction img {
     float: right;
-    margin: 1em;
+    margin: 0;
+    border: 0px;
+}
+#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+      #Contact #GalleryDisplay img {
+    display: block;
     max-width: 950px;
+    height: auto;
+    float: right;
+}
+@media only screen and (max-width: 1080px) {
+    #Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+          #Contact #GalleryDisplay img {
+        margin: 0 auto;
+        max-width: 100%;
+    }
 }
 #Home p, #Introduction p {
     padding-left: 15px;
 }
 .subsection {
     clear: both;
-    overflow: visible;
+    overflow: hidden;
 }
 .subsection p {
     margin: 0px;
@@ -492,12 +614,33 @@ div#families table.attrlist td.ColumnType {
 
 /* Subsection : Gallery
 ----------------------------------------------------- */
+#gallery {
+    background-color: green;
+}
+#indivgallery {
+    background-color: white;
+}
+#gallery .gallerycell {
+    float: left;
+    width: 130px;
+    height: 150px;
+    text-align: center;
+    margin: 0;
+    background-color: white;
+    border-top: solid 1px #999;
+    border-right: solid 1px #999;
+}
+#gallery .thumbnail {
+    font-size: smaller;
+    margin: 3em auto;
+}
 #indivgallery .thumbnail {
     float: left;
     width: 130px;
     font-size: smaller;
     text-align: center;
     margin: 0.8em 0.5em;
+    background-color: white;
 }
 #indivgallery h4 + .thumbnail {
     margin-left: 15px;
@@ -505,6 +648,40 @@ div#families table.attrlist td.ColumnType {
      *          first thumnail on each next row should also have a margin-left
      *          of 15 px. */
 }
+#gallery div.indexno {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+    margin: 0;
+}
+#indivgallery div.date {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+}
+#indivgallery .thumbnail ul {
+    font-size: smaller;
+    list-style: none;
+    padding: 0px;
+}
+#indivgallery .thumbnail ul li:first-child {
+    border-style: none;
+}
+#indivgallery .thumbnail ul li {
+    border-top: dashed 1px #CCC;
+    border-top-style: dashed;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+#gallery img {
+    border: solid 1px #999;
+}
 #indivgallery img {
     border: solid 1px #669;
 }
@@ -512,6 +689,9 @@ div#families table.attrlist td.ColumnType {
 /* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
     display: none; */
 }
+div.snapshot div.thumbnail {
+    text-align: center;
+}
 
 /* Subsection : Narrative
 ----------------------------------------------------- */
@@ -575,6 +755,7 @@ a.familymap {
 }
 #footer > * {
     background-color: #E0E0E9;
+    font-size: 80%;
 }
 #footer p#createdate {
     float: left;

data/css/Web_Basic-Peach.css

@@ -21,6 +21,8 @@ Copyright 2008 Jason M. Simanek
 Copyright 2009 Stephane Charette
 Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
 Copyright 2011 Michiel D. Nauta
+Copyright 2018 Theo van Rijn
+Copyright (C) 2019      Serge Noiraud
 
 This file is part of the GRAMPS program.
 
@@ -59,7 +61,7 @@ the page.
 
 body {
     font-family: sans-serif;
-    font-size: 90%;
+    font-size: 100%;
     color: #36220B;
     margin: 0px;
     background-color: #FFE09F;
@@ -67,6 +69,13 @@ body {
 body > div {
     clear: both;
 }
+#outerwrapper {
+    margin: 5px auto;
+    width: 98%;
+}
+#outerwrapper > div {
+    clear: both;
+}
 .content {
     background-color: #FFFBE7;
     border-top: solid 1px #8C581C;
@@ -75,9 +84,19 @@ body > div {
     float: right;
     margin: 2em;
 }
+#ThumbnailPreview div.snapshot {
+    float: right;
+    margin: 0;
+}
 .fullclear {
     clear: both;
 }
+/* Less whitespace on smaller real estate. */
+@media only screen and (max-width: 1080px) {
+    .content {
+        padding: 0em 0.5em;
+    }
+}
 
 /* General Text
 ----------------------------------------------------- */
@@ -207,6 +226,93 @@ div#alphanav ul li a:hover {
     color: #FFFBE7;
 }
 
+/* Responsive navigation */
+a.navIcon {
+    display: none;
+}
+
+div#header::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+div#nav::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 1080px) {
+
+    /* Use less & all realestate on mobiles. */
+    div#outerwrapper {
+        margin: 5px auto;
+        width: 100%;
+    }
+
+    .nav {
+        background: none; /* Works in IE too. */
+/*
+        width: 200px;
+        position: absolute;
+        z-index: 10;
+*/
+    }
+
+    /* Undo some of the #nav styles  - to enable the class .nav */
+    .nav ul, #subnavigation ul {
+        list-style: none;
+        min-width: unset;
+        width: 200px;
+        height: 32px;
+        margin: 0;
+        padding: 0;
+    }
+    .nav ul li, #subnavigation ul li {
+        float: unset;
+        display: unset
+    }
+
+    /* Start with hidden menu options */
+    /* .nav li:not(:first-child) {display: none;} */
+    .nav li {display: none;}
+    .nav ul {display: none;}
+
+    a.navIcon {
+        font-size:1.3em;
+        display: block;
+        margin: 0.1em 0.4em 0.4em 0.4em;
+        float: left;
+    }
+
+    .nav.responsive {position: absolute; display: block; z-index: 100;}
+    .nav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-right: 10px;
+    }
+    .nav.responsive li {
+        /* float: left; */
+        display: block;
+        text-align: left;
+        background-color: #FFC35E;
+        /* required by IE */
+        float: left;
+        clear: both;
+        width: 200px;
+    }
+
+    div#nav ul, #subnavigation ul {
+        padding-left: 0px;
+    }
+
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 /* Main Table
 ----------------------------------------------------- */
 table {
@@ -406,6 +512,14 @@ table.eventlist tbody tr td.ColumnSources {
     margin: 0px auto;
     display: block;
     border: solid 1px #EA8414;
+    max-width: 800px;
+    height: auto;
+}
+
+@media only screen and (max-width: 1080px) {
+    #GalleryDisplay img {
+        max-width: 100%;
+    }
 }
 #GalleryDetail h3 {
     text-align: center;
@@ -423,13 +537,10 @@ div#SourceDetail {
     overflow: hidden;
 }
 #Contact #summaryarea {
-    width: 40em;
-    margin: 2em auto;
-    padding: 3em;
     background-color: #FFE09F;
     border: solid 1px #EA8414;
 }
-#Contact img {
+#Contact #summaryarea #GalleryDisplay img {
     float: right;
     border: solid 1px #EA8414;
 }
@@ -456,13 +567,24 @@ div#SourceDetail {
 
 /* Subsection
 ----------------------------------------------------- */
-#Home, #Introduction {
+#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
-    overflow: hidden;
-}
-#Home img, #Introduction img {
     float: right;
-    margin: 1em;
+    margin: 0;
+    border: 0px;
+}
+#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+      #Contact #GalleryDisplay img {
+    display: block;
     max-width: 950px;
+    height: auto;
+    float: right;
+}
+@media only screen and (max-width: 1080px) {
+    #Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+          #Contact #GalleryDisplay img {
+        margin: 0 auto;
+        max-width: 100%;
+    }
 }
 #Home p, #Introduction p {
     padding-left: 15px;
@@ -492,12 +614,33 @@ div#families table.attrlist td.ColumnType {
 
 /* Subsection : Gallery
 ----------------------------------------------------- */
+#gallery {
+    background-color: green;
+}
+#indivgallery {
+    background-color: white;
+}
+#gallery .gallerycell {
+    float: left;
+    width: 130px;
+    height: 150px;
+    text-align: center;
+    margin: 0;
+    background-color: white;
+    border-top: solid 1px #999;
+    border-right: solid 1px #999;
+}
+#gallery .thumbnail {
+    font-size: smaller;
+    margin: 3em auto;
+}
 #indivgallery .thumbnail {
     float: left;
     width: 130px;
     font-size: smaller;
     text-align: center;
     margin: 0.8em 0.5em;
+    background-color: white;
 }
 #indivgallery h4 + .thumbnail {
     margin-left: 15px;
@@ -505,6 +648,40 @@ div#families table.attrlist td.ColumnType {
      *          first thumnail on each next row should also have a margin-left
      *          of 15 px. */
 }
+#gallery div.indexno {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+    margin: 0;
+}
+#indivgallery div.date {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+}
+#indivgallery .thumbnail ul {
+    font-size: smaller;
+    list-style: none;
+    padding: 0px;
+}
+#indivgallery .thumbnail ul li:first-child {
+    border-style: none;
+}
+#indivgallery .thumbnail ul li {
+    border-top: dashed 1px #CCC;
+    border-top-style: dashed;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+#gallery img {
+    border: solid 1px #999;
+}
 #indivgallery img {
     border: solid 1px #8C581C;
 }
@@ -512,6 +689,9 @@ div#families table.attrlist td.ColumnType {
 /* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
     display: none; */
 }
+div.snapshot div.thumbnail {
+    text-align: center;
+}
 
 /* Subsection : Narrative
 ----------------------------------------------------- */
@@ -575,6 +755,7 @@ a.familymap {
 }
 #footer > * {
     background-color: #FFE09F;
+    font-size: 80%;
 }
 #footer p#createdate {
     float: left;

data/css/Web_Basic-Spruce.css

@@ -21,6 +21,9 @@ Copyright 2008 Jason M. Simanek
 Copyright 2009 Stephane Charette
 Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
 Copyright 2011 Michiel D. Nauta
+Copyright 2018 Theo van Rijn
+Copyright (C) 2019      Serge Noiraud
+
 
 This file is part of the GRAMPS program.
 
@@ -59,7 +62,7 @@ the page.
 
 body {
     font-family: sans-serif;
-    font-size: 90%;
+    font-size: 100%;
     color: black;
     margin: 0px;
     background-color: #EAEEF4;
@@ -67,6 +70,13 @@ body {
 body > div {
     clear: both;
 }
+#outerwrapper {
+    margin: 5px auto;
+    width: 98%;
+}
+#outerwrapper > div {
+    clear: both;
+}
 .content {
     background-color: #FFF;
     border-top: solid 1px #7CA3DD;
@@ -75,9 +85,19 @@ body > div {
     float: right;
     margin: 2em;
 }
+#ThumbnailPreview div.snapshot {
+    float: right;
+    margin: 0;
+}
 .fullclear {
     clear: both;
 }
+/* Less whitespace on smaller real estate. */
+@media only screen and (max-width: 1080px) {
+    .content {
+        padding: 0em 0.5em;
+    }
+}
 
 /* General Text
 ----------------------------------------------------- */
@@ -207,6 +227,93 @@ div#alphanav ul li a:hover {
     color: #FFF;
 }
 
+/* Responsive navigation */
+a.navIcon {
+    display: none;
+}
+
+div#header::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+div#nav::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 1080px) {
+
+    /* Use less & all realestate on mobiles. */
+    div#outerwrapper {
+        margin: 5px auto;
+        width: 100%;
+    }
+
+    .nav {
+        background: none; /* Works in IE too. */
+/*
+        width: 200px;
+        position: absolute;
+        z-index: 10;
+*/
+    }
+
+    /* Undo some of the #nav styles  - to enable the class .nav */
+    .nav ul, #subnavigation ul {
+        list-style: none;
+        min-width: unset;
+        width: 200px;
+        height: 32px;
+        margin: 0;
+        padding: 0;
+    }
+    .nav ul li, #subnavigation ul li {
+        float: unset;
+        display: unset
+    }
+
+    /* Start with hidden menu options */
+    /* .nav li:not(:first-child) {display: none;} */
+    .nav li {display: none;}
+    .nav ul {display: none;}
+
+    a.navIcon {
+        font-size:1.3em;
+        display: block;
+        margin: 0.1em 0.4em 0.4em 0.4em;
+        float: left;
+    }
+
+    .nav.responsive {position: absolute; display: block; z-index: 100;}
+    .nav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-right: 10px;
+    }
+    .nav.responsive li {
+        /* float: left; */
+        display: block;
+        text-align: left;
+        background-color: #EEE;
+        /* required by IE */
+        float: left;
+        clear: both;
+        width: 200px;
+    }
+
+    div#nav ul, #subnavigation ul {
+        padding-left: 0px;
+    }
+
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 /* Main Table
 ----------------------------------------------------- */
 table {
@@ -406,6 +513,14 @@ table.eventlist tbody tr td.ColumnSources {
     margin: 0px auto;
     display: block;
     border: solid 1px #7CA3DD;
+    max-width: 800px;
+    height: auto;
+}
+
+@media only screen and (max-width: 1080px) {
+    #GalleryDisplay img {
+        max-width: 100%;
+    }
 }
 #GalleryDetail h3 {
     text-align: center;
@@ -423,13 +538,10 @@ div#SourceDetail {
     overflow: hidden;
 }
 #Contact #summaryarea {
-    width: 40em;
-    margin: 2em auto;
-    padding: 3em;
     background-color: #EAEEF4;
     border: solid 1px #7CA3DD;
 }
-#Contact img {
+#Contact #summaryarea #GalleryDisplay img {
     float: right;
     border: solid 1px #7CA3DD;
 }
@@ -456,20 +568,31 @@ div#SourceDetail {
 
 /* Subsection
 ----------------------------------------------------- */
-#Home, #Introduction {
+#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
-    overflow: hidden;
-}
-#Home img, #Introduction img {
     float: right;
-    margin: 1em;
+    margin: 0;
+    border: 0px;
+}
+#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+      #Contact #GalleryDisplay img {
+    display: block;
     max-width: 950px;
+    height: auto;
+    float: right;
+}
+@media only screen and (max-width: 1080px) {
+    #Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+          #Contact #GalleryDisplay img {
+        margin: 0 auto;
+        max-width: 100%;
+    }
 }
 #Home p, #Introduction p {
     padding-left: 15px;
 }
 .subsection {
     clear: both;
-    overflow: visible;
+    overflow: hidden;
 }
 .subsection p {
     margin: 0px;
@@ -492,12 +615,33 @@ div#families table.attrlist td.ColumnType {
 
 /* Subsection : Gallery
 ----------------------------------------------------- */
+#gallery {
+    background-color: green;
+}
+#indivgallery {
+    background-color: white;
+}
+#gallery .gallerycell {
+    float: left;
+    width: 130px;
+    height: 150px;
+    text-align: center;
+    margin: 0;
+    background-color: white;
+    border-top: solid 1px #999;
+    border-right: solid 1px #999;
+}
+#gallery .thumbnail {
+    font-size: smaller;
+    margin: 3em auto;
+}
 #indivgallery .thumbnail {
     float: left;
     width: 130px;
     font-size: smaller;
     text-align: center;
     margin: 0.8em 0.5em;
+    background-color: white;
 }
 #indivgallery h4 + .thumbnail {
     margin-left: 15px;
@@ -505,6 +649,40 @@ div#families table.attrlist td.ColumnType {
      *          first thumnail on each next row should also have a margin-left
      *          of 15 px. */
 }
+#gallery div.indexno {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+    margin: 0;
+}
+#indivgallery div.date {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+}
+#indivgallery .thumbnail ul {
+    font-size: smaller;
+    list-style: none;
+    padding: 0px;
+}
+#indivgallery .thumbnail ul li:first-child {
+    border-style: none;
+}
+#indivgallery .thumbnail ul li {
+    border-top: dashed 1px #CCC;
+    border-top-style: dashed;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+#gallery img {
+    border: solid 1px #999;
+}
 #indivgallery img {
     border: solid 1px #7CA3DD;
 }
@@ -512,6 +690,9 @@ div#families table.attrlist td.ColumnType {
 /* ## remove this line and the comment markers from the line below to hide description in Indivifual Gallery
     display: none; */
 }
+div.snapshot div.thumbnail {
+    text-align: center;
+}
 
 /* Subsection : Narrative
 ----------------------------------------------------- */
@@ -575,6 +756,7 @@ a.familymap {
 }
 #footer > * {
     background-color: #EAEEF4;
+    font-size: 80%;
 }
 #footer p#createdate {
     float: left;

data/css/Web_Mainz.css

@@ -19,6 +19,8 @@ Copyright 2008 Jason M. Simanek
 Copyright 2009 Stephane Charette
 Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
 Copyright 2011 Michiel D. Nauta
+Copyright 2018 Theo van Rijn
+Copyright (C) 2019      Serge Noiraud
 
 This file is part of the GRAMPS program.
 
@@ -62,7 +64,7 @@ General Elements
 -----------------------------------------------------------------*/
 body {
     font-family: Georgia, serif;
-    font-size: 90%;
+    font-size: 100%;
     color: #7D5925;
     background: url(../images/Web_Mainz_Bkgd.png) black repeat;
 }
@@ -73,15 +75,33 @@ body > div {
     overflow: hidden;
     padding: 0px 1.5em;
 }
+#outerwrapper {
+    margin: 5px auto;
+    width: 98%;
+}
+#outerwrapper > div {
+    clear: both;
+}
 .content {
     padding: 1.5em 1.5em;
 }
+#ThumbnailPreview div.snapshot {
+    float: right;
+    margin: 0;
+}
 div.snapshot div.thumbnail {
     text-align: center;
 }
 div.snapshot a {
     display: inline;
 }
+/* Less whitespace on smaller real estate. */
+@media only screen and (max-width: 1080px) {
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 
 /* General Text
 -----------------------------------------------------------------*/
@@ -204,6 +224,93 @@ div#alphanav ul li a:hover {
     color: white;
 }
 
+/* Responsive navigation */
+a.navIcon {
+    display: none;
+}
+
+div#header::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+div#nav::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 1080px) {
+
+    /* Use less & all realestate on mobiles. */
+    div#outerwrapper {
+        margin: 5px auto;
+        width: 100%;
+    }
+
+    .nav {
+        background: none; /* Works in IE too. */
+/*
+        width: 200px;
+        position: absolute;
+        z-index: 10;
+*/
+    }
+
+    /* Undo some of the #nav styles  - to enable the class .nav */
+    .nav ul, #subnavigation ul {
+        list-style: none;
+        min-width: unset;
+        width: 200px;
+        height: 32px;
+        margin: 0;
+        padding: 0;
+    }
+    .nav ul li, #subnavigation ul li {
+        float: unset;
+        display: unset
+    }
+
+    /* Start with hidden menu options */
+    /* .nav li:not(:first-child) {display: none;} */
+    .nav li {display: none;}
+    .nav ul {display: none;}
+
+    a.navIcon {
+        font-size:1.3em;
+        display: block;
+        margin: 0.1em 0.4em 0.4em 0.4em;
+        float: left;
+    }
+
+    .nav.responsive {position: absolute; display: block; z-index: 100;}
+    .nav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-right: 10px;
+    }
+    .nav.responsive li {
+        /* float: left; */
+        display: block;
+        text-align: left;
+        background-color: #D8C19F;
+        /* required by IE */
+        float: left;
+        clear: both;
+        width: 200px;
+    }
+
+    div#nav ul, #subnavigation ul {
+        padding-left: 0px;
+    }
+
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 /* Main Table
 -----------------------------------------------------------------*/
 table {
@@ -361,6 +468,14 @@ table.eventlist tbody tr td.ColumnSources {
     margin: 0px auto;
     display:block;
     border: solid 1px #7D5925;
+    max-width: 800px;
+    height: auto;
+}
+
+@media only screen and (max-width: 1080px) {
+    #GalleryDisplay img {
+        max-width: 100%;
+    }
 }
 
 /*    Sources
@@ -376,7 +491,7 @@ div#SourceDetail {
     padding-bottom: 0px;
     margin: 0px;
 }
-#Contact img {
+#Contact #summaryarea #GalleryDisplay img {
     display: block;
     margin: 0px auto 1em auto;
     border: solid 1px #7D5925;
@@ -402,16 +517,31 @@ div#SourceDetail {
 
 /* SubSection
 -----------------------------------------------------------------*/
-#Home img, #Introduction img {
+#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
+    float: right;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+      #Contact #GalleryDisplay {
     display: block;
-    margin: 1em auto;
     max-width: 950px;
+    height: auto;
+    float: right;
+}
+@media only screen and (max-width: 1080px) {
+    #Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+          #Contact #GalleryDisplay {
+        margin: 0 auto;
+        max-width: 100%;
+    }
 }
 #Home a, #Introduction a, #Contact a {
     color: black;
 }
 .subsection {
     clear: both;
+    overflow: hidden;
 }
 .subsection p {
     margin: 0px;
@@ -428,9 +558,32 @@ div#families table.fixed_subtables table.eventlist th:first-child {
 div#families table.fixed_subtables table.eventlist th:last-child {
     width: 5em;
 }
+div#families .infolist h4 {
+    text-align: left;
+}
 
 /* SubSection : Gallery
 -----------------------------------------------------------------*/
+#gallery {
+    background-color: green;
+}
+#indivgallery {
+    background-color: white;
+}
+#gallery .gallerycell {
+    float: left;
+    width: 130px;
+    height: 150px;
+    text-align: center;
+    margin: 0;
+    background-color: white;
+    border-top: solid 1px #999;
+    border-right: solid 1px #999;
+}
+#gallery .thumbnail {
+    font-size: smaller;
+    margin: 3em auto;
+}
 #indivgallery {
     /* float container stretch, see www.quirksmode.org/css/clearing.html */
     overflow: hidden;
@@ -441,6 +594,7 @@ div#families table.fixed_subtables table.eventlist th:last-child {
     font-size: smaller;
     text-align: center;
     margin: 0.5em;
+    background-color: white;
 }
 #indivgallery img {
     border: solid 1px #7D5925;
@@ -449,6 +603,43 @@ div#families table.fixed_subtables table.eventlist th:last-child {
 /* ## remove this line and the comment markers from the line below to hide the description in Individual Gallery
     display: none; */
 }
+#gallery div.indexno {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+    margin: 0;
+}
+#indivgallery div.date {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+}
+#indivgallery .thumbnail ul {
+    font-size: smaller;
+    list-style: none;
+    padding: 0px;
+}
+#indivgallery .thumbnail ul li:first-child {
+    border-style: none;
+}
+#indivgallery .thumbnail ul li {
+    border-top: dashed 1px #CCC;
+    border-top-style: dashed;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+#gallery img {
+    border: solid 1px #999;
+}
+div.snapshot div.thumbnail {
+    text-align: center;
+}
 
 /* SubSection : Narrative
 -----------------------------------------------------------------*/
@@ -515,6 +706,9 @@ div.grampsstylednote p {
     width: 40%;
     text-align: right;
 }
+#footer > * {
+    font-size: 80%;
+}
 
 /* Overwritten
 -----------------------------------------------------------------*/

data/css/Web_Nebraska.css

@@ -19,6 +19,8 @@ Go to <http://gramps-project.org/> to learn more!
 Copyright 2008 Jason M. Simanek
 Copyright 2009 Stephane Charette
 Copyright (C) 2008-2011 Rob G. Healey <robhealey1@gmail.com>
+Copyright 2018 Theo van Rijn
+Copyright (C) 2019      Serge Noiraud
 
 This file is part of the GRAMPS program.
 
@@ -82,10 +84,21 @@ img {
 .thumbnail a:hover {
     background:none;
 }
+#outerwrapper {
+    margin: 5px auto;
+    width: 98%;
+}
+#outerwrapper > div {
+    clear: both;
+}
 .content {
     padding-top: 1cm;
     background-color:#FFF;
 }
+#ThumbnailPreview div.snapshot {
+    float: right;
+    margin: 0;
+}
 .content div.snapshot {
     float:right;
     margin:1.6em;
@@ -100,6 +113,12 @@ img {
 .content div.snapshot div.thumbnail span {
     display:none;
 }
+/* Less whitespace on smaller real estate. */
+@media only screen and (max-width: 1080px) {
+    .content {
+        padding: 0em 0.5em;
+    }
+}
 .fullclear {
     width:100%;
     height:1px;
@@ -254,6 +273,100 @@ div#subnavigation ul li.CurrentSection a {
     border-width: 0 0 1px 0;
 }
 
+/* Responsive navigation */
+a.navIcon {
+    display: none;
+    color: #FFF;
+}
+
+div#header::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+div#nav::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+@media only screen and (max-width: 1080px) {
+
+    /* Use less & all realestate on mobiles. */
+    div#outerwrapper {
+        margin: 5px auto;
+        width: 100%;
+    }
+
+    .nav {
+        background: none; /* Works in IE too. */
+/*
+        width: 200px;
+        position: absolute;
+        z-index: 10;
+*/
+    }
+
+    /* Undo some of the #nav styles  - to enable the class .nav */
+    .nav ul, #subnavigation ul {
+        list-style: none;
+        min-width: unset;
+        width: 200px;
+        height: 32px;
+        margin: 0;
+        padding: 0;
+    }
+    .nav ul li, #subnavigation ul li {
+        float: unset;
+        display: unset
+    }
+
+    /* Start with hidden menu options */
+    /* .nav li:not(:first-child) {display: none;} */
+    .nav li {display: none;}
+    .nav ul {display: none;}
+
+    a.navIcon {
+        font-size:1.3em;
+        display: block;
+        margin: 0.1em 0.4em 0.4em 0.4em;
+        float: left;
+    color: #FFF;
+    }
+
+    .nav.responsive {position: absolute; display: block; z-index: 100;}
+    .nav.responsive a.icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-right: 10px;
+    }
+    .nav.responsive ::after {
+        /* need to remove the "|" when we are in the dropdown menu. */
+        color: #A97;
+        background-color: #A97;
+    }
+    .nav.responsive li {
+        /* float: left; */
+        display: block;
+        text-align: left;
+        background-color: #A97;
+        /* required by IE */
+        float: left;
+        clear: both;
+        width: 200px;
+    }
+
+    div#nav ul, #subnavigation ul {
+        padding-left: 0px;
+    }
+
+    .content {
+        padding: 0em 0.5em;
+    }
+}
+
 /* Main Table
 ----------------------------------------------------- */
 table.infolist {
@@ -634,6 +747,14 @@ table.eventlist tbody tr td.ColumnSources {
 }
 #GalleryDisplay img {
     margin:0 auto;
+    max-width: 800px;
+    height: auto;
+}
+
+@media only screen and (max-width: 1080px) {
+    #GalleryDisplay img {
+        max-width: 100%;
+    }
 }
 #GalleryDetail div#summaryarea{
     margin:0;
@@ -679,7 +800,6 @@ body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName {
 /* Contact
 ----------------------------------------------------- */
 #Contact #summaryarea {
-    width:500px;
     margin:0 auto;
     padding:3em;
     background-color:#F1ECE2;
@@ -697,7 +817,6 @@ body#ThumbnailPreview div#references table.infolist tbody tr td.ColumnName {
     padding:0;
 }
 #researcher span {
-    float:left;
     display:block;
     font:normal .9em/1.4em serif;
     margin-right:.4em;
@@ -779,20 +898,32 @@ table.download td.Modified {
 
 /* Subsections
 ----------------------------------------------------- */
-#Home, #Introduction, #Contact {
+#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
-    padding:2em 0 3em 0;
+    float: right;
+    margin-left: 10px;
+    margin-right: 10px;
 }
+#Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+      #Contact #GalleryDisplay img {
+    display: block;
+    max-width: 950px;
+    height: auto;
+    float: right;
+}
+@media only screen and (max-width: 1080px) {
+    #Home #GalleryDisplay img, #Introduction #GalleryDisplay img,
+          #Contact #GalleryDisplay img {
+        max-width: 100%;
+    }
+}
+
 #Home p, #Introduction p {
     margin:0 20px 1em 20px;
 }
-#Home img, #Introduction img {
-    float:right;
-    margin:0;
-    padding:0 20px 3em 2em;
-}
 #Home a, #Introduction a, #Contact a {
     color: #000;
     text-decoration: none;
+    overflow: hidden;
 }
 div.subsection{
     padding-bottom:.5em;
@@ -926,6 +1057,26 @@ div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a {
 
 /* Subsections : Gallery
 ----------------------------------------------------- */
+#gallery {
+    background-color: green;
+}
+#indivgallery {
+    background-color: white;
+}
+#gallery .gallerycell {
+    float: left;
+    width: 130px;
+    height: 150px;
+    text-align: center;
+    margin: 0;
+    background-color: white;
+    border-top: solid 1px #999;
+    border-right: solid 1px #999;
+}
+#gallery .thumbnail {
+    font-size: smaller;
+    margin: 3em auto;
+}
 #indivgallery h4 {
     margin-bottom:1em;
 }
@@ -934,6 +1085,41 @@ div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a {
     float:left;
     width:130px;
     text-align:center;
+    background-color: white;
+}
+#gallery div.indexno {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+    margin: 0;
+}
+#indivgallery div.date {
+    float: right;
+    width: 1.8em;
+    font-size: large;
+    text-align: center;
+    background-color: #CCC;
+    color: #555;
+}
+#indivgallery .thumbnail ul {
+    font-size: smaller;
+    list-style: none;
+    padding: 0px;
+}
+#indivgallery .thumbnail ul li:first-child {
+    border-style: none;
+}
+#indivgallery .thumbnail ul li {
+    border-top: dashed 1px #CCC;
+    border-top-style: dashed;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+#gallery img {
+    border: solid 1px #999;
 }
 #indivgallery .thumbnail a {
     display:block;
@@ -957,6 +1143,9 @@ div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a {
     margin:0 auto;
     padding:0;
 }
+div.snapshot div.thumbnail {
+    text-align: center;
+}
 
 /* Subsections : Narrative
 ----------------------------------------------------- */
@@ -1070,6 +1259,9 @@ div#pedigree {
     background-color: #542;
     border-top: solid 8px #A97;
 }
+#footer > * {
+    font-size: 80%;
+}
 #footer a, #footer a:visited {
     text-decoration: none;
     color: #C1B398;

gramps/plugins/webreport/addressbook.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -84,12 +84,13 @@ class AddressBookPage(BasePage):
 
         # set the file name and open file
         output_file, sio = self.report.create_file(person_handle, "addr")
-        addressbookpage, head, body = self.write_header(_("Address Book"))
+        result = self.write_header(_("Address Book"))
+        addressbookpage, dummy_head, dummy_body, outerwrapper = result
 
         # begin address book page division and section title
         with Html("div", class_="content",
                   id="AddressBookDetail") as addressbookdetail:
-            body += addressbookdetail
+            outerwrapper += addressbookdetail
 
             link = self.new_person_link(person_handle, uplink=True,
                                         person=person)
@@ -113,7 +114,7 @@ class AddressBookPage(BasePage):
         # add fullclear for proper styling
         # and footer section to page
         footer = self.write_footer(None)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/addressbooklist.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -78,12 +78,13 @@ class AddressBookListPage(BasePage):
         output_file, sio = self.report.create_file("addressbook")
 
         # Add xml, doctype, meta and stylesheets
-        addressbooklistpage, head, body = self.write_header(_("Address Book"))
+        result = self.write_header(_("Address Book"))
+        addressbooklistpage, dummy_head, dummy_body, outerwrapper = result
 
         # begin AddressBookList division
         with Html("div", class_="content",
                   id="AddressBookList") as addressbooklist:
-            body += addressbooklist
+            outerwrapper += addressbooklist
 
             # Address Book Page message
             msg = _("This page contains an index of all the individuals in "
@@ -119,7 +120,7 @@ class AddressBookListPage(BasePage):
                 table += tbody
 
                 index = 1
-                for (sort_name, person_handle,
+                for (dummy_sort_name, person_handle,
                      has_add, has_res,
                      has_url) in has_url_addr_res:
 
@@ -163,7 +164,7 @@ class AddressBookListPage(BasePage):
 
         # Add footer and clearline
         footer = self.write_footer(None)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send the page out for processing
         # and close the file

gramps/plugins/webreport/basepage.py

@@ -12,10 +12,11 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
+# Copyright (C) 2018       Theo van Rijn
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -58,7 +59,7 @@ import logging
 #------------------------------------------------
 from gramps.gen.const import GRAMPS_LOCALE as glocale
 from gramps.gen.lib import (FamilyRelType, NoteType, NameType, Person,
-                            UrlType, Date, Name, PlaceType, EventRoleType,
+                            UrlType, Name, PlaceType, EventRoleType,
                             Family, Citation, Place)
 from gramps.gen.lib.date import Today
 from gramps.gen.const import PROGRAM_NAME, URL_HOMEPAGE
@@ -124,7 +125,7 @@ class BasePage: # pylint: disable=C1001
         # are still required.
         self.html_dir = report.options['target']
         self.ext = report.options['ext']
-        self.noid = report.options['nogid']
+        self.noid = not report.options['inc_id']
         self.linkhome = report.options['linkhome']
         self.create_media = report.options['gallery']
         self.create_unused_media = report.options['unused']
@@ -132,12 +133,14 @@ class BasePage: # pylint: disable=C1001
         self.inc_families = report.options['inc_families']
         self.inc_events = report.options['inc_events']
         self.usecms = report.options['usecms']
+        self.prevnext = report.options['prevnext']
         self.target_uri = report.options['cmsuri']
         self.usecal = report.options['usecal']
         self.target_cal_uri = report.options['caluri']
         self.extrapage = report.options['extrapage']
         self.extrapagename = report.options['extrapagename']
         self.familymappages = None
+        self.reference_sort = report.options['reference_sort']
         lang = report.options['trans']
         self.rlocale = report.set_locale(lang)
         self._ = self.rlocale.translation.sgettext
@@ -233,7 +236,7 @@ class BasePage: # pylint: disable=C1001
         """
         Returns the menu column for Drop Down Menus and Drop Down Citations
         """
-        if len(data_list) == 0:
+        if not data_list:
             return
 
         elif len(data_list) == 1:
@@ -261,8 +264,10 @@ class BasePage: # pylint: disable=C1001
         Displays a person's relationships ...
 
         @param: family_handle_list -- families in this report database
-        @param: place_lat_long -- for use in Family Map Pages. This will be None
+        @param: place_lat_long     -- for use in Family Map Pages.
-        if called from Family pages, which do not create a Family Map
+                                      This will be None if called from
+                                      Family pages, which do not create
+                                      a Family Map
         """
         family_list = individual.get_family_handle_list()
         if not family_list:
@@ -284,12 +289,9 @@ class BasePage: # pylint: disable=C1001
                             family_handle,
                             self.report.obj_dict[Family][family_handle][1],
                             gid=family.get_gramps_id(), uplink=True)
+                        link1 = Html("H4", link, class_="subsection")
                         trow = Html("tr", class_="BeginFamily") + (
-                            Html("td", "&nbsp", class_="ColumnType",
+                            Html("td", link1, class_="ColumnValue", colspan=3,
-                                 inline=True),
-                            Html("td", "&nbsp", class_="ColumnAttribute",
-                                 inline=True),
-                            Html("td", link, class_="ColumnValue",
                                  inline=True)
                         )
                         table += trow
@@ -312,9 +314,10 @@ class BasePage: # pylint: disable=C1001
         """
         Displays a family's relationships ...
 
-        @param: family -- the family to be displayed
+        @param: family         -- the family to be displayed
-        @param: place_lat_long -- for use in Family Map Pages. This will be None
+        @param: place_lat_long -- for use in Family Map Pages. This will
-        if called from Family pages, which do not create a Family Map
+                                  be None if called from Family pages, which
+                                  do not create a Family Map
         """
         with Html("div", class_="subsection", id="families") as section:
             section += Html("h4", self._("Families"), inline=True)
@@ -460,10 +463,12 @@ class BasePage: # pylint: disable=C1001
         """
         completes the person column for classes EventListPage and EventPage
 
-        @param: tcell -- table cell from its caller
+        @param: tcell        -- table cell from its caller
         @param: first_person -- Not used any more, done via css
-        @param: handle_list -- handle list from the backlink of the event_handle
+        @param: handle_list  -- handle list from the backlink of
+                                the event_handle
         """
+        dummy_first_person = first_person
         for (classname, handle) in handle_list:
 
             # personal event
@@ -648,11 +653,11 @@ class BasePage: # pylint: disable=C1001
 
         @param: evt            -- Event object from report database
         @param: evt_ref        -- Event reference
-        @param: place_lat_long -- For use in Family Map Pages. This will be None
+        @param: place_lat_long -- For use in Family Map Pages. This will be
-                                  if called from Family pages, which do not
+                                  None if called from Family pages, which do
-                                  create a Family Map
+                                  not create a Family Map
-        @param: uplink         -- If True, then "../../../" is inserted in front
+        @param: uplink         -- If True, then "../../../" is inserted in
-                                  of the result.
+                                  front of the result.
         @param: hyperlink      -- Add a hyperlink or not
         @param: omit           -- Role to be omitted in output
         """
@@ -695,13 +700,15 @@ class BasePage: # pylint: disable=C1001
         trow += Html("td", srcrefs, class_="ColumnSources", rowspan=2)
 
         # get event notes
-        notelist = event.get_note_list()[:]  # we don't want to modify cached original
+        notelist = event.get_note_list()[:]  # we don't want to modify
+                                             # cached original
         notelist.extend(event_ref.get_note_list())
         htmllist = self.dump_notes(notelist)
 
         # if the event or event reference has an attribute attached to it,
         # get the text and format it correctly?
-        attrlist = event.get_attribute_list()[:]  # we don't want to modify cached original
+        attrlist = event.get_attribute_list()[:]  # we don't want to modify
+                                                  # cached original
         attrlist.extend(event_ref.get_attribute_list())
         for attr in attrlist:
             htmllist.extend(Html("p",
@@ -725,8 +732,9 @@ class BasePage: # pylint: disable=C1001
         """
         Create a list of places with coordinates.
 
-        @param: place_lat_long -- for use in Family Map Pages. This will be None
+        @param: place_lat_long -- for use in Family Map Pages. This will be
-        if called from Family pages, which do not create a Family Map
+                                  None if called from Family pages, which do
+                                  not create a Family Map
         """
         if place_lat_long is None:
             return
@@ -782,15 +790,15 @@ class BasePage: # pylint: disable=C1001
         @param: family_handle -- The handle for the family to link
         @param: name          -- The family name
         @param: gid           -- The family gramps ID
-        @param: uplink        -- If True, then "../../../" is inserted in front
+        @param: uplink        -- If True, then "../../../" is inserted in
-                                 of the result.
+                                 front of the result.
         """
         name = html_escape(name)
         if not self.noid and gid:
             gid_html = Html("span", " [%s]" % gid, class_="grampsid",
                             inline=True)
         else:
-            gid_html = "" # pylint: disable=redefined-variable-type
+            gid_html = ""
 
         result = self.report.obj_dict.get(Family).get(family_handle)
         if result is None:
@@ -867,9 +875,9 @@ class BasePage: # pylint: disable=C1001
         displays the event row for events such as marriage and divorce
 
         @param: event_ref_list -- List of events reference
-        @param: place_lat_long -- For use in Family Map Pages. This will be None
+        @param: place_lat_long -- For use in Family Map Pages. This will be
-                                  if called from Family pages, which do not
+                                  None if called from Family pages, which do
-                                  create a Family Map
+                                  not create a Family Map
         """
         with Html("table", class_="infolist eventlist") as table:
             thead = Html("thead")
@@ -901,6 +909,8 @@ class BasePage: # pylint: disable=C1001
         @param: uplink  -- If True, then "../../../" is inserted in front of
                            the result.
         """
+        dummy_evt_ref = evt_ref
+        dummy_gid = gid
         place = None
         place_handle = evt.get_place_handle()
         if place_handle:
@@ -930,6 +940,7 @@ class BasePage: # pylint: disable=C1001
         @param: ldsobj        -- Either person or family
         @param: ldssealedtype -- Either Sealed to Family or Spouse
         """
+        dummy_ldssealedtype = ldssealedtype
         objectldsord = ldsobj.get_lds_ord_list()
         if not objectldsord:
             return None
@@ -966,7 +977,7 @@ class BasePage: # pylint: disable=C1001
                     place = self.r_db.get_place_from_handle(place_handle)
                     if place:
                         place_title = _pd.display(self.r_db, place)
-                        place_hyper = self.place_link( # pylint: disable=R0204
+                        place_hyper = self.place_link(
                             place_handle, place_title,
                             place.get_gramps_id(), uplink=True)
 
@@ -996,7 +1007,7 @@ class BasePage: # pylint: disable=C1001
 
         @param: srcattr_list -- List of source attributes
         """
-        if len(srcattr_list) == 0:
+        if not srcattr_list:
             return None
 
         # begin data map division and section title...
@@ -1039,8 +1050,8 @@ class BasePage: # pylint: disable=C1001
         @param: source_title  -- Title from the source object
         @param: gid           -- Source gramps id from the source object
         @param: cindex        -- Count index
-        @param: uplink        -- If True, then "../../../" is inserted in front
+        @param: uplink        -- If True, then "../../../" is inserted in
-                                 of the result.
+                                 front of the result.
         """
         url = self.report.build_url_fname_html(source_handle, "src", uplink)
         hyper = Html("a", source_title,
@@ -1182,8 +1193,8 @@ class BasePage: # pylint: disable=C1001
         Creates a hyperlink for an address book link based on person's handle
 
         @param: person_handle -- Person's handle from the database
-        @param: uplink        -- If True, then "../../../" is inserted in front
+        @param: uplink        -- If True, then "../../../" is inserted in
-                                 of the result.
+                                 front of the result.
         """
         url = self.report.build_url_fname_html(person_handle, "addr", uplink)
         person = self.r_db.get_person_from_handle(person_handle)
@@ -1199,7 +1210,7 @@ class BasePage: # pylint: disable=C1001
         Return person's name, unless maiden_name given, unless married_name
         listed.
 
-        @param: person -- person object from database
+        @param: person      -- person object from database
         @param: maiden_name -- Female's family surname
         """
         # get name format for displaying names
@@ -1260,7 +1271,7 @@ class BasePage: # pylint: disable=C1001
         """
         Will display a list of attributes
 
-        @param: attrlist -- a list of attributes
+        @param: attrlist  -- a list of attributes
         @param: attrtable -- the table element that is being added to
         """
         tbody = Html("tbody")
@@ -1274,7 +1285,8 @@ class BasePage: # pylint: disable=C1001
         """
         Will create and display the footer section of each page...
 
-        @param: bottom -- whether to specify location of footer section or not?
+        @param: bottom -- whether to specify location of footer section
+                          or not?
         """
         # begin footer division
         with Html("div", id="footer") as footer:
@@ -1424,12 +1436,27 @@ class BasePage: # pylint: disable=C1001
         head += meta
         head += links
 
+        # Add the script to control the menu
+        menuscript = Html("<script>function navFunction() { "
+                          "var x = document.getElementById(\"dropmenu\"); "
+                          "if (x.className === \"nav\") { x.className += \""
+                          " responsive\"; } else { x.className = \"nav\"; }"
+                          " }</script>")
+        head += menuscript
+
+        # add outerwrapper to set the overall page width
+        outerwrapperdiv = Html("div", id='outerwrapper')
+        body += outerwrapperdiv
+
         # begin header section
+        #headerdiv = Html("div", id='header') + (
         headerdiv = Html("div", id='header') + (
-            Html("h1", html_escape(self.title_str),
+            Html("<a href=\"javascript:void(0);\" class=\"navIcon\""
-                 id="SiteTitle", inline=True)
+                 " onclick=\"navFunction()\">&#8801;</a>")) + (
-        )
+                     Html("h1", html_escape(self.title_str),
-        body += headerdiv
+                          id="SiteTitle", inline=True)
+                     )
+        outerwrapperdiv += headerdiv
 
         header_note = self.report.options['headernote']
         if header_note:
@@ -1449,12 +1476,17 @@ class BasePage: # pylint: disable=C1001
         if (self.report.css == _("Basic-Blue") or
                 self.report.css == _("Visually Impaired")
            ) and self.report.navigation == "dropdown":
-            body += self.display_drop_menu()
+            outerwrapperdiv += self.display_drop_menu()
         else:
-            body += self.display_nav_links(title)
+            outerwrapperdiv += self.display_nav_links(title)
 
+        # message for Codacy :
+        # body is used in some modules to add functions like onload(),
+        # initialize(), ...
+        # some modules doesn't need that, so body is an unused variable
+        # in these modules.
         # return page, head, and body to its classes...
-        return page, head, body
+        return page, head, body, outerwrapperdiv
 
     def display_nav_links(self, currentsection):
         """
@@ -1465,7 +1497,7 @@ class BasePage: # pylint: disable=C1001
         # include repositories or not?
         inc_repos = True
         if (not self.report.inc_repository or
-                not len(self.r_db.get_repository_handles())):
+                not self.r_db.get_repository_handles()):
             inc_repos = False
 
         # create media pages...
@@ -1512,89 +1544,78 @@ class BasePage: # pylint: disable=C1001
         navs = ((url_text, nav_text)
                 for url_text, nav_text, cond in navs if cond)
         menu_items = [[url, text] for url, text in navs]
-
         number_items = len(menu_items)
-        num_cols = 10
-        num_rows = ((number_items // num_cols) + 1)
 
         # begin navigation menu division...
-        with Html("div", class_="wrapper",
+        with Html("div", class_="wrappernav",
                   id="nav", role="navigation") as navigation:
             with Html("div", class_="container") as container:
 
                 index = 0
-                for rows in range(num_rows):
+                unordered = Html("ul", class_="nav", id="dropmenu")
-                    unordered = Html("ul", class_="menu", id="dropmenu")
+                while index < number_items:
+                    url_fname, nav_text = menu_items[index]
+                    hyper = self.get_nav_menu_hyperlink(url_fname, nav_text)
 
-                    cols = 0
+                    # Define 'currentsection' to correctly set navlink item
-                    while cols <= num_cols and index < number_items:
+                    # CSS id 'CurrentSection' for Navigation styling.
-                        url_fname, nav_text = menu_items[index]
+                    # Use 'self.report.cur_fname' to determine
+                    # 'CurrentSection' for individual elements for
+                    # Navigation styling.
 
-                        if url_fname.startswith('http'):
+                    # Figure out if we need <li class = "CurrentSection">
-                            hyper = Html("a", nav_text, href=url_fname, title=nav_text, inline=True)
+                    # or just <li>
-                        else:
-                            hyper = self.get_nav_menu_hyperlink(url_fname, nav_text)
 
-                        # Define 'currentsection' to correctly set navlink item
+                    check_cs = False
-                        # CSS id 'CurrentSection' for Navigation styling.
+                    if nav_text == currentsection:
-                        # Use 'self.report.cur_fname' to determine
+                        check_cs = True
-                        # 'CurrentSection' for individual elements for
+                    elif nav_text == _("Surnames"):
-                        # Navigation styling.
+                        if "srn" in self.report.cur_fname:
-
-                        # Figure out if we need <li class = "CurrentSection">
-                        # or just <li>
-
-                        check_cs = False
-                        if nav_text == currentsection:
                             check_cs = True
-                        elif nav_text == _("Surnames"):
+                        elif _("Surnames") in currentsection:
-                            if "srn" in self.report.cur_fname:
+                            check_cs = True
-                                check_cs = True
+                    elif nav_text == _("Individuals"):
-                            elif _("Surnames") in currentsection:
+                        if "ppl" in self.report.cur_fname:
-                                check_cs = True
+                            check_cs = True
-                        elif nav_text == _("Individuals"):
+                    elif nav_text == _("Families"):
-                            if "ppl" in self.report.cur_fname:
+                        if "fam" in self.report.cur_fname:
-                                check_cs = True
+                            check_cs = True
-                        elif nav_text == _("Families"):
+                    elif nav_text == _("Sources"):
-                            if "fam" in self.report.cur_fname:
+                        if "src" in self.report.cur_fname:
-                                check_cs = True
+                            check_cs = True
-                        elif nav_text == _("Sources"):
+                    elif nav_text == _("Places"):
-                            if "src" in self.report.cur_fname:
+                        if "plc" in self.report.cur_fname:
-                                check_cs = True
+                            check_cs = True
-                        elif nav_text == _("Places"):
+                    elif nav_text == _("Events"):
-                            if "plc" in self.report.cur_fname:
+                        if "evt" in self.report.cur_fname:
-                                check_cs = True
+                            check_cs = True
-                        elif nav_text == _("Events"):
+                    elif nav_text == _("Media"):
-                            if "evt" in self.report.cur_fname:
+                        if "img" in self.report.cur_fname:
-                                check_cs = True
+                            check_cs = True
-                        elif nav_text == _("Media"):
+                    elif nav_text == _("Address Book"):
-                            if "img" in self.report.cur_fname:
+                        if "addr" in self.report.cur_fname:
-                                check_cs = True
+                            check_cs = True
-                        elif nav_text == _("Address Book"):
+                    temp_cs = 'class = "CurrentSection"'
-                            if "addr" in self.report.cur_fname:
+                    check_cs = temp_cs if check_cs else False
-                                check_cs = True
+                    if check_cs:
-                        temp_cs = 'class = "CurrentSection"'
+                        unordered.extend(
-                        check_cs = temp_cs if check_cs else False
+                            Html("li", hyper, attr=check_cs, inline=True)
-                        if check_cs:
+                        )
-                            unordered.extend(
+                    else:
-                                Html("li", hyper, attr=check_cs, inline=True)
+                        unordered.extend(
-                            )
+                            Html("li", hyper, inline=True)
-                        else:
+                        )
-                            unordered.extend(
+                    index += 1
-                                Html("li", hyper, inline=True)
-                            )
-                        index += 1
-                        cols += 1
 
-                    if rows == num_rows - 1:
+                if self.prevnext:
-                        prv = Html('<a onclick="history.go(-1);">%s</a>' %
+                    prv = Html('<a onclick="history.go(-1);">%s</a>' %
-                                   self._("Previous"))
+                               self._("Previous"))
-                        nxt = Html('<a onclick="history.go(+1);">%s</a>' %
+                    nxt = Html('<a onclick="history.go(+1);">%s</a>' %
-                                   self._("Next"))
+                               self._("Next"))
-                        unordered.extend(Html("li", prv, inline=True))
+                    unordered.extend(Html("li", prv, inline=True))
-                        unordered.extend(Html("li", nxt, inline=True))
+                    unordered.extend(Html("li", nxt, inline=True))
-                    container += unordered
+                container += unordered
-                navigation += container
+            navigation += container
         return navigation
 
     def display_drop_menu(self):
@@ -1604,7 +1625,7 @@ class BasePage: # pylint: disable=C1001
         # include repositories or not?
         inc_repos = True
         if (not self.report.inc_repository or
-                not len(self.r_db.get_repository_handles())):
+                not self.r_db.get_repository_handles()):
             inc_repos = False
 
         # create media pages...
@@ -1674,7 +1695,7 @@ class BasePage: # pylint: disable=C1001
                 # add personal column
                 self.get_column_data(unordered, personal, self._("Personal"))
 
-                if len(navs1):
+                if navs1:
                     for url_fname, nav_text in navs1:
                         unordered.extend(
                             Html("li", self.get_nav_menu_hyperlink(url_fname,
@@ -1695,9 +1716,10 @@ class BasePage: # pylint: disable=C1001
             navigation += container
         return navigation
 
-    def add_image(self, option_name, height=0):
+    def add_image(self, option_name, head, height=0):
         """
         Will add an image (if present) to the page
+        If this image contains regions, try to add them.
 
         @param: option_name -- The name of the report option
         @param: height      -- Height of the image
@@ -1707,25 +1729,70 @@ class BasePage: # pylint: disable=C1001
             obj = self.r_db.get_media_from_gramps_id(pic_id)
             if obj is None:
                 return None
+            # get media rectangles
+            _region_items = self.media_ref_rect_regions(obj.get_handle(),
+                                                        linkurl=self.uplink)
+
+            # if there are media rectangle regions, attach behaviour style sheet
+            if _region_items:
+                fname = "/".join(["css", "behaviour.css"])
+                url = self.report.build_url_fname(fname, None, self.uplink)
+                head += Html("link", href=url, type="text/css",
+                             media="screen", rel="stylesheet")
             mime_type = obj.get_mime_type()
             if mime_type and mime_type.startswith("image"):
                 try:
 
-                    newpath, thumb_path = self.report.prepare_copy_media(obj)
+                    newpath, dummy_tpath = self.report.prepare_copy_media(obj)
                     self.report.copy_file(media_path_full(
                         self.r_db, obj.get_path()), newpath)
 
                     # begin image
-                    image = Html("img")
+                    with Html("div", id="GalleryDisplay",
-                    image.attr = ''
+                              style='width: auto; height: auto') as image:
-                    if height:
+                        if _region_items:
-                        image.attr += 'height = "%d"'  % height
+                            # add all regions and links to persons
+                            regions = Html("ol", class_="RegionBox")
+                            while _region_items:
+                                (name, coord_x, coord_y,
+                                 width, height, linkurl
+                                ) = _region_items.pop()
+                                regions += Html(
+                                    "li",
+                                    style="left:%d%%; "
+                                          "top:%d%%; "
+                                          "width:%d%%; "
+                                          "height:%d%%;" % (
+                                              coord_x, coord_y,
+                                              width, height)) + (
+                                                  Html("a", name,
+                                                       href=linkurl)
+                                                  )
+                            image += regions
 
-                    descr = html_escape(obj.get_description())
+                        # add image
-                    newpath = self.report.build_url_fname(newpath)
+                        imag = Html("img")
-                    image.attr += ' src = "%s" alt = "%s"' % (newpath, descr)
+                        imag.attr = ''
+                        if height:
+                            imag.attr += 'height = "%d"'  % height
+
+                        descr = html_escape(obj.get_description())
+                        newpath = self.report.build_url_fname(newpath)
+                        imag.attr += ' src = "%s" alt = "%s"' % (newpath, descr)
+                        fname = self.report.build_url_fname(obj.get_handle(),
+                                                            "img",
+                                                            False) + self.ext
+                        #image += imag
+                        inc_gallery = self.report.options['gallery']
+                        if not self.create_thumbs_only and inc_gallery:
+                            img_link = Html("a", href=fname, title=descr) + (
+                                Html("img", src=newpath, alt=descr))
+                        else:
+                            # We can't show the image html page.
+                            # This page doesn't exist.
+                            img_link = Html("img", src=newpath, alt=descr)
+                        image += img_link
 
-                    # return an image
                     return image
 
                 except (IOError, OSError) as msg:
@@ -1735,7 +1802,7 @@ class BasePage: # pylint: disable=C1001
         # no image to return
         return None
 
-    def media_ref_rect_regions(self, handle):
+    def media_ref_rect_regions(self, handle, linkurl=True):
         """
         Gramps feature #2634 -- attempt to highlight subregions in media
         objects and link back to the relevant web page.
@@ -1771,7 +1838,8 @@ class BasePage: # pylint: disable=C1001
                                  self._("Unknown")
                                 )
                         _linkurl = self.report.build_url_fname_html(_obj.handle,
-                                                                    "ppl", True)
+                                                                    "ppl",
+                                                                    linkurl)
             elif classname == "Family":
                 _obj = self.r_db.get_family_from_handle(newhandle)
                 partner1_handle = _obj.get_father_handle()
@@ -1890,7 +1958,7 @@ class BasePage: # pylint: disable=C1001
                                                 usedescr=False)
                 else:
 
-                    real_path, newpath = self.report.prepare_copy_media(photo)
+                    dummy_rpath, newpath = self.report.prepare_copy_media(photo)
                     newpath = self.report.build_url_fname(newpath, uplink=True)
 
                     # FIXME: There doesn't seem to be any point in highlighting
@@ -1901,14 +1969,15 @@ class BasePage: # pylint: disable=C1001
                     # probably too small to see, and third, on the thumbnail,
                     # the link is shown above the image (which is pretty
                     # useless!)
-                    _region_items = self.media_ref_rect_regions(photo_handle)
+                    _region_items = self.media_ref_rect_regions(photo_handle,
-                    if len(_region_items):
+                                                                linkurl=False)
+                    if _region_items:
                         with Html("div", id="GalleryDisplay") as mediadisplay:
                             snapshot += mediadisplay
 
                             ordered = Html("ol", class_="RegionBox")
                             mediadisplay += ordered
-                            while len(_region_items):
+                            while _region_items:
                                 (name, coord_x, coord_y,
                                  width, height, linkurl) = _region_items.pop()
                                 ordered += Html("li",
@@ -2264,47 +2333,6 @@ class BasePage: # pylint: disable=C1001
         # return section to its caller
         return section
 
-    def display_references(self, handlelist,
-                           uplink=False):
-        """
-        Display references for the current objects
-
-        @param: handlelist -- List of handles
-        @param: uplink     -- If True, then "../../../" is inserted in front of
-                              the result.
-        """
-        if not handlelist:
-            return None
-
-        # begin references division and title
-        with Html("div", class_="subsection", id="references") as section:
-            section += Html("h4", self._("References"), inline=True)
-
-            ordered = Html("ol")
-            section += ordered
-            sortlist = sorted(handlelist,
-                              key=lambda x: self.rlocale.sort_key(x[1]))
-
-            for (path, name, gid) in sortlist:
-                list_html = Html("li")
-                ordered += list_html
-
-                name = name or self._("Unknown")
-                if not self.noid and gid != "":
-                    gid_html = Html("span", " [%s]" % gid, class_="grampsid",
-                                    inline=True)
-                else:
-                    gid_html = "" # pylint: disable=redefined-variable-type
-
-                if path != "":
-                    url = self.report.build_url_fname(path, None, self.uplink)
-                    list_html += Html("a", href=url) + name + gid_html
-                else:
-                    list_html += name + str(gid_html)
-
-        # return references division to its caller
-        return section
-
     def family_map_link(self, handle, url):
         """
         Creates a link to the family map
@@ -2312,6 +2340,7 @@ class BasePage: # pylint: disable=C1001
         @param: handle -- The family handle
         @param: url    -- url to be linked
         """
+        dummy_handle = handle
         return Html("a", self._("Family Map"), href=url,
                     title=self._("Family Map"), class_="familymap", inline=True)
 
@@ -2321,9 +2350,9 @@ class BasePage: # pylint: disable=C1001
 
         @param: partner        -- The partner
         @param: family         -- The family
-        @param: place_lat_long -- For use in Family Map Pages. This will be None
+        @param: place_lat_long -- For use in Family Map Pages. This will be
-                                  if called from Family pages, which do not
+                                  None if called from Family pages, which do
-                                  create a Family Map
+                                  not create a Family Map
         """
         gender = partner.get_gender()
         reltype = family.get_relationship()
@@ -2381,16 +2410,16 @@ class BasePage: # pylint: disable=C1001
         """
         creates a link for a person. If a page is generated for the person, a
         hyperlink is created, else just the name of the person. The returned
-        vale will be an Html object if a hyperlink is generated, otherwise just
+        vale will be an Html object if a hyperlink is generated, otherwise
-        a string
+        just a string
 
         @param: person_handle -- Person in database
-        @param: uplink        -- If True, then "../../../" is inserted in front
+        @param: uplink        -- If True, then "../../../" is inserted in
-                                 of the result
+                                 front of the result
-        @param: person        -- Person object. This does not need to be passed.
+        @param: person        -- Person object. This does not need to be
-                                 It should be passed if the person object has
+                                 passed. It should be passed if the person
-                                 already been retrieved, as it will be used to
+                                 object has already been retrieved, as it
-                                 improve performance
+                                 will be used to improve performance
         """
         result = self.report.obj_dict.get(Person).get(person_handle)
 
@@ -2420,7 +2449,7 @@ class BasePage: # pylint: disable=C1001
             gid_html = Html("span", " [%s]" % gid, class_="grampsid",
                             inline=True)
         else:
-            gid_html = "" # pylint: disable=redefined-variable-type
+            gid_html = ""
 
         if link != "":
             url = self.report.build_url_fname(link, uplink=uplink)
@@ -2500,8 +2529,8 @@ class BasePage: # pylint: disable=C1001
         @param: handle -- repository handle from report database
         @param: name   -- repository title
         @param: gid    -- gramps id
-        @param: uplink -- If True, then "../../../" is inserted in front of the
+        @param: uplink -- If True, then "../../../" is inserted in front of
-                          result.
+                          the result.
         """
         url = self.report.build_url_fname_html(handle, "plc", uplink)
 
@@ -2521,7 +2550,7 @@ class BasePage: # pylint: disable=C1001
         @param: table -- Table from Placedetail
         """
         if place in self.report.visited:
-            return
+            return None
         self.report.visited.append(place)
         # add table body
         tbody = Html("tbody")
@@ -2589,12 +2618,13 @@ class BasePage: # pylint: disable=C1001
         altloc = place.get_alternative_names()
         if altloc:
             tbody += Html("tr") + Html("td", "&nbsp;", colspan=2)
+            date_msg = self._("Date range in which the name is valid.")
             trow = Html("tr") + (
                 Html("th", self._("Alternate Names"), colspan=1,
                      class_="ColumnAttribute", inline=True),
                 Html("th", self._("Language"), colspan=1,
                      class_="ColumnAttribute", inline=True),
-                Html("th", self._("Date range in which the name is valid."), colspan=1,
+                Html("th", date_msg, colspan=1,
                      class_="ColumnAttribute", inline=True),
             )
             tbody += trow
@@ -2653,11 +2683,12 @@ class BasePage: # pylint: disable=C1001
                         placeref = None
                         for placeref in c_place.get_placeref_list():
                             if placeref.ref == place.handle:
-                                eplace = self.r_db.get_place_from_handle(placeref.ref)
+                                gpfh = self.r_db.get_place_from_handle
+                                eplace = gpfh(placeref.ref)
                                 if not eplace:
-                                   continue
+                                    continue
-                                table += Html("tr") + Html("td",
+                                place_name = c_place.get_name().get_value()
-                                            c_place.get_name().get_value())
+                                table += Html("tr") + Html("td", place_name)
 
             # enclosed by
             with Html("div", class_='subsection encloses') as encloses:
@@ -2673,9 +2704,9 @@ class BasePage: # pylint: disable=C1001
                         visited.append(placeref.ref)
                         pplace = self.r_db.get_place_from_handle(placeref.ref)
                         if not pplace:
-                           continue
+                            continue
-                        table += Html("tr") + Html("td",
+                        place_name = pplace.get_name().get_value()
-                                    pplace.get_name().get_value())
+                        table += Html("tr") + Html("td", place_name)
 
         # enclosed by
         tbody += Html("tr") + Html("td", "&nbsp;")
@@ -2727,7 +2758,8 @@ class BasePage: # pylint: disable=C1001
         # return place table to its callers
         return table
 
-    def repository_link(self, repository_handle, name, gid=None, uplink=False):
+    def repository_link(self, repository_handle, name,
+                        gid=None, uplink=False):
         """
         Returns a hyperlink for repository links
 
@@ -2753,7 +2785,7 @@ class BasePage: # pylint: disable=C1001
 
         @param: repo_ref_list -- The list of repositories references
         """
-        if len(repo_ref_list) == 0:
+        if not repo_ref_list:
             return None
         # Repository list division...
         with Html("div", class_="subsection",
@@ -2830,7 +2862,8 @@ class BasePage: # pylint: disable=C1001
 
                     trow = Html("tr")
                     if len(table) == 3:
-                        # append description row to tbody element of dump_place
+                        # append description row to tbody element
+                        # of dump_place
                         table[-2] += trow
                     else:
                         # append description row to table element
@@ -2866,7 +2899,9 @@ class BasePage: # pylint: disable=C1001
             elif obj[2] == "Family":
                 role = "1"
             else:
-                if len(obj[2].split('-')) > 1:
+                if self.reference_sort:
+                    role = obj[2] # name
+                elif len(obj[2].split('-')) > 1:
                     role = obj[2] # date in ISO format
                 else:
                     role = "3"
@@ -2880,12 +2915,14 @@ class BasePage: # pylint: disable=C1001
             name = self.report.obj_dict[bkref_class][bkref_handle][1]
             gid = self.report.obj_dict[bkref_class][bkref_handle][2]
             if role != "":
-                if len(role.split('-')) > 1:
+                if self.reference_sort:
+                    role = ""
+                elif len(role.split('-')) > 1:
                     # conver ISO date to Date for translation.
                     if len(role.split(' - ')) > 1:
-                        (d1, d2) = role.split(' - ')
+                        (date1, date2) = role.split(' - ')
-                        role = self._("between") + " " + d1 + " "
+                        role = self._("between") + " " + date1 + " "
-                        role += self._("and") + " " + d2
+                        role += self._("and") + " " + date2
                     date = _dp.parse(role)
                     date = self.rlocale.get_date(date)
                     role = " (%s) " % date
@@ -2903,7 +2940,7 @@ class BasePage: # pylint: disable=C1001
                     gid_html = Html("span", " [%s]" % gid,
                                     class_="grampsid", inline=True)
                 else:
-                    gid_html = "" # pylint: disable=redefined-variable-type
+                    gid_html = ""
                 list_html += Html("a", href=url) + name + role + gid_html
         return ordered
 
@@ -2925,9 +2962,9 @@ class BasePage: # pylint: disable=C1001
             section += ordered
         return section
 
-    # -------------------------------------------------------------------------
+    # -----------------------------------------------------------------------
     #              # Web Page Fortmatter and writer
-    # -------------------------------------------------------------------------
+    # -----------------------------------------------------------------------
     def xhtml_writer(self, htmlinstance, output_file, sio, date):
         """
         Will format, write, and close the file

gramps/plugins/webreport/citation.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider

gramps/plugins/webreport/common.py

@@ -3,7 +3,7 @@
 #
 # Gramps - a GTK+/GNOME based genealogy program
 #
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -31,7 +31,6 @@ from unicodedata import normalize
 from collections import defaultdict
 from hashlib import md5
 import re
-import gc
 import logging
 from xml.sax.saxutils import escape
 
@@ -351,6 +350,7 @@ def sort_event_types(dbase, event_types, event_handle_list, rlocale):
 def _get_short_name(gender, name):
     """ Will get suffix for all people passed through it """
 
+    dummy_gender = gender
     short_name = name.get_first_name()
     suffix = name.get_suffix()
     if suffix:
@@ -475,6 +475,7 @@ def first_letter(string, rlocale=glocale):
     """
     Receives a string and returns the first letter
     """
+    dummy_rlocale = rlocale
     if string is None or len(string) < 1:
         return ' '
 
@@ -502,6 +503,7 @@ try:
         """
         Try to use the PyICU collation.
         """
+        dummy_rlocale = rlocale
 
         return PRIM_COLL.compare(prev_key, new_key) != 0
 
@@ -618,7 +620,7 @@ def alphabet_navigation(index_list, rlocale=glocale):
     with Html("div", id="alphanav") as alphabetnavigation:
 
         index = 0
-        for row in range(num_of_rows):
+        for dummy_row in range(num_of_rows):
             unordered = Html("ul")
 
             cols = 0

gramps/plugins/webreport/contact.py

@@ -12,10 +12,11 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
+# Copyright (C) 2018       Theo van Rijn
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -73,17 +74,18 @@ class ContactPage(BasePage):
         BasePage.__init__(self, report, title)
 
         output_file, sio = self.report.create_file("contact")
-        contactpage, head, body = self.write_header(self._('Contact'))
+        result = self.write_header(self._('Contact'))
+        contactpage, head, dummy_body, outerwrapper = result
 
         # begin contact division
         with Html("div", class_="content", id="Contact") as section:
-            body += section
+            outerwrapper += section
 
             # begin summaryarea division
             with Html("div", id='summaryarea') as summaryarea:
                 section += summaryarea
 
-                contactimg = self.add_image('contactimg', 200)
+                contactimg = self.add_image('contactimg', head, 200)
                 if contactimg is not None:
                     summaryarea += contactimg
 
@@ -132,7 +134,7 @@ class ContactPage(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(None)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for porcessing
         # and close the file

gramps/plugins/webreport/download.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -91,11 +91,12 @@ class DownloadPage(BasePage):
         if dlfname1 or dlfname2:
 
             output_file, sio = self.report.create_file("download")
-            downloadpage, head, body = self.write_header(self._('Download'))
+            result = self.write_header(self._('Download'))
+            downloadpage, dummy_head, dummy_body, outerwrapper = result
 
             # begin download page and table
             with Html("div", class_="content", id="Download") as download:
-                body += download
+                outerwrapper += download
 
                 msg = self._("This page is for the user/ creator "
                              "of this Family Tree/ Narrative website "
@@ -188,7 +189,7 @@ class DownloadPage(BasePage):
             # clear line for proper styling
             # create footer section
             footer = self.write_footer(None)
-            body += (FULLCLEAR, footer)
+            outerwrapper += (FULLCLEAR, footer)
 
             # send page out for processing
             # and close the file

gramps/plugins/webreport/event.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -138,11 +138,12 @@ class EventPages(BasePage):
         prev_letter = " "
 
         output_file, sio = self.report.create_file("events")
-        eventslistpage, head, body = self.write_header(self._("Events"))
+        result = self.write_header(self._("Events"))
+        eventslistpage, dummy_head, dummy_body, outerwrapper = result
 
         # begin events list  division
         with Html("div", class_="content", id="EventList") as eventlist:
-            body += eventlist
+            outerwrapper += eventlist
 
             msg = self._("This page contains an index of all the events in the "
                          "database, sorted by their type and date (if one is "
@@ -196,7 +197,7 @@ class EventPages(BasePage):
                     data_list = sorted(data_list, key=itemgetter(0, 1))
                     first_event = True
 
-                    for (sort_value, event_handle) in data_list:
+                    for (dummy_sort_value, event_handle) in data_list:
                         event = self.r_db.get_event_from_handle(event_handle)
                         _type = event.get_type()
                         gid = event.get_gramps_id()
@@ -299,7 +300,7 @@ class EventPages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page ut for processing
         # and close the file
@@ -350,7 +351,7 @@ class EventPages(BasePage):
         event = report.database.get_event_from_handle(event_handle)
         BasePage.__init__(self, report, title, event.get_gramps_id())
         if not event:
-            return None
+            return
 
         ldatec = event.get_change_time()
         event_media_list = event.get_media_list()
@@ -362,11 +363,12 @@ class EventPages(BasePage):
         self.bibli = Bibliography()
 
         output_file, sio = self.report.create_file(event_handle, "evt")
-        eventpage, head, body = self.write_header(self._("Events"))
+        result = self.write_header(self._("Events"))
+        eventpage, dummy_head, dummy_body, outerwrapper = result
 
         # start event detail division
         with Html("div", class_="content", id="EventDetail") as eventdetail:
-            body += eventdetail
+            outerwrapper += eventdetail
 
             thumbnail = self.disp_first_img_as_thumbnail(event_media_list,
                                                          event)
@@ -442,7 +444,7 @@ class EventPages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the page

gramps/plugins/webreport/family.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -128,13 +128,14 @@ class FamilyPages(BasePage):
         BasePage.__init__(self, report, title)
 
         output_file, sio = self.report.create_file("families")
-        familieslistpage, head, body = self.write_header(self._("Families"))
+        result = self.write_header(self._("Families"))
+        familieslistpage, dummy_head, dummy_body, outerwrapper = result
         ldatec = 0
         prev_letter = " "
 
         # begin Family Division
         with Html("div", class_="content", id="Relationships") as relationlist:
-            body += relationlist
+            outerwrapper += relationlist
 
             # Families list page message
             msg = self._("This page contains an index of all the "
@@ -299,7 +300,7 @@ class FamilyPages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -328,12 +329,13 @@ class FamilyPages(BasePage):
         self.familymappages = report.options["familymappages"]
 
         output_file, sio = self.report.create_file(family.get_handle(), "fam")
-        familydetailpage, head, body = self.write_header(family_name)
+        result = self.write_header(family_name)
+        familydetailpage, dummy_head, dummy_body, outerwrapper = result
 
         # begin FamilyDetaill division
         with Html("div", class_="content",
                   id="RelationshipDetail") as relationshipdetail:
-            body += relationshipdetail
+            outerwrapper += relationshipdetail
 
             # family media list for initial thumbnail
             if self.create_media:
@@ -387,7 +389,7 @@ class FamilyPages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/home.py

@@ -12,10 +12,11 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
+# Copyright (C) 2018       Theo van Rijn
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -74,13 +75,14 @@ class HomePage(BasePage):
         ldatec = 0
 
         output_file, sio = self.report.create_file("index")
-        homepage, head, body = self.write_header(self._('Home'))
+        result = self.write_header(self._('Home'))
+        homepage, head, dummy_body, outerwrapper = result
 
         # begin home division
         with Html("div", class_="content", id="Home") as section:
-            body += section
+            outerwrapper += section
 
-            homeimg = self.add_image('homeimg')
+            homeimg = self.add_image('homeimg', head)
             if homeimg is not None:
                 section += homeimg
 
@@ -98,7 +100,7 @@ class HomePage(BasePage):
         # create clear line for proper styling
         # create footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/introduction.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -75,13 +75,14 @@ class IntroductionPage(BasePage):
         ldatec = 0
 
         output_file, sio = self.report.create_file(report.intro_fname)
-        intropage, head, body = self.write_header(self._('Introduction'))
+        result = self.write_header(self._('Introduction'))
+        intropage, head, dummy_body, outerwrapper = result
 
         # begin Introduction division
         with Html("div", class_="content", id="Introduction") as section:
-            body += section
+            outerwrapper += section
 
-            introimg = self.add_image('introimg')
+            introimg = self.add_image('introimg', head)
             if introimg is not None:
                 section += introimg
 
@@ -99,7 +100,7 @@ class IntroductionPage(BasePage):
         # add clearline for proper styling
         # create footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/layout.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider

gramps/plugins/webreport/media.py

@@ -12,10 +12,11 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
+# Copyright (C) 2018       Theo van Rijn
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -95,6 +96,7 @@ class MediaPages(BasePage):
         BasePage.__init__(self, report, title="")
         self.media_dict = defaultdict(set)
         self.unused_media_handles = []
+        self.cur_fname = None
 
     def display_pages(self, title):
         """
@@ -146,7 +148,7 @@ class MediaPages(BasePage):
                     next_ = None
                 elif index < total:
                     next_ = sorted_media_handles[index]
-                elif len(self.unused_media_handles) > 0:
+                elif self.unused_media_handles:
                     next_ = self.unused_media_handles[0]
                 else:
                     next_ = None
@@ -162,40 +164,17 @@ class MediaPages(BasePage):
             prev = sorted_media_handles[total_m-1] if total_m > 0 else 0
             if total > 0:
                 for media_handle in self.unused_media_handles:
-                    media = self.r_db.get_media_from_handle(media_handle)
                     gc.collect() # Reduce memory usage when many images.
                     if index == media_count:
                         next_ = None
-                    elif index < total:
-                        next_ = sorted_media_handles[index]
-                    elif len(self.unused_media_handles) > 0:
-                        next_ = self.unused_media_handles[0]
                     else:
-                        next_ = None
+                        next_ = self.unused_media_handles[idx]
-                    self.mediapage(self.report, title,
+                    self.mediapage(self.report, title, media_handle,
-                                   handle, (prev, next_, index, media_count))
+                                   (prev, next_, index, media_count))
-                    prev = handle
+                    prev = media_handle
                     step()
                     index += 1
-
+                    idx += 1
-                total = len(self.unused_media_handles)
-                idx = 1
-                prev = sorted_media_handles[len(sorted_media_handles)-1]
-                if total > 0:
-                    for media_handle in self.unused_media_handles:
-                        media = self.r_db.get_media_from_handle(media_handle)
-                        gc.collect() # Reduce memory usage when many images.
-                        if index == media_count:
-                            next_ = None
-                        else:
-                            next_ = self.unused_media_handles[idx]
-                        self.mediapage(self.report, title,
-                                       media_handle,
-                                       (prev, next_, index, media_count))
-                        prev = media_handle
-                        step()
-                        index += 1
-                        idx += 1
 
         self.medialistpage(self.report, title, sorted_media_handles)
 
@@ -214,12 +193,13 @@ class MediaPages(BasePage):
         output_file, sio = self.report.create_file("media")
         # save the media file name in case we create unused media pages
         self.cur_fname = self.report.cur_fname
-        medialistpage, head, body = self.write_header(self._('Media'))
+        result = self.write_header(self._('Media'))
+        medialistpage, dummy_head, dummy_body, outerwrapper = result
 
         ldatec = 0
         # begin gallery division
         with Html("div", class_="content", id="Gallery") as medialist:
-            body += medialist
+            outerwrapper += medialist
 
             msg = self._("This page contains an index of all the media objects "
                          "in the database, sorted by their title. Clicking on "
@@ -263,7 +243,7 @@ class MediaPages(BasePage):
                 message = _("Creating list of media pages")
                 with self.r_user.progress(_("Narrated Web Site Report"),
                                           message, media_count + 1
-                                 ) as step:
+                                         ) as step:
                     for media_handle in sorted_media_handles:
                         media = self.r_db.get_media_from_handle(media_handle)
                         if media:
@@ -289,14 +269,7 @@ class MediaPages(BasePage):
                         step()
                         index += 1
 
-                    def sort_by_desc_and_gid(obj):
-                        """
-                        Sort by media description and gramps ID
-                        """
-                        return (obj.desc, obj.gramps_id)
-
                     idx = 1
-                    prev = None
                     total = len(self.unused_media_handles)
                     if total > 0:
                         trow += Html("tr")
@@ -311,11 +284,10 @@ class MediaPages(BasePage):
                             Html("td", Html("h4", " "), inline=True)
                         )
                         for media_handle in self.unused_media_handles:
-                            media = self.r_db.get_media_from_handle(media_handle)
+                            gmfh = self.r_db.get_media_from_handle
+                            media = gmfh(media_handle)
                             gc.collect() # Reduce memory usage when many images.
-                            if idx == total:
+                            if idx != total:
-                                next_ = None
-                            else:
                                 self.unused_media_handles[idx]
                             trow += Html("tr")
                             media_data_row = [
@@ -330,7 +302,6 @@ class MediaPages(BasePage):
                                 Html("td", data, class_=colclass)
                                 for data, colclass in media_data_row
                             )
-                            prev = media_handle
                             step()
                             index += 1
                             idx += 1
@@ -338,7 +309,7 @@ class MediaPages(BasePage):
         # add footer section
         # add clearline for proper styling
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -394,22 +365,19 @@ class MediaPages(BasePage):
 
         # get media type to be used primarily with "img" tags
         mime_type = media.get_mime_type()
-        #mtype = get_description(mime_type)
 
         if mime_type:
-            #note_only = False
             newpath = self.copy_source_file(media_handle, media)
             target_exists = newpath is not None
         else:
-            #note_only = True
             target_exists = False
 
         self.copy_thumbnail(media_handle, media)
         self.page_title = media.get_description()
         esc_page_title = html_escape(self.page_title)
-        (mediapage, head,
+        result = self.write_header("%s - %s" % (self._("Media"),
-         body) = self.write_header("%s - %s" % (self._("Media"),
                                                 self.page_title))
+        mediapage, head, dummy_body, outerwrapper = result
 
         # if there are media rectangle regions, attach behaviour style sheet
         if _region_items:
@@ -421,7 +389,7 @@ class MediaPages(BasePage):
 
         # begin MediaDetail division
         with Html("div", class_="content", id="GalleryDetail") as mediadetail:
-            body += mediadetail
+            outerwrapper += mediadetail
 
             # media navigation
             with Html("div", id="GalleryNav", role="navigation") as medianav:
@@ -465,31 +433,16 @@ class MediaPages(BasePage):
                             # size as requested.
                             orig_image_path = media_path_full(self.r_db,
                                                               media.get_path())
-                            #mtime = os.stat(orig_image_path).st_mtime
                             (width, height) = image_size(orig_image_path)
                             max_width = self.report.options[
                                 'maxinitialimagewidth']
-                            max_height = self.report.options[
-                                'maxinitialimageheight']
-                            if width != 0 and height != 0:
-                                scale_w = (float(max_width)/width) or 1
-                                           # the 'or 1' is so that a max of
-                                           # zero is ignored
-                                scale_h = (float(max_height)/height) or 1
-                            else:
-                                scale_w = 1.0
-                                scale_h = 1.0
-                            scale = min(scale_w, scale_h, 1.0)
-                            new_width = int(width*scale)
-                            new_height = int(height*scale)
 
                             # TODO. Convert disk path to URL.
                             url = self.report.build_url_fname(orig_image_path,
                                                               None, self.uplink)
                             with Html("div", id="GalleryDisplay",
-                                      style='width: %dpx; height: %dpx' % (
+                                      style='max-width: %dpx; height: auto' % (
-                                          new_width,
+                                          max_width)) as mediadisplay:
-                                          new_height)) as mediadisplay:
                                 summaryarea += mediadisplay
 
                                 # Feature #2634; display the mouse-selectable
@@ -499,7 +452,7 @@ class MediaPages(BasePage):
                                 if _region_items:
                                     ordered = Html("ol", class_="RegionBox")
                                     mediadisplay += ordered
-                                    while len(_region_items) > 0:
+                                    while _region_items:
                                         (name, coord_x, coord_y,
                                          width, height, linkurl
                                         ) = _region_items.pop()
@@ -520,9 +473,7 @@ class MediaPages(BasePage):
                                     url = self.report.build_url_fname(
                                         newpath, None, self.uplink)
                                 mediadisplay += Html("a", href=url) + (
-                                    Html("img", width=new_width,
+                                    Html("img", src=url, alt=esc_page_title)
-                                         height=new_height, src=url,
-                                         alt=esc_page_title)
                                 )
                     else:
                         dirname = tempfile.mkdtemp()
@@ -643,7 +594,7 @@ class MediaPages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/narrativeweb.py

@@ -12,10 +12,11 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
+# Copyright (C) 2018       Theo van Rijn
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -232,6 +233,7 @@ class NavWebReport(Report):
         self.mapservice = self.options['mapservice']
         self.googleopts = self.options['googleopts']
         self.googlemapkey = self.options['googlemapkey']
+        self.reference_sort = self.options['reference_sort']
 
         if self.use_home:
             self.index_fname = "index"
@@ -824,12 +826,26 @@ class NavWebReport(Report):
         place = self._db.get_place_from_handle(place_handle)
         if place is None:
             return
+        if bkref_class == Person:
+            person = self._db.get_person_from_handle(bkref_handle)
+            name = _nd.display(person)
+        else:
+            family = self._db.get_family_from_handle(bkref_handle)
+            husband_handle = family.get_father_handle()
+            if husband_handle:
+                person = self._db.get_person_from_handle(husband_handle)
+                name = _nd.display(person)
+            else:
+                name = ""
         if config.get('preferences.place-auto'):
             place_name = _pd.display_event(self._db, event)
         else:
             place_name = place.get_title()
         if event:
-            role_or_date = str(event.get_date_object())
+            if self.reference_sort:
+                role_or_date = name
+            else:
+                role_or_date = str(event.get_date_object())
         else:
             role_or_date = ""
         place_fname = self.build_url_fname(place_handle, "plc",
@@ -864,8 +880,6 @@ class NavWebReport(Report):
                     return
         source = self._db.get_source_from_handle(source_handle)
         source_name = source.get_title()
-        #if isinstance(source_name, bytes):
-        #    print("source name :", source_name)
         source_fname = self.build_url_fname(source_handle, "src",
                                             False) + self.ext
         self.obj_dict[Source][source_handle] = (source_fname, source_name,
@@ -1465,7 +1479,7 @@ class NavWebReport(Report):
         """
         if self.usecms:
             to_dir = "/" + self.target_uri + "/" + to_dir
-        # LOG.debug("copying '%s' to '%s/%s'" % (from_fname, to_dir, to_fname))
+        LOG.debug("copying '%s' to '%s/%s'", from_fname, to_dir, to_fname)
         mtime = os.stat(from_fname).st_mtime
         if self.archive:
             def set_mtime(tarinfo):
@@ -1568,6 +1582,7 @@ class NavWebOptions(MenuReportOptions):
         self.__extra_page_name = None
         self.__extra_page = None
         self.__relation = False
+        self.__prevnext = False
         db_options = name + ' ' + dbase.get_dbname()
         MenuReportOptions.__init__(self, db_options, dbase)
 
@@ -1633,10 +1648,10 @@ class NavWebOptions(MenuReportOptions):
 
         self.__relation = BooleanOption(_("Show the relationship between the "
                                           "current person and the active person"
-                                          ), False)
+                                         ), False)
         self.__relation.set_help(_("For each person page, show the relationship"
                                    " between this person and the active person."
-                                   ))
+                                  ))
         addopt("relation", self.__relation)
 
         self.__pid.connect('value-changed', self.__update_filters)
@@ -1712,12 +1727,9 @@ class NavWebOptions(MenuReportOptions):
         addopt("ancestortree", self.__ancestortree)
         self.__ancestortree.connect('value-changed', self.__graph_changed)
 
-        self.__graphgens = NumberOption(_("Graph generations"), 4, 2, 10)
+        self.__prevnext = BooleanOption(_("Add previous/next"), False)
-        self.__graphgens.set_help(_("The number of generations to include in "
+        self.__prevnext.set_help(_("Add previous/next to the navigation bar."))
-                                    "the ancestor graph"))
+        addopt("prevnext", self.__prevnext)
-        addopt("graphgens", self.__graphgens)
-
-        self.__graph_changed()
 
         self.__securesite = BooleanOption(_("This is a secure site (https)"),
                                           False)
@@ -1759,10 +1771,7 @@ class NavWebOptions(MenuReportOptions):
         locale_opt = stdoptions.add_localization_option(menu, category_name)
         stdoptions.add_date_format_option(menu, category_name, locale_opt)
 
-        nogid = BooleanOption(_('Suppress Gramps ID'), False)
+        stdoptions.add_gramps_id_option(menu, category_name)
-        nogid.set_help(_('Whether to include the Gramps ID of objects'))
-        addopt("nogid", nogid)
-        addopt = partial(menu.add_option, category_name)
 
         birthorder = BooleanOption(
             _('Sort all children in birth order'), False)
@@ -1776,6 +1785,20 @@ class NavWebOptions(MenuReportOptions):
             _('Whether to display latitude/longitude in the places list?'))
         addopt("coordinates", coordinates)
 
+        reference_sort = BooleanOption(
+            _('Sort places references either by date or by name'), False)
+        reference_sort.set_help(
+            _('Sort the places references by date or by name.'
+              ' Not set means by date.'))
+        addopt("reference_sort", reference_sort)
+
+        self.__graphgens = NumberOption(_("Graph generations"), 4, 2, 10)
+        self.__graphgens.set_help(_("The number of generations to include in "
+                                    "the ancestor graph"))
+        addopt("graphgens", self.__graphgens)
+
+        self.__graph_changed()
+
     def __add_page_generation_options(self, menu):
         """
         Options on the "Page Generation" tab.
@@ -2122,17 +2145,17 @@ class NavWebOptions(MenuReportOptions):
         """
         Update the change of the extra page name
         """
-        self._extra_page_name = self.__extra_page_name.get_value()
+        extra_page_name = self.__extra_page_name.get_value()
-        if self._extra_page_name != "":
+        if extra_page_name != "":
-            config.set('paths.website-extra-page-name', self._extra_page_name)
+            config.set('paths.website-extra-page-name', extra_page_name)
 
     def __extra_page_changed(self):
         """
         Update the change of the extra page without extension
         """
-        self._extra_page = self.__extra_page.get_value()
+        extra_page = self.__extra_page.get_value()
-        if self._extra_page != "":
+        if extra_page != "":
-            config.set('paths.website-extra-page-uri', self._extra_page)
+            config.set('paths.website-extra-page-uri', extra_page)
 
     def __archive_changed(self):
         """

gramps/plugins/webreport/person.py

@@ -12,10 +12,11 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
+# Copyright (C) 2018       Theo van Rijn
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -175,12 +176,13 @@ class PersonPages(BasePage):
         showparents = report.options['showparents']
 
         output_file, sio = self.report.create_file("individuals")
-        indlistpage, dummy_head, body = self.write_header(self._("Individuals"))
+        result = self.write_header(self._("Individuals"))
+        indlistpage, dummy_head, dummy_body, outerwrapper = result
         date = 0
 
         # begin Individuals division
         with Html("div", class_="content", id="Individuals") as individuallist:
-            body += individuallist
+            outerwrapper += individuallist
 
             # Individual List page message
             msg = self._("This page contains an index of all the individuals "
@@ -412,7 +414,7 @@ class PersonPages(BasePage):
         # create clear line for proper styling
         # create footer section
         footer = self.write_footer(date)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -463,7 +465,8 @@ class PersonPages(BasePage):
 
         output_file, sio = self.report.create_file(person.get_handle(), "ppl")
         self.uplink = True
-        indivdetpage, head, body = self.write_header(self.sort_name)
+        result = self.write_header(self.sort_name)
+        indivdetpage, head, dummy_body, outerwrapper = result
 
         # attach the ancestortree style sheet if ancestor
         # graph is being created?
@@ -479,7 +482,7 @@ class PersonPages(BasePage):
         # begin individualdetail division
         with Html("div", class_="content",
                   id='IndividualDetail') as individualdetail:
-            body += individualdetail
+            outerwrapper += individualdetail
 
             # display a person's general data
             thumbnail, name, summary = self.display_ind_general()
@@ -606,7 +609,7 @@ class PersonPages(BasePage):
         # add clearline for proper styling
         # create footer section
         footer = self.write_footer(date)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -624,7 +627,8 @@ class PersonPages(BasePage):
 
         output_file, sio = self.report.create_file(person.get_handle(), "maps")
         self.uplink = True
-        familymappage, head, body = self.write_header(self._("Family Map"))
+        result = self.write_header(self._("Family Map"))
+        familymappage, head, body, outerwrapper = result
 
         minx, maxx = Decimal("0.00000001"), Decimal("0.00000001")
         miny, maxy = Decimal("0.00000001"), Decimal("0.00000001")
@@ -781,7 +785,7 @@ class PersonPages(BasePage):
 
         # begin MapDetail division...
         with Html("div", class_="content", id="FamilyMapDetail") as mapdetail:
-            body += mapdetail
+            outerwrapper += mapdetail
 
             # add page title
             mapdetail += Html("h3",
@@ -916,7 +920,7 @@ class PersonPages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(None)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -946,7 +950,7 @@ class PersonPages(BasePage):
 
     def draw_box(self, node, col, person):
         """
-        draw the box around the AncestorTree Individual name box...
+        Draw the box around the AncestorTree Individual name box...
         @param: node   -- The node defining the box location
         @param: col    -- The generation number
         @param: person -- The person to set in the box
@@ -1683,7 +1687,15 @@ class PersonPages(BasePage):
                     Html("td", reln, class_="ColumnAttribute", inline=True))
 
                 tcell = Html("td", val1, class_="ColumnValue", inline=True)
-                tcell += self.display_child_link(child_handle)
+                if child == self.person:
+                    name_format = self.report.options['name_format']
+                    primary_name = child.get_primary_name()
+                    name = Name(primary_name)
+                    name.set_display_as(name_format)
+                    ndf = html_escape(_nd.display_name(name))
+                    tcell += Html("b", ndf)
+                else:
+                    tcell += self.display_child_link(child_handle)
 
                 birth = death = ""
                 bd_event = get_birth_or_fallback(self.r_db, child)
@@ -1758,7 +1770,6 @@ class PersonPages(BasePage):
         return True
 
     def display_step_families(self, parent_handle,
-                              family,
                               all_family_handles,
                               birthmother, birthfather,
                               table):
@@ -1789,11 +1800,11 @@ class PersonPages(BasePage):
         center_person = self.r_db.get_person_from_gramps_id(
             self.report.options['pid'])
         if center_person is None:
-            return
+            return None
         if (int(self.report.options['living_people']) !=
-            LivingProxyDb.MODE_INCLUDE_ALL):
+                LivingProxyDb.MODE_INCLUDE_ALL):
             if probably_alive(center_person, self.r_db, Today()):
-                return
+                return None
         relationship = self.rel_class.get_one_relationship(self.r_db,
                                                            center_person,
                                                            self.person)
@@ -1871,11 +1882,11 @@ class PersonPages(BasePage):
                             # involved. This displays half siblings and step
                             # siblings
                             self.display_step_families(
-                                family.get_father_handle(), family,
+                                family.get_father_handle(),
                                 all_family_handles,
                                 birthmother, birthfather, tbody)
                             self.display_step_families(
-                                family.get_mother_handle(), family,
+                                family.get_mother_handle(),
                                 all_family_handles,
                                 birthmother, birthfather, tbody)
                 table += tbody

gramps/plugins/webreport/place.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -138,13 +138,14 @@ class PlacePages(BasePage):
         BasePage.__init__(self, report, title)
 
         output_file, sio = self.report.create_file("places")
-        placelistpage, head, body = self.write_header(self._("Places"))
+        result = self.write_header(self._("Places"))
+        placelistpage, dummy_head, dummy_body, outerwrapper = result
         ldatec = 0
         prev_letter = " "
 
         # begin places division
         with Html("div", class_="content", id="Places") as placelist:
-            body += placelist
+            outerwrapper += placelist
 
             # place list page message
             msg = self._("This page contains an index of all the places in the "
@@ -278,7 +279,7 @@ class PlacePages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -295,7 +296,7 @@ class PlacePages(BasePage):
         """
         place = report.database.get_place_from_handle(place_handle)
         if not place:
-            return None
+            return
         BasePage.__init__(self, report, title, place.get_gramps_id())
         self.bibli = Bibliography()
         place_name = self.report.obj_dict[Place][place_handle][1]
@@ -304,7 +305,7 @@ class PlacePages(BasePage):
         output_file, sio = self.report.create_file(place_handle, "plc")
         self.uplink = True
         self.page_title = place_name
-        placepage, head, body = self.write_header(_("Places"))
+        placepage, head, body, outerwrapper = self.write_header(_("Places"))
 
         self.placemappages = self.report.options['placemappages']
         self.mapservice = self.report.options['mapservice']
@@ -312,7 +313,7 @@ class PlacePages(BasePage):
 
         # begin PlaceDetail Division
         with Html("div", class_="content", id="PlaceDetail") as placedetail:
-            body += placedetail
+            outerwrapper += placedetail
 
             if self.create_media:
                 media_list = place.get_media_list()
@@ -460,7 +461,7 @@ class PlacePages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/repository.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -115,7 +115,7 @@ class RepositoryPages(BasePage):
             self.repositorylistpage(self.report, title, repos_dict, keys)
 
             idx = 1
-            for index, key in enumerate(keys):
+            for dummy_index, key in enumerate(keys):
                 (repo, handle) = repos_dict[key]
                 step()
                 idx += 1
@@ -135,13 +135,14 @@ class RepositoryPages(BasePage):
         #inc_repos = self.report.options["inc_repository"]
 
         output_file, sio = self.report.create_file("repositories")
-        repolistpage, head, body = self.write_header(_("Repositories"))
+        result = self.write_header(_("Repositories"))
+        repolistpage, dummy_head, dummy_body, outerwrapper = result
 
         ldatec = 0
         # begin RepositoryList division
         with Html("div", class_="content",
                   id="RepositoryList") as repositorylist:
-            body += repositorylist
+            outerwrapper += repositorylist
 
             msg = self._("This page contains an index of "
                          "all the repositories in the "
@@ -199,7 +200,7 @@ class RepositoryPages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -220,12 +221,13 @@ class RepositoryPages(BasePage):
 
         output_file, sio = self.report.create_file(handle, 'repo')
         self.uplink = True
-        repositorypage, head, body = self.write_header(_('Repositories'))
+        result = self.write_header(_('Repositories'))
+        repositorypage, dummy_head, dummy_body, outerwrapper = result
 
         # begin RepositoryDetail division and page title
         with Html("div", class_="content",
                   id="RepositoryDetail") as repositorydetail:
-            body += repositorydetail
+            outerwrapper += repositorydetail
 
             # repository name
             repositorydetail += Html("h3", html_escape(repo.name),
@@ -281,7 +283,7 @@ class RepositoryPages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/source.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -127,11 +127,12 @@ class SourcePages(BasePage):
         source_dict = {}
 
         output_file, sio = self.report.create_file("sources")
-        sourcelistpage, head, body = self.write_header(self._("Sources"))
+        result = self.write_header(self._("Sources"))
+        sourcelistpage, dummy_head, dummy_body, outerwrapper = result
 
         # begin source list division
         with Html("div", class_="content", id="Sources") as sourceslist:
-            body += sourceslist
+            outerwrapper += sourceslist
 
             # Sort the sources
             for handle in source_handles:
@@ -195,7 +196,7 @@ class SourcePages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(None)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -223,13 +224,14 @@ class SourcePages(BasePage):
 
         output_file, sio = self.report.create_file(source_handle, "src")
         self.uplink = True
-        sourcepage, head, body = self.write_header(
+        result = self.write_header("%s - %s" % (self._('Sources'),
-            "%s - %s" % (self._('Sources'), self.page_title))
+                                                self.page_title))
+        sourcepage, dummy_head, dummy_body, outerwrapper = result
 
         ldatec = 0
         # begin source detail division
         with Html("div", class_="content", id="SourceDetail") as sourcedetail:
-            body += sourcedetail
+            outerwrapper += sourcedetail
 
             media_list = source.get_media_list()
             if self.create_media and media_list:
@@ -301,7 +303,7 @@ class SourcePages(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/statistics.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -81,7 +81,8 @@ class StatisticsPage(BasePage):
         self.report = report
         # set the file name and open file
         output_file, sio = self.report.create_file("statistics")
-        addressbookpage, head, body = self.write_header(_("Statistics"))
+        result = self.write_header(_("Statistics"))
+        addressbookpage, dummy_head, dummy_body, outerwrapper = result
         (males,
          females,
          unknown) = self.get_gender(report.database.iter_person_handles())
@@ -111,10 +112,10 @@ class StatisticsPage(BasePage):
 
         with Html("div", class_="content", id='EventDetail') as section:
             section += Html("h3", self._("Database overview"), inline=True)
-        body += section
+        outerwrapper += section
         with Html("div", class_="content", id='subsection narrative') as sec11:
             sec11 += Html("h4", self._("Individuals"), inline=True)
-        body += sec11
+        outerwrapper += sec11
         with Html("div", class_="content", id='subsection narrative') as sec1:
             sec1 += Html("br", self._("Number of individuals") + self.colon +
                          "%d" % npersons, inline=True)
@@ -124,14 +125,14 @@ class StatisticsPage(BasePage):
                          "%d" % females, inline=True)
             sec1 += Html("br", self._("Individuals with unknown gender") +
                          self.colon + "%d" % unknown, inline=True)
-        body += sec1
+        outerwrapper += sec1
         with Html("div", class_="content", id='subsection narrative') as sec2:
             sec2 += Html("h4", self._("Family Information"), inline=True)
             sec2 += Html("br", self._("Number of families") + self.colon +
                          "%d" % nfamilies, inline=True)
             sec2 += Html("br", self._("Unique surnames") + self.colon +
                          "%d" % nsurnames, inline=True)
-        body += sec2
+        outerwrapper += sec2
         with Html("div", class_="content", id='subsection narrative') as sec3:
             sec3 += Html("h4", self._("Media Objects"), inline=True)
             sec3 += Html("br",
@@ -145,7 +146,7 @@ class StatisticsPage(BasePage):
                          inline=True)
             sec3 += Html("br", self._("Missing Media Objects") +
                          self.colon + "%d" % len(notfound), inline=True)
-        body += sec3
+        outerwrapper += sec3
         with Html("div", class_="content", id='subsection narrative') as sec4:
             sec4 += Html("h4", self._("Miscellaneous"), inline=True)
             sec4 += Html("br", self._("Number of events") + self.colon +
@@ -166,7 +167,7 @@ class StatisticsPage(BasePage):
             sec4 += Html("br", self._("Number of repositories") +
                          self.colon + "%d" % nrepo,
                          inline=True)
-        body += sec4
+        outerwrapper += sec4
 
         (males,
          females,
@@ -177,7 +178,7 @@ class StatisticsPage(BasePage):
             section += Html("h3",
                             self._("Narrative web content report for") + origin,
                             inline=True)
-        body += section
+        outerwrapper += section
         with Html("div", class_="content", id='subsection narrative') as sec5:
             sec5 += Html("h4", self._("Individuals"), inline=True)
             sec5 += Html("br", self._("Number of individuals") + self.colon +
@@ -189,13 +190,13 @@ class StatisticsPage(BasePage):
                          "%d" % females, inline=True)
             sec5 += Html("br", self._("Individuals with unknown gender") +
                          self.colon + "%d" % unknown, inline=True)
-        body += sec5
+        outerwrapper += sec5
         with Html("div", class_="content", id='subsection narrative') as sec6:
             sec6 += Html("h4", self._("Family Information"), inline=True)
             sec6 += Html("br", self._("Number of families") + self.colon +
                          "%d" % len(self.report.bkref_dict[Family]),
                          inline=True)
-        body += sec6
+        outerwrapper += sec6
         with Html("div", class_="content", id='subsection narrative') as sec7:
             sec7 += Html("h4", self._("Miscellaneous"), inline=True)
             sec7 += Html("br", self._("Number of events") + self.colon +
@@ -213,12 +214,12 @@ class StatisticsPage(BasePage):
             sec7 += Html("br", self._("Number of repositories") + self.colon +
                          "%d" % len(self.report.bkref_dict[Repository]),
                          inline=True)
-        body += sec7
+        outerwrapper += sec7
 
         # add fullclear for proper styling
         # and footer section to page
         footer = self.write_footer(None)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/surname.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -95,13 +95,13 @@ class SurnamePage(BasePage):
 
         output_file, sio = self.report.create_file(name_to_md5(surname), "srn")
         self.uplink = True
-        (surnamepage, head,
+        result = self.write_header("%s - %s" % (self._("Surname"), surname))
-         body) = self.write_header("%s - %s" % (self._("Surname"), surname))
+        surnamepage, dummy_head, dummy_body, outerwrapper = result
         ldatec = 0
 
         # begin SurnameDetail division
         with Html("div", class_="content", id="SurnameDetail") as surnamedetail:
-            body += surnamedetail
+            outerwrapper += surnamedetail
 
             # section title
             # In case the user choose a format name like "*SURNAME*"
@@ -261,7 +261,7 @@ class SurnamePage(BasePage):
                                              class_="father", inline=True)
                             samerow = False
                         else:
-                            tcell = "&nbsp;" # pylint: disable=R0204
+                            tcell = "&nbsp;"
                             samerow = True
                         trow += Html("td", tcell,
                                      class_="ColumnParents", inline=samerow)
@@ -269,7 +269,7 @@ class SurnamePage(BasePage):
         # add clearline for proper styling
         # add footer section
         footer = self.write_footer(ldatec)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/surnamelist.py

@@ -12,7 +12,7 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
@@ -95,15 +95,15 @@ class SurnameListPage(BasePage):
 
         if order_by == self.ORDER_BY_NAME:
             output_file, sio = self.report.create_file(filename)
-            surnamelistpage, head, body = self.write_header(self._('Surnames'))
+            result = self.write_header(self._('Surnames'))
         else:
             output_file, sio = self.report.create_file("surnames_count")
-            (surnamelistpage, head,
+            result = self.write_header(self._('Surnames by person count'))
-             body) = self.write_header(self._('Surnames by person count'))
+        surnamelistpage, dummy_head, dummy_body, outerwrapper = result
 
         # begin surnames division
         with Html("div", class_="content", id="surnames") as surnamelist:
-            body += surnamelist
+            outerwrapper += surnamelist
 
             # page message
             msg = self._('This page contains an index of all the '
@@ -233,7 +233,7 @@ class SurnameListPage(BasePage):
         # create footer section
         # add clearline for proper styling
         footer = self.write_footer(None)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file

gramps/plugins/webreport/thumbnail.py

@@ -12,10 +12,11 @@
 # Copyright (C) 2008-2011  Rob G. Healey <robhealey1@gmail.com>
 # Copyright (C) 2010       Doug Blank <doug.blank@gmail.com>
 # Copyright (C) 2010       Jakim Friant
-# Copyright (C) 2010-2017  Serge Noiraud
+# Copyright (C) 2010-      Serge Noiraud
 # Copyright (C) 2011       Tim G L Lyons
 # Copyright (C) 2013       Benny Malengier
 # Copyright (C) 2016       Allen Crider
+# Copyright (C) 2018       Theo van Rijn
 #
 # This program is free software; you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
@@ -108,10 +109,11 @@ class ThumbnailPreviewPage(BasePage):
 
         # Create thumbnail preview page...
         output_file, sio = self.report.create_file("thumbnails")
-        thumbnailpage, head, body = self.write_header(self._("Thumbnails"))
+        result = self.write_header(self._("Thumbnails"))
+        thumbnailpage, dummy_head, body, outerwrapper = result
 
         with Html("div", class_="content", id="Preview") as previewpage:
-            body += previewpage
+            outerwrapper += previewpage
 
             msg = self._("This page displays a indexed list "
                          "of all the media objects "
@@ -122,91 +124,43 @@ class ThumbnailPreviewPage(BasePage):
                          "will take you to that image&#8217;s page.")
             previewpage += Html("p", msg, id="description")
 
-            with Html("table", class_="calendar thumbnails") as table:
+        with Html("div", id="gallery") as gallery:
-                previewpage += table
+            previewpage += gallery
+            index, indexpos = 1, 0
+            num_of_images = len(media_list)
+            while index <= num_of_images:
+                ptitle = media_list[indexpos][0]
+                person_handle = media_list[indexpos][1]
+                photo = media_list[indexpos][2]
 
-                thead = Html("thead")
+                # begin table cell and attach to table row(trow)...
-                table += thead
+                gallerycell = Html("div", class_="gallerycell")
+                gallery += gallerycell
 
-                # page title...
+                # attach index number...
-                trow = Html("tr")
+                numberdiv = Html("div", class_="indexno")
-                thead += trow
+                gallerycell += numberdiv
 
-                trow += Html("th", self._("Thumbnail Preview"),
+                # attach anchor name to date cell in upper right
-                             class_="monthName", colspan=7, inline=True)
+                # corner of grid...
+                numberdiv += Html("a", index, name=index, title=index,
+                                  inline=True)
 
-                # table header cells...
+                # create thumbnail
-                trow = Html("tr")
+                (dummy_real_path,
-                thead += trow
+                 newpath) = self.report.prepare_copy_media(photo)
+                newpath = self.report.build_url_fname(newpath)
 
-                ltrs = ["&nbsp;", "&nbsp;", "&nbsp;",
+                # attach thumbnail to list...
-                        "&nbsp;", "&nbsp;", "&nbsp;", "&nbsp;"]
+                gallerycell += self.thumb_hyper_image(newpath, "img",
-                for ltr in ltrs:
+                                                      person_handle, ptitle)
-                    trow += Html("th", ltr, class_="weekend", inline=True)
 
-                tbody = Html("tbody")
+                index += 1
-                table += tbody
+                indexpos += 1
 
-                index, indexpos = 1, 0
-                num_of_images = len(media_list)
-                num_of_rows = ((num_of_images // 7) + 1)
-                num_of_cols = 7
-                grid_row = 0
-                while grid_row < num_of_rows:
-                    trow = Html("tr", class_="thumbnail", id="RowNumber: %08d" % grid_row)
-                    tbody += trow
-
-                    cols = 0
-                    while cols < num_of_cols and indexpos < num_of_images:
-                        ptitle = media_list[indexpos][0]
-                        person_handle = media_list[indexpos][1]
-                        photo = media_list[indexpos][2]
-
-                        # begin table cell and attach to table row(trow)...
-                        tcell = Html("td", class_="highlight weekend thumbnail")
-                        trow += tcell
-
-                        # attach index number...
-                        numberdiv = Html("div", class_="date")
-                        tcell += numberdiv
-
-                        # attach anchor name to date cell in upper right
-                        # corner of grid...
-                        numberdiv += Html("a", index, name=index, title=index,
-                                          inline=True)
-
-                        # begin unordered list and
-                        # attach to table cell(tcell)...
-                        unordered = Html("ul")
-                        tcell += unordered
-
-                        # create thumbnail
-                        (real_path,
-                         newpath) = self.report.prepare_copy_media(photo)
-                        newpath = self.report.build_url_fname(newpath)
-
-                        list_html = Html("li")
-                        unordered += list_html
-
-                        # attach thumbnail to list...
-                        list_html += self.thumb_hyper_image(newpath, "img",
-                                                            person_handle,
-                                                            ptitle)
-
-                        index += 1
-                        indexpos += 1
-                        cols += 1
-                    grid_row += 1
-
-        # if last row is incomplete, finish it off?
-        if grid_row == num_of_rows and cols < num_of_cols:
-            for emptycols in range(cols, num_of_cols):
-                trow += Html("td", class_="emptyDays", inline=True)
-
-        message = _("Creating thumbnail preview page...")
         # begin Thumbnail Reference section...
         with Html("div", class_="subsection", id="references") as section:
-            body += section
+            outerwrapper += section
             section += Html("h4", self._("References"), inline=True)
 
             with Html("table", class_="infolist") as table:
@@ -239,7 +193,7 @@ class ThumbnailPreviewPage(BasePage):
         # add footer section
         # add clearline for proper styling
         footer = self.write_footer(None)
-        body += (FULLCLEAR, footer)
+        outerwrapper += (FULLCLEAR, footer)
 
         # send page out for processing
         # and close the file
@@ -261,19 +215,15 @@ class ThumbnailPreviewPage(BasePage):
         url = "/".join(self.report.build_subdirs(subdir,
                                                  fname) + [fname]) + self.ext
 
-        with Html("div", class_="content", id="ThumbnailPreview") as section:
+        with Html("div", class_="thumbnail") as thumbnail:
-            with Html("div", class_="snapshot") as snapshot:
+                    #snapshot += thumbnail
-                section += snapshot
 
-                with Html("div", class_="thumbnail") as thumbnail:
+            if not self.create_thumbs_only:
-                    snapshot += thumbnail
+                thumbnail_link = Html("a", href=url, title=name) + (
-
+                    Html("img", src=thumbnail_url, alt=name)
-                    if not self.create_thumbs_only:
+                )
-                        thumbnail_link = Html("a", href=url, title=name) + (
+            else:
-                            Html("img", src=thumbnail_url, alt=name)
+                thumbnail_link = Html("img", src=thumbnail_url,
-                        )
+                                      alt=name)
-                    else:
+            thumbnail += thumbnail_link
-                        thumbnail_link = Html("img", src=thumbnail_url,
+        return thumbnail
-                                              alt=name)
-                    thumbnail += thumbnail_link
-        return section

gramps/plugins/webstuff/webstuff.py

@@ -62,7 +62,7 @@ def load_on_reg(dbstate, uistate, plugin):
 
         # Basic Blue style sheet with navigation menus
         ["Basic-Blue",    1, _("Basic-Blue"),
-         path_css('Web_Basic-Blue.css'),    "narrative-menus.css", [], [] ],
+         path_css('Web_Basic-Blue.css'),    None, [], [] ],
 
         # Basic Cypress style sheet
         ["Basic-Cypress", 1, _("Basic-Cypress"),