diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-02 20:45:28 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-02 20:45:28 +1100 |
| commit | d78f52ab592db4d4cf968725bbe777606972ffa0 (patch) | |
| tree | 8313d6e926e595577222a7ef06309bcd43052b0f | |
| parent | 5a9d29a4ad6fc7a6ccc6a75fa361a20048a77552 (diff) | |
Attempt to arrange tiles using flex and gridarrange-with-flex
| -rw-r--r-- | src/App.vue | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/src/App.vue b/src/App.vue index 10537d6..6c2e619 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,10 +11,26 @@ export default { </script> <template> - <div class="bg-black flex flex-row flex-wrap justify-center"> - <img v-for="tile in tiles" :src="'/src/assets/' + tile.name + '.jpg'" :alt="tile.name" :id="tile.name" - @click="$event.target.style.transform = 'translate(20%,30%)'" - class="m-1 flex-auto transition-transform duration-300"/> + <div class="h-[100vh] bg-black"> + <div class="flex flex-row flex-wrap gap-1 p-1"> + <img v-for="tile in tiles" :src="'/src/assets/' + tile.name + '.jpg'" :alt="tile.name" :id="tile.name" + @click="$event.target.style.transform = 'translate(20%,30%)'" + class="max-w-full transition-transform duration-300"/> + </div> + <!-- + <div class="flex flex-row gap-1 p-1"> + <img v-for="tile in tiles" :src="'/src/assets/' + tile.name + '.jpg'" :alt="tile.name" :id="tile.name" + @click="$event.target.style.transform = 'translate(20%,30%)'" + class="w-full transition-transform duration-300"/> + </div> + --> + <!-- + <div class="flex flex-col max-h-full gap-1 p-1"> + <img v-for="tile in tiles" :src="'/src/assets/' + tile.name + '.jpg'" :alt="tile.name" :id="tile.name" + @click="$event.target.style.transform = 'translate(20%,30%)'" + class="h-full mr-auto transition-transform duration-300"/> + </div> + --> </div> </template> |