nutomic/joinpeertube
1
1
Fork 1
Code Issues 5 Pull requests Releases Wiki Activity

Responsive header

Browse source
This commit is contained in:
Chocobozzz 2019-09-23 15:29:42 +02:00
parent 584be02a8c
commit 7e4a007057
No known key found for this signature in database
GPG key ID: 583A612D890159BE
5 changed files with 103 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.vue
View file

@ -6,22 +6,6 @@
</div> </div>
</template> </template>
<style lang="scss" scoped>
@import './scss/_variables.scss';
.container {
padding-top: 0;
margin-top: 0;
width: 1024px;
@media screen and (max-width: $responsive-screen) {
width: 100%;
max-width: unset;
padding: 0;
}
}
</style>
<script> <script>
import HeaderComponent from './components/Header.vue' import HeaderComponent from './components/Header.vue'

52
src/components/ContentSelection.vue
View file

@ -5,20 +5,26 @@
<img :src="thumbnailUrl" alt="thumbnail"/> <img :src="thumbnailUrl" alt="thumbnail"/>
<button class="jpt-button jpt-button-medium"> <button class="jpt-button jpt-button-medium">
<span class="span-wrapper" v-if="type === 'video'"> <template v-if="type === 'video'">
<icon-video></icon-video> <div class="icon">
Watch the video <icon-video></icon-video>
</span> </div>
<div>Watch the video</div>
</template>
<span class="span-wrapper" v-if="type === 'channel'"> <template v-if="type === 'channel'">
<icon-channel></icon-channel> <div class="icon">
Discover the channel <icon-channel></icon-channel>
</span> </div>
<div>Discover the channel</div>
</template>
<span class="span-wrapper" v-if="type === 'instance'"> <template v-if="type === 'instance'">
<icon-instance></icon-instance> <div class="icon">
Go on the instance <icon-instance></icon-instance>
</span> </div>
<div>Go on the instance</div>
</template>
</button> </button>
</div> </div>
@ -74,24 +80,20 @@
} }
button { button {
display: flex;
flex-direction: row !important;
margin-top: 30px; margin-top: 30px;
width: 250px; width: 250px;
height: 35px; height: 35px;
.span-wrapper { .icon {
display: block; margin-right: 10px;
width: 100%;
position: relative;
}
svg { svg {
width: 20px; vertical-align: sub;
height: 20px; width: 20px;
position: absolute; height: 20px;
left: 24px; }
top: 0;
bottom: 0;
margin: auto;
} }
} }
} }

95
src/components/Header.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<header id="main-header"> <header id="main-header">
<nav class="navbar navbar-expand-lg"> <b-navbar toggleable="lg">
<router-link to="/" class="navbar-brand"> <b-navbar-brand to="/">
<img alt="PeerTube" :src="buildImgUrl('brand-small.png')"> <img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
<div class="support"> <div class="support">
@ -10,47 +10,40 @@
<img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')"> <img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
</div> </div>
</router-link> </b-navbar-brand>
<button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar" class="collapse navbar-collapse"> <b-collapse id="nav-collapse" is-nav>
<ul class="navbar-nav ml-auto"> <b-navbar-nav class="ml-auto">
<li class="nav-item"> <b-nav-item to="/" exact>
<router-link class="nav-link" to="/" exact>Home</router-link> <translate>Home</translate>
</li> </b-nav-item>
<li class="nav-item "> <b-nav-item class="create-account" to="/instances">
<router-link class="nav-link create-account" to="/instances">Create an account</router-link> <translate>Create an account</translate>
</li> </b-nav-item>
<li class="nav-item"> <b-nav-item to="/news">
<router-link class="nav-link" to="/news">News</router-link> <translate>News</translate>
</li> </b-nav-item>
<li class="nav-item"> <b-nav-item to="/help">
<router-link class="nav-link" to="/help">Help</router-link> <translate>Help</translate>
</li> </b-nav-item>
<li class="nav-item"> <b-nav-item href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">
<a class="nav-link" href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">Contribute</a> <translate>Contribute</translate>
</li> </b-nav-item>
<li class="nav-item"> <b-nav-item href="https://github.com/Chocobozzz/PeerTube" target="_blank" rel="noopener noreferrer">
<a class="nav-link" href="https://github.com/Chocobozzz/PeerTube" target="_blank" rel="noopener noreferrer">Git</a> <translate>Git</translate>
</li> </b-nav-item>
<div class="pull-right"> <I18n/>
<I18n/> </b-navbar-nav>
</div> </b-collapse>
</ul> </b-navbar>
</div>
</nav>
</header> </header>
</template> </template>
@ -62,6 +55,15 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.navbar-collapse.collapse.show {
background-color: #fff;
.nav-item {
margin-right: 0;
margin-top: 5px;
}
}
.navbar-brand { .navbar-brand {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
@ -90,13 +92,13 @@
} }
.nav-link { .nav-link {
color: #000 !important;
padding: 0 !important; padding: 0 !important;
color: #000;
font-family: 'Proza Libre', sans-serif; font-family: 'Proza Libre', sans-serif;
}
&.create-account { .create-account {
font-weight: $font-semibold; font-weight: $font-semibold;
}
} }
.router-link-active:not(.navbar-brand) { .router-link-active:not(.navbar-brand) {
@ -106,16 +108,17 @@
<script> <script>
import I18n from './I18n.vue' import I18n from './I18n.vue'
import { BCollapse, BNavbar, BNavbarNav, BNavbarBrand, BNavItem, BNavbarToggle } from 'bootstrap-vue'
export default { export default {
components: { components: {
I18n I18n,
}, BCollapse,
BNavbar,
methods: { BNavbarBrand,
getPath (path) { BNavItem,
return process.env.BASE_URL + path BNavbarNav,
} BNavbarToggle
} }
} }
</script> </script>

18
src/scss/main.scss
View file

@ -54,6 +54,21 @@ body {
background-color: #ffad5c; background-color: #ffad5c;
} }
.container {
padding-top: 0;
margin-top: 0;
width: 1024px;
@media screen and (max-width: $responsive-screen) {
width: 100%;
max-width: unset;
}
@media screen and (max-width: $small-screen) {
padding: 0;
}
}
main { main {
padding: 0 70px; padding: 0 70px;
background-color: #fff; background-color: #fff;
@ -106,7 +121,8 @@ main {
} }
@media screen and (max-width: $small-screen) { @media screen and (max-width: $small-screen) {
min-width: auto !important; width: 100% !important;
min-width: unset !important;
padding: 0 5px !important; padding: 0 5px !important;
} }
} }

10
src/views/Home.vue
View file

@ -335,6 +335,12 @@
} }
} }
} }
@media screen and (max-width: $small-screen) {
.jpt-button {
width: 100%;
}
}
} }
.jpt-button-legend { .jpt-button-legend {
@ -383,6 +389,10 @@
font-size: 16px; font-size: 16px;
margin: 50px auto; margin: 50px auto;
width: 500px; width: 500px;
@media screen and (max-width: $small-screen) {
width: 100%;
}
} }
} }