Responsive header
This commit is contained in:
Chocobozzz
parent
584be02a8c
commit
7e4a007057
5 changed files with 103 additions and 88 deletions
16
src/App.vue
16
src/App.vue
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -5,20 +5,26 @@
|
|||
<img :src="thumbnailUrl" alt="thumbnail"/>
|
||||
|
||||
<button class="jpt-button jpt-button-medium">
|
||||
<span class="span-wrapper" v-if="type === 'video'">
|
||||
<icon-video></icon-video>
|
||||
Watch the video
|
||||
</span>
|
||||
<template v-if="type === 'video'">
|
||||
<div class="icon">
|
||||
<icon-video></icon-video>
|
||||
</div>
|
||||
<div>Watch the video</div>
|
||||
</template>
|
||||
|
||||
<span class="span-wrapper" v-if="type === 'channel'">
|
||||
<icon-channel></icon-channel>
|
||||
Discover the channel
|
||||
</span>
|
||||
<template v-if="type === 'channel'">
|
||||
<div class="icon">
|
||||
<icon-channel></icon-channel>
|
||||
</div>
|
||||
<div>Discover the channel</div>
|
||||
</template>
|
||||
|
||||
<span class="span-wrapper" v-if="type === 'instance'">
|
||||
<icon-instance></icon-instance>
|
||||
Go on the instance
|
||||
</span>
|
||||
<template v-if="type === 'instance'">
|
||||
<div class="icon">
|
||||
<icon-instance></icon-instance>
|
||||
</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 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
svg {
|
||||
vertical-align: sub;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<I18n/>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue