summaryrefslogtreecommitdiff
path: root/xslt
diff options
context:
space:
mode:
Diffstat (limited to 'xslt')
-rw-r--r--xslt/mallard/html/mal2html-links.xsl20
-rw-r--r--xslt/mallard/html/mal2html-page.xsl132
-rw-r--r--xslt/mallard/html/mal2html-ui.xsl19
3 files changed, 55 insertions, 116 deletions
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 60282099..1ec7cec1 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -153,7 +153,7 @@ parameter will be used if provided.
</xsl:call-template>
</xsl:when>
<xsl:when test="$uithumbs = 'hover'">
- <xsl:call-template name="mal2html.ui.links.hover">
+ <xsl:call-template name="_mal2html.ui.links.hover">
<xsl:with-param name="node" select="$node"/>
<xsl:with-param name="links" select="$links"/>
<xsl:with-param name="role" select="$role"/>
@@ -872,14 +872,18 @@ when determining which links to output.
<xsl:param name="node"/>
<xsl:param name="links"/>
<xsl:variable name="role" select="$node/self::mal:links/@role"/>
- <div class="mouseovers">
+ <xsl:message>
+ <xsl:text>DEPRECATION WARNING: The mouseovers style on the links element is deprecated.</xsl:text>
+ </xsl:message>
+ <div class="links-uix-hover">
+ <div class="links-uix-hover-img">
<xsl:for-each select="$node/e:mouseover[not(@match)]">
<img>
<xsl:copy-of select="@src | @width | @height"/>
</img>
</xsl:for-each>
</div>
- <ul class="mouseovers">
+ <ul class="links-uix-hover">
<xsl:for-each select="$links">
<xsl:sort data-type="number" select="@groupsort"/>
<xsl:sort select="mal:title[@type = 'sort']"/>
@@ -904,9 +908,11 @@ when determining which links to output.
</xsl:call-template>
</xsl:attribute>
<xsl:for-each select="$node/e:mouseover[@match = $xref]">
- <img>
- <xsl:copy-of select="@src | @width | @height"/>
- </img>
+ <span class="links-uix-hover-img">
+ <img>
+ <xsl:copy-of select="@src | @width | @height"/>
+ </img>
+ </span>
</xsl:for-each>
<xsl:call-template name="mal.link.content">
<xsl:with-param name="node" select="."/>
@@ -920,7 +926,7 @@ when determining which links to output.
</xsl:for-each>
</xsl:for-each>
</ul>
- <div class="clear"/>
+ </div>
</xsl:template>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 03dc10f4..dd04fbae 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -926,37 +926,45 @@ ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; }
div.links-heading > a { font-size: 1.72em; font-weight: bold; }
ul.links-heading > li > div.desc { margin-top: 0.5em; }
-<!-- FIXME -->
-div.mouseovers {
- width: 250px;
- height: 200px;
- text-align: center;
- margin: 0;
- float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
+div.links-uix-hover {
+ position: relative;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: stretch;
+ justify-content: flex-start;
}
-ul.mouseovers li { margin: 0; }
-ul.mouseovers a {
- display: inline-block;
- padding: 4px 1.2em 4px 1.2em;
+ul.links-uix-hover { flex-grow: 1; }
+ul.links-uix-hover li { margin: 0; padding: 0; }
+ul.links-uix-hover a {
+ display: block;
+ padding: 8px 1.2em;
border-bottom: none;
}
-ul.mouseovers a:hover {
- text-decoration: none;
+ul.links-uix-hover a:hover {
background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
}
-ul.mouseovers a img {
- display: none;
+ul.links-uix-hover img {
+ display: block;
position: absolute;
- margin: 0; padding: 0;
+ top: 0; </xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
+ visibility: hidden;
+ opacity: 0.0;
+ transition: opacity 0.6s, visibility 0.6s;
+}
+ul.links-uix-hover a:hover img {
+ visibility: visible;
+ opacity: 1.0;
+ transition: opacity 0.2s, visibility 0.2s;
}
@media only screen and (max-width: 480px) {
- ul.mouseovers a {
- display: block;
- padding: 12px;
- margin-left: -12px;
- margin-right: -12px;
+ div.links-uix-hover-img { display: none; }
+ ul.links-uix-hover img { display: none; }
+ ul.links-uix-hover li {
+ margin-left: -10px; margin-right: -10px;
+ }
+ ul.links-uix-hover li a {
+ padding: 10px;
}
- div.mouseovers { display: none; }
}
<!-- uix:overlay -->
@@ -1062,42 +1070,6 @@ div.links-tile > a > span.links-tile-text > span.desc {
color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
}
-<!-- FIXME -->
-div.links-ui-hover {
- text-align: center;
- margin: 0;
- float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
- margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1.2em;
- overflow: hidden;
-}
-ul.links-ui-hover li { margin: 0; }
-ul.links-ui-hover a {
- display: block;
- padding: 4px 1.2em 4px 1.2em;
- border-bottom: none;
-}
-ul.links-ui-hover a:hover {
- text-decoration: none;
- background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-span.links-ui-hover-img {
- display: none;
- position: absolute;
- margin: 0; padding: 0;
- overflow: hidden;
- background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
- text-align: center;
-}
-@media only screen and (max-width: 480px) {
- ul.links-ui-hover a {
- display: block;
- padding: 12px;
- margin-left: -12px;
- margin-right: -12px;
- }
- div.links-ui-hover { display: none; }
-}
-
<!-- links/@style = 'grid' -->
div.links-grid-container {
margin-left: -10px;
@@ -1422,50 +1394,6 @@ span.status-stub, span.status-draft, span.status-incomplete, span.status-outdate
<xsl:call-template name="mal2html.gloss.js"/>
<xsl:text><![CDATA[
$(document).ready(function () {
- $('div.mouseovers').each(function () {
- var contdiv = $(this);
- var width = 0;
- var height = 0;
- contdiv.find('img').each(function () {
- if ($(this).attr('data-yelp-match') == '')
- $(this).show();
- });
- contdiv.next('ul').find('a').each(function () {
- var mlink = $(this);
- mlink.hover(
- function () {
- if (contdiv.is(':visible')) {
- var offset = contdiv.offset();
- mlink.find('img').css({left: offset.left, top: offset.top, zIndex: 10});
- mlink.find('img').fadeIn('fast');
- }
- },
- function () {
- mlink.find('img').fadeOut('fast');
- }
- );
- });
- });
- $('div.links-ui-hover').each(function () {
- var contdiv = $(this);
- var width = 0;
- var height = 0;
- contdiv.next('ul').find('a').each(function () {
- var mlink = $(this);
- mlink.hover(
- function () {
- if (contdiv.is(':visible')) {
- var offset = contdiv.offset();
- mlink.find('img').parent('span').css({left: offset.left, top: offset.top, zIndex: 10});
- mlink.find('img').parent('span').show();
- }
- },
- function () {
- mlink.find('img').parent('span').hide();
- }
- );
- });
- });
$('a.ui-overlay').each(function () {
$(this).click(function () {
var overlay = $(this).parent('div').children('div.ui-overlay');
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index 23f00227..22603773 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -193,8 +193,8 @@ This template handles link sorting.
</xsl:template>
-<!--**==========================================================================
-mal2html.ui.links.hover
+<!--DEPRECATED==================================================================
+_mal2html.ui.links.hover
Output links with thumbnails shown on hover.
:Revision:version="3.4" date="2012-02-26" status="final"
$node: A #{links} element to link from.
@@ -211,7 +211,8 @@ are hovered.
This template handles link sorting.
-->
-<xsl:template name="mal2html.ui.links.hover">
+<!--#* _mal2html.ui.links.hover -->
+<xsl:template name="_mal2html.ui.links.hover">
<xsl:param name="node"/>
<xsl:param name="links"/>
<xsl:param name="role"/>
@@ -235,7 +236,11 @@ This template handles link sorting.
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
- <div class="links-ui-hover" style="width: {$width}px; height: {$height}px;">
+ <xsl:message>
+ <xsl:text>DEPRECATION WARNING: The uix:thumbs attribute on the links element is deprecated.</xsl:text>
+ </xsl:message>
+ <div class="links-uix-hover">
+ <div class="links-uix-hover-img" style="width: {$width}px; height: {$height}px;">
<xsl:for-each select="$node/uix:thumb[1]">
<img>
<xsl:copy-of select="@src"/>
@@ -248,7 +253,7 @@ This template handles link sorting.
</img>
</xsl:for-each>
</div>
- <ul class="links-ui-hover">
+ <ul class="links-uix-hover">
<xsl:for-each select="$links">
<xsl:sort data-type="number" select="@groupsort"/>
<xsl:sort select="mal:title[@type = 'sort']"/>
@@ -279,7 +284,7 @@ This template handles link sorting.
<xsl:with-param name="info" select="$link[@href]/mal:info"/>
</xsl:call-template>
</xsl:attribute>
- <span class="links-ui-hover-img" style="width: {$width}px; height: {$height}px;">
+ <span class="links-uix-hover-img" style="width: {$width}px; height: {$height}px;">
<xsl:call-template name="mal2html.ui.links.img">
<xsl:with-param name="node" select="$node"/>
<xsl:with-param name="thumbs" select="$thumbs"/>
@@ -302,7 +307,7 @@ This template handles link sorting.
</xsl:for-each>
</xsl:for-each>
</ul>
- <div class="clear"/>
+ </div>
</xsl:template>
View Lorry Controller Status