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 0000000..db61640 Binary files /dev/null and b/src/assets/irizar.jpg differ 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; } }