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
This commit is contained in:
SNoiraud
Nick Hall
@@ -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 {
|
||||
float: left;
|
||||
#Contact #summaryarea #researcher span {
|
||||
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 {
|
||||
padding: 2em 0 3em 0;
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay,
|
||||
#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
|
||||
----------------------------------------------------- */
|
||||
|
||||
Reference in New Issue
Block a user