Fix iteration over the photos object, improve layout, add delete button

Author: avivace

src/components/Gallery.vue

@@ -7,28 +7,35 @@
 				<v-toolbar-title>Galleria</v-toolbar-title>
 			</v-toolbar>
 			<v-content>
-				Placeholder content {{ photos.length }}
 				<v-layout>
 					<v-flex xs12 sm8 offset-sm2>
+						<template v-if="photos.length == 0">
+							<br>
+							<h3>Galleria vuota!</h3>
+							</template>
+							<template v-else>
 						<v-card>
 							<v-container grid-list-sm fluid>
 								<v-layout row wrap>
-									<v-flex v-for="n in photos.length - 1" :key="n" xs3 d-flex>
+									<v-flex v-for="n in photos.length" :key="n" xs3 d-flex>
 										<v-card flat tile class="d-flex">
-											
-											<v-img :src="CBv1+'/photos/'+photos[n].name" aspect-ratio="1" class="grey lighten-2">
-												<span> {{ photos[n].name }} </span>
-												<span v-on:click="deletePhoto(photos[n].name)"> Elimina </span>
-												<v-layout slot="placeholder" fill-height align-center justify-center ma-0>
-													<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
-												</v-layout>
-											</v-img>
-										</a>
+											<v-layout column>
+												<div class="subheading">{{ photos[n-1].name }} <v-btn v-on:click="deletePhoto(photos[n-1].name)" flat icon color="red lighten-2">
+														<v-icon>delete</v-icon>
+													</v-btn>
+												</div>
+												<v-img :src="CBv1+'/photos/'+photos[n-1].name" aspect-ratio="1" class="grey lighten-2">
+													<v-layout slot="placeholder" fill-height align-center justify-center ma-0>
+														<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
+													</v-layout>
+												</v-img>
+											</v-layout>
 										</v-card>
 									</v-flex>
 								</v-layout>
 							</v-container>
 						</v-card>
+					</template>
 					</v-flex>
 				</v-layout>
 			</v-content>
@@ -41,11 +48,6 @@ import sidebar from "../components/Sidebar"
 export default {
 	components: { sidebar },
 	name: 'HelloWorld',
-	watch: {
-		photosN: function() {
-			this.l = this.photos.length
-		}
-	},
 	mounted() {
 		this.getPhotos()
 	},
@@ -61,7 +63,7 @@ export default {
 		deletePhoto: function(name) {
 			let axios = this.$axios
 			let CBv1 = this.$data.CBv1
-			axios.delete(CBv1 + '/photos/'+name)
+			axios.delete(CBv1 + '/photos/' + name)
 				.then(function(response) {
 					this.getPhotos()
 				}.bind(this))
@@ -83,3 +85,12 @@ export default {
 };
 
 </script>
+<style scoped>
+.v-card{
+	margin: 10px;
+}
+.container{
+	padding-top: 0px;
+	margin-top:0px;
+}
+</style>