Merge pull request #68 from Quantum-P3/fix/survey-contextmenu

src/main/webapp/app/entities/encuesta/list/encuesta.component.html

@@ -27,7 +27,7 @@
     </div>
   </h2>
 
-  <jhi-alert-error></jhi-alert-error>
+  <!-- <jhi-alert-error></jhi-alert-error> -->
 
   <div *ngIf="successPublished" class="alert alert-success alert-dismissible fade show" role="alert">
     Su encuesta fue publicada exitosamente
@@ -42,11 +42,11 @@
 
   <form class="ds-form">
     <div class="input-group">
-      <div class="col-3">
+      <div class="ds-filter">
         <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
         <input type="text" name="searchString" placeholder="Buscar por nombre..." [(ngModel)]="searchString" />
       </div>
-      <div class="col-3">
+      <div class="ds-filter">
         <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
         <select name="accesoEncuestas" id="accesoEncuesta" [(ngModel)]="accesoEncuesta" style="width: 200px">
           <option value="" selected="selected" disabled="disabled">Filtrar por acceso</option>
@@ -55,7 +55,7 @@
           <option value="Private">Privadas</option>
         </select>
       </div>
-      <div class="col-3">
+      <div class="ds-filter">
         <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
         <select name="estadoEncuesta" id="estadoEncuesta" [(ngModel)]="estadoEncuesta" style="width: 200px">
           <option value="" selected="selected" disabled="disabled">Filtrar por estado</option>
@@ -132,7 +132,7 @@
       </ul>
     </div>
     <div
-      class="ds-list--entity card-encuesta lift"
+      class="ds-list--entity"
       *ngFor="
         let encuesta of encuestas! | filter: 'nombre':searchString | filter: 'acceso':accesoEncuesta | filter: 'estado':estadoEncuesta;
         trackBy: trackId

src/main/webapp/app/entities/encuesta/list/encuesta.component.ts

@@ -266,7 +266,6 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
           })
         )
         .subscribe(data => {
-          console.log(data);
           this.encuestaencontrada = data;
         });
 
@@ -450,13 +449,8 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
 
     if (event.type === 'contextmenu') {
       event.preventDefault();
-
-      debugger;
-
       this.selectedSurveyId = event.target.dataset.id;
-      console.log(this.selectedSurveyId);
 
-      debugger;
       let res = await this.encuestaService.find(this.selectedSurveyId).toPromise();
       this.selectedSurvey = res.body;
       this.isPublished = this.selectedSurvey!.estado === 'DRAFT'; // QUE SE LE MUESTRE CUANDO ESTE EN DRAFT
@@ -491,9 +485,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
     }
   }
 
-  publish() {
+  publish(): void {
-    debugger;
-
     const modalRef = this.modalService.open(EncuestaPublishDialogComponent, { size: 'lg', backdrop: 'static' });
     modalRef.componentInstance.encuesta = this.selectedSurvey;
     // unsubscribe not needed because closed completes on modal close

src/main/webapp/content/scss/paper-dashboard.scss

@@ -99,3 +99,5 @@
 @import 'paper-dashboard/datasurvey-table';
 @import 'paper-dashboard/datasurvey-contextmenu';
 @import 'paper-dashboard/datasurvey-survey-update';
+@import 'paper-dashboard/datasurvey-home';
+@import 'paper-dashboard/datasurvey-filter';

src/main/webapp/content/scss/paper-dashboard/_datasurvey-filter.scss

@@ -0,0 +1,3 @@
+.ds-filter:not(:first-of-type) {
+  margin-left: 2rem;
+}

src/main/webapp/content/scss/paper-dashboard/_datasurvey-home.scss

@@ -0,0 +1,112 @@
+/**
+  Cards
+**/
+.lift {
+  box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);
+  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.lift:hover {
+  transform: translateY(-0.3333333333rem);
+  box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.25);
+}
+.lift:active {
+  transform: none;
+  box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);
+}
+
+.lift-sm {
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2);
+}
+.lift-sm:hover {
+  transform: translateY(-0.1666666667rem);
+  box-shadow: 0 0.25rem 1rem 0 rgba(33, 40, 50, 0.25);
+}
+.lift-sm:active {
+  transform: none;
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2);
+}
+
+.card-encuesta {
+  border-radius: 12px;
+  background-color: #ffffff;
+  margin-bottom: 20px;
+  position: relative;
+  border: 0 none;
+}
+
+.card-encuesta.lift {
+  text-decoration: none;
+  color: inherit;
+}
+
+.card-flag {
+  position: absolute;
+  font-size: 0.7rem;
+  padding: 0.3rem 0.5rem;
+  line-height: 1;
+}
+
+.card-flag-dark {
+  background-color: rgba(33, 40, 50, 0.7);
+  color: #fff;
+}
+
+.card-flag-light {
+  background-color: rgba(255, 255, 255, 0.7);
+  color: #69707a;
+}
+
+.card-flag-lg {
+  font-size: 0.9rem;
+  padding: 0.5rem 0.65rem;
+}
+
+.card-flag-top-right {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  top: 0.5rem;
+  right: 0;
+}
+
+.card-flag-top-left {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  top: 0.5rem;
+  left: 0;
+}
+
+.card-encuesta .entity-icon--star {
+  color: #ffcc47;
+  margin-right: 0.2rem;
+}
+
+.card-encuesta .card-title {
+  font-size: 2em;
+}
+
+.card-encuesta .tag {
+  font-size: 0.8rem;
+  color: #f8f8f8;
+  margin-top: 0.5rem;
+  padding: 0.2rem 1.5rem;
+  background-color: #2962ff94;
+  border-radius: 15px;
+}
+
+.card-encuesta .subtitle {
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 0.9rem;
+}
+
+.card-encuesta .btn-card {
+  padding: 11px 10px !important;
+}
+
+.border-cyan {
+  border-color: #00cfd5 !important;
+}
+
+.py-10 {
+  padding-top: 6rem !important;
+  padding-bottom: 6rem !important;
+}

