Skip to content

Commit 258b4aa

Browse files
marcoambrosinimarcoambrosini
committed
Fix mobile layout
Signed-off-by: Marco <marcoambrosini@icloud.com>
1 parent 8702b14 commit 258b4aa

File tree

5 files changed

+54
-19
lines changed

5 files changed

+54
-19
lines changed

‎js/firstrunwizard-main.js‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15833,10 +15833,18 @@ __webpack_require__.r(__webpack_exports__);
1583315833
};
1583415834
},
1583515835
hasPrevious() {
15836-
return this.page > 1;
15836+
if (window.innerWidth <= 512) {
15837+
return false;
15838+
} else {
15839+
return this.page > 1;
15840+
}
1583715841
},
1583815842
hasNext() {
15839-
return this.page < 3;
15843+
if (window.innerWidth <= 512) {
15844+
return false;
15845+
} else {
15846+
return this.page < 3;
15847+
}
1584015848
}
1584115849
},
1584215850
methods: {
@@ -15903,6 +15911,14 @@ __webpack_require__.r(__webpack_exports__);
1590315911
return 'https://play.google.com/store/apps/details?id=com.nextcloud.client';
1590415912
}
1590515913
return undefined;
15914+
},
15915+
ariaLabel() {
15916+
if (this.type === 'ios') {
15917+
return t('firstrunwizard', 'Download on Apple app store');
15918+
} else if (this.type === 'android') {
15919+
return t('firstrunwizard', 'Download on Google play store');
15920+
}
15921+
return undefined;
1590615922
}
1590715923
}
1590815924
});
@@ -16131,7 +16147,8 @@ var render = function render() {
1613116147
}), _vm._v(" "), _vm.page > 1 ? _c("NcButton", {
1613216148
staticClass: "first-run-wizard__back-button",
1613316149
attrs: {
16134-
type: "tertiary"
16150+
type: "tertiary",
16151+
"aria-label": "t('firstrunwizard', 'Go to previous page')"
1613516152
},
1613616153
on: {
1613716154
click: _vm.goToPreviousPage
@@ -16150,7 +16167,8 @@ var render = function render() {
1615016167
}) : _vm._e(), _vm._v(" "), _c("NcButton", {
1615116168
staticClass: "first-run-wizard__close-button",
1615216169
attrs: {
16153-
type: _vm.page === 1 ? "primary" : "tertiary"
16170+
type: _vm.page === 1 ? "primary" : "tertiary",
16171+
"aria-label": "t('firstrunwizard', 'Close dialog')"
1615416172
},
1615516173
on: {
1615616174
click: _vm.close
@@ -16208,6 +16226,9 @@ var render = function render() {
1620816226
staticClass: "app-store-badge",
1620916227
style: _vm.badgeStyle,
1621016228
attrs: {
16229+
"aria-label": _vm.ariaLabel,
16230+
target: "_blank",
16231+
rel: "noreferrer",
1621116232
href: _vm.href
1621216233
}
1621316234
});
@@ -16240,9 +16261,9 @@ var render = function render() {
1624016261
"card--link": _vm.isLink
1624116262
},
1624216263
attrs: {
16243-
href: _vm.href,
16264+
href: _vm.href || undefined,
1624416265
target: !_vm.isLink ? undefined : "_blank",
16245-
rel: !_vm.isLink ? undefined : "noopener noreferrer"
16266+
rel: !_vm.isLink ? undefined : "noreferrer"
1624616267
}
1624716268
}, [!_vm.isLink ? _c("div", {
1624816269
staticClass: "card__icon"
@@ -16320,7 +16341,7 @@ var render = function render() {
1632016341
return _c("div", {
1632116342
staticClass: "page__wrapper"
1632216343
}, [_c("div", {
16323-
staticClass: "page__scroller"
16344+
staticClass: "page__scroller first-page"
1632416345
}, [_c("h2", {
1632516346
staticClass: "page__heading"
1632616347
}, [_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", {
@@ -23351,7 +23372,7 @@ __webpack_require__.r(__webpack_exports__);
2335123372

2335223373
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()));
2335323374
// Module
23354-
___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}", ""]);
23375+
___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}", ""]);
2335523376
// Exports
2335623377
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2335723378

@@ -23459,7 +23480,7 @@ __webpack_require__.r(__webpack_exports__);
2345923480

2346023481
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()));
2346123482
// Module
23462-
___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}", ""]);
23483+
___CSS_LOADER_EXPORT___.push([module.id, "/*\n- @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@proton.me>\n-\n- @author Simon Lindner <szaimen@e.mail.de>\n- @author Marco Ambrosini <marcoambrosini@proton.me>\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}", ""]);
2346323484
// Exports
2346423485
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2346523486

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

2348723508
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()));
2348823509
// Module
23489-
___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}", ""]);
23510+
___CSS_LOADER_EXPORT___.push([module.id, "/*\n- @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@proton.me>\n-\n- @author Simon Lindner <szaimen@e.mail.de>\n- @author Marco Ambrosini <marcoambrosini@proton.me>\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}", ""]);
2349023511
// Exports
2349123512
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2349223513

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

2351423535
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()));
2351523536
// Module
23516-
___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}", ""]);
23537+
___CSS_LOADER_EXPORT___.push([module.id, "/*\n- @copyright Copyright (c) 2023 Marco Ambrosini <marcoambrosini@proton.me>\n-\n- @author Simon Lindner <szaimen@e.mail.de>\n- @author Marco Ambrosini <marcoambrosini@proton.me>\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}", ""]);
2351723538
// Exports
2351823539
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
2351923540

