diff --git a/src/plugins/webreport/NarrativeWeb.py b/src/plugins/webreport/NarrativeWeb.py
index a0ce08d62..aef555e15 100644
--- a/src/plugins/webreport/NarrativeWeb.py
+++ b/src/plugins/webreport/NarrativeWeb.py
@@ -1591,65 +1591,80 @@ class BasePage(object):
# Remove menu sections if they are not being created?
navs = ((u, n) for u, n, c in navs if c)
+ menu_items = [[url, text] for url, text in navs]
+
+ number_items = len(menu_items)
+
+ num_cols = 16
+ num_rows = (number_items // num_cols) + 1
# begin navigation menu division...
- with Html("div", id ="nav", role = "Navigation") as navigation:
-
- unordered = Html("ul")
- navigation += unordered
+ with Html("div", class_ = "wrapper", id = "nav", role = "navigation") as navigation:
- for (url_fname, nav_text) in navs:
+ with Html("div", class_ = "container") as container:
- if not _has_webpage_extension(url_fname):
- url_fname += self.ext
+ index = 0
+ for rows in range(num_rows):
+ unordered = Html("ul", class_ = "menu")
- url = self.report.build_url_fname(url_fname, None, self.up)
- hyper = Html("a", nav_text, href = url, title = nav_text)
+ cols = 0
+ while (cols <= num_cols and index < number_items):
+ url_fname, nav_text = menu_items[index]
- # Define 'currentsection' to correctly set navlink item CSS id
- # 'CurrentSection' for Navigation styling.
- # Use 'self.report.cur_fname' to determine 'CurrentSection' for individual
- # elements for Navigation styling.
+ if not _has_webpage_extension(url_fname):
+ url_fname += self.ext
- # Figure out if we need of just
- check_cs = False
- if nav_text == currentsection:
- check_cs = True
- elif nav_text == _("Surnames"):
- if "srn" in self.report.cur_fname:
- check_cs = True
- elif _("Surnames") in currentsection:
- check_cs = True
- elif nav_text == _("Individuals"):
- if "ppl" in self.report.cur_fname:
- check_cs = True
- elif nav_text == _("Families"):
- if "fam" in self.report.cur_fname:
- check_cs = True
- elif nav_text == _("Sources"):
- if "src" in self.report.cur_fname:
- check_cs = True
- elif nav_text == _("Places"):
- if "plc" in self.report.cur_fname:
- check_cs = True
- elif nav_text == _("Events"):
- if "evt" in self.report.cur_fname:
- check_cs = True
- elif nav_text == _("Media"):
- if "img" in self.report.cur_fname:
- check_cs = True
- elif nav_text == _("Address Book"):
- if "addr" in self.report.cur_fname:
- check_cs = True
- check_cs = 'class = "CurrentSection"' if check_cs else False
- if check_cs:
- unordered.extend(
- Html("li", hyper, attr = check_cs, inline = True)
- )
- else:
- unordered.extend(
- Html("li", hyper, inline = True)
- )
+ url = self.report.build_url_fname(url_fname, None, self.up)
+ hyper = Html("a", nav_text, href = url, title = nav_text)
+
+ # Define 'currentsection' to correctly set navlink item CSS id
+ # 'CurrentSection' for Navigation styling.
+ # Use 'self.report.cur_fname' to determine 'CurrentSection' for individual
+ # elements for Navigation styling.
+
+ # Figure out if we need of just
+ check_cs = False
+ if nav_text == currentsection:
+ check_cs = True
+ elif nav_text == _("Surnames"):
+ if "srn" in self.report.cur_fname:
+ check_cs = True
+ elif _("Surnames") in currentsection:
+ check_cs = True
+ elif nav_text == _("Individuals"):
+ if "ppl" in self.report.cur_fname:
+ check_cs = True
+ elif nav_text == _("Families"):
+ if "fam" in self.report.cur_fname:
+ check_cs = True
+ elif nav_text == _("Sources"):
+ if "src" in self.report.cur_fname:
+ check_cs = True
+ elif nav_text == _("Places"):
+ if "plc" in self.report.cur_fname:
+ check_cs = True
+ elif nav_text == _("Events"):
+ if "evt" in self.report.cur_fname:
+ check_cs = True
+ elif nav_text == _("Media"):
+ if "img" in self.report.cur_fname:
+ check_cs = True
+ elif nav_text == _("Address Book"):
+ if "addr" in self.report.cur_fname:
+ check_cs = True
+ check_cs = 'class = "CurrentSection"' if check_cs else False
+ if check_cs:
+ unordered.extend(
+ Html("li", hyper, attr = check_cs)
+ )
+ else:
+ unordered.extend(
+ Html("li", hyper)
+ )
+ index += 1
+ cols += 1
+ container += unordered
+ navigation += container
return navigation
def add_image(self, option_name, height = 0):
@@ -6865,9 +6880,12 @@ class NavWebReport(Report):
# copy Menu Layout stylesheet if Blue or Visually is being used?
if CSS[self.css]["navigation"]:
if self.navigation == "Horizontal":
- fname = CSS["Horizontal-Menus"]["filename"]
+ fname = CSS["Horizontal-Menus"]["filename"]
+
+ elif self.navigation == "Vertical":
+ fname = CSS["Vertical-Menus"]["filename"]
else:
- fname = CSS["Vertical-Menus"]["filename"]
+ fname = CSS["Fade-Menus"]["filename"]
self.copy_file(fname, "narrative-menus.css", "styles")
# copy narrative-maps if Place or Family Map pages?
@@ -7512,8 +7530,9 @@ class NavWebOptions(MenuReportOptions):
self.__css.connect("value-changed", self.__stylesheet_changed)
_nav_opts = [
- [_("Horizontal -- No Change"), "Horizontal"],
- [_("Vertical"), "Vertical"]
+ (_("Horizontal - Default"), "Horizontal"),
+ (_("Vertical"), "Vertical"),
+ (_("Fade - WebKit browsers"), "Fade")
]
self.__navigation = EnumeratedListOption(_("Navigation Menu Layout"), _nav_opts[0][1])
for layout in _nav_opts:
diff --git a/src/plugins/webstuff/css/Makefile.am b/src/plugins/webstuff/css/Makefile.am
index d2ee6c0d6..22876a432 100644
--- a/src/plugins/webstuff/css/Makefile.am
+++ b/src/plugins/webstuff/css/Makefile.am
@@ -15,6 +15,7 @@ DATAFILES = \
Web_Basic-Lilac.css \
Web_Basic-Peach.css \
Web_Basic-Spruce.css \
+ Web_Fade-Menus.css \
Web_Horizontal-Menus.css \
Web_Mainz.css \
Web_Nebraska.css \
diff --git a/src/plugins/webstuff/css/Web_Fade-Menus.css b/src/plugins/webstuff/css/Web_Fade-Menus.css
new file mode 100644
index 000000000..631cf9877
--- /dev/null
+++ b/src/plugins/webstuff/css/Web_Fade-Menus.css
@@ -0,0 +1,131 @@
+/*
+#
+# Gramps - a GTK+/GNOME based genealogy program
+#
+# Copyright (C) 2012 Rob G. Healey
+#
+# 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
+# the Free Software Foundation; either version 2 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
+#
+# $Id$
+#
+*************************************************
+GRAMPS Cascading Style Sheet
+Style Name: Fade-Menus Style Sheet
+*************************************************
+
+ Body Element
+------------------------------------------------------ */
+body {
+ background-color: #00029D;
+ color: #00029D;
+ width: 100%;
+}
+
+/* Header
+------------------------------------------------------ */
+div#header {
+ border-bottom: solid 8px #13A926;
+}
+
+/* Fade Horizontal Navigation Menu
+------------------------------------------------------ */
+div.wrapper {
+ width: 100%;
+ height: 50px;
+ background : #464646;
+ background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
+ background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
+ border-top: 2px solid #939393;
+ position: relative;
+}
+ul {
+ margin: 0;
+ padding: 0;
+}
+ul.menu {
+ height: 80px;
+ border-left: 1px solid rgba(0,0,0,0.3);
+ border-right: 1px solid rgba(255,255,255,0.3);
+ float: left;
+}
+ul.menu li {
+ list-style-type: none;
+ float: left;
+ height: 45px;
+ text-align: center;
+ background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
+ background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
+}
+ul li a {
+ font: bold .9em "Helvetica, Courier, Arial, sans-serif, sans";
+ display: block;
+ padding: 0 6px;
+ border-left: 1px solid rgba(255,255,255,0.1);
+ border-right: 1px solid rgba(0,0,0,0.1);
+ text-align: center;
+ line-height: 45px;
+ background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
+ background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
+ -webkit-transition-property: background;
+ -webkit-transition-duration: 700ms;
+ -moz-transition-property: background;
+ -moz-transition-duration: 700ms;
+ text-decoration: none;
+}
+ul li a:hover {
+ background: transparent none;
+ color: #FFF;
+}
+ul li.CurrentSection a {
+ background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
+ background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
+ Color: #FFF;
+}
+
+/* Alphabet Navigation Menu
+------------------------------------------------------ */
+div#alphanav {
+ clear: both;
+ padding-top: 1px;
+ font: bold 1.2em/1.4 "sans, sans-serif";
+}
+div#alphanav ul {
+ float: left;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ background: #00029D;
+ border-top: 2px solid #13A926;
+ border-bottom: 2px solid #13A926;
+}
+div#alphanav li {
+ display: inline;
+ margin: 0;
+ padding: 0;
+}
+div#alphanav a {
+ display: block;
+ float: left;
+ padding: 6px 12px;
+ border-right: 1px solid #13A926;
+ border-left: 1px solid #13A926;
+ color: #FFF;
+ text-decoration: none;
+}
+div#alphanav a:hover, div#alphanav a:focus {
+ background: #FFF;
+ color: #000;
+}
diff --git a/src/plugins/webstuff/webstuff.py b/src/plugins/webstuff/webstuff.py
index 9e91c9a63..300a20c8a 100644
--- a/src/plugins/webstuff/webstuff.py
+++ b/src/plugins/webstuff/webstuff.py
@@ -118,14 +118,18 @@ def load_on_reg(dbstate, uistate, plugin):
["Print-Default", 0, "Print-Default",
path_css('Web_Print-Default.css'), None, [], [] ],
- # vertical navigation style sheet
- ["Vertical-Menus", 0, "",
- path_css('Web_Vertical-Menus.css'), None, [], [] ],
-
- # horizontal navigation style sheet
+ # Horizontal Navigation Menus Style Sheet
["Horizontal-Menus", 0, "",
path_css('Web_Horizontal-Menus.css'), None, [], [] ],
+ # Horizontal Fade Navigation Style Sheet
+ ["Fade-Menus", 0, "",
+ path_css('Web_Fade-Menus.css'), None, [], [] ],
+
+ # Vertical Navigation Menus Style Sheet
+ ["Vertical-Menus", 0, "",
+ path_css('Web_Vertical-Menus.css'), None, [], [] ],
+
# GeoView style sheet with its image
["GeoView", 0, "GeoView",
path_css("GeoView.css"), None,