Testseiten für die verschiedenen Layout-Variationen entwickelt

diff --git a/src/main/webapp/WEB-INF/views/projects/html-experimente.jsp b/src/main/webapp/WEB-INF/views/projects/html-experimente.jsp
index 52bec65..2aec71a 100644 (file)
--- a/src/main/webapp/WEB-INF/views/projects/html-experimente.jsp
+++ b/src/main/webapp/WEB-INF/views/projects/html-experimente.jsp
@@ -32,9 +32,15 @@
     </ul>
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
-    <h2>Alle HTML-Experimente</h2>
+    <h2>Layout-Variationen</h2>
     <ul>
       <li><a href="${base}test/basis-layout.html">Nur das Basis-Layout</a></li>
+      <li><a href="${base}test/tiny.html">Layout für sehr kleine Bildschirmgrößen</a></li>
+      <li><a href="${base}test/phone.html">Layout für Smartphones</a></li>
+      <li><a href="${base}test/tablet.html">Layout für Tablets</a></li>
+    </ul>
+    <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+    <ul>
       <li><a href="${base}test/seitenaufteilung.html">Nur das Basis-Layout und die Seitenaufteilung</a></li>
       <li><a href="${base}test/seitenkopf.html">Nur das Basis-Layout und der Seitenkopf</a></li>
     </ul>

diff --git a/src/main/webapp/WEB-INF/views/test/basis-layout.jsp b/src/main/webapp/WEB-INF/views/test/basis-layout.jsp
index 5d406de..bf113c6 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/basis-layout.jsp
+++ b/src/main/webapp/WEB-INF/views/test/basis-layout.jsp
@@ -40,9 +40,15 @@
       In diese Seite ist nur das Basis-Layout eingebunden
       (<code>/css/base.css</code>).
     </p>
-    <h2>Weitere HTML-Experimente</h2>
+    <h2>Layout-Variationen</h2>
     <ul>
       <li><strong>Basis-Layout</strong></li>
+      <li><a href="${base}test/tiny.html">Layout für sehr kleine Bildschirmgrößen</a></li>
+      <li><a href="${base}test/phone.html">Layout für Smartphones</a></li>
+      <li><a href="${base}test/tablet.html">Layout für Tablets</a></li>
+    </ul>
+    <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+    <ul>
       <li><a href="${base}test/seitenaufteilung.html">Nur das Basis-Layout und die Seitenaufteilung</a></li>
       <li><a href="${base}test/seitenkopf.html">Nur das Basis-Layout und der Seitenkopf</a></li>
     </ul>

diff --git a/src/main/webapp/WEB-INF/views/test/phone.jsp b/src/main/webapp/WEB-INF/views/test/phone.jsp
new file mode 100644 (file)
index 0000000..ba7c4a7
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/test/phone.jsp
@@ -0,0 +1,57 @@
+<%@page contentType="text/html;charset=UTF-8"%>
+<%@page pageEncoding="UTF-8"%>
+<%@page session="false" %>
+<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
+<%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
+<s:url var="base" value="/" />
+<t:insertDefinition name="BASEPAGE">
+  <t:putAttribute name="title" value="Layout für Smartphones" type="string"/>
+  <t:putAttribute name="htmlhead" type="string">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
+    <link rel="stylesheet" type="text/css" href="${base}css/phone.css" />
+  </t:putAttribute>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="${base}index.html">Home</a></li>
+    <li class="b"><a class="b" href="${base}projects.html">Projects</a></li>
+    <li class="b"><strong class="b">HTML-Experimente</strong></li>
+  </t:putAttribute>
+  <t:putAttribute name="navigation" type="string">
+    <h1 class="nav">Navigation</h1>
+    <h2 class="nav menu">Section-Menu</h2>
+    <ul id="menu">
+      <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+      <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+    </ul>
+    <h2 class="nav submenu">
+      <span class="s">Submenu for section</span>
+      <a class="s selected" href="${base}projects.html">Projects</a>
+    </h2>
+    <ul id="submenu" class="s active">
+      <li class="s sub"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+      <li class="s sub"><a href="${base}projects/fix-swf.html" class="s">fix-swf</a></li>
+      <li class="s"><a href="#" class="s">jquery.openx</a></li>
+      <li class="s"><strong class="s">HTML-Experimente</strong></li>
+      <li class="s sub"><a href="#" class="s">accelerator</a></li>
+      <li class="s"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+    </ul>
+  </t:putAttribute>
+  <t:putAttribute name="maincontent" type="string">
+    <p>
+      Diese Seite bindet alle Styles ein, die für Smartphones eingebunden
+      werden (<code>/css/base.css</code> und <code>/css/phone.css</code>).
+    </p>
+    <h2>Layout-Variationen</h2>
+    <ul>
+      <li><a href="${base}test/basis-layout.html">Basis-Layout</a></li>
+      <li><a href="${base}test/tiny.html">Layout für sehr kleine Bildschirmgrößen</a></li>
+      <li><strong>Layout für Smartphones</strong></li>
+      <li><a href="${base}test/tablet.html">Layout für Tablets</a></li>
+    </ul>
+    <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+    <ul>
+      <li><a href="${base}test/seitenaufteilung.html">Nur das Basis-Layout und die Seitenaufteilung</a></li>
+      <li><a href="${base}test/seitenkopf.html">Nur das Basis-Layout und der Seitenkopf</a></li>
+    </ul>
+  </t:putAttribute>
+</t:insertDefinition>

diff --git a/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp b/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
index 5d69313..34bcaa7 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
+++ b/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
@@ -43,9 +43,15 @@
       und die Seitenaufteilung (<code>/less/screen/layout.less</code>)
       eingebunden.
     </p>
-    <h2>Weitere HTML-Experimente</h2>
+    <h2>Layout-Variationen</h2>
+    <ul>
+      <li><a href="${base}test/basis-layout.html">Nur das Basis-Layout</a></li>
+      <li><a href="${base}test/tiny.html">Layout für sehr kleine Bildschirmgrößen</a></li>
+      <li><a href="${base}test/phone.html">Layout für Smartphones</a></li>
+      <li><a href="${base}test/tablet.html">Layout für Tablets</a></li>
+    </ul>
+    <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
     <ul>
-      <li><a href="${base}test/basis-layout.html">Basis-Layout</a></li>
       <li><strong>Nur das Basis-Layout und die Seitenaufteilung</strong></li>
       <li><a href="${base}test/seitenkopf.html">Nur das Basis-Layout und der Seitenkopf</a></li>
     </ul>

diff --git a/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp b/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
index 47ee629..c0af6fb 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
+++ b/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
@@ -43,9 +43,15 @@
       und der Seitenkopf (<code>/less/screen/head.less</code>)
       eingebunden.
     </p>
-    <h2>Weitere HTML-Experimente</h2>
+    <h2>Layout-Variationen</h2>
+    <ul>
+      <li><a href="${base}test/basis-layout.html">Nur das Basis-Layout</a></li>
+      <li><a href="${base}test/tiny.html">Layout für sehr kleine Bildschirmgrößen</a></li>
+      <li><a href="${base}test/phone.html">Layout für Smartphones</a></li>
+      <li><a href="${base}test/tablet.html">Layout für Tablets</a></li>
+    </ul>
+    <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
     <ul>
-      <li><a href="${base}test/basis-layout.html">Basis-Layout</a></li>
       <li><a href="${base}test/seitenaufteilung.html">Nur das Basis-Layout und die Seitenaufteilung</a></li>
       <li><strong>Nur das Basis-Layout und der Seitenkopf</strong></li>
     </ul>

diff --git a/src/main/webapp/WEB-INF/views/test/tablet.jsp b/src/main/webapp/WEB-INF/views/test/tablet.jsp
new file mode 100644 (file)
index 0000000..0970810
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/test/tablet.jsp
@@ -0,0 +1,59 @@
+<%@page contentType="text/html;charset=UTF-8"%>
+<%@page pageEncoding="UTF-8"%>
+<%@page session="false" %>
+<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
+<%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
+<s:url var="base" value="/" />
+<t:insertDefinition name="BASEPAGE">
+  <t:putAttribute name="title" value="Layout für Tablets" type="string"/>
+  <t:putAttribute name="htmlhead" type="string">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
+    <link rel="stylesheet" type="text/css" href="${base}css/screen.css" />
+    <link rel="stylesheet" type="text/css" href="${base}css/tablet.css" />
+  </t:putAttribute>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="${base}index.html">Home</a></li>
+    <li class="b"><a class="b" href="${base}projects.html">Projects</a></li>
+    <li class="b"><strong class="b">HTML-Experimente</strong></li>
+  </t:putAttribute>
+  <t:putAttribute name="navigation" type="string">
+    <h1 class="nav">Navigation</h1>
+    <h2 class="nav menu">Section-Menu</h2>
+    <ul id="menu">
+      <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+      <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+    </ul>
+    <h2 class="nav submenu">
+      <span class="s">Submenu for section</span>
+      <a class="s selected" href="${base}projects.html">Projects</a>
+    </h2>
+    <ul id="submenu" class="s active">
+      <li class="s sub"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+      <li class="s sub"><a href="${base}projects/fix-swf.html" class="s">fix-swf</a></li>
+      <li class="s"><a href="#" class="s">jquery.openx</a></li>
+      <li class="s"><strong class="s">HTML-Experimente</strong></li>
+      <li class="s sub"><a href="#" class="s">accelerator</a></li>
+      <li class="s"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+    </ul>
+  </t:putAttribute>
+  <t:putAttribute name="maincontent" type="string">
+    <p>
+      Diese Seite bindet alle Styles ein, die für Tablets eingebunden
+      werden (<code>/css/base.css</code>, <code>/css/screen.css</code> und
+      <code>/css/tablet.css</code>).
+    </p>
+    <h2>Layout-Variationen</h2>
+    <ul>
+      <li><a href="${base}test/basis-layout.html">Basis-Layout</a></li>
+      <li><a href="${base}test/tiny.html">Layout für sehr kleine Bildschirmgrößen</a></li>
+      <li><a href="${base}test/phone.html">Layout für Smartphones</a></li>
+      <li><strong>Layout für Tablets</strong></li>
+    </ul>
+    <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+    <ul>
+      <li><a href="${base}test/seitenaufteilung.html">Nur das Basis-Layout und die Seitenaufteilung</a></li>
+      <li><a href="${base}test/seitenkopf.html">Nur das Basis-Layout und der Seitenkopf</a></li>
+    </ul>
+  </t:putAttribute>
+</t:insertDefinition>

