From 41457c208b42173e04c1857b192ab56d6d365411 Mon Sep 17 00:00:00 2001 From: Thor Galle Date: Thu, 20 Jul 2017 10:08:20 +0200 Subject: [PATCH 1/2] Album detail merge --- config.xml | 2 +- package-lock.json | 35 ++++++++++++++++++++++++ package.json | 2 +- src/pages/album-detail/album-detail.html | 3 +- src/pages/album-detail/album-detail.ts | 8 ++++++ 5 files changed, 47 insertions(+), 3 deletions(-) diff --git a/config.xml b/config.xml index d675c8e..408935e 100644 --- a/config.xml +++ b/config.xml @@ -81,7 +81,7 @@ - + diff --git a/package-lock.json b/package-lock.json index 61bc55f..f19a7ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -277,11 +277,26 @@ "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-3.12.1.tgz", "integrity": "sha512-cncRlkun1lwJ0kZUs7jrDbmHDvHNdveJhdsgJT7nGLavbK54UN3CdBjMcAk7zNOqlil6nXY8Nn/2B6WpUmQRNg==" }, + "@ionic-native/file": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@ionic-native/file/-/file-4.0.1.tgz", + "integrity": "sha1-ZWYNMX4KiKxS1lPzrO/wMDBuVVI=" + }, "@ionic-native/file-chooser": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@ionic-native/file-chooser/-/file-chooser-4.0.1.tgz", "integrity": "sha1-kHc35shRF6AvUHNYyxUDVypIg8U=" }, + "@ionic-native/file-path": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@ionic-native/file-path/-/file-path-4.0.1.tgz", + "integrity": "sha1-96LrvU5WukuxL4qOTxttIziXGsQ=" + }, + "@ionic-native/file-transfer": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@ionic-native/file-transfer/-/file-transfer-4.0.1.tgz", + "integrity": "sha1-enA8BJSO4wKIAxMTySTnHviCiTM=" + }, "@ionic-native/splash-screen": { "version": "3.12.1", "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-3.12.1.tgz", @@ -292,6 +307,11 @@ "resolved": "https://registry.npmjs.org/@ionic-native/status-bar/-/status-bar-3.12.1.tgz", "integrity": "sha512-2kpSR/+Hma5tpYni0m5X+DbU4yalkIKlW8qfhnfdMuw5a6qKCoqE0UNxnJ3RxVh3OjCCYy0c99gEFMVIG2oezg==" }, + "@ionic-native/transfer": { + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/@ionic-native/transfer/-/transfer-3.14.0.tgz", + "integrity": "sha1-Q/t7kScvJFEzBjsKGllHknsJsho=" + }, "@ionic/app-scripts": { "version": "1.3.12", "resolved": "https://registry.npmjs.org/@ionic/app-scripts/-/app-scripts-1.3.12.tgz", @@ -2512,11 +2532,26 @@ "resolved": "https://registry.npmjs.org/cordova-plugin-device/-/cordova-plugin-device-1.1.6.tgz", "integrity": "sha1-LSF2TK18m4AVI+TgmjDgJLJJM0s=" }, + "cordova-plugin-file": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-4.3.3.tgz", + "integrity": "sha1-AS6Xqhr7kfhJFuY0G1SDZtI96bk=" + }, + "cordova-plugin-file-transfer": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/cordova-plugin-file-transfer/-/cordova-plugin-file-transfer-1.6.3.tgz", + "integrity": "sha1-bHHeY7B2y+xXDspmRYb/mlG4rCE=" + }, "cordova-plugin-filechooser": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cordova-plugin-filechooser/-/cordova-plugin-filechooser-1.0.1.tgz", "integrity": "sha1-+lnpe4zdkSYL4L7EYNuOxd6TSI8=" }, + "cordova-plugin-filepath": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cordova-plugin-filepath/-/cordova-plugin-filepath-1.0.2.tgz", + "integrity": "sha1-ULj22YKjIoWFCKas9hhwE/MqPBw=" + }, "cordova-plugin-splashscreen": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-4.0.3.tgz", diff --git a/package.json b/package.json index afcab21..8d25b6c 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "cordova-plugin-compat": "^1.1.0", "cordova-plugin-console": "^1.0.7", "cordova-plugin-device": "^1.1.6", - "cordova-plugin-file": "^4.0.0", + "cordova-plugin-file": "^4.3.3", "cordova-plugin-file-transfer": "^1.6.3", "cordova-plugin-filechooser": "^1.0.1", "cordova-plugin-filepath": "^1.0.2", diff --git a/src/pages/album-detail/album-detail.html b/src/pages/album-detail/album-detail.html index 6652c03..a67c7db 100644 --- a/src/pages/album-detail/album-detail.html +++ b/src/pages/album-detail/album-detail.html @@ -11,7 +11,8 @@

This is a test question? Or is it?

+ class="album-thumb" [ngStyle]="{'background-image': 'url(' + getThumb(album.stories[i].source) + ')'}" + (click)="showDetails(album, i)"> diff --git a/src/pages/album-detail/album-detail.ts b/src/pages/album-detail/album-detail.ts index 1cb6a5d..f9be765 100644 --- a/src/pages/album-detail/album-detail.ts +++ b/src/pages/album-detail/album-detail.ts @@ -4,6 +4,8 @@ import {StoryService} from "../../services/back-end/story.service"; import {Album} from "../../dto/album"; import {UtilService} from "../../services/util-service"; import {NewStoryPage} from "../new-story/new-story"; +import {StoriesPage} from "../stories/stories"; +import { StoryDetailsPage } from "../storydetails/storydetails"; @Component({ selector: 'album-detail', @@ -91,4 +93,10 @@ export class AlbumDetailPage implements OnInit { ; actionSheet.present(); } + showDetails(album: Album, index: number) { + this.navCtrl.push(StoryDetailsPage, { + "album": album, + "index": index ? index : 0 + }) + } } From f2a656cbf892c7f26ca580db20a452b78be4e62d Mon Sep 17 00:00:00 2001 From: Thor Galle Date: Thu, 20 Jul 2017 11:18:29 +0200 Subject: [PATCH 2/2] Story detail redesign & misc fixes --- src/app/app.scss | 12 +++-- src/pages/album-detail/album-detail.ts | 2 +- src/pages/storydetails/storydetails.html | 58 ++++++++++++------------ src/pages/storydetails/storydetails.scss | 26 +++++++++++ src/theme/variables.scss | 5 +- 5 files changed, 67 insertions(+), 36 deletions(-) diff --git a/src/app/app.scss b/src/app/app.scss index f2bacbe..02a9ebc 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -41,15 +41,17 @@ h1, h2, h3, .toolbar-title, ion-list-header .label, .tab-button-text { // TOOLBAR -.toolbar-background-md { - - background-color: map-get($colors, 'primary'); +.header .toolbar { - .toolbar-title-md { + .toolbar-content .title .toolbar-title { color: #fff; } - .bar-button { + .bar-button .button-inner { color: #fff; } } + +.toolbar-background-md { + background-color: map-get($colors, 'primary'); +} diff --git a/src/pages/album-detail/album-detail.ts b/src/pages/album-detail/album-detail.ts index f9be765..eac6e77 100644 --- a/src/pages/album-detail/album-detail.ts +++ b/src/pages/album-detail/album-detail.ts @@ -80,7 +80,7 @@ export class AlbumDetailPage implements OnInit { } }, { - text: 'Cancel', + text: 'Annuleer', role: 'cancel', icon: 'md-arrow-back', handler: () => { diff --git a/src/pages/storydetails/storydetails.html b/src/pages/storydetails/storydetails.html index 3687b1a..79c466e 100644 --- a/src/pages/storydetails/storydetails.html +++ b/src/pages/storydetails/storydetails.html @@ -8,34 +8,36 @@ - - - - - - {{album.stories[index].description}} - -
- -
-
- -
-
- -
- - +

Vul het verhaal aan

+ + + + + diff --git a/src/pages/storydetails/storydetails.scss b/src/pages/storydetails/storydetails.scss index 9c46939..16f4a36 100644 --- a/src/pages/storydetails/storydetails.scss +++ b/src/pages/storydetails/storydetails.scss @@ -1,10 +1,36 @@ page-storydetails { .description { + padding: 1em; + color: #fff; background-color: color($colors, general); + font-size: map-get($sizes, 'medium'); + } + + .detail-button { + width: 100%; + font-size: map-get($sizes, 'medium'); + background-color: transparent; + text-align: left; + padding-left: 1em; + + div { + p { + color: color($colors, grey-text); + margin-left: 0.4em; + } + } + } + + .detail-button > div > * { + display: inline-block; } .ion-card-content { width: 100%; height: 100%; } + + img { + display: block; + } } diff --git a/src/theme/variables.scss b/src/theme/variables.scss index cc49aa4..06ba564 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -31,7 +31,7 @@ $content-padding: 0; $colors: ( // primary: #488aff, - primary: #647FC6, + primary: #637DC8, secondary: #33b5e5, danger: #ffbb33, light: #ABAEB4, @@ -39,7 +39,8 @@ $colors: ( dark: #1f5760, general: #647FC6, // prisma added - dark-text: #545B6E + dark-text: #545B6E, + grey-text: #545B6E ); $sizes: (