Merge pull request #73 from nextcloud/feature/82/intro-slide

Add image as first slide

Author: rullzer

css/firstrunwizard.scss

@@ -2,6 +2,7 @@
 
 #cboxLoadedContent {
 	border-radius: 3px;
+	overflow: hidden !important;
 }
 
 #firstrunwizard .firstrunwizard-header {
@@ -24,10 +25,6 @@
 	margin: 0 auto;
 }
 
-#firstrunwizard .firstrunwizard-content {
-	margin: 12px;
-}
-
 #firstrunwizard h1 {
 	font-size: 40px;
 	font-weight: 300;
@@ -56,7 +53,7 @@
 }
 
 #firstrunwizard .page {
-	margin-bottom: 60px;
+	margin-bottom: 46px;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -112,6 +109,22 @@
 	}
 }
 #firstrunwizard {
+
+	.page {
+		margin: 12px;
+		margin-bottom: 60px;
+	}
+	.page.intro {
+		margin: 0;
+		margin-bottom: -50px;
+		.content {
+			padding: 0;
+			background-image: url('../img/intro.png');
+			background-position: center;
+			background-size: cover;
+			height: 50vh;
+		}
+	}
 	.content-clients {
 		width: 100%;
 		text-align: center;
@@ -133,7 +146,8 @@
 .wizard-navigation {
 	display: flex;
 	position: absolute;
-	bottom: 10px;
+	bottom: 0;
+	padding: 12px;
 	width: calc(100% - 24px);
 	.prev, .next {
 		flex-grow: 1;
@@ -251,3 +265,15 @@
 		}
 	}
 }
+
+@media only screen and (max-width: 768px) {
+
+	.position-indicator {
+		display: none;
+	}
+
+	#firstrunwizard .page #wizard-values li {
+		margin: 0;
+	}
+
+}

img/intro.png

@@ -0,0 +1,35 @@
+<?php
+/**
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * @var array $_
+ * @var \OCP\IL10N $l
+ * @var \OCP\Defaults $theme
+ */
+?>
+
+<div class="page intro" data-title="<?php p($l->t('A safe home for all your data')); ?>" data-subtitle="">
+	<div class="content">
+
+	</div>
+</div>

templates/page.intro.php

@@ -26,6 +26,7 @@
 
 	<div class="firstrunwizard-content">
 		<?php
+		print_unescaped($this->inc('page.intro'));
 		print_unescaped($this->inc('page.values'));
 		print_unescaped($this->inc('page.clients'));