diff --git a/src/main/webapp/WEB-INF/views/test/tiny.jsp b/src/main/webapp/WEB-INF/views/test/tiny.jsp
new file mode 100644 (file)
index 0000000..c5f028e
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/test/tiny.jsp
@@ -0,0 +1,58 @@
+<%@page contentType="text/html;charset=UTF-8"%>
+<%@page pageEncoding="UTF-8"%>
+<%@page session="false" %>
+<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
+<%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
+<s:url var="base" value="/" />
+<t:insertDefinition name="BASEPAGE">
+  <t:putAttribute name="title" value="Layout für sehr kleine Bildschirmgrößen" type="string"/>
+  <t:putAttribute name="htmlhead" type="string">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
+    <link rel="stylesheet" type="text/css" href="${base}css/tiny.css" />
+  </t:putAttribute>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="${base}index.html">Home</a></li>
+    <li class="b"><a class="b" href="${base}projects.html">Projects</a></li>
+    <li class="b"><strong class="b">HTML-Experimente</strong></li>
+  </t:putAttribute>
+  <t:putAttribute name="navigation" type="string">
+    <h1 class="nav">Navigation</h1>
+    <h2 class="nav menu">Section-Menu</h2>
+    <ul id="menu">
+      <li class="m blog"><a href="${base}blog.html" class="m">Blog</a></li>
+      <li class="m projects"><a href="${base}projects.html" class="m selected">Projects</a></li>
+    </ul>
+    <h2 class="nav submenu">
+      <span class="s">Submenu for section</span>
+      <a class="s selected" href="${base}projects.html">Projects</a>
+    </h2>
+    <ul id="submenu" class="s active">
+      <li class="s sub"><a href="#" class="s">hibernate4-maven-plugin</a></li>
+      <li class="s sub"><a href="${base}projects/fix-swf.html" class="s">fix-swf</a></li>
+      <li class="s"><a href="#" class="s">jquery.openx</a></li>
+      <li class="s"><strong class="s">HTML-Experimente</strong></li>
+      <li class="s sub"><a href="#" class="s">accelerator</a></li>
+      <li class="s"><a href="${base}projects/typo.html" class="s">Typography</a></li>
+    </ul>
+  </t:putAttribute>
+  <t:putAttribute name="maincontent" type="string">
+    <p>
+      In diese Seite bindet alle Styles ein, die für sehr kleine
+      Bildschirmgrößen eingebunden werden (<code>/css/base.css</code> und
+      <code>/css/tiny.css</code>).
+    </p>
+    <h2>Layout-Variationen</h2>
+    <ul>
+      <li><a href="${base}test/basis-layout.html">Basis-Layout</a></li>
+      <li><strong>Layout für sehr kleine Bildschirmgrößen</strong></li>
+      <li><a href="${base}test/phone.html">Layout für Smartphones</a></li>
+      <li><a href="${base}test/tablet.html">Layout für Tablets</a></li>
+    </ul>
+    <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+    <ul>
+      <li><a href="${base}test/seitenaufteilung.html">Nur das Basis-Layout und die Seitenaufteilung</a></li>
+      <li><a href="${base}test/seitenkopf.html">Nur das Basis-Layout und der Seitenkopf</a></li>
+    </ul>
+  </t:putAttribute>
+</t:insertDefinition>