Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-12-27 19:03:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactored Navbar into seperate files

Browse Source
This commit is contained in:
Alicia Sykes 2019-08-20 22:41:53 +01:00
parent f583e529b7
commit adaa7fc755
3 changed files with 72 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Header.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<header>
<PageTitle />
<Nav class="nav"/>
</header>
</template>
<script>
import PageTitle from '@/components/PageTitle.vue'
import Nav from '@/components/Nav.vue'
export default {
name: 'Header',
components: {
PageTitle,
Nav
}
}
</script>
<style scoped lang="scss">
header {
margin: 0;
padding: 0.5rem;
display: flex;
justify-content: space-between;
background: #282a32;
align-items: center;
align-content: flex-start;
@media screen and (max-width: 600px) {
flex-direction: column-reverse;
}
}
</style>

36
src/components/PageTitle.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div class="page-titles">
<h1>Pannel</h1>
<span class="subtitle">Awesome subtitle</span>
</div>
</template>
<script>
export default {
name: 'PageTitle'
}
</script>
<style scoped lang="scss">
.page-titles {
display: flex;
flex-direction: column;
h1 {
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3rem;
margin: 0;
}
span.subtitle {
color: #9F86FF;
font-style: italic;
text-shadow: 1px 1px 2px #130f23;
}
@media screen and (max-width: 600px) {
text-align: center;
padding: 0.25rem 0;
}
}
</style>

47
src/views/Home.vue
View File

@ -1,12 +1,6 @@
<template>
<div class="home">
<section class="top-section">
<div class="heading">
<h1>{{title}}</h1>
<span class="subtitle">{{subtitle}}</span>
</div>
<Nav class="nav" />
</section>
<Header />
<FilterTile @user-is-searchin="searching" class="filter-container" />
<div class="item-group-container">
@ -23,7 +17,7 @@
<script>
import Nav from '@/components/Nav.vue'
import Header from '@/components/Header.vue'
import FilterTile from '@/components/FilterTile.vue'
import ItemGroup from '@/components/ItemGroup.vue'
import * as linkData from './../data/item-data.json'
@ -31,7 +25,7 @@ import * as linkData from './../data/item-data.json'
export default {
name: 'home',
components: {
Nav,
Header,
FilterTile,
ItemGroup
},
@ -65,41 +59,6 @@ export default {
padding-bottom: 1px;
}
section.top-section {
margin: 0;
padding: 0.5rem;
display: flex;
justify-content: space-between;
background: #282a32;
align-items: center;
align-content: flex-start;
@media screen and (max-width: 600px) {
flex-direction: column-reverse;
}
}
.heading {
display: flex;
flex-direction: column;
h1 {
background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3rem;
margin: 0;
}
span.subtitle {
color: #9F86FF;
font-style: italic;
text-shadow: 1px 1px 2px #130f23;
}
@media screen and (max-width: 600px) {
text-align: center;
padding: 0.25rem 0;
}
}
.item-group-container {
display: flex;
margin: 2rem;