Restructure HTML and CSS für menu in page header
continuous-integration/drone/push Build is passing

This improves the look and feel of the page on mobile devices.

Related to #1332 and #1451
This commit is contained in:
2020-06-26 11:26:11 +02:00
parent 6b4668f5cc
commit 61c9519f86
4 changed files with 228 additions and 189 deletions
+76 -69
View File
@@ -48,6 +48,7 @@
<xsl:element name="i">
<xsl:attribute name="class">fa fa-bars fa-lg</xsl:attribute>
</xsl:element>
<xsl:text>&#x2000;</xsl:text>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'menu'" /></xsl:call-template>
</xsl:element>
</xsl:element>
@@ -67,87 +68,93 @@
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'page-info'" /></xsl:call-template>
</xsl:element>
</xsl:element>
<xsl:if test="not(/buildinfo/document/@external)">
<xsl:element name="li">
<xsl:attribute name="id">direct-to-login</xsl:attribute>
<xsl:element name="a">
<xsl:attribute name="href">https://my.fsfe.org/</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-sign-in fa-lg</xsl:attribute>
</xsl:element>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fellowship/login'" /></xsl:call-template>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:attribute name="id">direct-to-translations</xsl:attribute>
<xsl:element name="a">
<xsl:attribute name="href">#translations</xsl:attribute>
<xsl:attribute name="data-toggle">collapse</xsl:attribute>
<xsl:attribute name="data-target">#translations</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-globe fa-lg</xsl:attribute>
</xsl:element>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'change-lang'" /></xsl:call-template>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:attribute name="id">direct-to-donate</xsl:attribute>
<xsl:element name="a">
<xsl:attribute name="class">btn btn-success</xsl:attribute>
<xsl:attribute name="href">
<xsl:text>https://my.fsfe.org/donate?referrer=https://fsfe.org</xsl:text>
<xsl:value-of select="/buildinfo/@filename"/>
<xsl:text>.html</xsl:text>
</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-heart-o fa-lg</xsl:attribute>
</xsl:element>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'donate'" /></xsl:call-template>
</xsl:element>
</xsl:element>
</xsl:if>
</xsl:element>
<!--/div#direct-links-->
<!--/ul#direct-links-->
<xsl:if test="not(/buildinfo/document/@external)">
<xsl:element name="ul">
<xsl:element name="div">
<xsl:attribute name="id">menu-list</xsl:attribute>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/about/about.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/about'" /></xsl:call-template>
<xsl:element name="ul">
<xsl:element name="li">
<xsl:attribute name="id">menu-donate</xsl:attribute>
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:text>https://my.fsfe.org/donate?referrer=https://fsfe.org</xsl:text>
<xsl:value-of select="/buildinfo/@filename"/>
<xsl:text>.html</xsl:text>
</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-heart-o fa-lg</xsl:attribute>
</xsl:element>
<xsl:text>&#x2000;</xsl:text>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'donate'" /></xsl:call-template>
</xsl:element>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/work.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/projects'" /></xsl:call-template>
<!--/ul#menu-list-->
<xsl:element name="ul">
<xsl:attribute name="id">menu-sections</xsl:attribute>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/about/about.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/about'" /></xsl:call-template>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/work.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/projects'" /></xsl:call-template>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/campaigns/campaigns.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/campaigns'" /></xsl:call-template>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/contribute/contribute.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/help'" /></xsl:call-template>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/press/press.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/press'" /></xsl:call-template>
</xsl:element>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/campaigns/campaigns.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/campaigns'" /></xsl:call-template>
<!--/ul#menu-sections-->
<xsl:element name="ul">
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href">https://my.fsfe.org/</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-sign-in fa-lg</xsl:attribute>
</xsl:element>
<xsl:text>&#x2000;</xsl:text>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fellowship/login'" /></xsl:call-template>
</xsl:element>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/contribute/contribute.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/help'" /></xsl:call-template>
</xsl:element>
</xsl:element>
<xsl:element name="li">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="$urlprefix"/>/press/press.html</xsl:attribute>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'fsfe/press'" /></xsl:call-template>
<xsl:element name="li">
<xsl:attribute name="id">menu-translations</xsl:attribute>
<xsl:element name="a">
<xsl:attribute name="href">#translations</xsl:attribute>
<xsl:attribute name="data-toggle">collapse</xsl:attribute>
<xsl:attribute name="data-target">#translations</xsl:attribute>
<xsl:element name="i">
<xsl:attribute name="class">fa fa-globe fa-lg</xsl:attribute>
</xsl:element>
<xsl:text>&#x2000;</xsl:text>
<xsl:call-template name="fsfe-gettext"><xsl:with-param name="id" select="'change-lang'" /></xsl:call-template>
</xsl:element>
</xsl:element>
</xsl:element>
</xsl:element>
<!--/ul#menu-list-->
</xsl:if>
</xsl:element>