Skip to content

Commit

Permalink
Fix mobile layout
Browse files Browse the repository at this point in the history 
Signed-off-by: Marco <[email protected]>
  • Loading branch information
@marcoambrosini
marcoambrosini committed Nov 2, 2023
1 parent 8702b14 commit 258b4aa
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 19 deletions.
45 changes: 33 additions & 12 deletions js/firstrunwizard-main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15833,10 +15833,18 @@ __webpack_require__.r(__webpack_exports__);
};
},
hasPrevious() {
return this.page > 1;
if (window.innerWidth <= 512) {
return false;
} else {
return this.page > 1;
}
},
hasNext() {
return this.page < 3;
if (window.innerWidth <= 512) {
return false;
} else {
return this.page < 3;
}
}
},
methods: {
Expand Down Expand Up @@ -15903,6 +15911,14 @@ __webpack_require__.r(__webpack_exports__);
return 'https://play.google.com/store/apps/details?id=com.nextcloud.client';
}
return undefined;
},
ariaLabel() {
if (this.type === 'ios') {
return t('firstrunwizard', 'Download on Apple app store');
} else if (this.type === 'android') {
return t('firstrunwizard', 'Download on Google play store');
}
return undefined;
}
}
});
Expand Down Expand Up @@ -16131,7 +16147,8 @@ var render = function render() {
}), _vm._v(" "), _vm.page > 1 ? _c("NcButton", {
staticClass: "first-run-wizard__back-button",
attrs: {
type: "tertiary"
type: "tertiary",
"aria-label": "t('firstrunwizard', 'Go to previous page')"
},
on: {
click: _vm.goToPreviousPage
Expand All @@ -16150,7 +16167,8 @@ var render = function render() {
}) : _vm._e(), _vm._v(" "), _c("NcButton", {
staticClass: "first-run-wizard__close-button",
attrs: {
type: _vm.page === 1 ? "primary" : "tertiary"
type: _vm.page === 1 ? "primary" : "tertiary",
"aria-label": "t('firstrunwizard', 'Close dialog')"
},
on: {
click: _vm.close
Expand Down Expand Up @@ -16208,6 +16226,9 @@ var render = function render() {
staticClass: "app-store-badge",
style: _vm.badgeStyle,
attrs: {
"aria-label": _vm.ariaLabel,
target: "_blank",
rel: "noreferrer",
href: _vm.href
}
});
Expand Down Expand Up @@ -16240,9 +16261,9 @@ var render = function render() {
"card--link": _vm.isLink
},
attrs: {
href: _vm.href,
href: _vm.href || undefined,
target: !_vm.isLink ? undefined : "_blank",
rel: !_vm.isLink ? undefined : "noopener noreferrer"
rel: !_vm.isLink ? undefined : "noreferrer"
}
}, [!_vm.isLink ? _c("div", {
staticClass: "card__icon"
Expand Down Expand Up @@ -16320,7 +16341,7 @@ var render = function render() {
return _c("div", {
staticClass: "page__wrapper"
}, [_c("div", {
staticClass: "page__scroller"
staticClass: "page__scroller first-page"
}, [_c("h2", {
staticClass: "page__heading"
}, [_vm._v("\n\t\t\t" + _vm._s(_vm.t("firstrunwizard", "A collaboration platform that puts you in control")) + "\n\t\t")]), _vm._v(" "), _c("div", {
Expand Down Expand Up @@ -23351,7 +23372,7 @@ __webpack_require__.r(__webpack_exports__);

var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".first-run-wizard__wrapper[data-v-7ba5bd90] {\n min-height: 500px;\n position: relative;\n overflow: hidden;\n padding: calc(var(--default-grid-baseline) * 5);\n height: 100%;\n border-radius: var(--border-radius-large);\n}\n.first-run-wizard__background-circle--first-page[data-v-7ba5bd90] {\n height: 6000px;\n width: 6000px;\n border-radius: 3000px;\n background-color: var(--color-primary-element);\n position: absolute;\n left: calc(-3000px + 50%);\n}\n.first-run-wizard__back-button[data-v-7ba5bd90] {\n position: absolute;\n top: var(--default-grid-baseline);\n left: var(--default-grid-baseline);\n}\n.first-run-wizard__close-button[data-v-7ba5bd90] {\n position: absolute;\n top: var(--default-grid-baseline);\n right: var(--default-grid-baseline);\n}\n.first-run-wizard__logo[data-v-7ba5bd90] {\n height: 70px;\n position: relative;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 100px;\n width: 120px;\n margin: auto;\n}\n[data-v-7ba5bd90] .modal-wrapper .modal-container__content {\n overflow: hidden;\n height: 100%;\n display: contents;\n}\n[data-v-7ba5bd90] .modal-container__close {\n display: none;\n}", ""]);
___CSS_LOADER_EXPORT___.push([module.id, ".first-run-wizard__wrapper[data-v-7ba5bd90] {\n position: relative;\n overflow: hidden;\n padding: calc(var(--default-grid-baseline) * 5);\n display: flex;\n min-height: min(520px, 80vh);\n}\n.first-run-wizard__background-circle--first-page[data-v-7ba5bd90] {\n height: 6000px;\n width: 6000px;\n border-radius: 3000px;\n background-color: var(--color-primary-element);\n position: absolute;\n left: calc(-3000px + 50%);\n}\n.first-run-wizard__back-button[data-v-7ba5bd90] {\n position: absolute;\n top: var(--default-grid-baseline);\n left: var(--default-grid-baseline);\n}\n.first-run-wizard__close-button[data-v-7ba5bd90] {\n position: absolute;\n top: var(--default-grid-baseline);\n right: var(--default-grid-baseline);\n}\n.first-run-wizard__logo[data-v-7ba5bd90] {\n height: 70px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 100px;\n margin: auto;\n position: absolute;\n left: 0;\n width: 100%;\n}\n[data-v-7ba5bd90] .modal-wrapper .modal-container {\n overflow: hidden;\n}\n[data-v-7ba5bd90] .modal-wrapper .modal-container__content {\n overflow: hidden;\n height: 100%;\n display: contents;\n}\n@media only screen and (max-width: 512px) {\n[data-v-7ba5bd90] .modal-wrapper .modal-container {\n height: 100vh;\n top: 0;\n}\n}\n[data-v-7ba5bd90] .modal-container__close {\n display: none;\n}", ""]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);

Expand Down Expand Up @@ -23459,7 +23480,7 @@ __webpack_require__.r(__webpack_exports__);

var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".page__wrapper[data-v-20de4a82] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.page__scroller[data-v-20de4a82] {\n overflow-y: scroll;\n}\n.page__heading[data-v-20de4a82] {\n text-align: center;\n margin-top: calc(var(--default-grid-baseline) * 8);\n}\n.page__subtitle[data-v-20de4a82] {\n max-width: 450px;\n margin: auto;\n text-align: center;\n}\n.page__content[data-v-20de4a82] {\n display: flex;\n flex-wrap: wrap;\n gap: calc(var(--default-grid-baseline) * 6);\n justify-content: center;\n margin: calc(var(--default-grid-baseline) * 10) 0;\n}", ""]);
___CSS_LOADER_EXPORT___.push([module.id, "/*\n- @copyright Copyright (c) 2023 Marco Ambrosini <[email protected]>\n-\n- @author Simon Lindner <[email protected]>\n- @author Marco Ambrosini <[email protected]>\n-\n- @license GNU AGPL version 3 or any later version\n-\n- This program is free software: you can redistribute it and/or modify\n- it under the terms of the GNU Affero General Public License as\n- published by the Free Software Foundation, either version 3 of the\n- License, or (at your option) any later version.\n-\n- This program is distributed in the hope that it will be useful,\n- but WITHOUT ANY WARRANTY; without even the implied warranty of\n- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n- GNU Affero General Public License for more details.\n-\n- You should have received a copy of the GNU Affero General Public License\n- along with this program. If not, see <http://www.gnu.org/licenses/>.\n-\n*/\n.page__wrapper[data-v-20de4a82] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.page__scroller[data-v-20de4a82] {\n overflow-y: scroll;\n margin-top: calc(var(--default-grid-baseline) * 8);\n}\n.page__heading[data-v-20de4a82] {\n text-align: center;\n}\n.page__subtitle[data-v-20de4a82] {\n max-width: 450px;\n margin: auto;\n text-align: center;\n}\n.page__content[data-v-20de4a82] {\n display: flex;\n flex-wrap: wrap;\n gap: calc(var(--default-grid-baseline) * 6);\n justify-content: center;\n margin: calc(var(--default-grid-baseline) * 10) 0;\n}\n.first-page[data-v-20de4a82] {\n margin-top: 100px;\n}", ""]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);

Expand All @@ -23486,7 +23507,7 @@ __webpack_require__.r(__webpack_exports__);

var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".page__wrapper[data-v-20ec6203] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.page__scroller[data-v-20ec6203] {\n overflow-y: scroll;\n}\n.page__heading[data-v-20ec6203] {\n text-align: center;\n margin-top: calc(var(--default-grid-baseline) * 8);\n}\n.page__subtitle[data-v-20ec6203] {\n max-width: 450px;\n margin: auto;\n text-align: center;\n}\n.page__content[data-v-20ec6203] {\n display: flex;\n flex-wrap: wrap;\n gap: calc(var(--default-grid-baseline) * 6);\n justify-content: center;\n margin: calc(var(--default-grid-baseline) * 10) 0;\n}", ""]);
___CSS_LOADER_EXPORT___.push([module.id, "/*\n- @copyright Copyright (c) 2023 Marco Ambrosini <[email protected]>\n-\n- @author Simon Lindner <[email protected]>\n- @author Marco Ambrosini <[email protected]>\n-\n- @license GNU AGPL version 3 or any later version\n-\n- This program is free software: you can redistribute it and/or modify\n- it under the terms of the GNU Affero General Public License as\n- published by the Free Software Foundation, either version 3 of the\n- License, or (at your option) any later version.\n-\n- This program is distributed in the hope that it will be useful,\n- but WITHOUT ANY WARRANTY; without even the implied warranty of\n- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n- GNU Affero General Public License for more details.\n-\n- You should have received a copy of the GNU Affero General Public License\n- along with this program. If not, see <http://www.gnu.org/licenses/>.\n-\n*/\n.page__wrapper[data-v-20ec6203] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.page__scroller[data-v-20ec6203] {\n overflow-y: scroll;\n margin-top: calc(var(--default-grid-baseline) * 8);\n}\n.page__heading[data-v-20ec6203] {\n text-align: center;\n}\n.page__subtitle[data-v-20ec6203] {\n max-width: 450px;\n margin: auto;\n text-align: center;\n}\n.page__content[data-v-20ec6203] {\n display: flex;\n flex-wrap: wrap;\n gap: calc(var(--default-grid-baseline) * 6);\n justify-content: center;\n margin: calc(var(--default-grid-baseline) * 10) 0;\n}", ""]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);

Expand All @@ -23513,7 +23534,7 @@ __webpack_require__.r(__webpack_exports__);

var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".page__wrapper[data-v-20fa7984] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.page__scroller[data-v-20fa7984] {\n overflow-y: scroll;\n}\n.page__heading[data-v-20fa7984] {\n text-align: center;\n margin-top: calc(var(--default-grid-baseline) * 8);\n}\n.page__subtitle[data-v-20fa7984] {\n max-width: 450px;\n margin: auto;\n text-align: center;\n}\n.page__content[data-v-20fa7984] {\n display: flex;\n flex-wrap: wrap;\n gap: calc(var(--default-grid-baseline) * 6);\n justify-content: center;\n margin: calc(var(--default-grid-baseline) * 10) 0;\n}\n.page__content[data-v-20fa7984] {\n margin: calc(var(--default-grid-baseline) * 10) 0 calc(var(--default-grid-baseline) * 4) 0;\n}\n.version-number[data-v-20fa7984] {\n margin: 0px 0 calc(var(--default-grid-baseline) * 4) 0;\n color: var(--color-text-maxcontrast);\n text-align: center;\n}", ""]);
___CSS_LOADER_EXPORT___.push([module.id, "/*\n- @copyright Copyright (c) 2023 Marco Ambrosini <[email protected]>\n-\n- @author Simon Lindner <[email protected]>\n- @author Marco Ambrosini <[email protected]>\n-\n- @license GNU AGPL version 3 or any later version\n-\n- This program is free software: you can redistribute it and/or modify\n- it under the terms of the GNU Affero General Public License as\n- published by the Free Software Foundation, either version 3 of the\n- License, or (at your option) any later version.\n-\n- This program is distributed in the hope that it will be useful,\n- but WITHOUT ANY WARRANTY; without even the implied warranty of\n- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n- GNU Affero General Public License for more details.\n-\n- You should have received a copy of the GNU Affero General Public License\n- along with this program. If not, see <http://www.gnu.org/licenses/>.\n-\n*/\n.page__wrapper[data-v-20fa7984] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n.page__scroller[data-v-20fa7984] {\n overflow-y: scroll;\n margin-top: calc(var(--default-grid-baseline) * 8);\n}\n.page__heading[data-v-20fa7984] {\n text-align: center;\n}\n.page__subtitle[data-v-20fa7984] {\n max-width: 450px;\n margin: auto;\n text-align: center;\n}\n.page__content[data-v-20fa7984] {\n display: flex;\n flex-wrap: wrap;\n gap: calc(var(--default-grid-baseline) * 6);\n justify-content: center;\n margin: calc(var(--default-grid-baseline) * 10) 0;\n}\n.page__content[data-v-20fa7984] {\n margin: calc(var(--default-grid-baseline) * 6) 0 calc(var(--default-grid-baseline) * 4) 0;\n}\n.version-number[data-v-20fa7984] {\n margin: 0px 0 calc(var(--default-grid-baseline) * 4) 0;\n color: var(--color-text-maxcontrast);\n text-align: center;\n}", ""]);
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);

Expand Down Expand Up @@ -130564,4 +130585,4 @@ window.OCA.FirstRunWizard = {

/******/ })()
;
//# sourceMappingURL=firstrunwizard-main.js.map?v=100639be53062189ca30
//# sourceMappingURL=firstrunwizard-main.js.map?v=13b910b09f1c83dc8a87
2 changes: 1 addition & 1 deletion js/firstrunwizard-main.js.map
View file

Large diffs are not rendered by default.

22 changes: 18 additions & 4 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
</template>

<script>
import { NcModal, NcButton } from '@nextcloud/vue'
import { NcModal, NcButton, isMobile } from '@nextcloud/vue'
import { imagePath, generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios'

Expand Down Expand Up @@ -112,11 +112,19 @@ export default {
},

hasPrevious() {
return this.page > 1
if (window.innerWidth <= 512) {
return false
} else {
return this.page > 1
}
},

hasNext() {
return this.page < 3
if (window.innerWidth <= 512) {
return false
} else {
return this.page < 3
}
},
},

Expand Down Expand Up @@ -151,7 +159,6 @@ export default {
position: relative;
overflow: hidden;
padding: calc(var(--default-grid-baseline) * 5);
border-radius: var(--border-radius-large);
display: flex;
min-height: min(520px, 80vh);
}
Expand Down Expand Up @@ -200,6 +207,13 @@ export default {
display: contents;
}

@media only screen and (max-width: 512px) {
:deep .modal-wrapper .modal-container {
height: 100vh;
top: 0;
}
}

:deep .modal-container__close {
display: none;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Page1.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,6 @@ export default {
@import "pageStyles";

.first-page{
margin-top: 80px;
margin-top: 100px;
}
</style>
2 changes: 1 addition & 1 deletion src/components/pageStyles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@

&__scroller {
overflow-y: scroll;
margin-top: calc(var(--default-grid-baseline) * 8);
}

&__heading {
text-align: center;
margin-top: calc(var(--default-grid-baseline) * 8);
}

&__subtitle{
Expand Down

0 comments on commit 258b4aa

Please sign in to comment.