- Creating cards now works. We use Open Sans to make texts beautiful

- Added card counts to default controller
- Load images from our basecards folder in assets
- Administration now includes card counts
- Other misc improvements

assets/css/style.css

@@ -21,6 +21,28 @@ h1, h2, h3 {
     font-family: Georgia, 'Sans serif';
 }
 
+input:disabled, label.disabled {
+    text-decoration: line-through;
+}
+
+table {
+    width: 100%;
+}
+table.valign thead tr,
+.valign {
+    vertical-align: middle;
+}
+
+.zebra {
+    background: #aeaeae;
+}
+
+.valign-top {
+    vertical-align: top;
+}
+table thead th button {
+    margin: 0px;
+}
 .center {
     text-align: center;
 }
@@ -139,14 +161,6 @@ h1, h2, h3 {
     background: #333;
 }
 
-#message_title_preview {
-    font-size: 30px;
-    font-weight: bold;
-}
-#message_text_preview {
-    font-size: 18px;
-}
-
 #message_title_preview,
 #message_text_preview {
     position:   relative;
@@ -159,13 +173,22 @@ h1, h2, h3 {
 #message_title_preview {
     top:        20px;
     left:       10px;
+    font-size:  30px;
+    font-weight: 700;
 }
 #message_text_preview {
     top:        40px;
     left:       10px;
+    font-size: 20px;
+    line-height: 140%;
     white-space: pre;
 }
 
+.toteutuva .url {
+    white-space: pre;
+}
+
+#previewpanel:hover .ui-draggable,
 .ui-draggable-dragging,
 .ui-resizable-resizing {
     cursor:     move;

assets/js/dev.js

@@ -0,0 +1,71 @@
+jQuery(document).ready(function($) {
+
+    /**
+     * This is only relevant if we are in development mode.
+     * Purpose of this is to provide easy way to test how our
+     * image gets made, runs only on development mode.
+     *
+     * $(".toteutuva .url") is a <small> -field that shows our
+     * query to /preview/{querystring}, what in part generates
+     * our preview image as $("#previewimage")
+     *
+     * Both of these can be found in application/views/new.php
+     */
+
+    $('.updatepreview').on('click', function () {
+        var query = [];
+        var img = '/ystavakylaecard/preview/';
+
+
+        $.each($('#ecard_form')[0].elements, function(i,o) {
+            var _this = $(o);
+
+            if (_this.attr('name') == 'sender_name' ||
+                _this.attr('name') == 'sender_email' ||
+                _this.attr('name') == 'receiver_name' ||
+                _this.attr('name') == 'receiver_email' ||
+                _this.attr('name') == 'select_image' ||
+                _this.attr('name') == 'message_title' ||
+                _this.attr('name') == 'message_text' ||
+                _this.attr('name') == 'participate' ||
+                _this.attr('name') == 'publiccard' ||
+                _this.attr('name') == 'submit'
+            ) {
+
+            } else {
+                var str = _this.attr('name') + '=' + _this.attr('value');
+                query.push(str);
+            }
+        });
+
+        var select_image_src = $('#previewimage').attr('src');
+        select_image_src     = select_image_src.replace(/\//g, "-:-");
+
+        var select_image   = 'select_image=' + select_image_src;
+        var message_title  = 'message_title=' + $('#message_title_preview').text();
+        var message_text   = 'message_text='  + $('#message_text_preview').text();
+
+        message_text       = message_text.replace(/\r/g, ";-;");
+        message_text       = message_text.replace(/\n/g, ";:;");
+
+        query.push(
+            message_title,
+            message_text,
+            select_image
+        );
+
+        img = img + encodeURIComponent( query.toString() );
+
+        $('.toteutuva img').attr("src", img);
+
+        var prevurl = decodeURIComponent(img);
+        prevurl = prevurl.replace(/,/g,  "\n");
+        prevurl = prevurl.replace(/;-;/g, "\r");
+        prevurl = prevurl.replace(/;:;/g, "\n");
+        prevurl = prevurl.replace(/preview\//g, "preview\/\n");
+        $('.toteutuva .url').text(prevurl);
+
+        //alert(img);
+    });
+
+});

assets/js/scripts.js

@@ -12,6 +12,16 @@ jQuery(document).ready(function($) {
         }
     });
 
+    // Provide zebra striping to our table
+    $('table tbody tr:odd').addClass("zebra");
+
+    // Also make parent element have class="active"
+    $('.active').parent().addClass("active");
+
+    // Add class "disabled" (text-decoration: line-through)
+    // to disabled elements parent, usually <label>
+    $("input:disabled").parent().addClass("disabled");
+
     // Change jQuery textarea hook default behavior
     $.valHooks.textarea = {
         get: function( elem ) {
@@ -52,13 +62,19 @@ jQuery(document).ready(function($) {
             scroll: false,
             stop: function(e, ui) {
 
+                // PHP imagettftext() position is set from bottom left corner
+                var height = $("#"+this.id).height();
+                var bottom = ui.position.top + height;
+
+                //alert("#" + this.id + " = b:" + bottom + " / h: " + height);
+
                 if (this.id === 'message_title_preview') {
-                    $('#placeOf_message_title_y').val(ui.position.top);
+                    $('#placeOf_message_title_y').val(bottom);
                     $('#placeOf_message_title_x').val(ui.position.left);
                 }
 
                 if (this.id === 'message_text_preview') {
-                    $('#placeOf_message_text_y').val(ui.position.top);
+                    $('#placeOf_message_text_y').val(bottom);
                     $('#placeOf_message_text_x').val(ui.position.left);
                 }
             }
@@ -130,10 +146,14 @@ jQuery(document).ready(function($) {
         var title_p = title.position();
         var text_p  = text.position();
 
+        // We count from bottom left corner
+        var title_y = title_p.top + title.height();
+        var text_y  = text_p.top  + text.height() - 30; // Manual fix
+
         // Position of elements
-        $('#placeOf_message_title_y').val(title_p.top);
+        $('#placeOf_message_title_y').val(title_y);
         $('#placeOf_message_title_x').val(title_p.left);
-        $('#placeOf_message_text_y').val(text_p.top);
+        $('#placeOf_message_text_y').val(text_y);
         $('#placeOf_message_text_x').val(text_p.left);
 
         // Size of elements