Improve client mobile version
This commit is contained in:
Chocobozzz
parent
c3488a484e
commit
a01f107bc4
10 changed files with 61 additions and 21 deletions
|
|
@ -28,10 +28,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Used for the fixed menu -->
|
||||
<div class="col-md-2 col-sm-3 col-xs-3">
|
||||
<div class="fake-menu col-md-2 col-sm-3 col-xs-3">
|
||||
</div>
|
||||
|
||||
<div [ngClass]="getMainColClasses()">
|
||||
<div class="main-col" [ngClass]="getMainColClasses()">
|
||||
|
||||
<div class="main-row">
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@
|
|||
}
|
||||
|
||||
#peertube-title {
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ export class AppComponent implements OnInit {
|
|||
}
|
||||
|
||||
toggleMenu () {
|
||||
window.scrollTo(0, 0)
|
||||
this.isMenuDisplayed = !this.isMenuDisplayed
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +73,7 @@ export class AppComponent implements OnInit {
|
|||
Object.keys(colSizes).forEach(col => colSizes[col] = 12)
|
||||
}
|
||||
|
||||
const classes = [ 'main-col' ]
|
||||
const classes = []
|
||||
Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`))
|
||||
|
||||
return classes
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ menu {
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
font-size: 90%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="input-group">
|
||||
|
||||
<span class="input-group-addon icon-addon">
|
||||
<span class="hidden-xs input-group-addon icon-addon">
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
<div class="col-xs-2 col-md-3 video-small-block video-small-block-share">
|
||||
<a class="option" (click)="showShareModal()" title="Share the video">
|
||||
<span class="glyphicon glyphicon-share"></span>
|
||||
<span class="video-small-block-text">Share</span>
|
||||
<span class="hidden-xs video-small-block-text">Share</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
<div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
|
||||
<a class="option" title="Access to more options" dropdownToggle>
|
||||
<span class="glyphicon glyphicon-option-horizontal"></span>
|
||||
<span class="video-small-block-text">More</span>
|
||||
<span class="hidden-xs video-small-block-text">More</span>
|
||||
</a>
|
||||
|
||||
<ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
|
||||
|
|
|
|||
|
|
@ -212,12 +212,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.video-name-views {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.video-name-views {
|
||||
.video-name {
|
||||
|
|
@ -242,6 +236,7 @@
|
|||
|
||||
.video-small-block-author {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -260,4 +255,38 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.video-name-views {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
// Keep the same hierarchy than max-width: 800px
|
||||
.video-small-blocks {
|
||||
a, .video-small-block-text {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.video-small-block-author {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-details {
|
||||
.video-details-date-description {
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
|
||||
.video-details-date {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-details-attributes {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
.video-miniature {
|
||||
margin-top: 30px;
|
||||
margin: 15px 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 190px;
|
||||
width: 220px;
|
||||
vertical-align: top;
|
||||
|
||||
.video-miniature-thumbnail {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ input.readonly {
|
|||
}
|
||||
|
||||
.main-col {
|
||||
|
||||
.content-padding {
|
||||
padding: 15px 30px;
|
||||
|
||||
|
|
@ -47,6 +46,23 @@ input.readonly {
|
|||
}
|
||||
}
|
||||
|
||||
// On small screen, menu is absolute and displayed over the page
|
||||
@media screen and (max-width: 500px) {
|
||||
.title-menu-left {
|
||||
width: 120px;
|
||||
position: absolute !important;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.main-col {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.fake-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
|
||||
.glyphicon-refresh-animate {
|
||||
-animation: spin .7s infinite linear;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
makePutBodyRequest,
|
||||
setAccessTokensToServers,
|
||||
killallServers,
|
||||
getMyUserInformation,
|
||||
makePostBodyRequest,
|
||||
getVideoChannelsList,
|
||||
createUser,
|
||||
|
|
@ -22,7 +21,6 @@ import {
|
|||
describe('Test videos API validator', function () {
|
||||
const path = '/api/v1/videos/channels'
|
||||
let server: ServerInfo
|
||||
let channelId: number
|
||||
let accessTokenUser: string
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
|
|
@ -36,9 +34,6 @@ describe('Test videos API validator', function () {
|
|||
|
||||
await setAccessTokensToServers([ server ])
|
||||
|
||||
const res = await getMyUserInformation(server.url, server.accessToken)
|
||||
channelId = res.body.videoChannels[0].id
|
||||
|
||||
const user = {
|
||||
username: 'fake',
|
||||
password: 'fake_password'
|
||||
|
|
|
|||
Loading…
Reference in a new issue