KevinMidboe/planetposen
1
0
Fork 0
mirror of https://github.com/KevinMidboe/planetposen.git synced 2025-10-29 17:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Renamed header to navigation. Added scss mixin for desktop and mobile. Separate mobile and desktop navigation elements. Transparent planetposen logos in assets/

Browse Source
This commit is contained in:
Kevin
2019-12-03 00:45:13 +01:00
parent 57b1b6cd16
commit 59bfbbfc01
7 changed files with 179 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/App.vue
View File

@@ -1,17 +1,17 @@
<template> <template>
<div> <div>
<Header></Header> <Navigation></Navigation>
<router-view /> <router-view />
</div> </div>
</template> </template>
<script> <script>
import Header from '@/components/Header'; import Navigation from '@/components/Navigation';
export default { export default {
name: 'App', name: 'App',
components: { Header } components: { Navigation }
} }
</script> </script>

BIN
frontend/assets/images/logo-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
frontend/assets/images/logo-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

102
frontend/components/Header.vue
View File

@@ -1,102 +0,0 @@
<template>
<header class="flex space-between">
<div>
<img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" />
<router-link to="/" class="header-element">
<span>Hjem</span>
</router-link>
<router-link to="/" class="header-element">
<span>Om oss</span>
</router-link>
<router-link to="/" class="header-element">
<span>Produkter</span>
</router-link>
</div>
<div>
<!-- <i class="icon icon--profile"></i> -->
<router-link to="/cart">
<i class="icon icon--cart-outline header-element"></i>
</router-link>
</div>
</header>
</template>
<script>
export default {
name: 'Header'
}
</script>
<style lang="scss" scoped>
@import "./frontend/styles/variables";
$header-height: 80px;
header {
display: flex;
justify-content: space-between;
background-color: #3b945e; // 3
height: $header-height;
color: #f2f2f2; // 3
> div {
display: flex;
align-items: center;
height: $header-height;
a {
text-decoration: unset;
color: inherit;
height: 100%;
}
// background-color: $green; // 1
// background-color: #3aafa9; // 2
// background-color: #3b945e; // 3
// color: $text-color; // 1
// color: white; // 2
// color: #f2f2f2; // 3
.logo {
display: block;
height: 100%;
width: auto;
}
.header-element {
display: flex;
align-items: center;
padding: 0 0.7rem;
height: 100%;
cursor: pointer;
&:hover {
// background-color: #379683; // 1
background-color: #def2f1; // 2
// background-color: #57ba98; // 3
color: white; // 1
color: $text-color; // 2
color: #182628; // 3
// background-color: #8ee4af;
}
// &:first-of-type {
// margin-left: 5rem;
// }
span {
letter-spacing: 2.5px;
text-transform: lowercase;
font-weight: 300;
align-items: center;
}
}
.icon {
font-size: 1.75rem;
font-weight: 700;
}
}
}
</style>

148
frontend/components/Navigation.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<div>
<nav class="mobile-only">
<ul class="nav-list">
<li class="nav-item">
<router-link to="/cart">
<i class="icon icon--basket-outline"></i>
</router-link>
</li>
<img class="logo" src="/frontend/assets/images/logo-white.png" />
<li class="nav-item">
<router-link to="/cart">
<i class="icon icon--basket-outline"></i>
</router-link>
</li>
</ul>
</nav>
<nav class="desktop-only">
<ul class="nav-list">
<img class="logo" src="/frontend/assets/images/logo-black.png" />
<!-- <img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" /> -->
<li class="nav-item">
<router-link to="/" class="">
<span>Hjem</span>
</router-link>
</li>
<li class="nav-item">
<router-link to="/">
<span>Om oss</span>
</router-link>
</li>
<li class="nav-item">
<router-link to="/">
<span>Produkter</span>
</router-link>
</li>
</ul>
<ul>
<li class="nav-item">
<!-- <i class="icon icon--profile"></i> -->
<router-link to="/cart">
<i class="icon icon--basket-outline"></i>
</router-link>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
name: 'Navigation'
}
</script>
<style lang="scss" scoped>
@import "./frontend/styles/variables";
@import './frontend/styles/global';
$nav-height: 80px;
nav {
display: flex;
justify-content: space-between;
background-color: #3b945e; // 3
height: $nav-height;
color: #f2f2f2; // 3
> ul {
display: flex;
align-items: center;
height: $nav-height;
margin: 0;
padding: 0;
@include mobile {
width: 100%;
justify-content: space-between;
}
a {
text-decoration: unset;
color: inherit;
// height: 100%;
}
li {
height: 100%;
display: block;
}
// background-color: $green; // 1
// background-color: #3aafa9; // 2
// background-color: #3b945e; // 3
// color: $text-color; // 1
// color: white; // 2
// color: #f2f2f2; // 3
.logo {
display: block;
height: 100%;
width: auto;
@include desktop {
background-color: #def2f1;
}
}
.nav-item {
display: flex;
align-items: center;
padding: 0 0.7rem;
height: 100%;
cursor: pointer;
&:hover {
// background-color: #379683; // 1
background-color: #def2f1; // 2
// background-color: #57ba98; // 3
color: white; // 1
color: $text-color; // 2
color: #182628; // 3
// background-color: #8ee4af;
}
// &:first-of-type {
// margin-left: 5rem;
// }
span {
letter-spacing: 2.5px;
text-transform: lowercase;
font-weight: 300;
align-items: center;
}
}
.icon {
font-size: 1.75rem;
font-weight: 700;
}
}
}
</style>

13
frontend/styles/global.scss
View File

@@ -1,3 +1,4 @@
@import './frontend/styles/variables';
.flex { .flex {
display: flex; display: flex;
@@ -14,4 +15,16 @@
.flex-direction-column { .flex-direction-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
@include desktop {
.mobile-only {
display: none;
}
}
@include mobile {
.desktop-only {
display: none;
}
} }

16
frontend/styles/variables.scss
View File

@@ -1,3 +1,17 @@
$green: #5cdb95; $green: #5cdb95;
$text-color: #05386B; $text-color: #05386B;
$mobile-width: 768px;
@mixin mobile {
@media (max-width: #{$mobile-width}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$mobile-width + 1px}) {
@content;
}
}