doc: Preview-Images added to index.html

MikeMitterer · Mar 5, 2015 · 4cc217b · 4cc217b
1 parent a83568b
commit 4cc217b
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 6 deletions.
diff --git a/example/_images/README.txt b/example/_images/README.txt
@@ -0,0 +1,11 @@
+Basis für SS:
+    847 x 656 ( Dart-Playground settings)
+
+ImageMagick
+    convert bottombar.png -resize 300x bottombar-300.png
+
+    find . -regex './[a-z0-9A-Z]*\.png'
+        mogrify -resize 300x -set filename:name "%t-300.%e" -write "%[filename:name]" bottombar.png
+
+    find . -regex './[a-z0-9A-Z]*\.png' -exec mogrify -resize 300x -set filename:name "%t-300.%e" -write "%[filename:name]" {} \;
+    find example/_images -regex '.*/[a-z0-9A-Z]*\.png' -exec mogrify -resize 300x -set filename:name "%t-300.%e" -write "example/_images/%[filename:name]" {} \;
diff --git a/example/_images/bottombar-300.jpg b/example/_images/bottombar-300.jpg
diff --git a/example/_images/bottombar.png b/example/_images/bottombar.png
diff --git a/example/_images/headerfooter-300.jpg b/example/_images/headerfooter-300.jpg
diff --git a/example/_images/headerfooter.png b/example/_images/headerfooter.png
diff --git a/example/index.html b/example/index.html
@@ -17,7 +17,7 @@
           a { text-decoration: none; }
 
           ol a {
-              min-width: 200px;
+              min-width: 230px;
               display: inline-block;
           }
           .links { padding: 2em; }
@@ -28,11 +28,21 @@
               flex-direction: row;
               flex-wrap: wrap;
           }
-          .cols > div:first-child { margin-right: 2em;}
+          .cols > div:first-child { margin-right: 1em;}
 
           .layouts li {
               padding-bottom: 0.5em;;
           }
+
+          .layouts img {
+              width: 300px;
+              margin-top: 10px;
+              border: 1px solid darkgray;
+          }
+
+          ol li,.script {
+              white-space: nowrap;
+          }
       </style>
   </head>
   <body>
@@ -83,11 +93,15 @@ <h2>WSK-Material-Samples</h2>
       <div class="layouts">
           <h2>Layouts</h2>
           <ol>
-              <li><a href="layout-header-drawer/web/index.html">layout-header-drawer</a><br>
-                  - Fixed header, footer scrolls</li>
+              <li><a href="layout-header-drawer/web/index.html">layout-header-drawer<br>
+                  - Fixed header, footer scrolls<br>
+                  <img src="_images/headerfooter-300.jpg"></a>
+              </li>
 
-              <li><a href="layout-header-drawer-footer/web/index.html">layout-header-drawer-footer</a><br>
-                  - Fixed header, fixed footer and bottom-bar</li>
+              <li><a href="layout-header-drawer-footer/web/index.html">layout-header-drawer-footer<br>
+                  - Fixed header, fixed footer and bottom-bar<br>
+                  <img src="_images/bottombar-300.jpg"></a>
+              </li>
           </ol>
       </div>
   </div>