projects / website / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
WIP: title/main/marginal explizit
[website] / dist / templates / layout.html
diff --git a/dist/templates/layout.html b/dist/templates/layout.html
index c464d69..1f946dc 100644 (file)
--- a/dist/templates/layout.html
+++ b/dist/templates/layout.html
@@ -2,49 +2,61 @@
 <html
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:th="http://www.thymeleaf.org"
 <html
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:th="http://www.thymeleaf.org"
-    xmlns:layout="http://www.thymeleaf.org"
-    juplo:variables="templates/variables"
+    th:fragment="layout(uri,maincontent,marginalcontent)"
+    thymeproxy:variables="SET:sitemap.json"
     >
     >
-  <head th:fragment="head" layout:fragment="head">
-    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE" th:text="'juplo'">juplo - BASISTEMPLATE</title>
+  <head>
+    <title th:replace="${title}">juplo - BASISTEMPLATE</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <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>
+    <!-- Default / Responsive -->
+    <link rel="stylesheet" th:rel="stylesheet" media="all" title="Responsive" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="stylesheet" th:rel="stylesheet" media="only screen" title="Responsive" type="text/css" href="../css/screen.css" th:href="@{/css/screen.min.css}"/>
+    <link rel="stylesheet" th:rel="stylesheet" media="print" title="Responsive" type="text/css" href="../css/print.css" th:href="@{/css/print.min.css}"/>
+    <!-- Legacy -->
+    <link rel="alternate stylesheet" title="Legacy" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <!-- Tablet -->
+    <link rel="alternate stylesheet" title="Tablet" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Tablet" type="text/css" href="../css/tablet.css" th:href="@{/css/tablet.min.css}"/>
+    <!-- Phone -->
+    <link rel="alternate stylesheet" title="Phone" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Phone" type="text/css" href="../css/phone.css" th:href="@{/css/phone.min.css}"/>
+    <!-- Tiny -->
+    <link rel="alternate stylesheet" title="Tiny" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Tiny" type="text/css" href="../css/tiny.css" th:href="@{/css/tiny.min.css}"/>
+    <!-- Print -->
+    <link rel="alternate stylesheet" title="Print" type="text/css" href="../css/base.css" th:href="@{/css/base.min.css}"/>
+    <link rel="alternate stylesheet" title="Print" type="text/css" href="../css/print.css" th:href="@{/css/print.min.css}"/>
     <script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
     <!--[if lt IE 9]>
       <script src="../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
     <![endif]-->
     <!--[if IE 8]>
     <script src="../js/prettify.js" th:src="@{/js/prettify.js}"></script>
     <!--[if lt IE 9]>
       <script src="../js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
     <![endif]-->
     <!--[if IE 8]>
-      <link rel="stylesheet/less" th:rel="stylesheet" type="text/css" href="../less/ie8.less" th:href="@{/css/ie8.min.css}"/>
+      <link rel="stylesheet" th:rel="stylesheet" type="text/css" href="../css/ie8.css" th:href="@{/css/ie8.min.css}"/>
     <![endif]-->
     <![endif]-->
-    <script src="../js/less-1.7.0.min.js" th:remove="all"></script>
+    <link rel="caononical" href="layout.html" th:replace="~{:: #canonical}?:~{}"/>
   </head>
   <body
   </head>
   <body
-      juplo:variables="${json}"
-      th:with="page=${pages.get(uri)},crumbs=${page['crumbs']}"
+      th:fragment="body(uri)"
+      thymeproxy:variables="${json}"
+      th:with="crumbs=${_crumbs.get(uri)}"
       id="top"
       class="menu"
       th:class="${contentclass}?:'menu'"
       onload="prettyPrint()"
       >
     <div id="page" class="cf">
       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>
+      <header id="header"><!-- TODO: Vereinfachung -> für uri == index.html a gegen strong ausstauschen -->
+        <h1 id="logo" th:include="~{::#logo}"><a href="../index.html" th:href="@{/}" title="Home" class="l" ><img class="l" src="/img/logo.svg" alt="juplo"/></a></h1>
         <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
         <hr class="h" />
       </header>
       <div id="breadcrumb">
         <strong class="b title">You are here:</strong>
         <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
         <hr class="h" />
       </header>
       <div id="breadcrumb">
         <strong class="b title">You are here:</strong>
-        <ol class="b" layout:fragment="breadcrumb">
+        <ol class="b" th:include="~{::#crumbs}?:_">
           <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
           <li class="b" th:each="crumb: ${crumbs}">
           <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>
