src/app/discoteca.ts

@@ -43,7 +43,7 @@ export class Discoteca {
         this.descripcion = desc;
     }
 
-    get Descripcion(): string{
+    getDescripcion(): string{
         return this.descripcion;
     }
 }

src/app/perfil-discoteca/perfil-discoteca.page.html

@@ -8,9 +8,10 @@
 
 <ion-content [fullscreen]="true">
 
-    <div class='fotoPerfil'>
+    <div class='main'>
       <ion-grid>
       <ion-row>
+      <div class='fotoPerfil'>
           <ion-img class="fotoPerfil" width="100%" height="100%" [src]='fotoSrc' alt='barraquinha'></ion-img>
           <div class="textoPie">{{nombre}}</div>
           <div class="menuBotones">
@@ -30,13 +31,6 @@
               <ion-icon name="create"></ion-icon>
             </button>
     
-            <button mat-menu-item (click)="saveEdit()" label="guardar" [disabled]='editDisabled'>
-            <ion-icon name="save"></ion-icon>
-            </button>
-    
-            <button mat-menu-item (click)="cancelEdit()" [disabled]='editDisabled'>
-              Cancelar
-            </button>
     
             <button mat-menu-item (click)="addEvento()">
               <ion-icon name="add-circle-outline">
@@ -45,6 +39,18 @@
             </button>
           </mat-menu>
           </div>
+      </div>
+      </ion-row>
+
+      <ion-row>
+        <div class="botonesHidden">
+          <button (click)="saveEdit()" label="guardar" [disabled]='editDisabled' id="botonesHidden1">
+            <ion-icon name="save"></ion-icon>
+            </button>
+            <button (click)="cancelEdit()" [disabled]='editDisabled' id="botonesHidden2">
+              Cancelar
+            </button>
+        </div>
       </ion-row>
 
 
@@ -57,9 +63,17 @@
             <div [contentEditable]='editEnabled'>{{localizacion}}</div>
           </div>
         </ion-col>
-        
         <ion-col>
-          <div>{{descripcion}}</div>
+          <div>
+            <mat-card>
+              <mat-card-header>
+                Descripción
+              </mat-card-header>
+              <mat-card-content>
+                {{descripcion}}
+              </mat-card-content>
+            </mat-card>
+          </div>
         </ion-col>
       </ion-row>
 

src/app/perfil-discoteca/perfil-discoteca.page.scss

@@ -6,16 +6,21 @@
   }
     
     *{
-      padding: 5px;
+      padding: 10px;
       display: block;
       margin: auto;
     }
     
-    .fotoPerfil{
-        text-align: end;
+    .main{
       max-width: 800px;
       max-height: auto;
       margin: auto;
+      text-align: justify;
+    }
+
+    .fotoPerfil{
+        text-align: end;
+
     }
     
     .textoPie{
@@ -35,6 +40,8 @@
       float: left;
       position: relative;
       margin: auto;
+      text-align: right;
+      padding-right: 50px;
         
     }
     
@@ -43,9 +50,8 @@
     }
     
     .galeria{
-      
-        max-width: 300px;
-        max-height: auto;
+        text-align: center;
+        padding: 30px;
         margin: auto;
     }
     
@@ -76,6 +82,17 @@
       height: 200px;
     }
 
+    mat-menu{
+      position: relative;
+      margin: inherit;
+      color: pink;
+    }
+
+    mat-card-header{
+      text-align: right;
+      font-weight: bold;
+    }
+
 
     button{
       background-color: transparent;
@@ -89,7 +106,7 @@
     .menuBotones{
       position: relative;
       float: left;
-      bottom: 40px;
+      bottom: 60px;
       left: 20px;
       
     }

src/app/perfil-discoteca/perfil-discoteca.page.ts

@@ -20,6 +20,7 @@ export class PerfilDiscotecaPage implements OnInit {
   nombre: string;
   telefono: number;
   localizacion: string;
+  descripcion: string;
   fotoSrc: string;
   fotoLoaded: string;
   someURL: string;
@@ -48,6 +49,7 @@ export class PerfilDiscotecaPage implements OnInit {
     this.getTelefono();
     this.getLocalizacion();
     this.getEventos();
+    this.getDescripcion();
     this.editDisabled="true";
     this.editEnabled="false";
     this.fotoSrc = '../assets/img/barraca.jpg';
@@ -73,6 +75,10 @@ export class PerfilDiscotecaPage implements OnInit {
     this.eventos = this.tab1Service.getEventos();
   }
 
+  getDescripcion(): void{
+    this.descripcion = this.tab1Service.getDescripcion();
+  }
+
   cargarImagen(){
       this.fotoSrc = this.someURL;
   }

src/app/tab1/tab1.service.ts

@@ -32,6 +32,7 @@ export class Tab1Service implements OnInit{
     this.discoteca.setNombre('Barraca');
     this.discoteca.setTelefono(666666666);
     this.discoteca.setLocalizacion('Calle del Barquillo');
+    this.discoteca.setDescripcion('Barraca es una discoteca inaugurada en 1965 que tuvo su gran auge en los años 80, cuando se consolidó como la discoteca de mayor importancia de la movida valenciana, durante la conocida Ruta Destroy.');
     this.galeria = [];
     this.initEventos();
     this.editarEvento = false;
@@ -52,6 +53,10 @@ export class Tab1Service implements OnInit{
     return this.discoteca.getLocalizacion();
   }
 
+  getDescripcion(): string{
+    return this.discoteca.getDescripcion();
+  }
+
   getEventos(): Evento[]{
     return this.eventos;
   }