Abstände zwischen aktiven/nicht-aktiven Menüeinträgen korrigiert
[website] / dist / thymeleaf / templates / layout.html
index 128bbf6..94c688b 100644 (file)
@@ -3,16 +3,15 @@
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:th="http://www.thymeleaf.org"
     xmlns:layout="http://www.thymeleaf.org"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:th="http://www.thymeleaf.org"
     xmlns:layout="http://www.thymeleaf.org"
+    thymeproxy:variables="/thymeleaf/variables.json"
     >
   <head th:fragment="head" layout:fragment="head">
     <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE" th:text="'juplo'">juplo - BASISTEMPLATE</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     >
   <head th:fragment="head" layout:fragment="head">
     <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE" th:text="'juplo'">juplo - BASISTEMPLATE</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="../../css/base.min.css" th:href="@{/css/base.min.css}"/>
-    <style type="text/css" th:remove="all">
-      @import '../../css/screen.min.css' screen;
-      @import '../../css/print.min.css' print;
-    </style>
+    <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/base.less" th:href="@{/css/base.min.css}"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen" th:remove="all"/>
+    <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print" th:remove="all"/>
     <style type="text/css" th:inline="text">
       @import '[[@{/css/screen.min.css}]]' screen;
       @import '[[@{/css/print.min.css}]]' print;
     <style type="text/css" th:inline="text">
       @import '[[@{/css/screen.min.css}]]' screen;
       @import '[[@{/css/print.min.css}]]' print;
       <script src="../../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
     <![endif]-->
     <!--[if IE 8]>
       <script src="../../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
     <![endif]-->
     <!--[if IE 8]>
-      <link rel="stylesheet" type="text/css" href="../../css/ie8.min.css" th:href="@{/css/ie8.min.css}"/>
+      <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../../less/ie8.less" th:href="@{/css/ie8.min.css}"/>
     <![endif]-->
     <![endif]-->
+    <script src="../../js/less-1.7.0.min.js" th:remove="all"></script>
   </head>
   </head>
-  <body id="top" class="menu" th:class="${contentclass}?:'menu'" onload="prettyPrint()">
+  <body
+      thymeproxy:variables="${json}"
+      th:with="page=${pages.get(uri)},crumbs=${page['crumbs']}"
+      id="top"
+      class="menu"
+      th:class="${contentclass}?:'menu'"
+      onload="prettyPrint()"
+      >
     <div id="page" class="cf">
       <header id="header">
         <h1 id="logo" layout:fragment="header"><a href="../index.html" th:href="@{/}" title="Home" class="l">juplo</a></h1>
     <div id="page" class="cf">
       <header id="header">
         <h1 id="logo" layout:fragment="header"><a href="../index.html" th:href="@{/}" title="Home" class="l">juplo</a></h1>
       <div id="breadcrumb">
         <strong class="b title">You are here:</strong>
         <ol class="b" layout:fragment="breadcrumb">
       <div id="breadcrumb">
         <strong class="b title">You are here:</strong>
         <ol class="b" layout:fragment="breadcrumb">
+          <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
+          <li class="b" th:each="crumb: ${crumbs}">
+            <a class="b" href="../projects.html" th:href="@{${crumb.uri}}" th:text="${crumb.name}">Projects</a>
+          </li>
           <!--/*-->
           <!--/*-->
-          <li class="b"><a class="b" href="#">Home</a></li>
-          <li class="b"><a class="b" href="#">Projects</a></li>
-          <li class="b"><a class="b" href="#">Fix SWF</a></li>
+          <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
           <!--*/-->
           <!--*/-->
-          <li class="b"><strong class="b">BREADCRUMB</strong></li>
         </ol>
         <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
         <hr class="b" />
         </ol>
         <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
         <hr class="b" />
           <div th:fragment="maincontent">
             <p>
               <strong>Lorem ipsum</strong> dolor
           <div th:fragment="maincontent">
             <p>
               <strong>Lorem ipsum</strong> dolor
-              <a href="../projects/typo.html" th:href="@{/projects/typo.html}">sit amet</a>,
+              <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
               consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
               labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
               consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
               labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-              <a href="#" th:href="@{/projects/html-experimente.html}">exercitation</a>
+              <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
               ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
               irure dolor in reprehenderit in voluptate velit esse cillum dolore
               eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
               ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
               irure dolor in reprehenderit in voluptate velit esse cillum dolore
               eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
           </div>
         </article>
         <div class="marginal">
           </div>
         </article>
         <div class="marginal">
-          <nav id="nav" layout:fragment="navigation">
+          <nav id="nav"
+              layout:fragment="navigation"
+              th:with="section=${crumbs != null ? crumbs[0] : null}"
+              >
             <hr class="n"/>
             <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
             <h1 class="nav">Navigation</h1>
             <h2 class="nav menu">Section-Menu</h2>
             <ul id="menu" class="cf">
             <hr class="n"/>
             <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
             <h1 class="nav">Navigation</h1>
             <h2 class="nav menu">Section-Menu</h2>
             <ul id="menu" class="cf">
-              <li class="m blog"><a href="../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
-              <li class="m projects"><a href="../projects" th:href="@{/projects.html}" class="m selected">Projects</a></li>
-              <li class="m about"><a href="../about.html" th:href="@{/about.html}" class="m">About</a></li>
+              <li class="m blog" th:each="entry : ${sections}" th:class="'m ' + ${entry.key}">
+                <a href="../blog.html" th:href="@{${entry.value}}" class="m" th:class="${entry.value == section.uri} ? 'm selected' : 'm'" th:text="${pages.get(entry.value).name}">Blog</a>
+              </li>
+              <!--/*-->
+              <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
+              <li class="m about"><a href="../about.html" class="m">About</a></li>
+              <!--*/-->
             </ul>
             <h2 class="nav submenu">
               <span class="s">Submenu for section</span>
             </ul>
             <h2 class="nav submenu">
               <span class="s">Submenu for section</span>
-              <a class="s selected" href="../projects.html" th:href="@{/projects.html}">Projects</a>
+              <a class="s selected" href="../projects.html" th:href="@{${section.uri}}" th:text="${section.name}">Projects</a>
             </h2>
             </h2>
-            <ul id="submenu" class="s" layout:fragment="submenu">
-              <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
-              <li class="s sub">
-                <a href="../projects/fix-swf.html" th:href="@{/projects/fix-swf.html}" class="s selected">fix-swf</a>
-                <ul class="s active">
-                  <li class="s"><strong class="s">Overview</strong></li>
-                  <li class="s"><a href="../projects/fix-swf/getting-started.html" th:href="@{/projects/fix-swf/getting-started.html}" class="s">Getting Started</a></li>
+            <ul layout:fragment="submenu"
+                th:with="
+                  len=${crumbs.size()},
+                  submenu=${pages[section.uri]['childs']},
+                  parent=${crumbs[0].uri},
+                  pos=1"
+                id="submenu"
+                class="s"
+                th:class="'s' + (${len == 1 or (len == 2 and page['childs'] == null)} ? ' selected' : '')"
+                >
+              <li th:fragment="submenu(submenu, parent, pos)"
+                  th:each="entry : ${submenu}"
+                  th:with="
+                      child=${pos == len},
+                      selected=${!child and crumbs.get(pos).uri == entry.key},
+                      sibling=${pos + 1 == len and (page['childs'] == null or uri == parent)},
+                      childs=${entry.key == parent ? null : pages[entry.key]['childs']}
+                      "
+                  class="s sub"
+                  th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
+                  >
+                <a  href="../potemkin/fix-swf.html"
+                    th:href="@{${entry.key}}"
+                    class="s selected"
+                    th:class="${selected} ? 's selected' : 's'"
+                    th:text="${entry.value}"
+                    >fix-swf</a>
+                <ul th:if="${selected and childs != null}"
+                    class="s active"
+                    th:class="'s' + (${selected &amp;&amp; pos == crumbs.size()-1} ? ' active' : '') + (${entry.key == uri or (len &gt; 1 and entry.key == crumbs.get(len-2).uri and page['childs'] == null)} ? ' selected' : '')"
+                    >
+                  <li th:replace="templates/layout :: submenu(submenu=${childs}, parent=${entry.key}, pos=${pos + 1})"
+                      class="s"
+                      >
+                    <strong class="s">Overview</strong>
+                  </li>
+                  <!--/*-->
+                  <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
                   <li class="s"><a href="#" class="s">FAQ</a></li>
                   <li class="s"><a href="#" class="s">Documentation</a></li>
                   <li class="s"><a href="#" class="s">FAQ</a></li>
                   <li class="s"><a href="#" class="s">Documentation</a></li>
+                  <!--*/-->
                 </ul>
               </li>
                 </ul>
               </li>
+              <!--/*-->
+              <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
               <li class="s off"><a href="#" class="s">jquery.openx</a></li>
-              <li class="s sub off"><a href="../projects/html-experimente.html" th:href="@{/projects/html-experimente.html}" class="s">HTML-Experimente</a></li>
+              <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
               <li class="s sub off"><a href="#" class="s">accelerator</a></li>
-              <li class="s off"><a href="../projects/typo.html" th:href="@{/projects/typo.html}" class="s">Typography</a></li>
+              <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
+              <!--*/-->
             </ul>
             <hr class="n"/>
           </nav>
             </ul>
             <hr class="n"/>
           </nav>