diff --git a/src/actions/open-learnplace-action.ts b/src/actions/open-learnplace-action.ts index dd68fe77..4e1cb10e 100644 --- a/src/actions/open-learnplace-action.ts +++ b/src/actions/open-learnplace-action.ts @@ -26,7 +26,8 @@ export class OpenLearnplaceAction extends ILIASObjectAction { async execute(): Promise { - const loadingPage: Modal = this.modalController.create(LoadingPage); + const loadingPage: Modal = this.modalController.create(LoadingPage,undefined, + { cssClass: "modal-fullscreen" }); await loadingPage.present(); try { await this.loader.load(this.learnplaceObjectId); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1d0d5cd1..c10ee536 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -23,6 +23,7 @@ import {DB_MIGRATION, DBMigration} from "../services/migration/migration.api"; import {SynchronizationService} from "../services/synchronization.service"; import {LoadingPage} from "./fallback/loading/loading.component"; import getMessage = Logging.getMessage; +import { OnboardingPage } from "../pages/onboarding/onboarding"; @Component({ templateUrl: "app.html" @@ -39,6 +40,7 @@ export class MyApp { settingsPage: object = SettingsPage; infoPage: object = InfoPage; loginPage: object = LoginPage; + onboardingPage: object = OnboardingPage; newsPage: string = "NewsPage"; //needs to be string in order to get lazy loaded LoadingPage: object = LoadingPage; loggedIn: boolean = false; @@ -143,7 +145,7 @@ export class MyApp { */ openTestpage(): void { this.menu.close(); - this.nav.push(LoadingPage); + this.nav.push(OnboardingPage); } // presentLoading(): void { @@ -213,6 +215,7 @@ export class MyApp { this.configureDefaultTranslation(); this.rootPage = this.loginPage; + this.presentOnboardingModal(); } } @@ -295,4 +298,14 @@ export class MyApp { } }); } + + // tslint:disable-next-line:typedef + presentOnboardingModal() { + // tslint:disable-next-line:typedef + const onboardingModal = this.modal.create(OnboardingPage, + undefined, + { cssClass: "modal-fullscreen" } + ); + onboardingModal.present(); + } } diff --git a/src/app/app.html b/src/app/app.html index 74b87a31..411cd3b6 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -45,7 +45,7 @@ {{ 'settings.title' | translate:[]}} - diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5dc1afb5..09d9d311 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -61,6 +61,7 @@ import { } from "../learnplace/services/visitjournal.service"; import {FavoritesPage} from "../pages/favorites/favorites"; import {InfoPage} from "../pages/info/info"; +import {OnboardingPage} from "../pages/onboarding/onboarding"; import {LoginPage} from "../pages/login/login"; import {ModalPage} from "../pages/modal/modal"; import {NewObjectsPage} from "../pages/new-objects/new-objects"; @@ -130,6 +131,7 @@ import {HTTP} from "@ionic-native/http"; SyncFinishedModal, ModalPage, LoadingPage, + OnboardingPage, /* from src/learnplace */ MapPage, @@ -176,6 +178,7 @@ import {HTTP} from "@ionic-native/http"; SyncFinishedModal, //NewsPage, LoadingPage, + OnboardingPage, /* from src/learnplace */ MapPage, diff --git a/src/app/fallback/loading/loading.html b/src/app/fallback/loading/loading.html index a1ee0d08..dffbfbbb 100644 --- a/src/app/fallback/loading/loading.html +++ b/src/app/fallback/loading/loading.html @@ -2,13 +2,18 @@ + - + -

+

diff --git a/src/app/fallback/loading/loading.scss b/src/app/fallback/loading/loading.scss index 83766142..383d17dd 100644 --- a/src/app/fallback/loading/loading.scss +++ b/src/app/fallback/loading/loading.scss @@ -42,3 +42,46 @@ // 50% { padding-left: 50%; } 100% { margin-left: 150%; } } + +.custom-spinner { + margin: 100px auto 0; + width: 200px; + text-align: center; +} + +.custom-spinner > div { + width: 60px; + height: 60px; + // background-color: color($colors, primary, base); + background-image: url("/assets/img/molly_pony_white.svg"); + + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} + +.custom-spinner .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.custom-spinner .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} + +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } +} + +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 4f31b082..a8de0a0b 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -114,7 +114,7 @@ "download_successful": "Datei wurde heruntergeladen", "cant_open_file": "Es wurde keine Applikation gefunden, die diesen Dateityp öffnen kann.", "server_not_reachable": "Sie haben keine Verbindung zum Server, versuchen Sie es später erneut oder loggen Sie sich erneut ein.", - "server_response_validation_error": "Es besteht ein Problem mit der Server Kommunikation, dies kann durch eine veraltete App Version verursacht werden." + "server_response_validation_error": "Es besteht ein Problem mit der Server Kommunikation, dies kann durch eine veraltete App Version verursacht werden. Falls der Fehler bestehen bleibt, versuche Dich auszulogen und neu einzulogen." }, "details" : { "last_update": "Letztes Update", @@ -240,5 +240,20 @@ "activate": "Standort aktivieren", "back": "Nope, ich will zurück" } + }, + "onboarding": { + "title1": "Mit ILIAS Pegasus kannst Du:", + "function1": "Deine ILIAS Kursunterlagen auf Deinem Smartphone nutzen.", + "function2": "Deine Kurse & Dateien offline verfügbar machen.", + "function3": "Dich einmal einloggen und bleibst dann immer eingeloggt.", + "title2": "Eine dezentrale App", + "concept1": "Die Pegasus App verbindet Dich mit der ILIAS Installation Deiner Institution, Uni oder Schule. Und nur mit dieser.", + "concept2": "Wenn Deine Institution noch nicht mitmacht, schreib uns doch an", + "title3":"Deine Daten sind sicher!", + "datasecurity1": "Deine Daten werden nur auf Deinem Gerät gespeichert. Die App erhebt keinerlei personenbezogene Daten. Wenn Du dies im Detail prüfen möchtest, findest Du hier die", + "datasecurity2": "Datenschutzerklärung", + "datasecurity3": "ILIAS Pegasus ist ein Open Source Projekt. Wenn Du Dich selbst überzeugen möchtest, was die App tut, dann kannst Du hier den Code einsehen:", + "next":"Weiter", + "start": "Los geht's" } } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 2fede0d4..d9d0a90c 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -68,7 +68,9 @@ }, "info": { "title": "Info", - "guide": "Guide" + "guide": "Guide", + "instructions1": "If you're on the Home page 'My Courses and Groups' you can mark the courses and groups as 'available Offline'. They are marked with a gray cloud. Once the files are synced, the cloud turns blue.", + "instructions2": "The synchronization will start automatically each time the app is started or if a course has been marked as Available Offline. Manual synchronization can also be started by dragging (Pull to Refresh) the 'My Courses and Groups' page." }, "logout": { "title": "Logout", @@ -110,7 +112,7 @@ "download_successful": "Download successful", "cant_open_file": "There's no application that could open this filetype.", "server_not_reachable": "We cannot reach the server, please try again later or try logging in again.", - "server_response_validation_error": "Server communication issue, please make sure to run the latest app and try again." + "server_response_validation_error": "Server communication issue, please make sure to run the latest app and try again. Try login out and log in again-" }, "details" : { "last_update": "Last update", @@ -232,5 +234,20 @@ "browser_no": "No. return!", "loading": "Learnplace", "loading_subtitle": "Hang on a minute. If the learnplace contains a lot of content, it may take some time to download." + }, + "onboarding": { + "title1": "Whith the help of ILIAS Pegasus you can:", + "function1": "access your ILIAS courses on your smartphone.", + "function2": "make your courses & files available offline.", + "function3": "log in once and stay logged in.", + "title2": "A decentralized app", + "concept1": "The Pegasus app connects you to the ILIAS installation of your institution, university or school.", + "concept2": "If your institution did not join yet, contact us", + "title3":"Your data is safe!", + "datasecurity1": "Your data will only be stored on your device. The app does not collect any personal information. If you want to check this in detail, you will find here the", + "datasecurity2": "privacy policy", + "datasecurity3": "ILIAS Pegasus is an open source project. If you want to see for yourself what the app does, then you can see the code here:", + "next":"next", + "start": "Let's go" } } diff --git a/src/assets/i18n/it.json b/src/assets/i18n/it.json index 017947ea..4a8a1fde 100644 --- a/src/assets/i18n/it.json +++ b/src/assets/i18n/it.json @@ -66,7 +66,10 @@ }, "info": { "title": "Informazioni", - "guide": "Guida" + "guide": "Guida", + "instructions1": "If you're on the Home page 'My Courses and Groups' you can mark the courses and groups as 'available Offline'. They are marked with a gray cloud. Once the files are synced, the cloud turns blue.", + "instructions2": "The synchronization will start automatically each time the app is started or if a course has been marked as Available Offline. Manual synchronization can also be started by dragging (Pull to Refresh) the 'My Courses and Groups' page." + }, "logout": { "title": "Disconnettersi", @@ -226,5 +229,20 @@ "browser_no": "Senza ritorno!", "loading": "luogo di apprendimento", "loading_subtitle": "Aspetta un attimo. Se il punto di apprendimento contiene molti contenuti, potrebbe essere necessario del tempo per il download." - } + }, + "onboarding": { + "title1": "Whith the help of ILIAS Pegasus you can:", + "function1": "access your ILIAS courses on your smartphone.", + "function2": "make your courses & files available offline.", + "function3": "log in once and stay logged in.", + "title2": "A decentralized app", + "concept1": "The Pegasus app connects you to the ILIAS installation of your institution, university or school.", + "concept2": "If your institution did not join yet, contact us", + "title3":"Your data is safe!", + "datasecurity1": "Your data will only be stored on your device. The app does not collect any personal information. If you want to check this in detail, you will find here the", + "datasecurity2": "privacy policy", + "datasecurity3": "ILIAS Pegasus is an open source project. If you want to see for yourself what the app does, then you can see the code here:", + "next":"next", + "start": "Let's go" + } } diff --git a/src/assets/icon/icon_more.svg b/src/assets/icon/icon_more.svg new file mode 100644 index 00000000..4e72c570 --- /dev/null +++ b/src/assets/icon/icon_more.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + diff --git a/src/assets/icon/ios-lock.svg b/src/assets/icon/ios-lock.svg new file mode 100644 index 00000000..bcb91cba --- /dev/null +++ b/src/assets/icon/ios-lock.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/src/assets/img/decentralized.svg b/src/assets/img/decentralized.svg new file mode 100644 index 00000000..a2b5976f --- /dev/null +++ b/src/assets/img/decentralized.svg @@ -0,0 +1,203 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/stura.svg b/src/assets/img/stura.svg new file mode 100644 index 00000000..7531f659 --- /dev/null +++ b/src/assets/img/stura.svg @@ -0,0 +1,233 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/favorites/favorites.html b/src/pages/favorites/favorites.html index 6a812916..be71e45e 100644 --- a/src/pages/favorites/favorites.html +++ b/src/pages/favorites/favorites.html @@ -1,7 +1,7 @@ - Favorites + {{ 'favorites.title' | translate:{value: null} }} + + + + +

{{ 'onboarding.title2' | translate:[]}}

+

+ {{ 'onboarding.concept1' | translate:[]}} +

+

+ {{ 'onboarding.concept2' | translate:[]}} + support@ilias-pegasus.de +

+ + + + + + +

{{ 'onboarding.title3' | translate:[]}}

+

+ {{ 'onboarding.datasecurity1' | translate:[]}} + {{ 'onboarding.datasecurity2' | translate:[]}} +

+

+ {{ 'onboarding.datasecurity3' | translate:[]}} +

+ Github +

+

+ + + + + + diff --git a/src/pages/onboarding/onboarding.scss b/src/pages/onboarding/onboarding.scss new file mode 100644 index 00000000..0f40968c --- /dev/null +++ b/src/pages/onboarding/onboarding.scss @@ -0,0 +1,126 @@ +// .onboarding { +// color:white; + +.decentral{ + width: 40%; + padding-top: 10px; + padding-left: 15%; + padding-right: 15%; + // margin: 10%; +} + +.logo{ + width:40%; + padding-left: 35%; + padding-right: 25%; +} +.lock{ + width:40%; + padding-left: 35%; + padding-right: 35%; +} + + .huge-header{ + padding-top: 5%; + padding-bottom: 5%; + font-weight: 800; + font-size: 1.8em; + color: white; + // color: color($colors, primary, base); + } + + .central-text{ + padding-left: 15%; + padding-right: 15%; + // padding-bottom: 6%; + font-weight: 600; + color: white; + + font-size: 0.8em; + } + + .flagtoflag{ + width: 80%; + margin: auto; + } + + .grid-text{ + // padding-left: 15%; + // padding-right: 15%; + // padding-bottom: 6%; + font-weight: 600; + + font-size: 0.8em; + padding-bottom: 6%; + text-align: left; + padding-right: 5%; + } + + .logo{ + width: 50%; + + // background-image: url(/assets/icon/icon_galliker.svg); + // background-size: 140%; + // background-repeat: no-repeat; + } + + .notification-badge{ + text-align: center; + position: absolute; + bottom: 27%; + left: 12%; + } + + .flag_1{ + // background-color: color($colors, secondary, base); + // border-radius: 50%; + // background-size: 80%; + + height:20vw; + width: 30vw; + margin: auto; + // margin-bottom: 5%; + -webkit-animation: wobble-hor-bottom 30s infinite both; + animation: wobble-hor-bottom 30s infinite both; + z-index: -100; + } + + .directions{ + width: 20%; + height: 10%; + } + +ion-slide { + align-items: flex-start; + color: white; +} + +ion-item { + margin-bottom: 5px; + font-size: 1.2em; + background-color: map-get($colors, primary); +} + +flash-card { + color: #000; + + img { + width: 70%; + height: 70vw; + } +} + +.start-slide { + justify-content: center; + align-items: center; + color:white; + + button { + // font-size: 1.3em; + // font-weight: bold; + } +} + + + +// } diff --git a/src/pages/onboarding/onboarding.ts b/src/pages/onboarding/onboarding.ts new file mode 100644 index 00000000..f1805048 --- /dev/null +++ b/src/pages/onboarding/onboarding.ts @@ -0,0 +1,35 @@ +import {Component, ViewChild} from "@angular/core"; +import {NavController, ViewController} from "ionic-angular"; +import {InAppBrowser} from "@ionic-native/in-app-browser"; + +/* + Generated class for the InfoPage page. + + See http://ionicframework.com/docs/v2/components/#navigation for more info on + Ionic pages and navigation. +*/ +@Component({ + templateUrl: "onboarding.html" +}) +export class OnboardingPage { + + @ViewChild('slides') slides: any; + + slideOptions: any; + + constructor(public navCtrl: NavController, + public viewCtrl: ViewController, + ) { + + } + + nextSlide(){ + this.slides.slideNext(); + } + + dismiss() { + this.viewCtrl.dismiss(); + } + + +} diff --git a/src/theme/variables.scss b/src/theme/variables.scss index c75c550b..4ff54021 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -96,6 +96,10 @@ $refresher-text-font-size: 1em; color:white; } + +.white-text{ + color: white; +} .blue-gradient-invert{ background-image: linear-gradient(to top right, #4a668b, #003c66)