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
@@ -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 {
|
||||
padding:2em 0 3em 0;
|
||||
#Home #GalleryDisplay, #Introduction #GalleryDisplay, #Contact #GalleryDisplay {
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user