Make placement of cards a little less 'weird'.

The placement of the cards was done using random which has the effect
of sometimes placing cards on top of each other as well as cards being
re-shuffeled on each resize.
Make use of the grid feature.

2 files changed, 18 insertions, 47 deletions

diff --git a/animals/Animal.qml b/animals/Animal.qml
index b315f19..ad2ae24 100755
--- a/animals/Animal.qml
+++ b/animals/Animal.qml
@@ -81,14 +81,14 @@ Rectangle {
         NumberAnimation {
             easing.type: Easing.OutBounce
             easing.amplitude: 100
-            duration: 400
+            duration: 200
         }
     }
     Behavior on opacity {
         NumberAnimation {
             easing.type: Easing.OutBounce
             easing.amplitude: 100
-            duration: 400
+            duration: 200
         }
     }
 
diff --git a/animals/animals.qml b/animals/animals.qml
index 031591f..6968bc1 100644
--- a/animals/animals.qml
+++ b/animals/animals.qml
@@ -5,39 +5,9 @@ Rectangle {
     width: 520
     height: 500
 
-/*
-    GestureArea {
-        anchors.fill: parent
-
-        Tap {
-            when: gesture.state == Qt.GestureStarted
-            script: { console.log("tap wallpaper started");
-
-            }
-        }
-
-        Pan {
-            when: gesture.state == Qt.GestureStarted
-            script: { console.log("pan wallpaper started");
-            }
-        }
-        Pan {
-            when: gesture.state == Qt.GestureUpdated
-            script: {
-                //console.log("pan update dx:" + gesture.delta.x + " dy: " + gesture.delta.y
-                //            + " ox: " + gesture.offset.x);
-            }
-        }
-        Pan {
-            when: gesture.state == Qt.GestureFinished
-            script: { console.log("pan finished");
-            }
-        }
-    }
-*/
-
-Flickable {
-    contentWidth: parent.width*3; contentHeight: parent.height*3;
+    Flickable {
+        contentWidth: parent.width;
+        contentHeight: parent.height * 2;
 
         id: flickable
         width: parent.width
@@ -80,19 +50,20 @@ Flickable {
                 }
             }
 
-            Repeater {
-                model: [ "Andy_ant.png", "ArtFavor_Cartoon_Sheep.png", "johnny_automatic_chicken.png", "johnny_automatic_cow.png",
-                         "liftarn_Ddraig.png", "liftarn_Owl_on_book.png", "johnny_automatic_turkey.png", "lemmling_Cartoon_cow.png",
-                         "johnny_automatic_startled_bears.png", "PeterM_Angry_black_panther.png", "PeterM_Bee.png", "lakeside_witch_over_harvest_moon.png",
-                         "PeterM_Sad_cat.png", "PeterM_Housefly.png", "ArtFavor_Sheep_(Ewe).png", "PeterM_Penguin_with_a_shirt.png",
-                         "johnny_automatic_cow_1.png", "rejon_Ant_Icon.png", "liftarn_Taun_taun.png", "johnny_automatic_hare_and_tabor.png",
-                         "TheresaKnott_frog.png", "johnny_automatic_horse_silhouette.png", "obi_Dragon_s_head.png"
-                     ]
+            Grid {
+                Repeater {
+                    //random: true
+                    model: [ "Andy_ant.png", "ArtFavor_Cartoon_Sheep.png", "johnny_automatic_chicken.png", "johnny_automatic_cow.png",
+                             "liftarn_Ddraig.png", "liftarn_Owl_on_book.png", "johnny_automatic_turkey.png", "lemmling_Cartoon_cow.png",
+                             "johnny_automatic_startled_bears.png", "PeterM_Angry_black_panther.png", "PeterM_Bee.png", "lakeside_witch_over_harvest_moon.png",
+                             "PeterM_Sad_cat.png", "PeterM_Housefly.png", "ArtFavor_Sheep_(Ewe).png", "PeterM_Penguin_with_a_shirt.png",
+                             "johnny_automatic_cow_1.png", "rejon_Ant_Icon.png", "liftarn_Taun_taun.png", "johnny_automatic_hare_and_tabor.png",
+                             "TheresaKnott_frog.png", "johnny_automatic_horse_silhouette.png", "obi_Dragon_s_head.png"
+                         ]
 
-                Animal {
-                    image: "images/" + modelData
-                    x: Math.floor(Math.random() * (contentRect.width/(width+5)) ) * (width+5)
-                    y: Math.floor(Math.random() * (contentRect.height/(height+5) ) ) * (height+5)
+                    Animal {
+                        image: "images/" + modelData
+                    }
                 }
             }
         }