Added a Horizontal Fade-In/ Fade-Out Navigation Menus Style Sheet for use with WebKit Browsers.
svn: r18738
This commit is contained in:
Rob G. Healey
parent
67888772bb
commit
8086ebf6f3
@ -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 <li class="CurrentSection"> of just <li>
|
||||
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 <li class="CurrentSection"> of just <li>
|
||||
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:
|
||||
|
||||
@ -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 \
|
||||
|
||||
131
src/plugins/webstuff/css/Web_Fade-Menus.css
Normal file
131
src/plugins/webstuff/css/Web_Fade-Menus.css
Normal file
@ -0,0 +1,131 @@
|
||||
/*
|
||||
#
|
||||
# Gramps - a GTK+/GNOME based genealogy program
|
||||
#
|
||||
# Copyright (C) 2012 Rob G. Healey <robhealey1@gmail.com>
|
||||
#
|
||||
# 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;
|
||||
}
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user