Vue Starter SPA

Author: atomjoy

README_DEV.md

@@ -80,3 +80,13 @@ php artisan lang:publish
 # Strony błędów
 php artisan vendor:publish --tag=laravel-errors
 ```
+
+## Contributing example
+
+```sh
+Fork it
+Create your feature branch (git checkout -b my-new-feature)
+Commit your changes (git commit -am 'Add some feature')
+Push to the branch (git push origin my-new-feature)
+Create new Pull Request
+```

resources/css/app.css

@@ -95,6 +95,7 @@ iframe {
 
 ::before,
 ::after {
+	box-sizing: border-box;
 	content: none;
 }
 

resources/js/assets/main.css

@@ -2,4 +2,52 @@ h1 {
 	float: left;
 	width: 100%;
 	font-weight: 900;
+}
+
+.btn {
+	cursor: pointer;
+	display: inline-block;	
+	font-weight: 500;
+	line-height: 1.5;
+	color: #212529;
+	text-align: center;
+	text-decoration: none;
+	vertical-align: middle;
+	user-select: none;
+	background-color: transparent;
+	border: 1px solid transparent;	  
+	padding: .375rem .75rem;
+	font-size: 1rem;
+	border-radius: .25rem;
+	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.btn-primary {
+	color: #fff;
+	background-color: var(--accent-primary); /* #C51B2A; */
+	border-color: var(--accent-primary); /* #C51B2A; */
+	padding: .5rem 2rem;
+	min-width: 130px;
+}
+
+.btn-secondary {
+	color: #fff;
+	background-color: #212529;
+	border-color: #212529;
+	padding: .5rem 2rem;
+	min-width: 130px;
+}
+
+.my-0 {
+	margin-top: 0 !important;
+	margin-bottom: 0 !important;
+}
+
+.mx-2 {
+	margin-right: .5rem !important;
+	margin-left: .5rem !important;
+}
+
+.btn:hover {
+	filter: brightness(1.2);
 }

resources/js/views/error/404.vue

@@ -1,6 +1,13 @@
 <script setup>
 import TopMenu from '@/views/page/menu/TopMenu.vue'
 import ChangeTitle from '@/components/utils/ChangeTitle/ChangeTitle.vue'
+
+function go1() {
+	window.location.href='/'
+}
+function go2() {
+	window.location.href='/about'
+}
 </script>
 
 <template>
@@ -9,11 +16,22 @@ import ChangeTitle from '@/components/utils/ChangeTitle/ChangeTitle.vue'
 
 	<h1>404</h1>
 	<h2>{{ $t('error404.title') }}</h2>
+
+	<div class="text-center">
+		<button id="home-btn" class="btn btn-secondary my-0 mx-2" @click="go1">Home</button>
+		<button id="contact-btn" class="btn btn-primary my-0 mx-2" @click="go2">About</button>
+	</div>
 </template>
 
 <style scoped>
 @import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');
 
+.text-center {
+	display: block;
+	height: auto;
+	text-align: center;
+}
+
 h1 {
 	float: left;
 	width: 100%;