add videos

src/app/admin/admin.component.html

@@ -3,11 +3,11 @@
     <div class="col-12 col-md-6 mx-auto">
       <form class="login-form-container" (submit)="login()">
         <div class="m-2">
-          <span class="font-12">Username</span>
+          <span class="login-label">Username</span>
           <input type="text" class="input-text" name="userName" [(ngModel)]="userName">
         </div>
         <div class="m-2">
-          <span class="font-12">Password</span>
+          <span class="login-label">Password</span>
           <input type="password" class="input-text" name="password" [(ngModel)]="password">
         </div>
         <div class="m-2 pt-4">
@@ -59,7 +59,7 @@
             <span class="label">Exhibitions</span>
             <select class="input-select" name="exhibitions">
               <option value=""></option>
-              <option value="{{exhibition.title}}" *ngFor="let exhibition of exhibitions" (click)="exhibitionAdd($event,exhibition.id)">
+              <option value="{{exhibition.title}}" *ngFor="let exhibition of exhibitions" (click)="exhibitionAdd(exhibition.id)">
                 {{exhibition.date_from | date}} | {{exhibition.title}}
               </option>
             </select>
@@ -72,22 +72,22 @@
 
           <div class="col-6">
             <span class="label">Video</span>
-            <div class="w-30 d-inline-block pr-1">
-              <select class="input-select" name="videoType">
+            <div class="w-30 d-inline-block pr-2">
+              <select class="input-select" name="videoType" [(ngModel)]="videoType">
                 <option value="youtube">YouTube</option>
                 <option value="vimeo">Vimeo</option>
               </select>
             </div>
-            <div class="w-60 d-inline-block pr-1">
-              <input type="text" class="input-text" name="videoTitle">
+            <div class="w-60 d-inline-block pr-2">
+              <input type="text" class="input-text" name="videoURL" [(ngModel)]="videoURL">
             </div>
             <div class="w-10 d-inline-block">
-              <button class="button">v</button>
+              <button class="button button-transparent icon-plus-square px-0 w-100" (click)="videoAdd()"></button>
             </div>
 
             <span class="label font-12 pt-2">Selected Videos</span>
-            <span class="selected-video" *ngFor="let sv of selectedVideos" (click)="videoRemove(sv.id)">
-              {{sv.type | date}} | {{sv.title}}
+            <span class="selected-video" *ngFor="let sv of selectedVideos" (click)="videoRemove(sv.url)">
+              {{sv.type}} | {{sv.url}}
             </span>
           </div>
         </form>

src/app/admin/admin.component.scss

@@ -7,6 +7,12 @@
     padding: 40px;
     color: $white;
 
+    .login-label {
+      font-size: $font-14;
+      color: $black;
+      padding: 8px;
+    }
+
     .button {
       width: 300px;
     }

src/app/admin/admin.component.ts

