diff --git a/css/firstrunwizard.css b/css/firstrunwizard.scss similarity index 66% rename from css/firstrunwizard.css rename to css/firstrunwizard.scss index 4181dec2..f3c4b961 100644 --- a/css/firstrunwizard.css +++ b/css/firstrunwizard.scss @@ -1,5 +1,4 @@ #firstrunwizard { - text-align: center; } #cboxLoadedContent { @@ -14,6 +13,7 @@ background-repeat: no-repeat; background-size: cover; color: #fff; + text-align: center; } #firstrunwizard .firstrunwizard-header .logo { background-image: url('../../../core/img/logo.svg'); @@ -37,7 +37,7 @@ } #firstrunwizard h2 { - margin: 35px 0 10px; + margin: 30px 0 10px; line-height: 120%; } @@ -57,6 +57,53 @@ font-size: 14px; } +#firstrunwizard .page { + margin-bottom: 50px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + .image { + padding: 20px; + max-width: calc(50% - 40px); + flex-grow: 1; + img { + width: 100%; + } + } + .content { + padding: 20px; + } + .description { + margin: 20px; + width: auto; + flex-grow: 1; + max-width: calc(50% - 40px); + } + ul { + margin: 10px; + li { + margin-left: 20px; + list-style-type: circle; + list-style-position: outside; + } + } + a:not(.button) { + text-decoration: underline; + } +} + +.wizard-navigation { + display: flex; + position: absolute; + bottom: 10px; + width: calc(100% - 24px); + .prev, .next { + flex-grow: 1; + } + .next { + text-align: right; + } +} #firstrunwizard p a { font-weight: bold; color: #0082c9; diff --git a/js/firstrunwizard.js b/js/firstrunwizard.js index 983d7bee..86472796 100644 --- a/js/firstrunwizard.js +++ b/js/firstrunwizard.js @@ -1,3 +1,19 @@ +function getTotal() { + return $('#firstrunwizard .page').length; +} + +function getCurrent() { + return $('#firstrunwizard .page.active').index('#firstrunwizard .page'); +} + +function isLast() { + return getCurrent() >= getTotal()-1; +} + +function isFirst() { + return getCurrent() === 0; +} + function showFirstRunWizard(){ $.colorbox({ opacity: 0.7, @@ -11,7 +27,59 @@ function showFirstRunWizard(){ url: OC.generateUrl('/apps/firstrunwizard/wizard'), type: 'delete' }); - } + }, + onComplete: function() { + var $wizard = $('#firstrunwizard'); + var $finish = $wizard.find('#finish'); + var $prev = $wizard.find('#prev'); + var $next = $wizard.find('#next'); + var $pages = $wizard.find('.page'); + $finish.hide(); + $pages.hide(); + $prev.hide(); + $pages.first().fadeIn().addClass('active'); + $.colorbox.resize(); + $wizard.on('click', '#next', function() { + var active = $('#firstrunwizard .active'); + var next = active.next(); + $prev.show(); + if (getCurrent() < getTotal()-1) { + active.hide().removeClass('active'); + next.show().addClass('active'); + } + + if (isLast()) { + $next.hide(); + $finish.show(); + } else { + $next.show(); + $finish.hide(); + } + $.colorbox.resize(); + }); + $('#firstrunwizard').on('click', '#prev', function() { + var active = $('#firstrunwizard .active'); + var prev = active.prev(); + active.hide().removeClass('active'); + prev.show().addClass('active'); + $next.show(); + $finish.hide(); + if (!isFirst()) { + active.hide().removeClass('active'); + prev.show().addClass('active'); + } + + if (isFirst()) { + $prev.hide(); + } else { + $prev.show(); + } + $.colorbox.resize(); + }); + $('#firstrunwizard').on('click', '#finish', function() { + $.colorbox.close(); + }); + }, }); } diff --git a/templates/wizard.php b/templates/wizard.php index 39d8440d..89b86921 100644 --- a/templates/wizard.php +++ b/templates/wizard.php @@ -7,59 +7,129 @@ ?>
-
+
- - - - + + + + -

getSlogan()); ?>

-

t('Access & share your files, calendars, contacts, mail & more from any device, on your terms'));?>

+

getSlogan()); ?>

+

t('Access & share your files, calendars, contacts, mail & more from any device, on your terms')); ?>

-
+
-
+
+
+
+
+

Nextcloud puts your data at your fingertips, under your control. Store your documents, calendar, contacts and photos on a server at home, at one of our providers or in a data center you know.

+

We have some tipps for you to get started:

+ +
+
-

t('Get the apps to sync your files'));?>

- - <?php p($l->t('Desktop client'));?> - - - <?php p($l->t('Android app'));?> - - - <?php p($l->t('iOS app'));?> - +
+
+
+

+ You can extend the functionality of your Nextcloud with extra features from the Nextcloud app store. Among the more than 100 apps you can find features that enhance sharing, including: +

+
    +
  • Groupware apps like Calendar, Contacts, Mail, News, Notes, Bookmarks and Tasks
    • +
  • Collaboration and productivity apps Keepass management, Video Calls, a Kanban app, music players, Password managers, Checksums, download manager, a Markdown editor and collaborative text editing.
    • +
  • Security and authentication features like two-factor authentication mechanisms, SSO, Ransomware protection, admin announcements, Zimbra integration, a tiny CMS app and more.
    • +
+ Browse the app store +
+
-

t('Connect your desktop apps to %s', array($theme->getName()))); ?>

- - - t('Connect your calendar'));?> - - - - t('Connect your contacts'));?> - - - - t('Access files via WebDAV'));?> - +
+
+

Nextcloud gives you access to your files wherever you are. Our easy to use desktop and mobile clients are available for all major platforms at zero cost!

+

t('Get the apps to sync your files')); ?>

+ + <?php p($l->t('Desktop client')); ?> + + + <?php p($l->t('Android app')); ?> + + + <?php p($l->t('iOS app')); ?> + +

t('Connect your desktop apps to %s', array($theme->getName()))); ?>

+ + + t('Connect your calendar')); ?> + + + + t('Connect your contacts')); ?> + + + + t('Access files via WebDAV')); ?> + +
+
+
+
+

t('Get more information')); ?>

+

The Nextcloud documentation for home users:

+ +

You can also ask for help in our community support channels:

+ +
+
-

-t('There’s more information in the documentation and on our website.', array($theme->getDocBaseUrl(), $theme->getBaseUrl()))); ?>
-t('If you like Nextcloud, recommend it to your friends and contribute back!')); ?> -

+

Start contributing

+

Do you want to get a certain improvement in Nextcloud? Did you find a problem? Do you want to help translate, promote or document Nextcloud?

+ Become part of the Community. -
+

Enterprise support

+

If you run Nextcloud in a mission critical environment with large numbers of users and big amounts of data and need the certainty of support from the experts behind the Nextcloud technology, a Enterprise Subscription from Nextcloud is available with email and phone support.

+ Get enterprise support + +
+
+ +
+ + +
+
+
\ No newline at end of file