GenoPro Home
GenoPro Home  |  Get Started With My Genealogy Tree  |  Buy  |  Login  |  Privacy  |  Search  |  Site Map
 

GenoPro Support Forum




some look & feel ideas for the narrative report.

Click to view RSS...
Author
Posted Sunday, June 5, 2011 - Post #28491
Forum Guru

Forum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum Guru

FamilyTrees.GenoPro.com
Customers
GenoPro version: 3.1.0.1

Last Login: Thursday, June 2, 2022
Posts: 108, Visits: 1,280
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/
Posted Tuesday, June 7, 2011 - Post #28496
Legendary Master

Legendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary Master

Administrators
Customers
Important Contributors
FamilyTrees.GenoPro.com
GenoPro version: 3.1.0.1

Last Login: Yesterday @ 9:42 PM
Posts: 3,325, Visits: 25,525
HarryCaper (05-Jun-2011)
Here's how it is shaping up: http://familytrees.genopro.com/HarryCaper/FamilyTree/


I like your style Cool 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. 

http://support.genopro.com/Uploads/Images/5cebc1b4-6346-4ae4-ab5e-9b8d.png

I have also lightened background jpg color to improve logo contrast.


'lego audio video erro ergo disco' or "I read, I listen, I watch, I make mistakes, therefore I learn"


Edited: Tuesday, June 7, 2011 by genome
Posted Tuesday, June 7, 2011 - Post #28498
Forum Guru

Forum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum Guru

FamilyTrees.GenoPro.com
Customers
GenoPro version: 3.1.0.1

Last Login: Thursday, June 2, 2022
Posts: 108, Visits: 1,280
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.


http://support.genopro.com/Uploads/Images/da3eafb1-9e28-4cf0-9cfa-f814.jpg

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 Wink
Posted Tuesday, June 7, 2011 - Post #28499
Forum Guru

Forum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum Guru

FamilyTrees.GenoPro.com
Customers
GenoPro version: 3.1.0.1

Last Login: Thursday, June 2, 2022
Posts: 108, Visits: 1,280
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:

http://support.genopro.com/Uploads/Images/469edb45-8191-45d8-b696-9d7b.jpg

The only other change needed is to update the css with the following value:

 #menu li a { border-top: 3px solid #A9B7B8 }


Edited: Tuesday, June 7, 2011 by HarryCaper
Posted Tuesday, June 7, 2011 - Post #28500
Legendary Master

Legendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary MasterLegendary Master

Administrators
Customers
Important Contributors
FamilyTrees.GenoPro.com
GenoPro version: 3.1.0.1

Last Login: Yesterday @ 9:42 PM
Posts: 3,325, Visits: 25,525
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.

http://support.genopro.com/Uploads/Images/8d2c91f3-7453-417f-a001-b715.png

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


'lego audio video erro ergo disco' or "I read, I listen, I watch, I make mistakes, therefore I learn"


Edited: Tuesday, June 7, 2011 by genome
Posted Tuesday, June 7, 2011 - Post #28501
Forum Guru

Forum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum Guru

FamilyTrees.GenoPro.com
Customers
GenoPro version: 3.1.0.1

Last Login: Thursday, June 2, 2022
Posts: 108, Visits: 1,280
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.


Edited: Tuesday, June 7, 2011 by HarryCaper
Posted Tuesday, June 7, 2011 - Post #28502
Forum Guru

Forum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum Guru

FamilyTrees.GenoPro.com
Customers
GenoPro version: 3.1.0.1

Last Login: Thursday, June 2, 2022
Posts: 108, Visits: 1,280
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 w00t

http://support.genopro.com/Uploads/Images/b11ce95c-4525-40b0-b5d0-88dd.jpg

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=''/>&nbsp;<a href='pictures.htm#{}'><img src='images/photo.gif' class='icon' alt='' title='' />&nbsp;{}</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("&nbsp;<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


Edited: Tuesday, June 7, 2011 by HarryCaper
Posted Tuesday, June 7, 2011 - Post #28505
Forum Guru

Forum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum GuruForum Guru

FamilyTrees.GenoPro.com
Customers
GenoPro version: 3.1.0.1

Last Login: Thursday, June 2, 2022
Posts: 108, Visits: 1,280
I've attached the BlueDNA theme files and another theme, OliveBranch, that I've been working on.


http://support.genopro.com/Uploads/Images/69631493-a420-452b-8e60-cdb0.jpg


themes.zip (70 views, 37.79 KB)


Similar Topics

Click to view RSS...
Expand / Collapse

Reading This Topic

Expand / Collapse