From afdf236526ac13504cd51569e7d64e9764e01b61 Mon Sep 17 00:00:00 2001 From: Siroco Date: Wed, 3 Oct 2018 23:36:09 +0200 Subject: [PATCH] Cambios en la interfaz y uso de la galeria y el visor de PDF. Cambios en el estilo y estructura --- package-lock.json | 35 ++++ package.json | 6 + src/app/app-routing.module.ts | 1 + src/app/footer/footer.component.html | 3 +- .../menu-childs/menu-childs.component.html | 9 +- src/app/menu-childs/menu-childs.component.ts | 10 +- src/app/page.service.ts | 58 +++--- src/app/page.ts | 5 +- src/app/page/page.component.html | 65 +++---- src/app/page/page.component.ts | 74 +++++++- src/app/section/section.component.html | 2 +- src/app/section/section.component.ts | 1 + src/assets/irizar.jpg | Bin 0 -> 7650 bytes src/styles.css | 169 +++++++----------- 14 files changed, 275 insertions(+), 163 deletions(-) create mode 100644 src/assets/irizar.jpg diff --git a/package-lock.json b/package-lock.json index 582cd3e..eae3462 100644 --- a/package-lock.json +++ b/package-lock.json @@ -225,6 +225,14 @@ "tslib": "1.9.2" } }, + "@ks89/angular-modal-gallery": { + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/@ks89/angular-modal-gallery/-/angular-modal-gallery-6.2.3.tgz", + "integrity": "sha512-5Bj8mZT13Jlmvrc6XV6mk51cqKv8BxWVK/wMVl9oxFz7ANj7Rbk4cscWBOl+Hwn4b4A0Y7CewokIEZbPxovG6w==", + "requires": { + "tslib": "1.9.2" + } + }, "@ngtools/json-schema": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.2.0.tgz", @@ -275,6 +283,12 @@ "semver-intersect": "1.3.1" } }, + "@types/hammerjs": { + "version": "2.0.36", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.36.tgz", + "integrity": "sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ==", + "dev": true + }, "@types/jasmine": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.8.tgz", @@ -290,6 +304,12 @@ "@types/jasmine": "2.8.8" } }, + "@types/mousetrap": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.0.tgz", + "integrity": "sha512-Jn2cF8X6RAMiSmJaATGjf2r3GzIfpZQpvnQhKprQ5sAbMaNXc7hc9sA2XHdMl3bEMEQhTV79JVW7n4Pgg7sjtg==", + "dev": true + }, "@types/node": { "version": "6.0.112", "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.112.tgz", @@ -4216,6 +4236,11 @@ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", "dev": true }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=" + }, "handle-thing": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz", @@ -5424,6 +5449,11 @@ "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=", "dev": true }, + "jquery": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", + "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" + }, "js-base64": { "version": "2.4.5", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.5.tgz", @@ -6369,6 +6399,11 @@ "minimist": "0.0.8" } }, + "mousetrap": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.2.tgz", + "integrity": "sha512-jDjhi7wlHwdO6q6DS7YRmSHcuI+RVxadBkLt3KHrhd3C2b+w5pKefg3oj5beTcHZyVFA9Aksf+yEE1y5jxUjVA==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/package.json b/package.json index 900690d..9a552e0 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,12 @@ "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", + "@ks89/angular-modal-gallery": "^6.2.3", "bootstrap": "^4.1.1", "core-js": "^2.4.1", + "hammerjs": "^2.0.8", + "jquery": "^3.3.1", + "mousetrap": "^1.6.2", "rxjs": "^5.5.6", "simple-pdf-viewer": "^2.0.2", "zone.js": "^0.8.19" @@ -31,8 +35,10 @@ "@angular/cli": "~1.7.4", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", + "@types/hammerjs": "^2.0.36", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", + "@types/mousetrap": "^1.6.0", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 76e13b9..ac007c4 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -13,6 +13,7 @@ const routes: Routes = [ { path: ':id', component: PageComponent }, { path: ':parent/intro', redirectTo:':parent'}, { path: ':parent/:id', component: PageComponent}, + { path: ':parent/:subparent/:id', component: PageComponent}, { path: '**', component: HomeComponent } ]; diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html index fd8de31..4984059 100644 --- a/src/app/footer/footer.component.html +++ b/src/app/footer/footer.component.html @@ -1,5 +1,6 @@ diff --git a/src/app/menu-childs/menu-childs.component.html b/src/app/menu-childs/menu-childs.component.html index 8941e0d..993a1a2 100644 --- a/src/app/menu-childs/menu-childs.component.html +++ b/src/app/menu-childs/menu-childs.component.html @@ -1,4 +1,11 @@ diff --git a/src/app/menu-childs/menu-childs.component.ts b/src/app/menu-childs/menu-childs.component.ts index 92b7ca6..9427ad3 100644 --- a/src/app/menu-childs/menu-childs.component.ts +++ b/src/app/menu-childs/menu-childs.component.ts @@ -13,7 +13,8 @@ export class MenuChildsComponent implements OnInit { @Input() parent_id: string; @Input() parent_link: string; - childs : PageItem[]; + @Input() parent_title: string; + childs : PageItem[] = []; plink:string; constructor(private pageService : PageService) { } @@ -22,11 +23,14 @@ export class MenuChildsComponent implements OnInit { this.getChilds(); } - getChilds() { - this.pageService.getChilds(this.parent_id) + getChilds(id = this.parent_id) { + this.pageService.getChilds(id) .subscribe(data => { this.childs = data; this.plink = ''; + // data.forEach( (child)=> { + // if (child.hasChild) { this.pageService.getChilds(child.id); } + // }) }); } diff --git a/src/app/page.service.ts b/src/app/page.service.ts index 0508ffc..7ea34f9 100644 --- a/src/app/page.service.ts +++ b/src/app/page.service.ts @@ -20,17 +20,17 @@ export class PageService { public sanitizer: DomSanitizer ) { } - getItems() : void { - //console.log("getItems"); - let url = `${this.apiUrl}/pages`; - let search = new URLSearchParams(); - search.set('foo', 'moo'); - search.set('limit', "25"); - search.set('_embed',''); - this.http.get(url,{search:search}) - .toPromise() - .then(res => console.log(res.json())); - } + // getItems() : void { + // //console.log("getItems"); + // let url = `${this.apiUrl}/pages`; + // let search = new URLSearchParams(); + // search.set('foo', 'moo'); + // search.set('limit', "25"); + // search.set('_embed',''); + // this.http.get(url,{search:search}) + // .toPromise() + // .then(res => console.log(res.json())); + // } getParentPages() : Observable { let search = new URLSearchParams(); @@ -48,29 +48,46 @@ export class PageService { // console.log("childs de: "+id); let search = new URLSearchParams(); search.set('parent',id); - return this.getPages(search); + return this.getPages(search,true); } - getPages(searchParams) : Observable { + getPages(searchParams, childs = false) : Observable { searchParams.set('orderby','menu_order'); searchParams.set('_embed',''); + searchParams.set('per_page',20); //searchParams.set('context','embed'); let url = `${this.apiUrl}/pages`; return this.http.get(url,{search:searchParams}) .map(res => { return res.json().map(item => { - //console.log(item); let page = new PageItem( item.id as string, item.title.rendered, - item.excerpt.rendered, + item.acf.descripcion, item.content.rendered, item.slug, item.parent ); + /*parent */ + page['parent_title']=item['parentTitle']['title']; + page['parent_link']=item['parentTitle']['link']; + + /* chilsd */ + page["hasChild"]=item["hasChild"]; + // if (item["hasChild"]) { + // // + // let search = new URLSearchParams(); + // search.set('parent',id); + // searchParams.set('orderby','menu_order'); + // searchParams.set('_embed',''); + // this.http.get(url,{search:searchParams}) + // } + /* featured images */ - if ( item["_embedded"]["wp:featuredmedia"] ) { + if ( !childs && item["_embedded"]["wp:featuredmedia"]) { + console.log('featured image: '+item.id); + console.log(item["_embedded"]["wp:featuredmedia"]) page["featuredmedia"] = item["_embedded"]["wp:featuredmedia"]; if (item["_embedded"]["wp:featuredmedia"][0]["media_details"]["sizes"]["large"]) { @@ -85,18 +102,19 @@ export class PageService { } /* Publitas */ - if (item["acf"] && item["acf"]["libro_publitas"]) { - page["publitas_link"] = this.sanitizer.bypassSecurityTrustUrl(item["acf"]["libro_publitas"]); + if (!childs && item["acf"] && item["acf"]["libro_publitas"]) { + //page["publitas_link"] = this.sanitizer.bypassSecurityTrustUrl(item["acf"]["libro_publitas"]); + page["publitas_link"] = item["acf"]["libro_publitas"]; //this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.iframeUrl); } /* Gallery */ // console.log(item['gallery']) - if (item["gallery"]) { + if (!childs && item["gallery"]) { page['gallery'] = []; let c = 0; item["gallery"].forEach( (i)=> { - var im = new Image(c, { img: i['modal'], description: 'Description 1' },{ img: i['thumb'] }); + var im = new Image(c, { img: i['modal'], title: i['title'], alt:i['title'], description: i['desc'] },{ img: i['thumb'], title: i['title'], alt:i['title'], description: i['desc'] }); page['gallery'].push(im); c++; }); diff --git a/src/app/page.ts b/src/app/page.ts index 6cf7449..3789781 100644 --- a/src/app/page.ts +++ b/src/app/page.ts @@ -13,7 +13,10 @@ export class PageItem { public link?: string, public publitas_link?: SafeUrl, public featuredmedia ? : any[], - public gallery? : Array + public gallery? : Array, + public hasChild? : boolean, + public childs?: PageItem[], + public parent_title? : string, ) {} // public set (key,attr) { diff --git a/src/app/page/page.component.html b/src/app/page/page.component.html index 266fcb5..966af2b 100644 --- a/src/app/page/page.component.html +++ b/src/app/page/page.component.html @@ -1,8 +1,11 @@ +
+

Cargando...

+
-
+
@@ -12,40 +15,42 @@
  • Video
  • Imágen
    • --> - - + +
    -
    -
    -
    -
    -
    -
    - -
    - -
    {{img.modal.description ? img.modal.description : 'No description available'}} -
    -
    -     -
    - -
    -
    -
    - -
    - -
    -
    - - - - +
    +
    +
    +
    + +
    + +
    +
    + + + + +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +

    Galería fotográfica

    + +
    diff --git a/src/app/page/page.component.ts b/src/app/page/page.component.ts index 452fb07..99423ec 100644 --- a/src/app/page/page.component.ts +++ b/src/app/page/page.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { PageService } from '../page.service'; import { PageItem } from '../page'; -import { ActivatedRoute } from "@angular/router"; +import { ActivatedRoute,Router, NavigationEnd } from "@angular/router"; import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'; import { AccessibilityConfig, @@ -25,6 +25,8 @@ import { PreviewConfig } from '@ks89/angular-modal-gallery'; +import * as $ from 'jquery'; + @Component({ selector: 'app-page', templateUrl: './page.component.html', @@ -43,7 +45,8 @@ export class PageComponent implements OnInit { private route: ActivatedRoute, private pageService: PageService, private galleryService: GalleryService, - private sanitizer: DomSanitizer + private sanitizer: DomSanitizer, + private router: Router ){ this.route.params.subscribe( params => { this.slug = params.id; @@ -52,23 +55,82 @@ export class PageComponent implements OnInit { } ); } - ngOnInit() {} + ngOnInit() { + console.log('init') + // $('html body').animate( + // {scrollTop:0}, 1000); + document.documentElement.scrollTop = 0 + this.router.events.subscribe((evt) => { + if (!(evt instanceof NavigationEnd)) { + return; + } + window.scrollTo(0, 0) + }); + } getPage() { console.log(this.slug); this.pageService.getPage(this.slug) .subscribe(data => { this.pages = data; - //console.log(data); + console.log(data); }); } /** gallery **/ customPlainGalleryRowDescConfig: PlainGalleryConfig = { - strategy: PlainGalleryStrategy.CUSTOM, - layout: new AdvancedLayout(-1, true) + // strategy: PlainGalleryStrategy.CUSTOM, + strategy: PlainGalleryStrategy.GRID, + layout: new GridLayout({ width: '32%', height: 'auto' }, { length: 2, wrap: true }) + // layout: new AdvancedLayout(-1, true) + }; +buttonsConfigSimple: ButtonsConfig = { + visible: true, + strategy: ButtonsStrategy.SIMPLE +}; + +buttonsConfigIndustria: ButtonsConfig = { + visible:true, + strategy: ButtonsStrategy.CUSTOM, + buttons: [ + { + className: 'download-image', + type: ButtonType.DOWNLOAD, + extUrlInNewTab: true + }, + { + className: 'fullscreen-image', + type: ButtonType.FULLSCREEN + }, + { + className: 'close-image', + type: ButtonType.CLOSE + } + ] +} + +// onButtonBeforeHook(event: ButtonEvent) { +// if (!event || !event.button) { +// return; +// } +// if (event.button.type === ButtonType.DELETE) { +// this.images = this.images.filter((val: Image) => event.image && val.id !== event.image.id); +// } +// } +// +// onButtonAfterHook(event: ButtonEvent) { +// if (!event || !event.button) { +// return; +// } +// } + + onVisibleIndex(event: ImageModalEvent) { + console.log('onVisibleIndex action: ' + Action[event.action]); + console.log('onVisibleIndex result:' + event.result); + } + openImageModalRowDescription(image: Image) { console.log('Opening modal gallery from custom plain gallery row and description, with image: ', image); const index: number = this.getCurrentIndexCustomLayout(image, this.pages[0].gallery); diff --git a/src/app/section/section.component.html b/src/app/section/section.component.html index b51a193..8952a4a 100644 --- a/src/app/section/section.component.html +++ b/src/app/section/section.component.html @@ -5,7 +5,7 @@

    {{page.title}}

    -
    +
    diff --git a/src/app/section/section.component.ts b/src/app/section/section.component.ts index 0b9bbbb..c9e32b3 100644 --- a/src/app/section/section.component.ts +++ b/src/app/section/section.component.ts @@ -15,6 +15,7 @@ export class SectionComponent implements OnInit { ngOnInit() { } get diagnostic() { + console.log(this.pages) return JSON.stringify(this.pages); } diff --git a/src/assets/irizar.jpg b/src/assets/irizar.jpg new file mode 100644 index 0000000000000000000000000000000000000000..db61640e992feae4707aa8b9e3aa05b6c3d5730d GIT binary patch literal 7650 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 literal 0 HcmV?d00001 diff --git a/src/styles.css b/src/styles.css index 7027157..663441a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,30 +1,31 @@ /* You can add global styles to this file, and also import other style files */ @import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; -@import url('https://fonts.googleapis.com/css?family=Tinos'); +@import url('https://fonts.googleapis.com/css?family=Oswald'); @import url('https://fonts.googleapis.com/css?family=Raleway'); -/* + @import url('https://fonts.googleapis.com/css?family=Indie+Flower'); + @font-face { font-family: "Manteka"; font-style: normal; font-weight: normal; src: url('./assets/vision-webfont.woff'); -} */ +} /* main */ * { transition:0.2s;} -body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;} -h1,h2 { font-family: "Raleway", sans-serif;text-transform:uppercase;font-weight:bold;} +body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;font-size:1rem;} +h1,h2 { font-family: "Oswald", sans-serif; text-transform:uppercase; font-weight:bold;} -app-header header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;} +app-home header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;} header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;} header.section { background-attachment: fixed; } header.section > div {padding-top:10%;background-color:rgba(255,255,255,0.6); height:100vh;} -header.section h1 {word-wrap: break-word;} -header.section h1 span {font-size:2.5em;background-color:#d2e8eb; padding:10px;} -header.section h3 {text-align:center; font-size:1.5em;font-weight:400; color:#000; font-family:"Raleway";background-color:#f7886c;padding:20px;} +header.section h1 {word-wrap: break-word;text-align:center;} +header.section h1 span {line-height: 1.8; font-size:2.5em;font-size:10vmin;background-color:#d2e8eb; padding:10px;} +header.section h3 {text-align:center; font-size:1.5em;font-size:4vmin;font-weight:400; color:#000; font-family:"Raleway";background-color:#f7886c;padding:20px;} header.section h1::after {content:'';width:100%;height:100%;position:absolute;} @@ -40,7 +41,7 @@ div.menu div.Search {float:right;} div.menu div.language {float:right;margin:5px;font-size:0.7em;padding-top:1%;} div.menu div.language span {padding:3px;font-family:"Raleway";cursor:pointer;} div.Search input {background:none; border:none; border-bottom:2px solid #000;} -div.menu nav ul li {text-transform:uppercase;height:60px;font-family:"Raleway";padding:10px;min-width:10%;cursor:pointer;} +div.menu nav ul li {font-family:"Oswald",sans-serif; text-transform:uppercase;height:60px;padding:10px;min-width:10%;cursor:pointer;} div.menu nav ul li:hover { background-color:#f7886c;} div.menu nav ul li:active { background-color:#f7886c;color:#fff;} div.menu nav ul li.active { background-color:#f7886c;color:#fff;} @@ -60,16 +61,26 @@ div.ia-section:active { background: #f7886c; } div.ia-section:hover div.ia-select { min-height:300px; background:#f7886c; padding:0 !important; } div.ia-section div.col-md-5, div.ia-section div.col-md-6 { padding:20px;} - +div.ia-section div.ia-home-excerpt { font-size:1.5em; } /*article*/ article {padding-top:80px;} -article img {max-width:100%; height:auto; border:3px solid #f7886c;margin:20px auto;filter:grayscale(0.8);} -article img:hover {filter:none; box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);cursor:pointer;} -article p {font-size:0.9em;} +article img {max-width:100%; height:auto; border:0px solid #f7886c;margin:20px auto;filter:grayscale(0);box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.4);} +article img:hover {filter:none; box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);} +article p {font-size:1.2rem;line-height:2;} article h2 span {background:#d2e8eb;padding:10px;} article h2 {margin-bottom:20px;} article video {max-width:100%;} +article div.article-content { margin:0 20px;} +article div.article-content ul { list-style:circle; } +article div.article-content div.alignright { float: right;width: 50%;margin: 0 0 20px 20px;} +article div.article-content img.alignright { float: right;width: 50%;margin: 0 0 20px 20px;} +article div.article-content div.alignright img {width:100%;} +article div.article-content blockquote {font-family:"Indie Flower", serif; margin: 0 0 1rem 10rem; padding:2rem; background-color:#d2e8eb;} + +article section.section-publitas div.row { min-height:300px; } + +section.page-gallery { margin-top:50px;} /* footer */ footer { min-height:300px; height:100%; background-color:#d2e8eb; padding:20px; color:#000;} @@ -123,12 +134,12 @@ header.item { margin-top:50px;height:0;} .info h1 {margin:20px auto;} .info h1 span {background-color:#d2e8eb;padding:5px;} .info h2 {color:#f7886c;} -.info ul.filters {list-style:none; margin:0;padding:0;} -.info ul.filters li {cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Raleway";text-align:right;} +.info ul.filters {list-style:none; margin:0;padding:0; margin-bottom:50px;} +.info ul.filters li { word-wrap:break-word; cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Raleway";text-align:right;} .info ul.filters li:hover {border-right:0px;color:#f7886c;} .info ul.filters li:active {border-right:0px;color:#fff;background-color:#f7886c;} .info ul.filters li.active {border-right:0px;color:#fff;background-color:#f7886c;} - +.info ul.filters li.parent-header { font-family:"Oswald",sans-serif; background-color:#d2e8eb; font-weight:bold; font-size:1.5rem; color:#fff; padding:30px 30px; border-right:0;} /* imagen */ img.fullwidth {width:100%;} @@ -138,93 +149,51 @@ div.pdf-buttons button {border:0;background:#d2e8eb; font-size:1em;cursor:pointe div.pdf-buttons button:hover {background:#f7886c; } /** gallery */ -/* .my-app-custom-plain-container-row { - align-items: center; - display: flex; - flex-direction: row; - justify-content: flex-start; -} -.my-app-custom-plain-container-row .my-app-custom-image-row { - cursor: pointer; - height: auto; - margin-right: 2px; - width: 50px; -} -.my-app-custom-plain-container-row .my-app-custom-image-row.after { - border-top: 2px; - cursor: pointer; - display: none; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; -} -.my-app-custom-plain-container-column { - align-items: center; - display: flex; - flex-direction: column; - justify-content: flex-start; -} -.my-app-custom-plain-container-column .my-app-custom-image-column { - cursor: pointer; - height: auto; - margin-right: 2px; - width: 50px; -} -.my-app-custom-plain-container-column .my-app-custom-image-column.after { - border-top: 2px; - cursor: pointer; - display: none; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; -} */ + +ks-current-image img { filter:none; } + .my-app-custom-plain-container-with-desc { align-items: center; display: flex; flex-direction: row; justify-content: flex-start; + + figure { + margin: 0; + position: relative; + + img { + max-width: 100%; + height: auto; + cursor: pointer; + } + + figcaption { + background: rgba(0, 0, 0, .5); + color: #fff; + font-size: 85%; + padding: 5px; + position: absolute; + bottom: 3px; + left: 0; + right: 0; + } + } + + .description { + font-weight: bold; + text-align: center; + } + + .my-app-custom-image-with-desc { + height: auto; + margin-right: 2px; + width: 200px; + align-self: start; + } } -.my-app-custom-plain-container-with-desc figure { - margin: 0; - position: relative; -} -.my-app-custom-plain-container-with-desc figure img { - max-width: 100%; - height: auto; - cursor: pointer; -} -.my-app-custom-plain-container-with-desc figure figcaption { - background: rgba(0, 0, 0, .5); - color: #fff; - font-size: 85%; - padding: 5px; - position: absolute; - bottom: 3px; - left: 0; - right: 0; -} -.my-app-custom-plain-container-with-desc .description { - font-weight: bold; - text-align: center; -} -.my-app-custom-plain-container-with-desc .my-app-custom-image-with-desc { - height: 150px; - margin-right: 2px; - width: 200px; - align-self: start; - overflow:hidden; -} -.more { - background: rgba(0, 0, 0, .7); - cursor: pointer; - color: #fff; - padding-top: 4px; - height: 46px; - position: absolute; - text-align: center; - width: 50px; + +@media (max-width:480px) { + div.menu { position:relative;} + div.menu * { width:100%;background:#fff; } }