Javascriptin tarkastus, virheviestejen tyylittelyä ja vaihtoehtoinen tapa näyttää pohjakuvien thumbnailit

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>

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>

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;
 }

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();