By HarryCaper - Sunday, June 5, 2011
|
It has been a rainy day here too, so I've spent a little time exploring some look & feel ideas for the narrative report.
I had some feedback from family that the navigation icons were confusing, so I've switched to a text menu, and I've been playing with putting the indexes and pop-up windows in boxes with curvy corners.
Here's how it is shaping up: http://familytrees.genopro.com/HarryCaper/FamilyTree/
|
By genome - Tuesday, June 7, 2011
|
I like your style  Amazing what can be achieved with a little bit of CSS (if only I knew how)
One comment I have is that the title / heading takes up too much screen estate on my 1024 x 600 netbook.
Perhaps move the title to the top of home.htm and make menu buttons font-size:smaller; to leave space left and right for contact icon and logo.

I have also lightened background jpg color to improve logo contrast.
|
By HarryCaper - Tuesday, June 7, 2011
|
I did a lot of testing with various screen widths, and decided to let the menu wrap, hence the decorative dna chain below the menu - when the buttons wrap onto a second row they appear directly in front of the dna chain, and it still looks ok.

This is why the css includes a 3px top border where the colour is set to the background image colour - so it gives the appearence of vertical separation when spanning two or more lines.
#menu li a { border-top: 3px solid #627677 }
Of course, if you keep on reducing the window width it wraps onto 3 lines and looks rubbish, but I figure that anyone squeezing the window that much will not be suprised to see similar artefacts.
The other design I considered was a two level menu. You could have a top level menu item for Indexes, and have individuals, families, trees, occupancies, pictures, places and sources all grouped under that, then other top level menus for the map and help pages.
I'm a microsoft systems administrator, so all things javascript, html and css are seriously foreign territory. I can hack existing code by trial and error, but it's an example of the infinite monkey theorem at work
|
By HarryCaper - Tuesday, June 7, 2011
|
I just re-read your post... I didn't consider short screen resolutions - your suggestion for moving the title is most excellent !
I've reproduced the dna image from the vector source with the new background colour:

The only other change needed is to update the css with the following value:
#menu li a { border-top: 3px solid #A9B7B8 }
|
By genome - Tuesday, June 7, 2011
|
It was really the vertical space that is at a premium on my netbook, so I thought all that blank space around the 'Family Tree' title was 'wasted space'. The horizontal was fine and I liked the way it wrapped too, but in doing away with the title wanted to find space for the GenoPro logo and 'Contact Author' within the 1024px. It still wraps in the same way. Also didn't really see why title was necessary on every page, just the home page should be enough. Update: looks like we have crossed in the post! Ah well
|
By HarryCaper - Tuesday, June 7, 2011
|
I spent some time converting all the font sizes to em's in my theme.css, as some reading on the internet convinced me that using pt, px and smaller/larger have issues with cross browser support, and accessibility.
The advantage of the em system is that it is based on the browser's definition the default font size (which is standard across all browsers and set to 16), therefore by using em's you can guarantee that the fonts will be sized the same in firefox, ie, chrome, etc. Likewise if someone with vision problems increases the default font size, then the website will properly resize all the text accordingly.
html{ font-size: 100%} body {font-size: 0.875em;} h1 font-size: 1.25emt; } h2 {font-size: 1.125em; } h3 {font-size: 1em; } .note {font-size: 0.750em;} .caption {font-size: 0.750em;} .citation {font-size: 0.750em;} .citationpic {font-size: 0.750em; } .infoWindow {font-size: 0.750em;} .footnote {font-size: 0.750em;} .langtoggle {font-size: 0.75em;} .note {font-size: 0.750em;} .std {font-size:1em;} .small {font-size: 0.750em;} .timeline {font-size: 0.750em;}
Under this schema smaller would be 0.750em.
I noticed on the xp machines I used when I was testing the theme on various platforms and browsers that the italic text of .footnote and .note with the smaller font size was particularly poorly rendered (compared to windows 7), so I also set both these fonts to font-style=normal in my theme.
|
By HarryCaper - Tuesday, June 7, 2011
|
One last look & feel item... is having the photo icon next to places that have associated photographs, since I have rather a lot of place photos in my report which I didn't want my family to miss 
 
