Browse Source

add exhibitions and videos wip

hotfix/class_typo
Dslak 5 years ago
parent
commit
1a4ab2f2ce
  1. 34
      src/app/admin/admin.component.html
  2. 27
      src/app/admin/admin.component.scss
  3. 21
      src/app/admin/admin.component.ts
  4. BIN
      src/assets/fonts/icomoon.eot
  5. 3
      src/assets/fonts/icomoon.svg
  6. BIN
      src/assets/fonts/icomoon.ttf
  7. BIN
      src/assets/fonts/icomoon.woff
  8. 2
      src/assets/fonts/selection.json
  9. 2
      src/assets/scss/forms.scss
  10. 5
      src/assets/scss/global.scss
  11. 10
      src/assets/scss/icons.scss
  12. 2
      src/assets/scss/variables.scss

34
src/app/admin/admin.component.html

@ -21,9 +21,9 @@
<div class="col-12 col-md-3 col-lg-2">
<div class="menu">
<span class="section-title">Works</span>
<button class="action" (click)="showEditor('works-add')">Add</button>
<button class="action" (click)="showEditor('works-modify')">Modify</button>
<button class="action" (click)="showEditor('works-delete')">Delete</button>
<button class="action" [ngClass]="{'active': activeEditor == 'works-add'}" (click)="showEditor('works-add')">Add</button>
<button class="action" [ngClass]="{'active': activeEditor == 'works-modify'}" (click)="showEditor('works-modify')">Modify</button>
<button class="action" [ngClass]="{'active': activeEditor == 'works-delete'}" (click)="showEditor('works-delete')">Delete</button>
</div>
</div>
<div class="col p-5">
@ -58,16 +58,36 @@
<div class="col-6">
<span class="label">Exhibitions</span>
<select class="input-select" name="exhibitions">
<option value="" [selected]="aaa"></option>
<option value=""></option>
<option value="{{exhibition.title}}" *ngFor="let exhibition of exhibitions" (click)="exhibitionAdd($event,exhibition.id)">
{{exhibition.date_from | date}} | {{exhibition.title}}
</option>
</select>
<span class="label font-12 pt-2">Selected exhibitions</span>
<span class="selected-exhibition" *ngFor="let se of selectedExhibitions" (click)="exhibitionRemove(se.id)">
{{se.date_from | date}} | {{se.title}}
</span>
</div>
<div class="col-6">
<span class="label">Selected exhibitions</span>
<span class="selected-exhibition" *ngFor="let se of selectedExhibitions" (click)="exhibitionRemove(se.id)">
{{se.title}}
<span class="label">Video</span>
<div class="w-30 d-inline-block pr-1">
<select class="input-select" name="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>
<div class="w-10 d-inline-block">
<button class="button">v</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>
</div>
</form>

27
src/app/admin/admin.component.scss

@ -28,16 +28,28 @@
padding: 20px 0 5px 0;
}
.selected-exhibition {
.selected-exhibition,
.selected-video {
display: block;
position: relative;
font-size: $font-16;
font-weight: bolder;
border-radius: 4px;
border: 2px solid $white;
background: $white-alpha;
cursor: pointer;
padding: 8px 20px;
padding: 8px 50px 8px 15px;
margin-bottom: 5px;
&:before {
content: '\e903';
position: absolute;
top: 8px;
right: 10px;
font-family: $font-icon;
font-size: $font-20;
color: $gray;
}
}
}
}
@ -54,13 +66,14 @@
text-transform: uppercase;
color: $white;
text-align: center;
border-bottom: 1px dotted $white-alpha;
border-bottom: 1px solid $black-alpha;
}
.action {
display: block;
appearance: none;
border: none;
border-radius: 0px;
width: 100%;
padding: 10px;
font-size: $font-14;
@ -68,7 +81,13 @@
color: $white;
background: $dark-gray;
cursor: pointer;
border-bottom: 1px dotted $white-alpha;
border-bottom: 1px solid $black-alpha;
&.active {
background: $yellow;
color: $black;
border: none;
}
}
}
}

21
src/app/admin/admin.component.ts

@ -14,8 +14,10 @@ export class AdminComponent implements OnInit {
public password: string = ''
public activeEditor: string = ''
public exhibitions: any = []
public videos: any = []
public selectedExhibitions: any = []
public selectedVideos: any = []
constructor(
private authService: AuthService,
@ -61,13 +63,30 @@ export class AdminComponent implements OnInit {
}
exhibitionAdd(e, id): void {
//e.originalTarget.value = ''
this.selectedExhibitions.push(
this.exhibitions.filter(item => item.id == id)[0]
)
this.exhibitions = this.exhibitions.filter(item => item.id != id)
}
exhibitionRemove(id): void {
this.exhibitions.push(
this.selectedExhibitions.filter(item => item.id == id)[0]
)
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)
}
videoRemove(id): void {
this.videos.push(
this.selectedVideos.filter(item => item.id == id)[0]
)
this.selectedVideos = this.selectedVideos.filter(item => item.id != id)
}
}

BIN
src/assets/fonts/icomoon.eot

Binary file not shown.

3
src/assets/fonts/icomoon.svg

@ -8,6 +8,9 @@
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="back" d="M424.633 593.293l-386.090-308.871h946.914v100h-661.836l163.48 130.785z" />
<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="&#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" />

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/fonts/icomoon.ttf

Binary file not shown.

BIN
src/assets/fonts/icomoon.woff

Binary file not shown.

2
src/assets/fonts/selection.json

File diff suppressed because one or more lines are too long

2
src/assets/scss/forms.scss

@ -56,7 +56,7 @@ select {
border: none;
background: $black;
display: inline-block;
padding: 8px 20px 10px 20px !important;
padding: 10px 20px 10px 20px !important;
text-align: center;
font-family: $font-20;
text-transform: uppercase;

5
src/assets/scss/global.scss

@ -24,11 +24,10 @@ button {
}
}
.w-100 {
width: 100%;
@each $size in 10,20,30,40,50,60,70,80,90,100 {
.w-#{$size} {width: percentage($size/100) !important;}
}
.particles {
position: fixed;
top: 0;

10
src/assets/scss/icons.scss

@ -25,6 +25,16 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-left:before {
content: "\e901";
}
.icon-chevron-down:before {
content: "\e902";
}
.icon-delete:before {
content: "\e903";
}
.icon-envelope-o:before {
content: "\f003";
}

2
src/assets/scss/variables.scss

@ -23,7 +23,7 @@ $breadcrumb-height: 60px;
// Colors
$white: #fff;
$black: #000;
$gray: #ccc;
$gray: #999;
$light-gray: #eee;
$dark-gray: #333;

Loading…
Cancel
Save