Add table with data on past editions (#74)

* Update dependencies * Add carousel to homepage * Fixed broken img * Add table with info about past editions * Add modals with infographics about past editions
ProyectoIntegrador2018 · Sep 28, 2019 · 8ca3d72 · 8ca3d72
1 parent 6491d9b
commit 8ca3d72
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 0 deletions.
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -77,6 +77,58 @@ <h1>¿Qué es Axt@Teen 4.0?</h1>
           los conceptos de Internet de las Cosas.</td>
       </tr>
     </table>
+    <p> Más información sobre ediciones anteriores <button type="button" class="btn btn-link" (click)="toggleTable()">aquí</button>.</p>
+    <table *ngIf="isVisible">
+      <tr>
+        <th>Año</th>
+        <th>Infográfico</th>
+      </tr>
+      <tr>
+        <td>2019</td>
+        <td>
+          <a class="btn btn-info" data-target="#modal1" data-toggle="modal" href="#">Abrir</a>
+          <div id="modal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+              <div class="modal-body mb-0 p-0">
+                <img src="../../../../assets/img/past_editions/ed2018.jpeg" class="img-responsive">
+              </div>
+            </div>
+          </div>
+        </div>
+        </td>
+      </tr>
+      <tr>
+        <td>2018</td>
+        <td>
+          <a class="btn btn-info" data-target="#modal1" data-toggle="modal" href="#">Abrir</a>
+          <div id="modal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+              <div class="modal-body mb-0 p-0">
+                <img src="../../../../assets/img/past_editions/ed2018.jpeg" class="img-responsive">
+              </div>
+            </div>
+          </div>
+        </div>
+        </td>
+      </tr>
+      <tr>
+        <td>2017</td>
+        <td>
+          <a class="btn btn-info" data-target="#modal1" data-toggle="modal" href="#">Abrir</a>
+          <div id="modal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+              <div class="modal-body mb-0 p-0">
+                <img src="../../../../assets/img/past_editions/ed2018.jpeg" class="img-responsive">
+              </div>
+            </div>
+          </div>
+        </div>
+        </td>
+      </tr>
+    </table>
     <div id="Steps" class="steps-section">
       <h1>¿Cómo participar?</h1>
       <div class="steps-timeline">

diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
@@ -21,6 +21,26 @@
     transform: translateY(-50%);
   }
 
+  .btn-link {
+    padding: 0;
+  }
+
+  .modal,body.modal-open {
+    padding-right: 0!important
+  }
+
+  body.modal-open {
+    overflow: auto
+  }
+
+  body.scrollable {
+    overflow-y: auto
+  }
+
+  .modal-body img {
+    width: 100%
+
+  }
   &__hero {
     align-items: center;
     background-position: center center;

diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
@@ -18,12 +18,18 @@ export class HomeComponent {
     third: boolean;
     status: boolean;
     rstatus: boolean;
+    isVisible = false;
     sponsor: Sponsor = new Sponsor();
 
     constructor(public snackBar: MatSnackBar, private api: ApiService) {
         this.first = true;
         this.second = false;
         this.third = false;
+        this.isVisible = false;
+    }
+
+    toggleTable() {
+        this.isVisible = !this.isVisible;
     }
 
     clickFirstSlide(){

diff --git a/src/assets/img/past_editions/ed2018.jpeg b/src/assets/img/past_editions/ed2018.jpeg