I just made a slight mod to the WriteHtmlOccupancies code to achieve this (commented with 'HarryCaper), and added a function StrHtmlImgPhotoPop.
Sub WriteHtmlOccupancies(obj) Dim collOccupancies, o, ich, strName, strRelative, strPnP, strType, fExtant, strGender, nPlural Set collOccupancies = obj.contacts.ToGenoCollection If (collOccupancies.Count > 0) Then g_ichReferencesStart = -1 ' indicate at least one collapse/expand non-notes section present Report.WriteLn "<div class='clearleft'><br /><ul class='xT'>" Report.WriteFormattedLn " <li class='xT2-{} xT-h' onclick='xTclk(event,""2"")'>", Util.IfElse(Session("fCollapseReferences"), "c", "o") Report.WriteFormattedLn "<a name='Occupancies'></a><h3 class='xT-i inline'>{&t}</h3><ul class='xT-h'><li>", Dic("HeaderOccupancy") Select Case obj.Class Case "Individual" strName = obj.Session("NameShort") strRelative = PnR(i) strPnP = PnP(i) fExtant = Not i.IsDead strType = "" Case "SocialEntity" strName = obj.Session("Name") strGender = Util.FirstNonEmpty(CustomTag(obj,"Gender.ID"), "N") nPlural = Util.IfElse(IsFalse(CustomTag(obj,"Plural")),1,2) strPnP = Dic.Plurial("PnP_" & strGender, nPlural) strRelative = Dic.Plurial("PnR_" & strGender, nPlural) fExtant = (CustomTag(obj, "Extant") <> "N") strType = CustomTag(obj, "Type") End Select For Each o In collOccupancies Report.WriteFormattedLn "<a name='{}'></a><div class='clearleft'>", o.ID ich = Report.BufferLength If (o.Pictures.Count > 0) Then Report.WriteLn "<div class='floatleft aligncenter widthpaddedsmall'>" WriteHtmlPicturesSmall o, "left", True Report.WriteLn "</div>" End If ' added & "[{?!8}{8}]" and end of phrase below for pre 2011.02.06 Dictionaries that will not have param 8 in phrase template Report.WritePhrase Util.FirstNonEmpty(StrDicOrTag("PhOT_" & o.Type.ID & "_" & obj.Class, CustomTag(o, "NarrativeStyle")), StrDicOrTag("PhOT_" & o.Type.ID, CustomTag(o, "NarrativeStyle")), _ Dic.Lookup2("PhOT_" & o.Type.ID & "_" & obj.Class, "PhOT_" & o.Type.ID)) & "[{?!8}{8}]", _ strName, strRelative, StrDateSpan(o.DateStart, o.DateEnd), _ Util.IfElse(o.DateStart.ToStringNarrative <> o.DateEnd.ToStringNarrative, o.Duration, ""), _ (Not fExtant Or (o.DateEnd.ToStringNarrative<>""))=False, _ StrHtmlHyperlink(o.Place), o.Summary, o.Place.Session("Hlink"), strType If (o.place.Pictures.Count > 0) Then 'HarryCaper Report.WriteFormattedLn StrHtmlImgPhotoPop(o.place) 'HarryCaper End If 'HarryCaper If Report.BufferLength > ich And o.Summary <> "" Then Report.WriteBr Report.WritePhraseDic "PhContact", o.telephone, o.Fax, Util.FormatHtmlHyperlink(Util.IfElse(o.Email <> "","mailto:" & o.Email,""), o.Email), Util.FormatHtmlHyperlink(o.Homepage, ,"target='_blank'"), o.Type, o.Place, o.Mobile WriteHtmlFootnoteRef o.Source WriteHtmlFootnoteRefs(o.Sources) WriteHtmlExtraNarrative o WriteHtmlAdditionalInformation(o) WriteHtmlAnnotation o, Dic("AnnotationOccupancy"), o.Comment If Session("fShowPictureDetails") Then WriteHtmlDetailsPicture o, True, True WriteHtmlAnnotationPicture Dic("Contact"), o, "", "" End If strName = strPnP strType = "" Report.WriteLn "</div>" Next Report.WriteLn "</li></ul></li></ul></div>" End If End Sub
Function StrHtmlImgPhotoPop(obj) Select Case obj.Class Case "Picture" If Not obj.Session("IsExcluded") Then StrHtmlImgPhotoPop = Util.FormatString("<img src='images/space.gif' width='16' alt=''/> <a href='pictures.htm#{}'><img src='images/photo.gif' class='icon' alt='' title='' /> {}</a>", _ obj.ID, Util.IfElse(Trim(obj.Name) <> "", StrFormatText(obj, StrParseText(Trim(obj.Name))), "(" & obj.ID &")")) End If Case Else cPictures = obj.Session("PicturesIncluded") If (cPictures > 0) Then StrHtmlImgPhotoPop = Util.FormatString(" <a href='{}' onclick='showPopUpFrame("""");' target='popup'><img src='images/photo.gif' class='icon' alt='{}' title='{1}' /></a>", _ obj.Href, Dic.PlurialCount("Picture", cPictures)) End If End Select End Function
|
|