From 58bc3947f52d376e6235ecc24852111f9f623718 Mon Sep 17 00:00:00 2001
From: Ismo Vuorinen <ismo@ivuorinen.net>
Date: Tue, 10 Dec 2013 14:19:10 +0200
Subject: [PATCH] =?UTF-8?q?Javascriptin=20tarkastus,=20virheviestejen=20ty?=
 =?UTF-8?q?ylittely=C3=A4=20ja=20vaihtoehtoinen=20tapa=20n=C3=A4ytt=C3=A4?=
 =?UTF-8?q?=C3=A4=20pohjakuvien=20thumbnailit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 application/views/_header.php | 10 +++++---
 application/views/new.php     | 43 +++++++++++++++++++++++++++++++----
 assets/css/style.css          | 18 +++++++++++++++
 assets/js/scripts.js          |  4 +++-
 4 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/application/views/_header.php b/application/views/_header.php
index 12c8b90..65800c6 100644
--- a/application/views/_header.php
+++ b/application/views/_header.php
@@ -165,8 +165,12 @@ if (isset($user) and ! empty($user)) {
     </div>
 
     <noscript>
-        <div data-alert class="alert-box alert">
-            Sinulla ei ole selaimesi JavaScript-tuki päällä.<br>
-            <a href="http://www.enable-javascript.com" target="_blank">Katso täältä ohjeet tuen päälle kytkemiseen.</a>
+        <div class="row noscript">
+            <div class="large-12 columns">
+                <div data-alert class="alert-box alert">
+                    Sinulla ei ole selaimesi JavaScript-tuki päällä.
+                    <a href="http://www.enable-javascript.com" target="_blank">Katso täältä ohjeet tuen päälle kytkemiseen.</a>
+                </div>
+            </div>
         </div>
     </noscript>
diff --git a/application/views/new.php b/application/views/new.php
index 3b30e6e..fa9098a 100644
--- a/application/views/new.php
+++ b/application/views/new.php
@@ -177,17 +177,50 @@ if (! empty($images)) {
     </div>
 
     <div class="large-6 small-12 columns">
-        <div class="panel previewpanelclear">
+        <div class="panel previewpanelclear requires-js">
             <h2>Esikatselu</h2>
             <div id="previewpanel">
                 <div id="message_title_preview">Moikka!</div>
                 <div id="message_text_preview">Terveisiä täältä internetistä!</div>
                 <img id="previewimage" src="http://dummyimage.com/800x600/4d494d/686a82.gif&text=placeholder+image">
             </div>
+            <p>Voit raahata tässä tekstejä parempiin kohtiin.</p>
+        </div>
+        <div class="panel noscript">
+            <p>
+                Jos selaimessanne olisi JavaScript-tuki päällä,
+                tässä näkyisi hieno esikatselu kortistanne
+                kirjoittamanne tekstin kera.
+                <a target="_blank" href="http://www.enable-javascript.com/">Ohjeet tuen päällepistämiseen</a>.
+            </p>
+            <table>
+<?php
+if (! empty($images)) {
+    foreach ($images as $i => $image) {
+
+        $url  = $image->card_url;
+        $name = $image->card_alt . ' (#' . $i . ')';
+
+        ?>
+                <tr>
+                    <td width="120" class="thumb"><img src="<?php echo $url; ?>" alt="<?php echo $name; ?>"></td>
+                    <td class="details">
+                        Kuva: <strong><?php echo $name; ?></strong><br>
+                        Tekijä: <strong><?php echo $image->card_author; ?></strong><br>
+                    </td>
+                </tr>
+                <?php
+            echo "\n";
+    }
+}
+?>
+            </table>
         </div>
 
-<?php if (ENVIRONMENT == "development"): ?>
-        <div class="panel toteutuva">
+<?php
+if (ENVIRONMENT == "development") {
+    ?>
+        <div class="panel toteutuva requires-js">
             <a href="javascript:return false;" class="updatepreview">
                 <img src="http://dummyimage.com/800x600/4d494d/686a82.gif&text=toteutuva" width="800" height="600">
             </a>
@@ -195,8 +228,8 @@ if (! empty($images)) {
         </div>
 
 
-<?php
-endif;
+    <?php
+}
 ?>
         <div class="panel">
             <p>Tiedot kerätään vain postikorttien lähettämiseen ja halutessasi arvontaan osallistumista varten.</p>
diff --git a/assets/css/style.css b/assets/css/style.css
index 843d2a9..b303141 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -12,6 +12,24 @@ body {
     font-weight: 300;
 }
 
+html.no-js .requires-js,
+html.js .noscript {
+    display: none;
+}
+
+html.no-js .noscript {
+    display: block;
+}
+
+.alert {
+    text-align: center;
+}
+
+.alert a {
+    color: #fff;
+    border-bottom: 1px dashed #fff;
+}
+
 body footer {
     padding-top: 30px;
 }
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 6171893..6bc9e74 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -1,6 +1,8 @@
 /* jslint node: true */
 jQuery(document).ready(function($) {
-   "use strict";
+    "use strict";
+
+    $("html").removeClass('no-js').addClass('js');
 
     // Our Foundation trigger
     $(document).foundation();