Add guest content component

Signed-off-by: Christoph Wurst <[email protected]>

src/components/NcGuestContent/NcGuestContent.vue

@@ -0,0 +1,77 @@
+<!--
+ - @copyright Copyright (c) 2022 Christoph Wurst <christoph@winzerhof-wurst.at>
+ -
+ - @author Christoph Wurst <[email protected]>
+ - @author Richard Steinmetz <[email protected]>
+ -
+ - @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/>.
+ -
+ -->
+<docs>
+### General description
+
+This components provides a wrapper around a guest page content.
+
+### Usage
+
+```vue
+<template>
+	<NcGuestContent>
+		<h2>Hello guest</h2>
+		<span>How are you?</span>
+	</NcGuestContent>
+</template>
+```
+</docs>
+
+<template>
+	<div id="guest-content-vue">
+		<slot />
+	</div>
+</template>
+
+<script>
+/**
+ * Guest content container to be used for the guest content of your app
+ */
+export default {
+	name: 'NcGuestContent',
+}
+</script>
+
+<style lang="scss" scoped>
+#guest-content-vue {
+	color: var(--color-main-text);
+	background-color: var(--color-main-background);
+	min-width: 0;
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 0 10px var(--color-box-shadow);
+	height: fit-content;
+	padding: 15px;
+	margin: 20px auto;
+}
+</style>
+
+<style lang="scss">
+#content {
+	// Enable scrolling
+	overflow: auto;
+
+	// Fix box being cutoff at the bottom
+	margin-bottom: 0;
+	height: calc(var(--body-height) + var(--body-container-margin));
+}
+</style>

src/components/NcGuestContent/index.js

@@ -0,0 +1,22 @@
+/*
+ * @copyright 2022 Christoph Wurst <[email protected]>
+ *
+ * @author 2022 Christoph Wurst <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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/>.
+ */
+
+export { default } from './NcGuestContent.vue'

src/components/index.js

@@ -62,6 +62,7 @@ export { default as NcDatetimePicker } from './NcDatetimePicker/index.js'
 export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/index.js'
 export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
 export { default as NcEmptyContent } from './NcEmptyContent/index.js'
+export { default as NcGuestContent } from './NcGuestContent/index.js'
 export { default as NcListItem } from './NcListItem/index.js'
 export { default as NcListItemIcon } from './NcListItemIcon/index.js'
 export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'