+            <a class="b" href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a>
           </li>
           <!--/*-->
           <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
           </li>
           <!--/*-->
           <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
@@ -54,15 +66,15 @@
         <hr class="b" />
       </div>
       <main class="content cf">
         <hr class="b" />
       </div>
       <main class="content cf">
-        <article id="content" class="main" layout:fragment="maincontent" th:class="'main'">
-          <header><h1 th:text="${title}">juplo - BASISTEMPLATE</h1></header>
+        <article id="content" class="main" th:include="${maincontent}">
+          <header><h1 th:include="${title}">juplo - BASISTEMPLATE</h1></header>
           <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
@@ -103,7 +115,7 @@
         </article>
         <div class="marginal">
           <nav id="nav"
         </article>
         <div class="marginal">
           <nav id="nav"
-              layout:fragment="navigation"
+              th:include="~{::#navigation}?:_"
               th:with="section=${crumbs != null ? crumbs[0] : null}"
               >
             <hr class="n"/>
               th:with="section=${crumbs != null ? crumbs[0] : null}"
               >
             <hr class="n"/>
@@ -111,54 +123,57 @@
             <h1 class="nav">Navigation</h1>
             <h2 class="nav menu">Section-Menu</h2>
             <ul id="menu" class="cf">
             <h1 class="nav">Navigation</h1>
             <h2 class="nav menu">Section-Menu</h2>
             <ul id="menu" class="cf">
-              <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 class="m blog" th:each="entry : ${_sections}" th:class="'m ' + ${entry.key}">
+                <a href="../blog/" th:href="@{${entry.value}}" class="m" th:class="${entry.value == section} ? 'm selected' : 'm'" th:text="${_titles.get(entry.value)}">Blog</a>
               </li>
               <!--/*-->
               </li>
               <!--/*-->
-              <li class="m projects"><a href="../projects" class="m selected">Projects</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>
               <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>
-              <a class="s selected" href="../projects.html" th:href="@{${section.uri}}" th:text="${section.name}">Projects</a>
+              <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
             </h2>
             </h2>
-            <ul layout:fragment="submenu"
+            <ul th:include="${submenu}?:_"
                 th:with="
                 th:with="
-                  submenu=${pages[section.uri]['childs']},
-                  parent=${crumbs[0].uri},
+                  len=${crumbs.size()},
+                  submenu=${_childs.get(section)},
+                  parent=${crumbs[0]},
                   pos=1"
                 id="submenu"
                 class="s"
                   pos=1"
                 id="submenu"
                 class="s"
+                th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
                 >
               <li th:fragment="submenu(submenu, parent, pos)"
                   th:each="entry : ${submenu}"
                   th:with="
                 >
               <li th:fragment="submenu(submenu, parent, pos)"
                   th:each="entry : ${submenu}"
                   th:with="
-                      child=${pos == crumbs.size()},
-                      selected=${!child and crumbs.get(pos).uri == entry.key},
-                      sibling=${pos + 1 == crumbs.size() and (page['childs'] == null or uri == parent)},
-                      childs=${entry.key == parent ? null : pages[entry.key]['childs']}
+                      child=${pos == len},
+                      selected=${!child and crumbs.get(pos) == entry},
+                      sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
+                      childs=${entry == parent ? null : _childs.get(entry)}
                       "
                   class="s sub"
                   th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
                   >
                       "
                   class="s sub"
                   th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
                   >
-                <a  href="../projects/fix-swf.html"
-                    th:href="@{${entry.key}}"
+                <a  href="../potemkin/fix-swf/overview.html"
+                    th:if="${entry != parent}"
+                    th:href="@{${entry}}"
                     class="s selected"
                     th:class="${selected} ? 's selected' : 's'"
                     class="s selected"
                     th:class="${selected} ? 's selected' : 's'"
-                    th:text="${entry.value}"
+                    th:text="${_titles.get(entry)}"
                     >fix-swf</a>
                 <ul th:if="${selected and childs != null}"
                     class="s active"
                     >fix-swf</a>
                 <ul th:if="${selected and childs != null}"
                     class="s active"
-                    th:class="${selected} ? 's active' : 's'"
+                    th:class="'s' + (${selected &amp;&amp; pos == crumbs.size()-1} ? ' active' : '') + (${entry == uri or (len &gt; 1 and entry == crumbs.get(len-2) and _childs.get(uri) == null)} ? ' selected' : '')"
                     >
                     >
-                  <li th:replace="templates/layout :: submenu(submenu=${childs}, parent=${entry.key}, pos=${pos + 1})"
+                  <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
                       class="s"
                       >
                     <strong class="s">Overview</strong>
                   </li>
                   <!--/*-->
                       class="s"
                       >
                     <strong class="s">Overview</strong>
                   </li>
                   <!--/*-->
-                  <li class="s"><a href="../projects/fix-swf/getting-started.html" class="s">Getting Started</a></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>
                   <!--*/-->
@@ -167,14 +182,14 @@
               <!--/*-->
               <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 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 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>
-          <aside class="m" layout:fragment="marginalcontent" th:remove="tag">
+          <aside class="m" th:insert="${marginalcontent}?:~{}">
           <!--/* the following  is only visible during natural templating -->
             <h1>Other nasty but marginal stuff</h1>
             <p>
           <!--/* the following  is only visible during natural templating -->
             <h1>Other nasty but marginal stuff</h1>
             <p>
@@ -198,10 +213,10 @@
       </main>
       <footer id="footer">
         <hr class="f" />
       </main>
       <footer id="footer">
         <hr class="f" />
-        <ul id="footerlinks" layout:fragment="footer">
+        <ul id="footerlinks" th:include="~{::#links}?:_">
           <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
           <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
           <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
           <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
-          <li class="f about"><a class="f" href="../about.html" th:href="@{/about.html}">About</a></li>
+          <li class="f"><a class="f" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a></li>
         </ul>
       </footer>
     </div>
         </ul>
       </footer>
     </div>
Unnamed repository; edit this file 'description' to name the repository.