mirror of https://github.com/Chocobozzz/PeerTube
Implement header design
Chocobozzz
parent
b33f657c30
commit
26c6ee80d0
|
|
@ -146,7 +146,8 @@ module.exports = function (options) {
|
|||
loader: 'sass-resources-loader',
|
||||
options: {
|
||||
resources: [
|
||||
helpers.root('src/sass/_variables.scss')
|
||||
helpers.root('src/sass/_variables.scss'),
|
||||
helpers.root('src/sass/_mixins.scss')
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,8 @@ module.exports = function (options) {
|
|||
loader: 'sass-resources-loader',
|
||||
options: {
|
||||
resources: [
|
||||
helpers.root('src/sass/_variables.scss')
|
||||
helpers.root('src/sass/_variables.scss'),
|
||||
helpers.root('src/sass/_mixins.scss')
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row header">
|
||||
<div>
|
||||
<div class="header">
|
||||
|
||||
<div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
|
||||
<div class="hamburger-block" (click)="toggleMenu()">
|
||||
<span class="glyphicon glyphicon-menu-hamburger"></span>
|
||||
</div>
|
||||
<span class="icon icon-menu" (click)="toggleMenu()"></span>
|
||||
|
||||
<div id="peertube-title">
|
||||
<a [routerLink]="['/videos/list']" title="Homepage"></a>
|
||||
</div>
|
||||
<a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage">
|
||||
<span class="icon icon-logo"></span>
|
||||
PeerTube
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
|
|
@ -16,7 +15,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row sub-header-container">
|
||||
<div class="sub-header-container">
|
||||
<div class="title-menu-left">
|
||||
|
||||
<div class="title-menu-left-block menu">
|
||||
|
|
@ -25,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-col" [ngClass]="getMainColClasses()">
|
||||
<div class="main-col container-fluid" [ngClass]="getMainColClasses()">
|
||||
|
||||
<div class="main-row">
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -28,8 +28,10 @@
|
|||
.header {
|
||||
height: $header-height;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
|
||||
display: flex;
|
||||
|
||||
|
|
@ -37,33 +39,36 @@
|
|||
width: $menu-width;
|
||||
z-index: 1001;
|
||||
height: $header-height;
|
||||
line-height: $header-height;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
|
||||
.hamburger-block {
|
||||
margin-right: 10px;
|
||||
margin-left: 25px;
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
background-size: contain;
|
||||
|
||||
.glyphicon {
|
||||
cursor: pointer;
|
||||
&.icon-menu {
|
||||
background-image: url('../assets/header/menu.svg');
|
||||
margin: 0 18px 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#peertube-title {
|
||||
a {
|
||||
color: inherit !important;
|
||||
display: block;
|
||||
background: url('../assets/logo.svg') no-repeat;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: $font-bold;
|
||||
color: inherit !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
.icon.icon-logo {
|
||||
display: inline-block;
|
||||
background: url('../assets/logo.svg') no-repeat;
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,65 +76,15 @@
|
|||
#peertube-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hamburger-block {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) and (max-width: 600px) {
|
||||
#peertube-title a {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) and (max-width: 700px) {
|
||||
#peertube-title a {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
#peertube-title a {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
#peertube-title a {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
padding-left: 15px;
|
||||
|
||||
.hamburger-block {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
#peertube-title a {
|
||||
width: 135px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.hamburger-block {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#peertube-title a {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
text-align: right;
|
||||
height: $header-height;
|
||||
margin-left: $menu-width;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
|
||||
<div *ngIf="!isLoggedIn" class="button-block">
|
||||
<a routerLink="/login"class="login-button">Login</a>
|
||||
<a routerLink="/login" class="login-button">Login</a>
|
||||
<a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -123,9 +123,6 @@ menu {
|
|||
cursor: pointer;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
@include disable-default-a-behaviour;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<input
|
||||
type="text" id="search-video" name="search-video" placeholder="Search"
|
||||
[(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
|
||||
type="text" id="search-video" name="search-video" placeholder="Search..."
|
||||
[(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
|
||||
>
|
||||
<span (click)="doSearch()" class="icon icon-search"></span>
|
||||
|
||||
<a routerLink="/videos/upload">Upload</a>
|
||||
<a class="upload-button" routerLink="/videos/upload">
|
||||
<span class="icon icon-upload"></span>
|
||||
Upload
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
#search-video {
|
||||
display: inline-block;
|
||||
height: $button-height;
|
||||
width: $search-input-width;
|
||||
margin-right: 15px;
|
||||
padding-right: 25px; // For the search icon
|
||||
background: #fff;
|
||||
border: 1px solid #C6C6C6;
|
||||
border-radius: 3px;
|
||||
padding-left: 15px;
|
||||
|
||||
&::placeholder {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.icon.icon-search {
|
||||
display: inline-block;
|
||||
background: url('../../../assets/header/search.svg') no-repeat;
|
||||
background-size: contain;
|
||||
width: 25px;
|
||||
height: 21px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
// yolo
|
||||
position: absolute;
|
||||
margin-left: -50px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-weight: $font-semibold;
|
||||
font-size: 15px;
|
||||
height: $button-height;
|
||||
line-height: $button-height;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
margin-right: 25px;
|
||||
background-color: $orange-color;
|
||||
padding: 0 17px 0 13px;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
.icon.icon-upload {
|
||||
display: inline-block;
|
||||
background: url('../../../assets/header/upload.svg') no-repeat;
|
||||
background-size: contain;
|
||||
width: 22px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>menu</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard-4" transform="translate(-180.000000, -203.000000)" stroke="#333333">
|
||||
<g id="44" transform="translate(180.000000, 203.000000)">
|
||||
<path d="M3.5,7 C3.5,6.72319836 3.72175357,6.5 3.99339768,6.5 L20.0066023,6.5 C20.2799786,6.5 20.5,6.72089465 20.5,7 C20.5,7.27680164 20.2782464,7.5 20.0066023,7.5 L3.99339768,7.5 C3.72002141,7.5 3.5,7.27910535 3.5,7 Z M3.5,12 C3.5,11.7231984 3.72175357,11.5 3.99339768,11.5 L20.0066023,11.5 C20.2799786,11.5 20.5,11.7208946 20.5,12 C20.5,12.2768016 20.2782464,12.5 20.0066023,12.5 L3.99339768,12.5 C3.72002141,12.5 3.5,12.2791054 3.5,12 Z M3.5,17 C3.5,16.7231984 3.72175357,16.5 3.99339768,16.5 L20.0066023,16.5 C20.2799786,16.5 20.5,16.7208946 20.5,17 C20.5,17.2768016 20.2782464,17.5 20.0066023,17.5 L3.99339768,17.5 C3.72002141,17.5 3.5,17.2791054 3.5,17 Z" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard-4" transform="translate(-136.000000, -115.000000)" stroke="#000" stroke-width="2">
|
||||
<g id="3" transform="translate(136.000000, 115.000000)">
|
||||
<circle id="Oval-3" cx="10" cy="10" r="7"></circle>
|
||||
<path d="M15,15 L21,21" id="Path-3" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 682 B |
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>cloud-upload</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||||
<g id="Artboard-4" transform="translate(-312.000000, -775.000000)" stroke="#fff" stroke-width="2">
|
||||
<g id="307" transform="translate(312.000000, 775.000000)">
|
||||
<path d="M8,18 L5,18 L5,18 C2.790861,18 1,16.209139 1,14 C1,11.790861 2.790861,10 5,10 C5.35840468,10 5.70579988,10.0471371 6.03632437,10.1355501 C6.01233106,9.92702603 6,9.71495305 6,9.5 C6,6.46243388 8.46243388,4 11.5,4 C14.0673313,4 16.2238156,5.7590449 16.8299648,8.1376465 C17.2052921,8.04765874 17.5970804,8 18,8 C20.7614237,8 23,10.2385763 23,13 C23,15.7614237 20.7614237,18 18,18 L16,18" id="Combined-Shape" stroke-linejoin="round"></path>
|
||||
<path d="M12,13 L12,21" id="Path-58"></path>
|
||||
<polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) " points="15 11 12 14 9 11"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
@mixin disable-default-a-behaviour {
|
||||
&:hover, &:focus {
|
||||
text-decoration: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,12 +10,14 @@ $grey-background: #f6f2f2;
|
|||
|
||||
$button-height: 30px;
|
||||
|
||||
$menu-color: #fff;
|
||||
$menu-width: 240px;
|
||||
|
||||
$header-height: 50px;
|
||||
$header-border-color: #e9eff6;
|
||||
|
||||
$search-input-width: 375px;
|
||||
|
||||
$menu-color: #fff;
|
||||
$menu-width: 240px;
|
||||
|
||||
$footer-height: 30px;
|
||||
$footer-margin: 30px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue