Large Event Component

Client/src/app/app.module.ts

@@ -46,6 +46,7 @@ import { YesNoPopupComponent } from './components/popups/yes-no-popup/yes-no-pop
 import { UpdateSermonPopupComponent } from './components/popups/update-sermon-popup/update-sermon-popup.component';
 import { ContactPageComponent } from './components/contact-page/contact-page.component';
 import { SharePopupComponent } from './components/popups/share-popup/share-popup.component';
+import { EventLargeComponent } from './components/event-large/event-large.component';
 
 
 //Directives
@@ -127,7 +128,8 @@ const Routes =
     SharePopupComponent,
     SafeUrlPipe,
     EventsPageComponent,
-    AddEventPopupComponent
+    AddEventPopupComponent,
+    EventLargeComponent
   ],
   imports: [
     BrowserModule,

Client/src/app/components/event-large/event-large.component.css

@@ -0,0 +1,92 @@
+.wrapper{
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+.photo{
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 100px;
+    margin: 0;
+    vertical-align: top;
+}
+
+.fade{
+    text-align: center;
+    vertical-align: bottom;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 20px;
+    padding-bottom: 2px;
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.8+100 */
+    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 ); /* IE6-9 */
+}
+
+.photo button{
+    padding: 0;
+    vertical-align: top;
+}
+
+button img{
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.info{
+    display: inline-block;
+    vertical-align: top;
+    padding: 2px 2px 8px 5px;
+    box-sizing: border-box;
+    width: calc(100% - 100px);    
+    overflow-y: hidden;
+    position: relative;
+    height: 100px;
+}
+
+.title{
+    font-weight: bold;
+}
+
+.date, .author{
+    font-style: italic;
+    font-size: 14px;
+}
+
+.description{
+    font-size: 14px;
+    color: darkgray;
+    word-wrap: none;
+    border-top: 0px solid lightgray;
+    padding-top:6px;
+    margin-top: 6px;    
+}
+.expanded{
+    overflow-y: hidden;
+}
+.expanded-content{
+    margin: 10px;
+}
+
+.buttons, .buttons-edit{
+    background-color: lightgray;
+}
+
+.buttons button, .buttons .filler{
+    display: inline-block;
+    width: 33.33333%;
+}
+
+.border{
+    margin: 0px 5px 0px 5px;
+    border-top: 1px inset lightgray;
+}
+
+.buttons-edit button{
+    display: inline-block;
+    width: 50%;
+}

Client/src/app/components/event-large/event-large.component.html

@@ -0,0 +1,32 @@
+<div class="wrapper" [@inout]="startFadeIn">
+    <div class="photo">
+        <button md-button (click)="play()">
+            <img src="../../assets/images/event_back.png" />
+        </button>
+    </div><!--
+    --><div class="info"  (click)="toggleState()">
+        <span class="title">{{ title }}</span>
+        <br>
+        <span class="date">{{ startDate | date:'yyyy-MM-dd | h:mm a' }}</span>
+        <br>
+        <p class="description" [@toggleAnimationFade]="state">
+            {{ description }}
+        </p>
+        <div class="fade"><i ofbicon *ngIf="state === 'closed'">arrow_drop_down</i><i ofbicon *ngIf="state === 'open'">arrow_drop_up</i></div>
+    </div>  
+    <div class="expanded" [@toggleAnimation]="state" (click)="toggleState()">
+        <p class="expanded-content">
+            {{ description }}
+        </p>
+    </div>  
+    <div class="buttons">
+        <span class="action pct10 filler"></span><!--
+        --><span class="action pct10 filler"></span><!--
+        --><button md-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button>
+    </div>
+    <div class="buttons-edit" *ngIf="loggedIn">
+        <div class="border"></div>
+        <button md-button class="action" (click)="edit()" ><i ofbicon>edit</i>  Edit</button><!--
+        --><button md-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i>  Delete</button>
+    </div>
+</div>

Client/src/app/components/event-large/event-large.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventLargeComponent } from './event-large.component';
+
+describe('EventLargeComponent', () => {
+  let component: EventLargeComponent;
+  let fixture: ComponentFixture<EventLargeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventLargeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EventLargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

Client/src/app/components/event-large/event-large.component.ts

@@ -0,0 +1,70 @@
+import { Component, AfterContentInit, Input } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+@Component({
+  selector: 'event-large-component',
+  templateUrl: './event-large.component.html',
+  styleUrls: ['./event-large.component.css'],
+  animations:[
+    trigger("inout",[
+      state("1", style({ opacity: '1' })),
+      state("0",style({ opacity: '0' })),
+      transition('* => 1',[
+          animate('500ms ease-in-out')
+      ]),
+      transition(':enter',[
+          animate('0ms')
+      ])
+    ]),
+    trigger('toggleAnimation', [
+      state('open', style({
+        height: '*',
+      })),
+      state('closed', style({
+        height: '0px',
+      })),
+      transition('open <=> closed', animate('500ms ease-in-out'))
+    ]),
+    trigger('toggleAnimationFade', [
+      state('open', style({
+        opacity: 0,
+      })),
+      state('closed', style({
+        opacity: 1,
+      })),
+      transition('open <=> closed', animate('500ms ease-in-out'))
+    ])
+  ]
+})
+export class EventLargeComponent implements AfterContentInit {
+
+  public state: string = 'closed';
+  @Input()
+  public loggedIn: boolean;
+
+  @Input()
+  title: string;
+  @Input()
+  description: string;
+  @Input()
+  startDate: Date;
+  @Input()
+  endDate: Date;
+  public startFadeIn: boolean = false;
+  @Input()
+  public delayFadeIn: number = 100;
+
+  constructor(){
+      console.log(this.title);
+  }
+
+  ngAfterContentInit(): void{
+      console.log(this.delayFadeIn);
+      setTimeout(() => this.startFadeIn = true, this.delayFadeIn);
+  }
+
+  toggleState(){
+    this.state = this.state === 'open' ? 'closed' : 'open'
+  }
+
+}

Client/src/app/components/events-page/events-page.component.html

@@ -3,9 +3,11 @@
         <p>These are some upcoming events at Old Fashion Baptist Church</p>
         <ul>
             <li *ngFor="let event of events; let i = index;">
-                <p>{{ event.title }}</p>
+                <event-large-component
-                <p>{{ event.startDate | date:'yyyy-MM-dd' }}</p>
+                    [title]="event.title"
-                <p>{{ event.startDate }}</p>
+                    [startDate]="event.startDate"
+                    [delayFadeIn]="(i+1)*200"
+                    ></event-large-component>
             </li>
         </ul>
         <div class="fab-buttons" >

Client/src/app/components/popups/add-event-popup/add-event-popup.component.css

@@ -0,0 +1,15 @@
+.full-width{
+    width: 100%;
+}
+
+form{
+    margin-top: 7px;
+}
+
+button{
+    margin: 20px 0px 20px 20px;
+}
+
+.first{
+   margin-left: 0px;
+}

Client/src/app/components/popups/add-event-popup/add-event-popup.component.html

@@ -6,10 +6,10 @@
     <md-input-container class="full-width">
       <input mdInput placeholder="Title" required [(ngModel)]="eventTitle" name="title" >
     </md-input-container>
-    <md-input-container>
+    <md-input-container class="full-width">
       <input mdInput placeholder="Start Date" required [ngModel]="eventStartDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="eventStartDate = $event"  name="startDate" type="datetime-local">
     </md-input-container> 
-    <md-input-container>
+    <md-input-container class="full-width">
         <input mdInput placeholder="End Date" required [ngModel]="eventEndDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="eventEndDate = $event"  name="endDate" type="datetime-local">
       </md-input-container> 
     <md-input-container class="full-width">