diff options
Diffstat (limited to 'xslt')
-rw-r--r-- | xslt/common/css/core.css.tmpl | 21 | ||||
-rw-r--r-- | xslt/common/css/mallard.css.tmpl | 34 | ||||
-rw-r--r-- | xslt/mallard/html/mal2html-links.xsl | 94 |
3 files changed, 149 insertions, 0 deletions
diff --git a/xslt/common/css/core.css.tmpl b/xslt/common/css/core.css.tmpl index bd19c49c..1ed0ff12 100644 --- a/xslt/common/css/core.css.tmpl +++ b/xslt/common/css/core.css.tmpl @@ -226,6 +226,27 @@ dl.compact dt { margin-top: 0.2em; } dl.compact dt:first-child { margin-top: 0; } dl.compact dt + dt { margin-top: 0; } +div.tiles { + display: flex; + flex-flow: row wrap; + align-items: stretch; + justify-content: stretch; + vertical-align: top; + clear: both; + margin: 0 -10px; +} +div.tiles > * { + vertical-align: top; + margin: 0; + padding: 10px; + max-width: none; +} +div.tiles > *:empty { padding: 0 10px; height: 0; } +div.tile4 { flex: 1 0 {{$html.grid.size div 4 - 20}}px; } +div.tile3 { flex: 1 0 {{$html.grid.size div 3 - 20}}px; } +div.tile2 { flex: 1 0 {{$html.grid.size div 2 - 20}}px; } +div.tile1 { flex: 1 0 {{$html.grid.size - 20}}px; } + a { text-decoration: none; color: {{$color.fg.blue}}; diff --git a/xslt/common/css/mallard.css.tmpl b/xslt/common/css/mallard.css.tmpl index 0c533b1d..56c3f786 100644 --- a/xslt/common/css/mallard.css.tmpl +++ b/xslt/common/css/mallard.css.tmpl @@ -166,6 +166,7 @@ a.ui-overlay-close { background-color: {{$color.blue}}; color: {{$color.bg}}; } +<!-- FIXME drop this in favor of tiles CSS in core.css --> div.links-tiles { display: flex; flex-flow: row wrap; @@ -214,6 +215,39 @@ div.links-tile > a > span.links-tile-text > span.desc { color: {{$color.fg.dark}}; } +<!-- links/@style = 'experimental-gnome-tiles' --> +a.ex-gnome-tile { + display: block; + border: solid 1px {{$color.gray}}; + transition: box-shadow 0.5s linear; +} +a.ex-gnome-tile:hover { + box-shadow: 0px 2px 4px {{$color.gray}}; +} +span.ex-gnome-tile-banner { + display: block; + height: 112px; + background: {{$color.fg.blue}}; + overflow: hidden; +} +span.ex-gnome-tile-banner img { + width: 128px; height: 128px; + margin-{{$left}}: 64px; + margin-top: -8px; + transform: rotate(-10deg); +} +span.ex-gnome-tile-title { + color: {{$color.fg}}; + display: block; + margin: 10px 20px; + font-size: 1.2em; +} +span.ex-gnome-tile-desc { + color: {{$color.fg.gray}}; + display: block; + margin: 10px 20px; +} + <!-- links/@style = 'grid' --> div.links-grid-container { margin-left: -10px; diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl index 7b63b4db..f15d17f9 100644 --- a/xslt/mallard/html/mal2html-links.xsl +++ b/xslt/mallard/html/mal2html-links.xsl @@ -145,6 +145,7 @@ parameter will be used if provided. <xsl:with-param name="links" select="$links"/> </xsl:call-template> </xsl:when> + <!-- FIXME delete this style --> <xsl:when test="$uithumbs = 'tiles'"> <xsl:call-template name="mal2html.ui.links.tiles"> <xsl:with-param name="node" select="$node"/> @@ -152,6 +153,7 @@ parameter will be used if provided. <xsl:with-param name="role" select="$role"/> </xsl:call-template> </xsl:when> + <!-- FIXME delete this style --> <xsl:when test="$uithumbs = 'hover'"> <xsl:call-template name="_mal2html.ui.links.hover"> <xsl:with-param name="node" select="$node"/> @@ -159,12 +161,20 @@ parameter will be used if provided. <xsl:with-param name="role" select="$role"/> </xsl:call-template> </xsl:when> + <!-- FIXME delete this style --> <xsl:when test="contains($style, ' mouseovers ')"> <xsl:call-template name="_mal2html.links.mouseovers"> <xsl:with-param name="node" select="$node"/> <xsl:with-param name="links" select="$links"/> </xsl:call-template> </xsl:when> + <xsl:when test="contains($style, ' experimental-gnome-tiles ')"> + <xsl:call-template name="_mal2html.links.experimental_gnome_tiles"> + <xsl:with-param name="node" select="$node"/> + <xsl:with-param name="links" select="$links"/> + <xsl:with-param name="role" select="$role"/> + </xsl:call-template> + </xsl:when> <xsl:when test="contains($style, ' toronto ') or contains($style, ' grid ')"> <xsl:call-template name="_mal2html.links.grid"> <xsl:with-param name="node" select="$node"/> @@ -172,6 +182,7 @@ parameter will be used if provided. <xsl:with-param name="role" select="$role"/> </xsl:call-template> </xsl:when> + <!-- FIXME delete this style --> <xsl:when test="contains($style, ' norwich ')"> <xsl:call-template name="_mal2html.links.norwich"> <xsl:with-param name="node" select="$node"/> @@ -1236,6 +1247,89 @@ when determining which links to output. </xsl:template> +<!--#* _mal2html.links.experimental_gnome_tiles --> +<xsl:template name="_mal2html.links.experimental_gnome_tiles"> + <xsl:param name="node" select="."/> + <xsl:param name="links"/> + <xsl:param name="role"/> + <div class="tiles"> + <xsl:for-each select="$links"> + <xsl:sort data-type="number" select="@groupsort"/> + <xsl:sort select="mal:title[@type = 'sort']"/> + <xsl:variable name="link" select="."/> + <xsl:for-each select="$mal.cache"> + <xsl:variable name="target" select="key('mal.cache.key', $link/@xref)"/> + <div class="tile3 {$link/@class}"> + <xsl:for-each select="$link/@*"> + <xsl:if test="starts-with(name(.), 'data-')"> + <xsl:copy-of select="."/> + </xsl:if> + </xsl:for-each> + <xsl:variable name="infos" select="$target/mal:info | $link[@href]/mal:info"/> + <xsl:variable name="thumbs" select="$infos/uix:thumb[@role='experimental-gnome-tiles']"/> + <a class="ex-gnome-tile"> + <xsl:attribute name="href"> + <xsl:call-template name="mal.link.target"> + <xsl:with-param name="node" select="$node"/> + <xsl:with-param name="xref" select="$link/@xref"/> + <xsl:with-param name="href" select="$link/@href"/> + </xsl:call-template> + </xsl:attribute> + <xsl:attribute name="title"> + <xsl:call-template name="mal.link.tooltip"> + <xsl:with-param name="node" select="$node"/> + <xsl:with-param name="xref" select="$link/@xref"/> + <xsl:with-param name="href" select="$link/@href"/> + <xsl:with-param name="role" select="$role"/> + <xsl:with-param name="info" select="$link[@href]/mal:info"/> + </xsl:call-template> + </xsl:attribute> + <span class="ex-gnome-tile-banner"> + <xsl:call-template name="mal2html.ui.links.img"> + <xsl:with-param name="node" select="$node"/> + <xsl:with-param name="thumbs" select="$thumbs"/> + <xsl:with-param name="role" select="$role"/> + <xsl:with-param name="height" select="128"/> + </xsl:call-template> + </span> + <span class="ex-gnome-tile-title"> + <xsl:call-template name="mal.link.content"> + <xsl:with-param name="node" select="$node"/> + <xsl:with-param name="xref" select="$link/@xref"/> + <xsl:with-param name="href" select="$link/@href"/> + <xsl:with-param name="role" select="$role"/> + <xsl:with-param name="info" select="$link[@href]/mal:info"/> + </xsl:call-template> + </span> + <xsl:if test="not(contains(concat(' ', $node/@style, ' '), ' nodesc '))"> + <xsl:variable name="desc"> + <xsl:call-template name="mal.link.desc"> + <xsl:with-param name="node" select="$node"/> + <xsl:with-param name="xref" select="$link/@xref"/> + <xsl:with-param name="href" select="$link/@href"/> + <xsl:with-param name="role" select="$role"/> + <xsl:with-param name="info" select="$link[@href]/mal:info"/> + </xsl:call-template> + </xsl:variable> + <xsl:variable name="desc_" select="exsl:node-set($desc)/node()"/> + <xsl:if test="$desc_"> + <span class="ex-gnome-tile-desc"> + <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode" + select="$desc_"/> + </span> + </xsl:if> + </xsl:if> + </a> + </div> + </xsl:for-each> + </xsl:for-each> + <!-- blank tiles for homogeneous sizing --> + <div class="links-tile"></div> + <div class="links-tile"></div> + </div> +</xsl:template> + + <!--#* _mal2html.links.divs --> <xsl:template name="_mal2html.links.divs"> <xsl:param name="node" select="."/> |