src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss

@@ -31,6 +31,13 @@
     padding: 0.5rem;
     margin: 1rem;
     word-wrap: break-word;
+    transition: all 0.1s ease-in-out;
+
+    &:hover {
+      // top: -3px;
+      // box-shadow: rgba(80, 80, 80, 0.15) 0px 5px 15px;
+      background-color: #f5f9fd;
+    }
 
     * {
       pointer-events: none;
@@ -132,116 +139,3 @@
     background-color: #e8f0fe !important;
   }
 }
-
-/**
-  Cards
-**/
-.lift {
-  box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);
-  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-.lift:hover {
-  transform: translateY(-0.3333333333rem);
-  box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.25);
-}
-.lift:active {
-  transform: none;
-  box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);
-}
-
-.lift-sm {
-  box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2);
-}
-.lift-sm:hover {
-  transform: translateY(-0.1666666667rem);
-  box-shadow: 0 0.25rem 1rem 0 rgba(33, 40, 50, 0.25);
-}
-.lift-sm:active {
-  transform: none;
-  box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2);
-}
-
-.card-encuesta {
-  border-radius: 12px;
-  background-color: #ffffff;
-  margin-bottom: 20px;
-  position: relative;
-  border: 0 none;
-}
-
-.card-encuesta.lift {
-  text-decoration: none;
-  color: inherit;
-}
-
-.card-flag {
-  position: absolute;
-  font-size: 0.7rem;
-  padding: 0.3rem 0.5rem;
-  line-height: 1;
-}
-
-.card-flag-dark {
-  background-color: rgba(33, 40, 50, 0.7);
-  color: #fff;
-}
-
-.card-flag-light {
-  background-color: rgba(255, 255, 255, 0.7);
-  color: #69707a;
-}
-
-.card-flag-lg {
-  font-size: 0.9rem;
-  padding: 0.5rem 0.65rem;
-}
-
-.card-flag-top-right {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
-  top: 0.5rem;
-  right: 0;
-}
-
-.card-flag-top-left {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  top: 0.5rem;
-  left: 0;
-}
-
-.card-encuesta .entity-icon--star {
-  color: #ffcc47;
-  margin-right: 0.2rem;
-}
-
-.card-encuesta .card-title {
-  font-size: 2em;
-}
-
-.card-encuesta .tag {
-  font-size: 0.8rem;
-  color: #f8f8f8;
-  margin-top: 0.5rem;
-  padding: 0.2rem 1.5rem;
-  background-color: #2962ff94;
-  border-radius: 15px;
-}
-
-.card-encuesta .subtitle {
-  color: rgba(0, 0, 0, 0.54);
-  font-size: 0.9rem;
-}
-
-.card-encuesta .btn-card {
-  padding: 11px 10px !important;
-}
-
-.border-cyan {
-  border-color: #00cfd5 !important;
-}
-
-.py-10 {
-  padding-top: 6rem !important;
-  padding-bottom: 6rem !important;
-}