Merge pull request #52 from Quantum-P3/feature/US-20

Add listar encuestas del usuario

src/main/webapp/app/entities/encuesta/encuesta.module.ts

@@ -5,9 +5,10 @@ import { EncuestaDetailComponent } from './detail/encuesta-detail.component';
 import { EncuestaUpdateComponent } from './update/encuesta-update.component';
 import { EncuestaDeleteDialogComponent } from './delete/encuesta-delete-dialog.component';
 import { EncuestaRoutingModule } from './route/encuesta-routing.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
-  imports: [SharedModule, EncuestaRoutingModule],
+  imports: [SharedModule, EncuestaRoutingModule, FontAwesomeModule],
   declarations: [EncuestaComponent, EncuestaDetailComponent, EncuestaUpdateComponent, EncuestaDeleteDialogComponent],
   entryComponents: [EncuestaDeleteDialogComponent],
 })

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

@@ -1,23 +1,30 @@
 <div>
   <h2 id="page-heading" data-cy="EncuestaHeading">
-    <span jhiTranslate="dataSurveyApp.encuesta.home.title">Encuestas</span>
+    <div class="d-flex flex-sm-row flex-column justify-content-between align-items-center">
+      <div>
+        <span class="ds-title" jhiTranslate="dataSurveyApp.encuesta.home.title">Encuestas</span>
+        <p class="ds-subtitle">Cree encuestas y publiquelas mundialmente.</p>
+      </div>
 
-    <div class="d-flex justify-content-end">
+      <div>
-      <button class="btn btn-info mr-2" (click)="loadAll()" [disabled]="isLoading">
+        <button type="button" class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
-        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
+          <fa-icon icon="sync" [spin]="isLoading"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="dataSurveyApp.encuesta.home.refreshListLabel"
-        <span jhiTranslate="dataSurveyApp.encuesta.home.refreshListLabel">Refresh List</span>
+            >Refresh List</span
+          >
         </button>
 
         <button
-        id="jh-create-entity"
+          *ngIf="!isAdmin() && isAuthenticated()"
-        data-cy="entityCreateButton"
+          type="button"
-        class="btn btn-primary jh-create-entity create-encuesta"
+          class="ds-btn ds-btn--primary"
-        [routerLink]="['/encuesta/new']"
+          (click)="resetForm()"
+          data-toggle="modal"
+          data-target="#crearEncuesta"
         >
-        <fa-icon icon="plus"></fa-icon>
+          Crear encuesta
-        <span jhiTranslate="dataSurveyApp.encuesta.home.createLabel"> Create a new Encuesta </span>
         </button>
       </div>
+    </div>
   </h2>
 
   <jhi-alert-error></jhi-alert-error>
@@ -28,7 +35,177 @@
     <span jhiTranslate="dataSurveyApp.encuesta.home.notFound">No encuestas found</span>
   </div>
 
-  <div class="table-responsive" id="entities" *ngIf="encuestas && encuestas.length > 0">
+  <!-- Lista de Encuestas del Usuario -->
+  <div class="ds-list" (contextmenu)="openContextMenu($event)">
+    <!-- Context Menu -->
+    <div class="ds-contextmenu ds-contextmenu--closed" id="contextmenu">
+      <ul id="ds-context-menu__list">
+        <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-create--separator">
+          <li>
+            <button
+              *ngIf="!isAdmin() && isAuthenticated()"
+              type="button"
+              (click)="resetForm()"
+              data-toggle="modal"
+              data-target="#crearEncuesta"
+            >
+              <fa-icon class="contextmenu__icon" [icon]="faPlus"></fa-icon>Crear
+            </button>
+          </li>
+        </div>
+        <div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-edit--separator">
+          <li class="d-justify justify-content-start">
+            <button type="button" id="contextmenu-edit"><fa-icon class="contextmenu__icon" [icon]="faEdit"></fa-icon>Editar</button>
+          </li>
+          <li>
+            <button type="button" id="contextmenu-duplicate"><fa-icon class="contextmenu__icon" [icon]="faCopy"></fa-icon>Duplicar</button>
+          </li>
+          <li>
+            <button type="button" id="contextmenu-rename">
+              <fa-icon class="contextmenu__icon" [icon]="faFile"></fa-icon>Cambiar nombre
+            </button>
+          </li>
+          <li>
+            <button type="button" id="contextmenu-share"><fa-icon class="contextmenu__icon" [icon]="faShareAlt"></fa-icon>Compartir</button>
+          </li>
+        </div>
+        <div class="ds-contextmenu__divider" id="contextmenu-delete--separator">
+          <li>
+            <button type="button"><fa-icon class="contextmenu__icon" [icon]="faTrashAlt"></fa-icon>Eliminar</button>
+          </li>
+        </div>
+      </ul>
+    </div>
+
+    <div
+      class="ds-list--entity"
+      *ngFor="let encuesta of encuestas; trackBy: trackId"
+      (dblclick)="openSurvey($event)"
+      (click)="selectSurvey($event)"
+      [attr.data-id]="encuesta.id"
+    >
+      <div class="entity-header">
+        <div class="entity-state--container">
+          <div
+            class="entity-state"
+            [ngClass]="
+              encuesta.estado == 'DRAFT' ? 'entity-state--blue' : encuesta.estado == 'ACTIVE' ? 'entity-state--green' : 'entity-state--red'
+            "
+            style="animation-delay: 0s"
+          ></div>
+          <div
+            class="entity-state"
+            [ngClass]="
+              encuesta.estado == 'DRAFT' ? 'entity-state--blue' : encuesta.estado == 'ACTIVE' ? 'entity-state--green' : 'entity-state--red'
+            "
+            style="animation-delay: 1s"
+          ></div>
+          <div
+            class="entity-state entity-state--blue"
+            [ngClass]="
+              encuesta.estado == 'DRAFT' ? 'entity-state--blue' : encuesta.estado == 'ACTIVE' ? 'entity-state--green' : 'entity-state--red'
+            "
+            style="animation-delay: 2s"
+          ></div>
+          <div
+            class="entity-state entity-state--blue"
+            [ngClass]="
+              encuesta.estado == 'DRAFT' ? 'entity-state--blue' : encuesta.estado == 'ACTIVE' ? 'entity-state--green' : 'entity-state--red'
+            "
+            style="animation-delay: 3s"
+          ></div>
+        </div>
+        <div class="entity-share">
+          <span><fa-icon [icon]="faShareAlt"></fa-icon></span>
+        </div>
+      </div>
+
+      <div class="entity-body">
+        <div class="entity-body--row">
+          <span *ngIf="encuesta.acceso == 'PUBLIC'" class="title"
+            ><fa-icon class="entity-icon--access" [icon]="faUnlock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre | titlecase }}</span
+          >
+        </div>
+        <div class="entity-body--row">
+          <span *ngIf="encuesta.acceso == 'PRIVATE'" class="title mt-2"
+            ><fa-icon class="entity-icon--access" [icon]="faLock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre | titlecase }}</span
+          >
+        </div>
+        <div class="entity-body--row">
+          <span class="mt-2"
+            ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon>&nbsp;&nbsp;{{
+              encuesta.fechaCreacion | formatShortDatetime | titlecase
+            }}</span
+          >
+        </div>
+        <div class="entity-body--row">
+          <span class="subtitle mt-2">{{ encuesta.descripcion | titlecase }}</span>
+        </div>
+        <div class="entity-body--row">
+          <span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
+        </div>
+        <div class="entity-body--row">
+          <fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon
+          ><fa-icon *ngFor="let i of [].constructor(5 - encuesta.calificacion!)" class="entity-icon--star--off" [icon]="faStar"></fa-icon>
+        </div>
+      </div>
+
+      <!-- <p>
+        <a [routerLink]="['/encuesta', encuesta.id, 'view']">{{ encuesta.id }}</a>
+      </p>
+      <p>{{ encuesta.nombre }}</p>
+      <p>{{ encuesta.descripcion }}</p>
+      <p>{{ encuesta.fechaCreacion | formatMediumDatetime }}</p>
+      <p>{{ encuesta.fechaPublicacion | formatMediumDatetime }}</p>
+      <p>{{ encuesta.fechaFinalizar | formatMediumDatetime }}</p>
+      <p>{{ encuesta.fechaFinalizada | formatMediumDatetime }}</p>
+      <p>{{ encuesta.calificacion }}</p>
+      <p jhiTranslate="{{ 'dataSurveyApp.AccesoEncuesta.' + encuesta.acceso }}">{{ encuesta.acceso }}</p>
+      <p>{{ encuesta.contrasenna }}</p>
+      <p jhiTranslate="{{ 'dataSurveyApp.EstadoEncuesta.' + encuesta.estado }}">{{ encuesta.estado }}</p>
+      <div>
+        <div *ngIf="encuesta.categoria">
+          <a [routerLink]="['/categoria', encuesta.categoria?.id, 'view']">{{ encuesta.categoria?.nombre }}</a>
+        </div>
+      </div>
+      <div>
+        <div *ngIf="encuesta.usuarioExtra">
+          <a [routerLink]="['/usuario-extra', encuesta.usuarioExtra?.id, 'view']">{{ encuesta.usuarioExtra?.id }}</a>
+        </div>
+      </div>
+      <div class="text-right">
+        <div class="btn-group">
+          <button
+            type="submit"
+            [routerLink]="['/encuesta', encuesta.id, 'view']"
+            class="btn btn-info btn-sm"
+            data-cy="entityDetailsButton"
+          >
+            <fa-icon icon="eye"></fa-icon>
+            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
+          </button>
+
+          <button
+            type="submit"
+            [routerLink]="['/encuesta', encuesta.id, 'edit']"
+            class="btn btn-primary btn-sm"
+            data-cy="entityEditButton"
+          >
+            <fa-icon icon="pencil-alt"></fa-icon>
+            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
+          </button>
+          
+          <button type="submit" (click)="delete(encuesta)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
+            <fa-icon icon="times"></fa-icon>
+            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
+          </button>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</div>
+
+<!-- <div class="table-responsive" id="entities" *ngIf="encuestas && encuestas.length > 0">
     <table class="table table-striped" aria-describedby="page-heading">
       <thead>
         <tr>
@@ -104,16 +281,10 @@
         </tr>
       </tbody>
     </table>
-  </div>
+  </div> -->
-</div>
 
 <!-- --------------------------------------------------------------------------------------------- -->
 
-<!-- Button trigger modal -->
-<button type="button" class="ds-btn ds-btn--primary" (click)="resetForm()" data-toggle="modal" data-target="#crearEncuesta">
-  Crear encuesta
-</button>
-
 <!-- Modal -->
 <div
   class="modal fade ds-modal"

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { HttpResponse } from '@angular/common/http';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -21,6 +21,20 @@ import { UsuarioExtraService } from 'app/entities/usuario-extra/service/usuario-
 import { EstadoEncuesta } from 'app/entities/enumerations/estado-encuesta.model';
 import { AccountService } from 'app/core/auth/account.service';
 import { Account } from 'app/core/auth/account.model';
+import { Router } from '@angular/router';
+
+import {
+  faShareAlt,
+  faLock,
+  faUnlock,
+  faCalendarAlt,
+  faEdit,
+  faCopy,
+  faFile,
+  faTrashAlt,
+  faPlus,
+  faStar,
+} from '@fortawesome/free-solid-svg-icons';
 
 import * as $ from 'jquery';
 
@@ -28,7 +42,19 @@ import * as $ from 'jquery';
   selector: 'jhi-encuesta',
   templateUrl: './encuesta.component.html',
 })
-export class EncuestaComponent implements OnInit {
+export class EncuestaComponent implements OnInit, AfterViewInit {
+  // Icons
+  faShareAlt = faShareAlt;
+  faLock = faLock;
+  faUnlock = faUnlock;
+  faCalendarAlt = faCalendarAlt;
+  faEdit = faEdit;
+  faCopy = faCopy;
+  faFile = faFile;
+  faTrashAlt = faTrashAlt;
+  faPlus = faPlus;
+  faStar = faStar;
+
   account: Account | null = null;
   usuarioExtra: UsuarioExtra | null = null;
 
@@ -65,7 +91,8 @@ export class EncuestaComponent implements OnInit {
     protected usuarioExtraService: UsuarioExtraService,
     protected activatedRoute: ActivatedRoute,
     protected fb: FormBuilder,
-    protected accountService: AccountService
+    protected accountService: AccountService,
+    protected router: Router
   ) {}
 
   resetForm(): void {
@@ -78,7 +105,8 @@ export class EncuestaComponent implements OnInit {
     this.encuestaService.query().subscribe(
       (res: HttpResponse<IEncuesta[]>) => {
         this.isLoading = false;
-        this.encuestas = res.body ?? [];
+        const tmpEncuestas = res.body ?? [];
+        this.encuestas = tmpEncuestas.filter(e => e.usuarioExtra?.id === this.usuarioExtra?.id);
       },
       () => {
         this.isLoading = false;
@@ -87,12 +115,18 @@ export class EncuestaComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.loadAll();
+    document.body.addEventListener('click', e => {
-
+      document.getElementById('contextmenu')!.classList.add('ds-contextmenu--closed');
-    // Call upon selecting a survey to edit
+      document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--open');
-    // this.updateForm(encuesta);
+      document.getElementById('contextmenu')!.style.maxHeight = '0%';
-
+      if (e.target) {
-    this.loadRelationshipsOptions();
+        if (!(e.target as HTMLElement).classList.contains('ds-list--entity')) {
+          document.querySelectorAll('.ds-list--entity').forEach(e => {
+            e.classList.remove('active');
+          });
+        }
+      }
+    });
 
     // this.activatedRoute.data.subscribe(({ encuesta }) => {
     //   if (encuesta.id === undefined) {
@@ -112,6 +146,8 @@ export class EncuestaComponent implements OnInit {
       if (account !== null) {
         this.usuarioExtraService.find(account.id).subscribe(usuarioExtra => {
           this.usuarioExtra = usuarioExtra.body;
+          this.loadAll();
+          this.loadRelationshipsOptions();
           if (this.usuarioExtra !== null) {
             if (this.usuarioExtra.id === undefined) {
               const today = dayjs().startOf('day');
@@ -125,6 +161,8 @@ export class EncuestaComponent implements OnInit {
     });
   }
 
+  ngAfterViewInit(): void {}
+
   trackId(index: number, item: IEncuesta): number {
     return item.id!;
   }
@@ -259,4 +297,66 @@ export class EncuestaComponent implements OnInit {
       usuarioExtra: this.usuarioExtra,
     };
   }
+
+  isAdmin(): boolean {
+    return this.accountService.hasAnyAuthority('ROLE_ADMIN');
+  }
+
+  isAuthenticated(): boolean {
+    return this.accountService.isAuthenticated();
+  }
+
+  openSurvey(event: any): void {
+    const surveyId = event.target.getAttribute('data-id');
+    this.router.navigate(['/encuesta', surveyId, 'edit']);
+  }
+
+  selectSurvey(event: any): void {
+    document.querySelectorAll('.ds-list--entity').forEach(e => {
+      e.classList.remove('active');
+    });
+    if (event.target.classList.contains('ds-list--entity')) {
+      event.target.classList.add('active');
+    }
+  }
+
+  counter(i: number) {
+    return new Array(i);
+  }
+
+  testMe(something: any) {
+    return 5 - something;
+  }
+
+  openContextMenu(event: any): void {
+    document.querySelectorAll('.ds-list--entity').forEach(e => {
+      e.classList.remove('active');
+    });
+
+    if (event.type === 'contextmenu') {
+      event.preventDefault();
+
+      document.getElementById('contextmenu-create--separator')!.style.display = 'block';
+      document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
+      document.getElementById('contextmenu-delete--separator')!.style.display = 'block';
+      document.getElementById('contextmenu-edit')!.style.display = 'block';
+      document.getElementById('contextmenu-duplicate')!.style.display = 'block';
+      document.getElementById('contextmenu-rename')!.style.display = 'block';
+      document.getElementById('contextmenu-share')!.style.display = 'block';
+
+      if ((event.target as HTMLElement).classList.contains('ds-list')) {
+        document.getElementById('contextmenu-edit--separator')!.style.display = 'none';
+        document.getElementById('contextmenu-delete--separator')!.style.display = 'none';
+      } else if ((event.target as HTMLElement).classList.contains('ds-list--entity')) {
+        event.target.classList.add('active');
+        document.getElementById('contextmenu-create--separator')!.style.display = 'none';
+      }
+
+      document.getElementById('contextmenu')!.style.top = event.layerY + 'px';
+      document.getElementById('contextmenu')!.style.left = event.layerX + 'px';
+      document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--closed');
+      document.getElementById('contextmenu')!.classList.add('ds-contextmenu--open');
+      document.getElementById('contextmenu')!.style.maxHeight = '100%';
+    }
+  }
 }

src/main/webapp/app/layouts/main/main.component.scss

@@ -2,3 +2,8 @@
 .off-canvas-sidebar:after {
   background: #0f172a;
 }
+
+.main-panel {
+  height: 100vh !important;
+  overflow-y: auto;
+}

src/main/webapp/app/layouts/sidebar/sidebar.component.ts

@@ -61,6 +61,8 @@ export class SidebarComponent {
       if (account !== null) {
         this.usuarioExtraService.find(account.id).subscribe(usuarioExtra => {
           this.usuarioExtra = usuarioExtra.body;
+          this.usuarioExtra!.nombre =
+            usuarioExtra.body!.nombre!.trim().split(' ')[0] + ' ' + usuarioExtra.body!.nombre!.trim().split(' ')[1];
         });
       }
     });

src/main/webapp/app/shared/date/format-short-datetime.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import * as dayjs from 'dayjs';
+
+@Pipe({
+  name: 'formatShortDatetime',
+})
+export class FormatShortDatetimePipe implements PipeTransform {
+  transform(day: dayjs.Dayjs | null | undefined): string {
+    return day ? day.format('dddd, MMMM D, YYYY') : '';
+  }
+}

src/main/webapp/app/shared/shared.module.ts

@@ -9,6 +9,7 @@ import { HasAnyAuthorityDirective } from './auth/has-any-authority.directive';
 import { DurationPipe } from './date/duration.pipe';
 import { FormatMediumDatetimePipe } from './date/format-medium-datetime.pipe';
 import { FormatMediumDatePipe } from './date/format-medium-date.pipe';
+import { FormatShortDatetimePipe } from './date/format-short-datetime.pipe';
 import { SortByDirective } from './sort/sort-by.directive';
 import { SortDirective } from './sort/sort.directive';
 import { ItemCountComponent } from './pagination/item-count.component';
@@ -25,6 +26,7 @@ import { FilterPipe } from './pipes/filter';
     DurationPipe,
     FormatMediumDatetimePipe,
     FormatMediumDatePipe,
+    FormatShortDatetimePipe,
     SortByDirective,
     SortDirective,
     ItemCountComponent,
@@ -40,6 +42,7 @@ import { FilterPipe } from './pipes/filter';
     DurationPipe,
     FormatMediumDatetimePipe,
     FormatMediumDatePipe,
+    FormatShortDatetimePipe,
     SortByDirective,
     SortDirective,
     ItemCountComponent,

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

@@ -95,3 +95,6 @@
 @import 'paper-dashboard/datasurvey-form';
 @import 'paper-dashboard/datasurvey-global';
 @import 'paper-dashboard/datasurvey-modal';
+@import 'paper-dashboard/datasurvey-list';
+@import 'paper-dashboard/datasurvey-table';
+@import 'paper-dashboard/datasurvey-contextmenu';

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

@@ -0,0 +1,70 @@
+.ds-contextmenu {
+  position: absolute;
+  background-color: #fff;
+  border-radius: 3px;
+  z-index: 100;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  max-height: 0%;
+  overflow: hidden;
+
+  /* Set our transitions up. */
+  -webkit-transition: max-height 0.8s;
+  -moz-transition: max-height 0.8s;
+  transition: max-height 0.8s;
+
+  ul {
+    padding: 0;
+    margin: 0;
+
+    li {
+      list-style: none;
+      padding: 0.2rem 0;
+      text-align: left;
+      width: 100%;
+
+      button {
+        border: none;
+        outline: 0;
+        background-color: transparent;
+        width: 100%;
+        text-align: left;
+        padding: 0.4rem 8rem 0.4rem 3rem;
+        color: #313747;
+        position: relative;
+
+        &:hover {
+          background-color: #eeeeee;
+        }
+
+        .contextmenu__icon {
+          font-size: 1rem;
+          color: #808080;
+          margin-right: 1rem;
+          position: absolute;
+          left: 0.8rem;
+          bottom: 0.25rem;
+        }
+      }
+    }
+  }
+
+  .ds-contextmenu__divider {
+    padding: 0.25rem 0;
+  }
+
+  .ds-contextmenu__divider--separator-top {
+    border-bottom: 1px solid #dadce0;
+  }
+
+  .ds-contextmenu__divider--separator-bottom {
+    border-bottom: 1px solid #dadce0;
+  }
+
+  &--open {
+    display: block;
+  }
+
+  &--closed {
+    display: none;
+  }
+}

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

@@ -51,7 +51,7 @@ $form-background: #f1f5f9;
     outline: 0;
 
     background: url(./../../img_datasurvey/down-arrow.svg) no-repeat right;
-    background-size: 3.5%;
+    background-size: 1rem;
     -webkit-appearance: none;
     background-position-x: 94%;
 

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

@@ -15,3 +15,7 @@
   color: #757d94;
   font-size: 0.9rem;
 }
+
+p {
+  margin: 0 !important;
+}

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

@@ -0,0 +1,133 @@
+@keyframes scaleIn {
+  from {
+    transform: scale(0.5, 0.5);
+    opacity: 0.5;
+  }
+  to {
+    transform: scale(2.5, 2.5);
+    opacity: 0;
+  }
+}
+
+.ds-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: minmax(12.5rem, auto);
+  border: 2px dashed #f1f1f1;
+  border-radius: $border-radius-x-large;
+  padding: 2rem;
+  width: 100%;
+  user-select: none;
+  box-sizing: border-box;
+  position: relative;
+
+  .ds-list--entity {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    border: 1px solid #dadce0;
+    border-radius: $border-radius-small;
+    padding: 0.5rem;
+    margin: 1rem;
+    word-wrap: break-word;
+
+    *:not(div) {
+      pointer-events: none;
+    }
+
+    .title {
+      color: rgba(0, 0, 0, 0.72);
+      font-size: 0.9rem;
+      display: flex;
+      align-items: center;
+    }
+
+    .subtitle {
+      color: rgba(0, 0, 0, 0.54);
+    }
+
+    .tag {
+      font-size: 0.8rem;
+      color: rgb(248, 248, 248);
+      margin-top: 0.5rem;
+      padding: 0.2rem 1.5rem;
+      background-color: #2962ff94;
+      border-radius: 15px;
+    }
+
+    .entity-header {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      pointer-events: none;
+    }
+
+    .entity-body--row {
+      margin: 0.4rem 0;
+    }
+
+    .entity-share {
+      border-radius: 50%;
+      background-color: #f1f5f9;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: background-color 0.2s ease-in-out;
+      width: 25px;
+      height: 25px;
+      color: #313747;
+    }
+
+    .entity-share:hover {
+      background-color: #e3e6e9;
+    }
+
+    .entity-icon--access {
+      font-size: 0.8rem;
+      color: rgb(154, 156, 158);
+    }
+
+    .entity-icon--star {
+      color: #ffcc47;
+      margin-right: 0.2rem;
+    }
+
+    .entity-icon--star--off {
+      color: #d9dde0;
+      margin-right: 0.2rem;
+    }
+
+    .entity-state {
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      left: 0;
+      opacity: 0;
+      animation: scaleIn 4s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32);
+    }
+
+    .entity-state--container {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .entity-state--blue {
+      background-color: #2962ff;
+    }
+    .entity-state--green {
+      background-color: #3ead7f;
+    }
+    .entity-state--red {
+      background-color: #e73636;
+    }
+  }
+
+  .active {
+    background-color: #e8f0fe !important;
+  }
+}

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

@@ -1,3 +1,15 @@
+@media screen and (max-width: 1280px) {
+  .ds-list {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+}
+
+@media screen and (max-width: 880px) {
+  .ds-list {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+}
+
 @media screen and (max-width: 991px) {
   .navbar {
     padding: 0;
@@ -506,6 +518,10 @@
 }
 
 @media screen and (max-width: 576px) {
+  .ds-list {
+    grid-template-columns: repeat(1, 1fr) !important;
+  }
+
   .navbar[class*='navbar-toggleable-'] .container {
     margin-left: 0;
     margin-right: 0;