Niquarl/joinpeertube
1
0
Fork 0
forked from nutomic/joinpeertube
Code Issues 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>
</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>
import HeaderComponent from './components/Header.vue'

40
src/components/ContentSelection.vue
View file

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

93
src/components/Header.vue
View file

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

18
src/scss/main.scss
View file

@ -54,6 +54,21 @@ body {
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 {
padding: 0 70px;
background-color: #fff;
@ -106,7 +121,8 @@ main {
}
@media screen and (max-width: $small-screen) {
min-width: auto !important;
width: 100% !important;
min-width: unset !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 {
@ -383,6 +389,10 @@
font-size: 16px;
margin: 50px auto;
width: 500px;
@media screen and (max-width: $small-screen) {
width: 100%;
}
}
}