Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header component (fixes #9) #227

Merged
merged 8 commits into from
Mar 18, 2020
Merged

Header component (fixes #9) #227

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f6263fa
Navbar v2
stanislawK Dec 21, 2019
6f68a79
Conflicts resolved
stanislawK Dec 28, 2019
d67f4cb
9 color prop moved from a class to v-app-bar
stanislawK Feb 9, 2020
070806b
[9] conflicts resolved
stanislawK Feb 26, 2020
ce7b25d
9 Burger menu for mobile view and increased tabs width
stanislawK Mar 8, 2020
9e51288
Transition for mobile menu
stanislawK Mar 11, 2020
58d5b32
View for tablets fixed: menu tabs have full width and menu icon is pu…
stanislawK Mar 11, 2020
bb8ad61
9 clipped right prop deleted from v-app-bar
stanislawK Mar 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"vuex": "^3.0.1"
},
"devDependencies": {
"@mdi/font": "^4.7.95",
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
Expand Down
48 changes: 48 additions & 0 deletions frontend/src/assets/images/logo-white.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/components/AboutUs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-container fluid class="blue-container">
<v-container fluid class="blue-container" id="about">
<v-row>
<v-col>
<v-card flat dark tile color="transparent">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ContactUs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-container fluid class="white-container">
<v-container fluid class="white-container" id="contact">
<v-row>
<v-flex>
<v-card flat color="transparent">
Expand Down
87 changes: 87 additions & 0 deletions frontend/src/components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<template>
<div>
<v-app-bar class="navbar-custom" dark clipped-right color="#2C3E50">
OtisRed marked this conversation as resolved.
Show resolved Hide resolved
OtisRed marked this conversation as resolved.
Show resolved Hide resolved
<v-toolbar-title>
<a href="https://codeforpoznan.pl/">
<v-img
:src="cfpLogo"
contain
max-height="20"
aspect-ratio="1.7"
max-width="500"
min-width="350"
position="left"
></v-img>
</a>
</v-toolbar-title>
<v-app-bar-nav-icon
@click="drawer = !drawer"
class="hidden-md-and-up"
></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<v-tabs
background-color="transparent"
right
class="hidden-sm-and-down"
mobile-break-point="768px"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I saw that I first thought that we've already have defined breakpoints in scss/breakpoints.scss but it didn't work when I exchangaged "768px" for "$phone" variable. Then @Bosmanfrx enlightened me that usually there are two sets of mirrored breakpoints one for css and one for js, which made me realize it is sort of obvious why css variable doesn't make js do what I want. But still having two sets of breakpoints seems not necessary so I looked for the ways of using css breakpoint in js.

Here's interesting solution I found
https://gomakethings.com/the-easy-way-to-manage-css-breakpoints-in-javascript/

As noted, this is beyond this PR but we could think of applying this solution for some other task?
EDIT: after talking with @stanislawK we can also use vuetify grid and e.g. and import its breakpoint values in scss as (at least as far as I'm concerned) the explicit definitions are needed in scss to code media query properly

>
<template v-for="item in items">
<v-tab align-right @click="$vuetify.goTo(item.id)" :key="item.id">{{
OtisRed marked this conversation as resolved.
Show resolved Hide resolved
item.name
}}</v-tab>
</template>
</v-tabs>
</v-app-bar>
<v-list class="navbar-custom hidden-md-and-up" dark>
OtisRed marked this conversation as resolved.
Show resolved Hide resolved
<v-tabs
width="100%"
v-if="drawer"
background-color="transparent"
vertical
>
<div class="mobile-tab-items">
<template v-for="item in items">
<v-tab
@click="$vuetify.goTo(item.id)"
class="tab-custom"
:key="item.id"
>{{ item.name }}</v-tab
>
</template>
</div>
</v-tabs>
</v-list>
</div>
</template>

<script>
export default {
data() {
return {
items: [
{ name: 'O nas', id: '#about' },
{ name: 'Nasze projekty', id: '#projects' },
{ name: 'Dołącz do nas', id: '#join' },
{ name: 'Kontakt', id: '#contact' }
],
cfpLogo: require('@/assets/images/logo-white.svg'),
drawer: false
};
}
};
</script>

<style lang="scss" scoped>
@import './../main.scss';
.navbar-custom {
font-family: $font-header;
color: #ffffff !important;
OtisRed marked this conversation as resolved.
Show resolved Hide resolved
OtisRed marked this conversation as resolved.
Show resolved Hide resolved
padding: 0;
}
.tab-custom {
justify-content: left;
}
.mobile-tab-items {
width: 100vw;
}
</style>
3 changes: 3 additions & 0 deletions frontend/src/components/HomePage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<div>
<app-header />
<app-about-us />
<our-projects />
<app-join-us />
Expand Down Expand Up @@ -31,6 +32,7 @@

<script>
import { mapGetters } from 'vuex';
import Header from './Header.vue';
import ContactUs from './ContactUs.vue';
import AboutUs from './AboutUs.vue';
import SocialMedia from './SocialMedia.vue';
Expand All @@ -39,6 +41,7 @@ import OurProjects from './OurProjects.vue';
import JoinUs from './JoinUs.vue';
export default {
components: {
'app-header': Header,
'app-contact-us': ContactUs,
'app-about-us': AboutUs,
'social-media': SocialMedia,
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/JoinUs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-container fluid class="blue-container">
<v-container fluid class="blue-container" id="join">
<v-row>
<v-col>
<v-card flat dark tile color="transparent">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/OurProjects.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-container fluid class="white-container">
<v-container fluid class="white-container" id="projects">
<v-row>
<v-col>
<v-card flat color="transparent">
Expand Down
6 changes: 3 additions & 3 deletions frontend/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -806,9 +806,9 @@
postcss "^7.0.0"

"@mdi/font@^4.5.95":
version "4.5.95"
resolved "https://registry.yarnpkg.com/@mdi/font/-/font-4.5.95.tgz#43c0d2e7b08d4221a778f58d899455d0c45916ed"
integrity sha512-AjR2Zgu1feBXWlTfEjD6JQqLAMCqYn2Gzia5PWqFnysvz5F6JmPHtQFldIHXqyv2s/FwME7ZDBc5N86NEHbyvQ==
version "4.9.95"
resolved "https://registry.yarnpkg.com/@mdi/font/-/font-4.9.95.tgz#00ed2ffe289c9230f146e74559c07542d3f4475a"
integrity sha512-m2sbAs+SMwRnWpkMriBxEulwuhmqRyh6X+hdOZlqSxYZUM2C2TaDnQ4gcilzdoAgru2XYnWViZ/xPuSDGgRXVw==

"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
Expand Down