@@ -14,11 +14,14 @@ export class AdminComponent implements OnInit {
   public password: string = ''
   public activeEditor: string = ''
   public exhibitions: any = []
-  public videos: any = []
 
   public selectedExhibitions: any = []
   public selectedVideos: any = []
 
+  // ngModels
+  public videoType: string = ''
+  public videoURL: string = ''
+
   constructor(
     private authService: AuthService,
     private apisService: ApisService
@@ -62,7 +65,7 @@ export class AdminComponent implements OnInit {
     this.activeEditor = section
   }
 
-  exhibitionAdd(e, id): void {
+  exhibitionAdd(id): void {
     this.selectedExhibitions.push(
       this.exhibitions.filter(item => item.id == id)[0]
     )
@@ -76,17 +79,15 @@ export class AdminComponent implements OnInit {
     this.selectedExhibitions = this.selectedExhibitions.filter(item => item.id != id)
   }
 
-  videoAdd(e, id): void {
-    this.selectedVideos.push(
-      this.videos.filter(item => item.id == id)[0]
-    )
-    this.videos = this.videos.filter(item => item.id != id)
+  videoAdd(): void {
+    this.selectedVideos.push({
+      type: this.videoType,
+      url: this.videoURL
+    })
+    this.videoURL = ''
   }
 
-  videoRemove(id): void {
-    this.videos.push(
-      this.selectedVideos.filter(item => item.id == id)[0]
-    )
-    this.selectedVideos = this.selectedVideos.filter(item => item.id != id)
+  videoRemove(url): void {
+    this.selectedVideos = this.selectedVideos.filter(item => item.url != url)
   }
 }

src/assets/fonts/icomoon.svg

@@ -11,6 +11,16 @@
 <glyph unicode="&#xe901;" glyph-name="arrow-left" d="M542.165 158.166l-225.835 225.835h494.336c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-494.336l225.835 225.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-298.667-298.667c-4.096-4.096-7.168-8.789-9.259-13.824-2.176-5.205-3.243-10.795-3.243-16.341 0-10.923 4.181-21.845 12.501-30.165l298.667-298.667c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331z" />
 <glyph unicode="&#xe902;" glyph-name="chevron-down" d="M225.835 524.502l256-256c16.683-16.683 43.691-16.683 60.331 0l256 256c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-225.835-225.835-225.835 225.835c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331z" />
 <glyph unicode="&#xe903;" glyph-name="delete" d="M896 725.334c11.776 0 22.4-4.736 30.165-12.501s12.501-18.389 12.501-30.165v-512c0-11.776-4.736-22.4-12.501-30.165s-18.389-12.501-30.165-12.501h-535.296l-261.333 298.667 261.333 298.667zM896 810.667h-554.667c-12.8 0-24.235-5.632-32.128-14.549l-298.667-341.333c-14.208-16.213-13.909-40.192 0-56.192l298.667-341.333c8.448-9.643 20.224-14.549 32.128-14.592h554.667c35.328 0 67.413 14.379 90.496 37.504s37.504 55.168 37.504 90.496v512c0 35.328-14.379 67.413-37.504 90.496s-55.168 37.504-90.496 37.504zM481.835 524.502l97.835-97.835-97.835-97.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0l97.835 97.835 97.835-97.835c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331l-97.835 97.835 97.835 97.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-97.835-97.835-97.835 97.835c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331z" />
+<glyph unicode="&#xe904;" glyph-name="alert-circle" d="M981.333 426.667c0 129.579-52.565 246.997-137.472 331.861s-202.283 137.472-331.861 137.472-246.997-52.565-331.861-137.472-137.472-202.283-137.472-331.861 52.565-246.997 137.472-331.861 202.283-137.472 331.861-137.472 246.997 52.565 331.861 137.472 137.472 202.283 137.472 331.861zM896 426.667c0-106.069-42.923-201.984-112.469-271.531s-165.461-112.469-271.531-112.469-201.984 42.923-271.531 112.469-112.469 165.461-112.469 271.531 42.923 201.984 112.469 271.531 165.461 112.469 271.531 112.469 201.984-42.923 271.531-112.469 112.469-165.461 112.469-271.531zM469.333 597.334v-170.667c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v170.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667zM512 213.334c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667-42.667-19.115-42.667-42.667 19.115-42.667 42.667-42.667z" />
+<glyph unicode="&#xe905;" glyph-name="alert-triangle" d="M475.648 752.043c3.115 5.248 7.893 10.325 14.251 14.165 10.069 6.101 21.589 7.595 32.256 4.949s20.224-9.216 26.197-19.115l361.216-603.008c2.987-5.12 5.077-11.435 5.461-18.517-0.64-15.701-5.077-25.216-12.075-32.384-7.68-7.851-18.219-12.715-29.568-12.843l-722.645 0.043c-6.485 0.043-13.696 1.749-20.523 5.717-10.197 5.888-17.024 15.317-19.883 25.899s-1.621 22.144 3.925 31.787zM402.432 795.904l-361.387-603.307c-18.005-31.189-21.589-66.133-13.141-97.707s29.013-60.075 59.648-77.739c19.797-11.435 41.643-17.067 62.933-17.152h722.901c35.797 0.384 67.712 15.104 90.581 38.485s36.864 55.595 36.48 90.923c-0.256 22.869-6.528 44.544-17.323 62.891l-361.557 603.605c-18.432 30.421-47.36 50.389-79.104 58.155s-66.603 3.456-96.811-14.891c-18.304-11.093-33.067-26.24-43.179-43.264zM469.333 554.667v-170.667c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v170.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667zM512 170.667c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667-42.667-19.115-42.667-42.667 19.115-42.667 42.667-42.667z" />
+<glyph unicode="&#xe906;" glyph-name="check" d="M823.168 712.832l-439.168-439.168-183.168 183.168c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331l213.333-213.333c16.683-16.683 43.691-16.683 60.331 0l469.333 469.333c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0z" />
+<glyph unicode="&#xe907;" glyph-name="corner-right-down" d="M170.667 725.334h298.667c35.371 0 67.285-14.293 90.496-37.504s37.504-55.125 37.504-90.496v-409.003l-140.501 140.501c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331l213.333-213.333c3.925-3.925 8.619-7.083 13.824-9.259 10.453-4.309 22.229-4.309 32.683 0 5.035 2.091 9.728 5.163 13.824 9.259l213.333 213.333c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-140.501-140.501v409.003c0 58.88-23.936 112.299-62.464 150.869s-91.989 62.464-150.869 62.464h-298.667c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667z" />
+<glyph unicode="&#xe908;" glyph-name="edit" d="M469.333 810.667h-298.667c-35.328 0-67.413-14.379-90.496-37.504s-37.504-55.168-37.504-90.496v-597.333c0-35.328 14.379-67.413 37.504-90.496s55.168-37.504 90.496-37.504h597.333c35.328 0 67.413 14.379 90.496 37.504s37.504 55.168 37.504 90.496v298.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-298.667c0-11.776-4.736-22.4-12.501-30.165s-18.389-12.501-30.165-12.501h-597.333c-11.776 0-22.4 4.736-30.165 12.501s-12.501 18.389-12.501 30.165v597.333c0 11.776 4.736 22.4 12.501 30.165s18.389 12.501 30.165 12.501h298.667c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667zM759.168 862.166l-405.333-405.333c-5.205-5.163-9.259-11.947-11.221-19.84l-42.667-170.667c-1.664-6.4-1.792-13.568 0-20.693 5.717-22.869 28.885-36.779 51.755-31.061l170.667 42.667c7.125 1.749 14.080 5.504 19.84 11.221l405.333 405.333c25.984 25.984 38.997 60.16 38.997 94.165s-13.013 68.181-38.997 94.165-60.203 39.040-94.208 39.040-68.181-13.013-94.165-38.997zM819.499 801.835c9.344 9.344 21.504 13.995 33.835 13.995s24.491-4.651 33.835-13.995 13.995-21.504 13.995-33.835-4.651-24.491-13.995-33.835l-396.971-396.971-90.197-22.571 22.571 90.197z" />
+<glyph unicode="&#xe909;" glyph-name="minus-square" d="M213.333 853.334c-35.328 0-67.413-14.379-90.496-37.504s-37.504-55.168-37.504-90.496v-597.333c0-35.328 14.379-67.413 37.504-90.496s55.168-37.504 90.496-37.504h597.333c35.328 0 67.413 14.379 90.496 37.504s37.504 55.168 37.504 90.496v597.333c0 35.328-14.379 67.413-37.504 90.496s-55.168 37.504-90.496 37.504zM213.333 768h597.333c11.776 0 22.4-4.736 30.165-12.501s12.501-18.389 12.501-30.165v-597.333c0-11.776-4.736-22.4-12.501-30.165s-18.389-12.501-30.165-12.501h-597.333c-11.776 0-22.4 4.736-30.165 12.501s-12.501 18.389-12.501 30.165v597.333c0 11.776 4.736 22.4 12.501 30.165s18.389 12.501 30.165 12.501zM341.333 384h341.333c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-341.333c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667z" />
+<glyph unicode="&#xe90a;" glyph-name="plus-square" d="M213.333 853.334c-35.328 0-67.413-14.379-90.496-37.504s-37.504-55.168-37.504-90.496v-597.333c0-35.328 14.379-67.413 37.504-90.496s55.168-37.504 90.496-37.504h597.333c35.328 0 67.413 14.379 90.496 37.504s37.504 55.168 37.504 90.496v597.333c0 35.328-14.379 67.413-37.504 90.496s-55.168 37.504-90.496 37.504zM213.333 768h597.333c11.776 0 22.4-4.736 30.165-12.501s12.501-18.389 12.501-30.165v-597.333c0-11.776-4.736-22.4-12.501-30.165s-18.389-12.501-30.165-12.501h-597.333c-11.776 0-22.4 4.736-30.165 12.501s-12.501 18.389-12.501 30.165v597.333c0 11.776 4.736 22.4 12.501 30.165s18.389 12.501 30.165 12.501zM341.333 384h128v-128c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v128h128c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-128v128c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-128h-128c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667z" />
+<glyph unicode="&#xe90b;" glyph-name="share" d="M128 426.667v-341.333c0-35.328 14.379-67.413 37.504-90.496s55.168-37.504 90.496-37.504h512c35.328 0 67.413 14.379 90.496 37.504s37.504 55.168 37.504 90.496v341.333c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-341.333c0-11.776-4.736-22.4-12.501-30.165s-18.389-12.501-30.165-12.501h-512c-11.776 0-22.4 4.736-30.165 12.501s-12.501 18.389-12.501 30.165v341.333c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667zM469.333 750.336v-451.669c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v451.669l97.835-97.835c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331l-170.667 170.667c-3.925 3.925-8.619 7.083-13.824 9.259-10.453 4.309-22.229 4.309-32.683 0-5.035-2.091-9.728-5.163-13.824-9.259l-170.667-170.667c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0z" />
+<glyph unicode="&#xe90c;" glyph-name="trash-2" d="M768 640v-554.667c0-11.776-4.736-22.4-12.501-30.165s-18.389-12.501-30.165-12.501h-426.667c-11.776 0-22.4 4.736-30.165 12.501s-12.501 18.389-12.501 30.165v554.667zM725.333 725.334v42.667c0 35.328-14.379 67.413-37.504 90.496s-55.168 37.504-90.496 37.504h-170.667c-35.328 0-67.413-14.379-90.496-37.504s-37.504-55.168-37.504-90.496v-42.667h-170.667c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667h42.667v-554.667c0-35.328 14.379-67.413 37.504-90.496s55.168-37.504 90.496-37.504h426.667c35.328 0 67.413 14.379 90.496 37.504s37.504 55.168 37.504 90.496v554.667h42.667c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667zM384 725.334v42.667c0 11.776 4.736 22.4 12.501 30.165s18.389 12.501 30.165 12.501h170.667c11.776 0 22.4-4.736 30.165-12.501s12.501-18.389 12.501-30.165v-42.667zM384 469.334v-256c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v256c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667zM554.667 469.334v-256c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v256c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667z" />
+<glyph unicode="&#xe90d;" glyph-name="x-square" d="M213.333 853.334c-35.328 0-67.413-14.379-90.496-37.504s-37.504-55.168-37.504-90.496v-597.333c0-35.328 14.379-67.413 37.504-90.496s55.168-37.504 90.496-37.504h597.333c35.328 0 67.413 14.379 90.496 37.504s37.504 55.168 37.504 90.496v597.333c0 35.328-14.379 67.413-37.504 90.496s-55.168 37.504-90.496 37.504zM213.333 768h597.333c11.776 0 22.4-4.736 30.165-12.501s12.501-18.389 12.501-30.165v-597.333c0-11.776-4.736-22.4-12.501-30.165s-18.389-12.501-30.165-12.501h-597.333c-11.776 0-22.4 4.736-30.165 12.501s-12.501 18.389-12.501 30.165v597.333c0 11.776 4.736 22.4 12.501 30.165s18.389 12.501 30.165 12.501zM609.835 584.832l-97.835-97.835-97.835 97.835c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331l97.835-97.835-97.835-97.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0l97.835 97.835 97.835-97.835c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331l-97.835 97.835 97.835 97.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0z" />
 <glyph unicode="&#xf003;" glyph-name="envelope-o" d="M950.857 91.428v438.857c-12-13.714-25.143-26.286-39.429-37.714-81.714-62.857-164-126.857-243.429-193.143-42.857-36-96-80-155.429-80h-1.143c-59.429 0-112.571 44-155.429 80-79.429 66.286-161.714 130.286-243.429 193.143-14.286 11.429-27.429 24-39.429 37.714v-438.857c0-9.714 8.571-18.286 18.286-18.286h841.143c9.714 0 18.286 8.571 18.286 18.286zM950.857 692c0 14.286 3.429 39.429-18.286 39.429h-841.143c-9.714 0-18.286-8.571-18.286-18.286 0-65.143 32.571-121.714 84-162.286 76.571-60 153.143-120.571 229.143-181.143 30.286-24.571 85.143-77.143 125.143-77.143h1.143c40 0 94.857 52.571 125.143 77.143 76 60.571 152.571 121.143 229.143 181.143 37.143 29.143 84 92.571 84 141.143zM1024 713.143v-621.714c0-50.286-41.143-91.429-91.429-91.429h-841.143c-50.286 0-91.429 41.143-91.429 91.429v621.714c0 50.286 41.143 91.429 91.429 91.429h841.143c50.286 0 91.429-41.143 91.429-91.429z" />
 <glyph unicode="&#xf081;" glyph-name="twitter-square" horiz-adv-x="878" d="M731.429 602.286c-21.714-9.714-44.571-16-69.143-19.429 25.143 14.857 44 38.857 53.143 66.857-23.429-13.714-49.143-24-76.571-29.143-21.714 23.429-53.143 37.714-87.429 37.714-66.286 0-120-53.714-120-120 0-9.143 0.571-18.857 2.857-27.429-100 5.143-188.571 52.571-248 125.714-10.286-17.714-16.571-38.857-16.571-60.571 0-41.714 19.429-78.286 52-100-20 0.571-38.857 6.286-57.143 14.857v-1.143c0-58.286 44-106.857 98.857-117.714-10.286-2.857-18.286-4.571-29.143-4.571-7.429 0-14.857 1.143-22.286 2.286 15.429-47.429 59.429-82.286 112-83.429-41.143-32-92.571-51.429-149.143-51.429-9.714 0-19.429 0.571-28.571 1.714 53.143-33.714 116-53.714 184-53.714 220.571 0 341.714 182.857 341.714 341.714 0 5.143 0 10.286-0.571 15.429 23.429 16.571 44 37.714 60 62.286zM877.714 713.143v-548.571c0-90.857-73.714-164.571-164.571-164.571h-548.571c-90.857 0-164.571 73.714-164.571 164.571v548.571c0 90.857 73.714 164.571 164.571 164.571h548.571c90.857 0 164.571-73.714 164.571-164.571z" />
 <glyph unicode="&#xf082;" glyph-name="facebook-square" horiz-adv-x="878" d="M713.143 877.714c90.857 0 164.571-73.714 164.571-164.571v-548.571c0-90.857-73.714-164.571-164.571-164.571h-107.429v340h113.714l17.143 132.571h-130.857v84.571c0 38.286 10.286 64 65.714 64l69.714 0.571v118.286c-12 1.714-53.714 5.143-101.714 5.143-101.143 0-170.857-61.714-170.857-174.857v-97.714h-114.286v-132.571h114.286v-340h-304c-90.857 0-164.571 73.714-164.571 164.571v548.571c0 90.857 73.714 164.571 164.571 164.571h548.571z" />

src/assets/scss/forms.scss

@@ -73,15 +73,10 @@ select {
   &.button-white {
     background: $white;
     color: $black !important;
-    &:before {
-      content: '';
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      z-index: 1;
-      border: 1px solid $light-gray;
-    }
+  }
+
+  &.button-transparent {
+    background: $white-alpha2;
+    color: $black !important;
   }
 }

src/assets/scss/icons.scss

@@ -25,16 +25,45 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-alert-circle:before {
+  content: "\e904";
+}
+.icon-alert-triangle:before {
+  content: "\e905";
+}
 .icon-arrow-left:before {
   content: "\e901";
 }
+.icon-check:before {
+  content: "\e906";
+}
 .icon-chevron-down:before {
   content: "\e902";
 }
+.icon-corner-right-down:before {
+  content: "\e907";
+}
 .icon-delete:before {
   content: "\e903";
 }
-
+.icon-edit:before {
+  content: "\e908";
+}
+.icon-minus-square:before {
+  content: "\e909";
+}
+.icon-plus-square:before {
+  content: "\e90a";
+}
+.icon-share:before {
+  content: "\e90b";
+}
+.icon-trash-2:before {
+  content: "\e90c";
+}
+.icon-x-square:before {
+  content: "\e90d";
+}
 .icon-envelope-o:before {
   content: "\f003";
 }

src/assets/scss/variables.scss

@@ -30,6 +30,7 @@ $dark-gray:   #333;
 $yellow:      #a2dc02;
 
 $white-alpha: rgba(255, 255, 255, 0.8);
+$white-alpha2: rgba(255, 255, 255, 0.4);
 $black-alpha: rgba(0, 0, 0, 0.8);
 $yellow-alpha: rgba(160, 220, 0, 0.8);