@@ -130564,4 +130585,4 @@ window.OCA.FirstRunWizard = {
130564130585

130565130586
/******/ })()
130566130587
;
130567-
//# sourceMappingURL=firstrunwizard-main.js.map?v=100639be53062189ca30
130588+
//# sourceMappingURL=firstrunwizard-main.js.map?v=13b910b09f1c83dc8a87

‎js/firstrunwizard-main.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
</template>
6262

6363
<script>
64-
import { NcModal, NcButton } from '@nextcloud/vue'
64+
import { NcModal, NcButton, isMobile } from '@nextcloud/vue'
6565
import { imagePath, generateUrl } from '@nextcloud/router'
6666
import axios from '@nextcloud/axios'
6767
@@ -112,11 +112,19 @@ export default {
112112
},
113113
114114
hasPrevious() {
115-
return this.page > 1
115+
if (window.innerWidth <= 512) {
116+
return false
117+
} else {
118+
return this.page > 1
119+
}
116120
},
117121
118122
hasNext() {
119-
return this.page < 3
123+
if (window.innerWidth <= 512) {
124+
return false
125+
} else {
126+
return this.page < 3
127+
}
120128
},
121129
},
122130
@@ -151,7 +159,6 @@ export default {
151159
position: relative;
152160
overflow: hidden;
153161
padding: calc(var(--default-grid-baseline) * 5);
154-
border-radius: var(--border-radius-large);
155162
display: flex;
156163
min-height: min(520px, 80vh);
157164
}
@@ -200,6 +207,13 @@ export default {
200207
display: contents;
201208
}
202209
210+
@media only screen and (max-width: 512px) {
211+
:deep .modal-wrapper .modal-container {
212+
height: 100vh;
213+
top: 0;
214+
}
215+
}
216+
203217
:deep .modal-container__close {
204218
display: none;
205219
}

‎src/components/Page1.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,6 @@ export default {
8888
@import "pageStyles";
8989
9090
.first-page{
91-
margin-top: 80px;
91+
margin-top: 100px;
9292
}
9393
</style>

‎src/components/pageStyles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@
3030

3131
&__scroller {
3232
overflow-y: scroll;
33+
margin-top: calc(var(--default-grid-baseline) * 8);
3334
}
3435

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

4040
&__subtitle{

0 commit comments

Comments
 (0)