forks/peertube
1
0
Fork 0
Code Releases Activity

Bidi support

Browse source
This commit is contained in:
Chocobozzz 2021-06-07 17:38:31 +02:00
parent 8beea2d37d
commit 27bc958674
No known key found for this signature in database
GPG key ID: 583A612D890159BE
99 changed files with 634 additions and 368 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.github/CONTRIBUTING.md vendored
View file

@ -163,6 +163,14 @@ and the web server is automatically restarted.
$ npm run dev
```
### RTL layout
To test RTL layout using `ar` locale:
```
$ npm run dev -- --ar-locale
```
### Testing
Your code contributions must pass the tests before they can be merged. Tests ensure most of the application behaves

18
client/angular.json
View file

@ -202,6 +202,21 @@
}
]
},
"ar-locale": {
"localize": ["ar"],
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
"hmr": {
"localize": false,
"budgets": [
@ -247,6 +262,9 @@
"hmr": {
"browserTarget": "PeerTube:build:hmr"
},
"ar-locale": {
"browserTarget": "PeerTube:build:ar-locale"
},
"e2e": {
"browserTarget": "PeerTube:build:e2e",
"proxyConfig": "e2e/proxy.config.json"

4
client/proxy.config.json
View file

@ -28,6 +28,10 @@
"target": "http://localhost:9000",
"secure": false
},
"/client/locales": {
"target": "http://localhost:9000",
"secure": false
},
"/!(client)**": {
"target": "http://localhost:3000/client/index.html",
"secure": false,

6
client/src/app/+about/about-instance/about-instance.component.scss
View file

@ -23,9 +23,10 @@
margin-bottom: 20px;
.badge {
@include margin-right(5px);
font-size: 12px;
font-weight: $font-semibold;
margin-right: 5px;
&.category {
background-color: pvar(--mainColor);
@ -66,9 +67,10 @@
&:hover,
&:active {
&::after {
@include margin-left(0.2em);
content: '#';
display: inline-block;
margin-left: 0.2em;
}
}

3
client/src/app/+about/about-peertube/about-peertube-contributors.component.scss
View file

@ -22,8 +22,9 @@
text-align: center;
li {
@include margin-right(10px);
display: inline-block;
margin-right: 10px;
}
}
}

7
client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
View file

@ -29,10 +29,10 @@
my-actor-avatar {
@include actor-avatar-size(75px);
@include margin-right(15px);
grid-column: 1;
grid-row: 1 / 3;
margin-right: 15px;
}
a {
@ -51,13 +51,14 @@
}
.actor-counters {
@include margin-left(15px);
grid-row: 1;
grid-column: 3;
color: pvar(--greyForegroundColor);
font-size: 16px;
display: flex;
align-items: center;
margin-left: 15px;
}
.actor-counters > *:not(:last-child)::after {
@ -92,7 +93,7 @@ my-subscribe-button {
overflow: hidden;
my-video-miniature {
margin-right: 15px;
@include margin-right(15px);
min-width: $video-thumbnail-medium-width;
max-width: $video-thumbnail-medium-width;
}

4
client/src/app/+accounts/accounts.component.scss
View file

@ -23,13 +23,13 @@
max-width: $max-channels-width;
simple-search-input {
margin-left: auto;
@include margin-left(auto);
}
}
my-user-moderation-dropdown,
.badge {
margin-left: 10px;
@include margin-left(10px);
position: relative;
top: 3px;

6
client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
View file

@ -14,6 +14,7 @@ form {
input[type=text] {
@include peertube-input-text($form-base-input-width);
display: block;
}
@ -53,13 +54,14 @@ my-select-checkbox {
input[type=submit] {
@include peertube-button;
@include orange-button;
@include margin-left(auto);
display: flex;
margin-left: auto;
+ .form-error {
@include margin-left(5px);
display: inline;
margin-left: 5px;
}
}

2
client/src/app/+admin/follows/followers-list/followers-list.component.scss
View file

@ -18,6 +18,6 @@ a {
.action-cell {
my-button:first-child {
margin-right: 10px;
@include margin-right(10px);
}
}

3
client/src/app/+admin/follows/follows.component.scss
View file

@ -1,8 +1,9 @@
@import 'mixins';
.form-sub-title {
@include margin-right(30px);
flex-grow: 0;
margin-right: 30px;
}
.badge {

2
client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
View file

@ -25,7 +25,7 @@ a {
.select-filter-block {
&:not(:last-child) {
margin-right: 10px;
@include margin-right(10px);
}
label {

2
client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss
View file

@ -1,7 +1,7 @@
@import 'mixins';
my-feed {
margin-left: 5px;
@include margin-left(5px);
display: inline-block;
width: 15px;
}

5
client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
View file

@ -18,12 +18,13 @@
margin-bottom: 15px;
my-global-icon {
margin-right: 5px;
@include margin-right(5px);
}
}
.badge {
@include margin-left(15px);
font-size: 13px;
font-weight: $font-semibold;
margin-left: 15px;
}

9
client/src/app/+admin/plugins/shared/plugin-list.component.scss
View file

@ -12,8 +12,9 @@
margin-bottom: 10px;
.plugin-name {
@include margin-right(10px);
font-size: 16px;
margin-right: 10px;
font-weight: $font-semibold;
}
@ -22,7 +23,7 @@
}
.plugin-icon {
margin-left: 10px;
@include margin-left(10px);
my-global-icon {
@include apply-svg-color(pvar(--greyForegroundColor));
@ -34,11 +35,11 @@
}
.buttons {
margin-left: auto;
@include margin-left(auto);
width: max-content;
> *:not(:last-child) {
margin-right: 10px;
@include margin-right(10px);
}
}
}

4
client/src/app/+admin/system/jobs/jobs.component.scss
View file

@ -25,7 +25,7 @@
.select-filter-block {
&:not(:last-child) {
margin-right: 10px;
@include margin-right(10px);
}
label {
@ -43,7 +43,7 @@
}
td .glyphicon {
margin-right: 10px;
@include margin-right(10px);
}
pre {

11
client/src/app/+admin/system/logs/logs.component.scss
View file

@ -19,8 +19,9 @@
}
.log-level {
@include margin-right(5px);
font-weight: $font-semibold;
margin-right: 5px;
}
.log-by {
@ -54,7 +55,7 @@
my-button,
.peertube-select-container,
ng-select {
margin-left: 10px;
@include margin-left(10px);
}
}
@ -65,8 +66,9 @@
.peertube-select-container,
ng-select,
my-button {
@include margin-left(0 !important);
width: 100% !important;
margin-left: 0 !important;
margin-bottom: 10px !important;
}
@ -84,8 +86,9 @@
.peertube-select-container,
ng-select,
my-button {
@include margin-left(0 !important);
width: 100% !important;
margin-left: 0 !important;
margin-bottom: 10px !important;
}

6
client/src/app/+admin/system/system.component.scss
View file

@ -1,4 +1,8 @@
@import '_variables';
@import '_mixins';
.form-sub-title {
@include margin-right(30px);
flex-grow: 0;
margin-right: 30px;
}

3
client/src/app/+admin/users/user-list/user-list.component.scss
View file

@ -24,9 +24,10 @@ tr.banned > td {
}
.user-table-primary-text .glyphicon {
@include margin-left(0.1rem);
font-size: 80%;
color: #808080;
margin-left: 0.1rem;
}
p-tableCheckbox {

17
client/src/app/+login/login.component.scss
View file

@ -14,7 +14,7 @@ input[type=email] {
}
.modal-body {
text-align: left;
text-align: start;
.forgot-password-instructions {
margin-bottom: 20px;
@ -55,13 +55,14 @@ input[type=email] {
}
.login-form-and-externals {
@include margin-left(10px);
@include margin-right(10px);
display: flex;
flex-wrap: wrap;
font-size: 15px;
max-width: 450px;
margin-bottom: 40px;
margin-left: 10px;
margin-right: 10px;
form {
margin: 0;
@ -125,11 +126,12 @@ input[type=email] {
}
.instance-information {
@include margin-left(10px);
@include margin-right(10px);
max-width: 600px;
min-width: 350px;
margin-bottom: 40px;
margin-left: 10px;
margin-right: 10px;
}
.terms-anchor {
@ -146,9 +148,10 @@ input[type=email] {
.login-form-and-externals,
.instance-information {
@include margin-left(0);
@include margin-right(0);
width: 100%;
margin-left: 0;
margin-right: 0;
max-width: 450px;
min-width: unset;
align-self: center;

5
client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
View file

@ -17,12 +17,13 @@ label {
input[type=submit] {
@include peertube-button;
@include orange-button;
@include margin-left(auto);
display: flex;
margin-left: auto;
+ .form-error {
@include margin-left(5px);
display: inline;
margin-left: 5px;
}
}

2
client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
View file

@ -38,7 +38,7 @@ my-user-notifications {
}
.peertube-select-container {
margin-left: 0 !important;
@include margin-left(0 !important);
}
}
}

2
client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss
View file

@ -43,7 +43,7 @@ input {
&[type=submit] {
@include peertube-button;
@include orange-button;
margin-left: auto;
@include margin-left(auto);
}
}

12
client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
View file

@ -15,7 +15,7 @@ input[type=text] {
}
my-edit-button {
margin-right: 10px;
@include margin-right(10px);
}
.video-channel {
@ -25,8 +25,7 @@ my-edit-button {
my-actor-avatar {
@include actor-avatar-size(80px);
margin-right: 10px;
@include margin-right(10px);
}
}
@ -49,9 +48,10 @@ my-edit-button {
}
.video-channel-name {
@include margin-left(5px);
font-size: 14px;
color: $grey-actor-name;
margin-left: 5px;
}
.video-channel-buttons {
@ -77,7 +77,7 @@ my-edit-button {
padding-bottom: 10px;
img {
margin-right: 0;
@include margin-right(0);
}
.video-channel-buttons {
@ -97,7 +97,7 @@ my-edit-button {
}
.video-channel-name {
margin-left: 0 !important;
@include margin-left(0 !important);
}
}

6
client/src/app/+my-library/my-history/my-history.component.scss
View file

@ -24,11 +24,11 @@
}
.history-switch {
grid-column: 3;
@include margin-left(auto);
@include margin-right(15px);
grid-column: 3;
display: flex;
margin-left: auto;
margin-right: 15px;
label {
margin: 0 0 0 5px;

5
client/src/app/+my-library/my-ownership/my-ownership.component.scss
View file

@ -16,10 +16,10 @@
$image-height: 45px;
@include miniature-thumbnail;
@include margin-right(0.5rem);
height: $image-height;
width: #{(16/9) * $image-height};
margin-right: 0.5rem;
border-radius: 2px;
border: 0;
background: transparent;
@ -59,9 +59,10 @@
line-height: 1rem;
div .glyphicon {
@include margin-left(0.1rem);
font-size: 80%;
color: #808080;
margin-left: 0.1rem;
}
div + div {

9
client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
View file

@ -11,7 +11,7 @@ input[type=text] {
> my-actor-avatar {
@include actor-avatar-size(80px);
margin-right: 10px;
@include margin-right(10px);
}
}
@ -32,9 +32,10 @@ input[type=text] {
}
.video-channel-name {
@include margin-left(5px);
font-size: 14px;
color: $grey-actor-name;
margin-left: 5px;
}
}
}
@ -50,7 +51,7 @@ input[type=text] {
}
my-actor-avatar {
margin-left: 7px;
@include margin-left(7px);
display: inline-block;
vertical-align: top;
}
@ -78,6 +79,6 @@ input[type=text] {
}
img {
margin-right: 0;
@include margin-right(0);
}
}

11
client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
View file

@ -8,9 +8,10 @@
}
.playlist-info {
@include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1));
grid-column: 1;
background-color: pvar(--submenuBackgroundColor);
margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
margin-top: -$sub-menu-margin-bottom;
padding: 15px;
@ -34,7 +35,7 @@
@include grey-button;
@include apply-svg-color(pvar(--actionButtonColor));
margin-right: 10px;
@include margin-right(10px);
}
}
@ -91,8 +92,8 @@ my-video-playlist-miniature {
my-video-playlist-miniature,
.playlist-buttons {
margin-left: auto;
margin-right: auto;
@include margin-left(auto);
@include margin-right(auto);
}
::ng-deep my-video-playlist-element-miniature {
@ -102,7 +103,7 @@ my-video-playlist-miniature {
}
.position {
margin-right: 5px !important;
@include margin-right(5px !important);
}
}
}

10
client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
View file

@ -18,8 +18,9 @@ input[type=text] {
}
.video-playlist-buttons {
@include margin-left(10px);
display: flex;
margin-left: 10px;
align-self: flex-end;
}
@ -33,7 +34,7 @@ my-video-playlist-miniature {
}
my-delete-button {
margin-right: 10px;
@include margin-right(10px);
}
@include on-small-main-col {
@ -46,8 +47,9 @@ my-delete-button {
}
.video-playlist-buttons {
@include margin-left(auto);
margin-top: 10px;
margin-left: auto;
}
}
@ -62,6 +64,6 @@ my-delete-button {
}
.action-button {
margin-left: 0;
@include margin-left(0);
}
}

16
client/src/app/+my-library/my-videos/my-videos.component.scss
View file

@ -7,7 +7,7 @@ input[type=text] {
.peertube-select-container {
@include peertube-select-container(auto);
margin-left: 0.5rem;
@include margin-left(0.5rem);
}
h1 {
@ -20,7 +20,7 @@ h1 {
@include button-with-icon(18px, 3px, -1px);
&:not(:last-child) {
margin-right: 10px;
@include margin-right(10px);
}
}
}
@ -38,13 +38,14 @@ h1 {
}
.action-button {
@include margin-left(10px);
display: flex;
margin-left: 10px;
align-self: flex-end;
}
my-edit-button {
margin-right: 10px;
@include margin-right(10px);
}
@include on-small-main-col {
@ -58,8 +59,9 @@ my-edit-button {
}
.action-button {
@include margin-left(auto);
margin-top: 10px;
margin-left: auto;
}
}
@ -72,11 +74,11 @@ my-edit-button {
margin-bottom: 12px;
}
.peertube-select-container {
margin-left: 0;
@include margin-left(0);
}
}
.action-button {
margin-left: 0;
@include margin-left(0);
}
}

12
client/src/app/+page-not-found/page-not-found.component.scss
View file

@ -2,9 +2,10 @@
@import '_mixins';
.root {
@include margin-left(auto);
@include margin-right(auto);
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 150px;
display: flex;
@ -12,20 +13,21 @@
flex-direction: column-reverse;
.box {
text-align: left;
text-align: start;
font-size: 120%;
padding: 0 15px;
}
img {
margin-left: auto;
@include margin-left(auto);
width: 220px;
height: auto;
}
@media screen and (max-width: $mobile-view) {
img {
margin-right: auto;
@include margin-right(auto);
}
}

7
client/src/app/+search/search-filters.component.scss
View file

@ -12,9 +12,9 @@ form {
.peertube-radio-container {
@include peertube-radio-container;
@include margin-right(30px);
display: inline-block;
margin-right: 30px;
}
.peertube-select-container {
@ -38,19 +38,18 @@ input[type=submit] {
}
.submit-button {
text-align: right;
text-align: end;
}
.reset-button {
@include peertube-button;
@include margin-right(1rem);
font-weight: $font-semibold;
display: inline-block;
padding: 0 10px;
white-space: nowrap;
background: transparent;
margin-right: 1rem;
}
.reset-button-small {

5
client/src/app/+search/search.component.scss
View file

@ -37,10 +37,10 @@
.icon.icon-filter {
@include icon(20px);
@include margin-right(5px);
position: relative;
top: -1px;
margin-right: 5px;
background-image: url('../../assets/images/feather/filter.svg');
}
}
@ -78,9 +78,10 @@
}
.video-channel-name {
@include margin-left(5px);
font-size: $video-miniature-row-info-font-size;
color: pvar(--greyForegroundColor);
margin-left: 5px;
}
// Use the same breakpoints than in video-miniature

4
client/src/app/+signup/+register/custom-stepper.component.scss
View file

@ -5,8 +5,8 @@ $grey-color: #9CA3AB;
$index-block-height: 32px;
.container {
padding-left: 0;
padding-right: 0;
@include padding-left(0);
@include padding-right(0);
max-width: unset !important;
}

8
client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
View file

@ -8,7 +8,7 @@
justify-content: center;
.playlist-wrapper {
margin-right: 15px;
@include margin-right(15px);
padding-bottom: 15px;
}
}
@ -24,9 +24,9 @@
}
.playlists {
justify-content: left;
@include margin-left(pvar(--horizontalMarginContent) !important);
@include margin-right(pvar(--horizontalMarginContent) !important);
margin-left: pvar(--horizontalMarginContent) !important;
margin-right: pvar(--horizontalMarginContent) !important;
justify-content: left;
}
}

16
client/src/app/+video-channels/video-channels.component.scss
View file

@ -71,12 +71,12 @@
flex-wrap: wrap;
> *:not(:last-child) {
margin-right: 15px;
@include margin-right(15px);
}
}
.channel-buttons.right {
margin-left: 45px;
@include margin-left(45px);
}
// Only used by mobile
@ -85,7 +85,7 @@
}
.owner-card {
margin-left: 105px;
@include margin-left(105px);
grid-column: 2;
// Takes all the column
grid-row: 1 / 3;
@ -112,7 +112,7 @@
}
.actor-info {
margin-left: 15px;
@include margin-left(15px);
}
h4 {
@ -160,8 +160,9 @@
}
.owner-card {
@include margin-left(60px);
grid-row: 2;
margin-left: 60px;
}
}
@ -215,8 +216,9 @@
padding: 0;
.avatar-row {
@include margin-right(30px);
grid-column: 1;
margin-right: 30px;
}
.owner-description {
@ -233,7 +235,7 @@
.view-account.complete {
display: block;
text-align: right;
text-align: end;
margin-top: 10px;
color: pvar(--mainColor);
}

12
client/src/app/+videos/+video-edit/shared/video-edit.component.scss
View file

@ -52,7 +52,7 @@ my-peertube-checkbox {
}
.captions-header {
text-align: right;
text-align: end;
margin-bottom: 1rem;
}
@ -77,10 +77,10 @@ my-peertube-checkbox {
}
.caption-entry-label {
@include margin-right(20px);
font-size: 15px;
font-weight: bold;
margin-right: 20px;
width: 150px;
}
@ -108,12 +108,12 @@ my-peertube-checkbox {
}
.submit-container {
text-align: right;
text-align: end;
.message-submit {
display: inline-block;
margin-right: 25px;
@include margin-right(25px);
display: inline-block;
color: pvar(--greyForegroundColor);
font-size: 15px;
}

9
client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss
View file

@ -23,6 +23,7 @@
.progress {
@include progressbar;
flex-grow: 1;
height: 30px;
font-size: 14px;
@ -31,12 +32,13 @@
.progress-bar {
background-color: $green;
line-height: 30px;
text-align: left;
text-align: start;
font-weight: $font-semibold;
span {
@include margin-left(13px);
color: pvar(--mainBackgroundColor);
margin-left: 13px;
}
}
}
@ -44,7 +46,6 @@
input {
@include peertube-button;
@include grey-button;
margin-left: 10px;
@include margin-left(10px);
}
}

5
client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
View file

@ -10,7 +10,10 @@
(keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
</textarea>
<my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible">
<my-help
[ngClass]="{ 'is-rtl': isRTL() }" class="markdown-guide" helpType="custom" iconName="markdown"
tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"
>
<ng-template ptTemplate="customHtml">
<span i18n>Markdown compatible that supports:</span>

15
client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
View file

@ -14,7 +14,7 @@ form {
margin-bottom: 10px;
my-actor-avatar {
margin-right: 10px;
@include margin-right(10px);
}
.form-group {
@ -26,12 +26,12 @@ form {
textarea {
@include peertube-textarea(100%, $peertube-textarea-height);
@include button-focus(pvar(--mainColorLightest));
@include padding-right($markdown-icon-width + 15px !important);
min-height: calc(#{$peertube-textarea-height} - 15px * 2);
padding-right: $markdown-icon-width + 15px !important;
@media screen and (max-width: 600px) {
padding-right: $markdown-icon-width + 19px !important;
@include padding-right($markdown-icon-width + 19px !important);
}
&:focus::placeholder {
@ -45,6 +45,12 @@ form {
top: 5px;
right: 9px;
// inset-inline is not well supported by web browsers
&.is-rtl {
right: unset;
left: 9px;
}
::ng-deep .help-tooltip-button {
my-global-icon {
height: $markdown-icon-height;
@ -86,9 +92,10 @@ form {
flex: 1;
code {
@include margin-left(5px);
display: inline-block;
vertical-align: middle;
margin-left: 5px;
}
}
}

22
client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
View file

@ -1,5 +1,18 @@
import { Observable } from 'rxjs'
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
import { getLocaleDirection } from '@angular/common'
import {
Component,
ElementRef,
EventEmitter,
Inject,
Input,
LOCALE_ID,
OnChanges,
OnInit,
Output,
SimpleChanges,
ViewChild
} from '@angular/core'
import { Router } from '@angular/router'
import { Notifier, User } from '@app/core'
import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
@ -37,7 +50,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
private notifier: Notifier,
private videoCommentService: VideoCommentService,
private modalService: NgbModal,
private router: Router
private router: Router,
@Inject(LOCALE_ID) private localeId: string
) {
super()
}
@ -153,6 +167,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
this.form.value['text'] = this.textareaElement.nativeElement.value = ''
}
isRTL () {
return getLocaleDirection(this.localeId) === 'rtl'
}
private addCommentReply (commentCreate: VideoCommentCreate) {
return this.videoCommentService
.addCommentReply(this.video.id, this.parentComment.id, commentCreate)

24
client/src/app/+videos/+video-watch/comment/video-comment.component.scss
View file

@ -6,10 +6,11 @@
display: flex;
.left {
@include margin-right(10px);
display: flex;
flex-direction: column;
align-items: center;
margin-right: 10px;
.vertical-border {
width: 2px;
@ -51,6 +52,9 @@ my-actor-avatar {
}
.video-author {
@include padding-right(6px);
@include padding-left(6px);
height: 20px;
background-color: #888888;
border-radius: 12px;
@ -60,8 +64,6 @@ my-actor-avatar {
flex-direction: row;
align-items: center;
display: inline-flex;
padding-right: 6px;
padding-left: 6px;
color: #fff !important;
}
@ -86,9 +88,10 @@ my-actor-avatar {
}
.comment-date {
@include margin-left(5px);
font-size: 90%;
color: pvar(--greyForegroundColor);
margin-left: 5px;
text-decoration: none;
&:hover {
@ -129,9 +132,10 @@ my-actor-avatar {
::ng-deep .dropdown-toggle,
.comment-action-reply {
@include margin-right(10px);
color: pvar(--greyForegroundColor);
cursor: pointer;
margin-right: 10px;
&:hover,
&:active,
@ -162,25 +166,25 @@ my-video-comment-add {
}
.left {
margin-right: 6px;
@include margin-right(6px);
}
}
@media screen and (max-width: 1200px) {
.children {
margin-left: -10px;
@include margin-left(-10px);
}
}
@media screen and (max-width: 600px) {
.children {
margin-left: -20px;
@include margin-left(-20px);
.left {
align-items: flex-start;
.vertical-border {
margin-left: 2px;
@include margin-left(2px);
}
}
}
@ -189,7 +193,7 @@ my-video-comment-add {
flex-direction: column;
.comment-date {
margin-left: 0;
@include margin-left(0);
}
}
}

10
client/src/app/+videos/+video-watch/comment/video-comments.component.scss
View file

@ -13,19 +13,21 @@
.glyphicon,
.comment-thread-loading {
margin-right: 5px;
@include margin-right(5px);
display: inline-block;
font-size: 13px;
}
.title-block {
.title-page {
margin-right: 0;
@include margin-right(0);
}
my-feed {
@include margin-left(5px);
display: inline-block;
margin-left: 5px;
opacity: 0;
transition: ease-in .2s opacity;
width: 12px;
@ -47,7 +49,7 @@
@media screen and (max-width: 600px) {
.view-replies {
margin-left: 46px;
@include margin-left(46px);
}
}

9
client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
View file

@ -10,8 +10,9 @@
.title-page.active,
.title-page.title-page-single {
@include margin-right(.5rem !important);
margin-bottom: unset;
margin-right: .5rem !important;
}
}
@ -20,14 +21,16 @@
}
.title-page-autoplay {
@include margin-left(auto);
display: flex;
width: max-content;
height: max-content;
align-items: center;
margin-left: auto;
span {
margin-right: 0.3rem;
@include margin-right(0.3rem);
text-transform: uppercase;
font-size: 85%;
font-weight: 600;

2
client/src/app/+videos/+video-watch/video-avatar-channel.component.scss
View file

@ -15,9 +15,9 @@
.wrapper {
@include actor-avatar-size(35px);
@include margin-right(5px);
position: relative;
margin-right: 5px;
margin-bottom: 5px;
&.generic-channel {

6
client/src/app/+videos/+video-watch/video-watch-playlist.component.scss
View file

@ -26,7 +26,7 @@
display: flex;
.playlist-by {
margin-right: 5px;
@include margin-right(5px);
}
.playlist-index span:first-child::after {
@ -40,7 +40,7 @@
margin: 10px 0;
my-global-icon:not(:last-child) {
margin-right: .5rem;
@include margin-right(.5rem);
}
my-global-icon {
@ -59,7 +59,7 @@
::ng-deep {
.video {
.position {
margin-right: 0;
@include margin-right(0);
}
.video-info {

51
client/src/app/+videos/+video-watch/video-watch.component.scss
View file

@ -152,7 +152,7 @@ $video-info-margin-left: 44px;
.video-info-name {
@include peertube-word-wrap;
margin-right: 30px;
@include margin-right(30px);
min-height: 40px; // Align with the action buttons
font-size: 27px;
font-weight: $font-semibold;
@ -167,9 +167,10 @@ $video-info-margin-left: 44px;
}
.video-info-date-views {
align-self: start;
@include margin-right(10px);
margin-bottom: 10px;
margin-right: 10px;
align-self: start;
font-size: 1em;
}
@ -209,15 +210,19 @@ $video-info-margin-left: 44px;
}
my-subscribe-button {
margin-left: 5px;
@include margin-left(5px);
}
}
.video-actions-rates {
margin: 0 0 10px;
@include margin-left(auto);
@include margin-right(0);
margin-top: 0;
margin-bottom: 10px;
align-items: start;
width: max-content;
margin-left: auto;
.video-actions {
height: 40px; // Align with the title
@ -227,7 +232,7 @@ $video-info-margin-left: 44px;
.action-button:not(:first-child),
.action-dropdown,
my-video-actions-dropdown {
margin-left: 5px;
@include margin-left(5px);
}
::ng-deep.action-button {
@ -305,7 +310,7 @@ $video-info-margin-left: 44px;
}
.icon-text {
margin-left: 3px;
@include margin-left(3px);
}
}
}
@ -341,8 +346,11 @@ $video-info-margin-left: 44px;
}
.video-info-description {
margin: 20px 0;
margin-left: $video-info-margin-left;
@include margin-left($video-info-margin-left);
@include margin-right(0);
margin-top: 20px;
margin-bottom: 20px;
font-size: 15px;
.video-info-description-html {
@ -355,7 +363,7 @@ $video-info-margin-left: 44px;
.glyphicon,
.description-loading {
margin-left: 3px;
@include margin-left(3px);
}
.description-loading {
@ -376,7 +384,7 @@ $video-info-margin-left: 44px;
}
.video-attributes {
margin-left: $video-info-margin-left;
@include margin-left($video-info-margin-left);
}
.video-attributes .video-attribute {
@ -385,8 +393,9 @@ $video-info-margin-left: 44px;
margin-bottom: 12px;
.video-attribute-label {
@include padding-right(5px);
min-width: 142px;
padding-right: 5px;
display: inline-block;
color: pvar(--greyForegroundColor);
font-weight: $font-bold;
@ -413,8 +422,9 @@ $video-info-margin-left: 44px;
}
my-recommended-videos {
@include padding-left(15px);
display: block;
padding-left: 15px;
min-width: 250px;
}
@ -432,14 +442,15 @@ my-video-comments {
@media screen and (max-width: $small-view) {
.privacy-concerns {
margin-left: $menu-width - 15px; // Menu is absolute
@include margin-left($menu-width - 15px); // Menu is absolute
}
}
:host-context(.expanded) {
.privacy-concerns {
@include margin-left(-15px);
width: 100%;
margin-left: -15px;
}
}
@ -473,8 +484,9 @@ my-video-comments {
}
.privacy-concerns-button {
@include margin-left(auto);
padding: 5px 8px 5px 7px;
margin-left: auto;
border-radius: 3px;
white-space: nowrap;
cursor: pointer;
@ -487,8 +499,9 @@ my-video-comments {
}
.privacy-concerns-okay {
@include margin-left(10px);
background-color: pvar(--mainColor);
margin-left: 10px;
}
}
@ -525,7 +538,7 @@ my-video-comments {
}
my-recommended-videos {
padding-left: 0;
@include padding-left(0);
}
}

8
client/src/app/+videos/video-list/overview/video-overview.component.scss
View file

@ -53,17 +53,18 @@
my-actor-avatar {
@include actor-avatar-size(28px);
@include margin-right(8px);
font-size: initial;
margin-right: 8px;
}
}
.followers {
@include margin-left(10px);
color: pvar(--greyForegroundColor);
font-weight: normal;
font-size: 14px;
margin-left: 10px;
position: relative;
top: 2px;
}
@ -87,8 +88,9 @@
overflow: initial;
.section-title {
@include margin-left(10px);
font-size: 17px;
margin-left: 10px;
}
}
}

7
client/src/app/+videos/video-list/trending/video-trending-header.component.scss
View file

@ -1,3 +1,5 @@
@import '_mixins';
.btn-group label {
border: 1px solid transparent;
border-radius: 9999px !important;
@ -5,13 +7,14 @@
opacity: .8;
&:not(:first-child) {
margin-left: .5rem;
@include margin-left(.5rem);
}
my-global-icon {
@include margin-right(.1rem);
position: relative;
top: -2px;
height: 1rem;
margin-right: .1rem;
}
}

3
client/src/app/app.component.scss
View file

@ -83,10 +83,11 @@
}
.icon.icon-logo {
@include margin-right(0.5rem);
display: inline-block;
width: 23px;
height: 24px;
margin-right: 0.5rem;
}
}

3
client/src/app/app.component.ts
View file

@ -1,6 +1,6 @@
import { Hotkey, HotkeysService } from 'angular2-hotkeys'
import { filter, map, pairwise, switchMap } from 'rxjs/operators'
import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common'
import { DOCUMENT, getLocaleDirection, PlatformLocation, ViewportScroller } from '@angular/common'
import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router'
@ -107,6 +107,7 @@ export class AppComponent implements OnInit, AfterViewInit {
this.openModalsIfNeeded()
this.document.documentElement.lang = getShortLocale(this.localeId)
this.document.documentElement.dir = getLocaleDirection(this.localeId)
}
ngAfterViewInit () {

7
client/src/app/core/hotkeys/hotkeys.component.scss
View file

@ -51,24 +51,25 @@
.cfp-hotkeys-keys {
padding: 5px;
text-align: right;
text-align: end;
}
.cfp-hotkeys-key {
@include margin-right(5px);
display: inline-block;
color: #fff;
background-color: #333;
border: 1px solid #333;
border-radius: 5px;
text-align: center;
margin-right: 5px;
box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
padding: 5px 9px;
font-size: 1em;
}
.cfp-hotkeys-text {
padding-left: 10px;
@include padding-left(10px);
font-size: 1em;
}

10
client/src/app/header/header.component.scss
View file

@ -2,22 +2,22 @@
@import '_mixins';
my-search-typeahead {
margin-right: 15px;
@include margin-right(15px);
}
.publish-button {
@include peertube-button-link;
@include orange-button;
@include button-with-icon(22px, 3px, -1px);
margin-right: 25px;
@include margin-right(25px);
@media screen and (max-width: 600px) {
margin-right: 10px;
@include margin-right(10px);
padding: 0 10px;
.icon.icon-upload {
margin-right: 0;
@include margin-right(0);
}
.publish-button-label {

13
client/src/app/header/search-typeahead.component.scss
View file

@ -6,8 +6,9 @@
#search-video {
@include peertube-input-text($search-input-width);
padding-left: 10px;
padding-right: 40px; // For the search icon
@include padding-left(10px);
@include padding-right(40px); // For the search icon
font-size: 14px;
&::placeholder {
@ -17,11 +18,12 @@
.icon-search {
@include icon(25px);
@include margin-left(-35px);
height: 18px;
// yolo
position: absolute;
margin-left: -35px;
margin-top: 3.5px;
right: 10px;
}
@ -65,8 +67,9 @@ li.suggestion {
margin-bottom: .5rem;
em {
@include margin-right(0.2rem);
font-weight: 600;
margin-right: 0.2rem;
font-style: normal;
}
}
@ -81,7 +84,7 @@ li.suggestion {
}
@media screen and (min-width: $mobile-view) {
margin-left: 10px;
@include margin-left(10px);
}
@media screen and (max-width: $small-view) {

11
client/src/app/menu/menu.component.html
View file

@ -3,7 +3,10 @@
<div class="top-menu">
<div *ngIf="isLoggedIn" class="logged-in-block">
<div>
<div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside">
<div
class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
[container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
>
<div ngbDropdownToggle>
<my-actor-avatar [account]="user.account" size="34"></my-actor-avatar>
<div class="logged-in-info">
@ -18,8 +21,10 @@
</div>
<div ngbDropdownMenu>
<a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
#profile (click)="onActiveLinkScrollToAnchor(profile)">
<a
*ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
#profile (click)="onActiveLinkScrollToAnchor(profile)"
>
<my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
</a>

38
client/src/app/menu/menu.component.scss
View file

@ -7,16 +7,17 @@ $footer-links-base-opacity: .8;
.menu-link {
@include disable-default-a-behaviour;
@include padding-left($menu-lateral-padding);
@include padding-right(20px);
display: flex;
align-items: center;
padding-left: $menu-lateral-padding;
color: pvar(--menuForegroundColor);
cursor: pointer;
font-size: 16px;
white-space: normal;
word-break: break-word;
padding-right: 20px;
transition: background-color .1s ease-in-out;
line-height: $line-height-normal;
@ -31,11 +32,11 @@ $footer-links-base-opacity: .8;
my-global-icon {
@include apply-svg-color(#808080);
@include margin-right($menu-link-icon-margin-right);
display: flex;
width: $menu-link-icon-size;
height: $menu-link-icon-size;
margin-right: $menu-link-icon-margin-right;
}
}
@ -99,8 +100,8 @@ menu {
}
my-notification {
margin-left: auto;
margin-right: 15px;
@include margin-left(auto);
@include margin-right(15px);
}
.logged-in-more {
@ -111,16 +112,18 @@ my-notification {
.dropdown-toggle-indicator {
display: inherit !important;
}
.dropdown-toggle:first-child {
padding-right: 30px !important;
@include padding-left(30px !important);
}
}
}
$main-radius: 25px;
@include margin-left(13px);
flex: 1;
margin-left: 13px;
border-radius: $main-radius;
transition: all .1s ease-in-out;
cursor: pointer;
@ -180,7 +183,7 @@ my-notification {
}
my-actor-avatar {
margin-right: 10px;
@include margin-right(10px);
}
.logged-in-info {
@ -224,11 +227,11 @@ my-actor-avatar {
min-height: 35px;
my-global-icon {
// Keep aligned with other icons
@include margin-left($additional-margin);
width: $icon-size;
height: $icon-size;
// Keep aligned with other icons
margin-left: $additional-margin;
}
&.active,
@ -246,7 +249,7 @@ my-actor-avatar {
border-left: $border-left-width solid var(--mainColor);
my-global-icon {
margin-left: $additional-margin - $border-left-width;
@include margin-left($additional-margin - $border-left-width);
}
}
}
@ -280,13 +283,13 @@ my-actor-avatar {
.block-title {
@include ellipsis;
@include margin-left(26px);
@include margin-right(30px);
text-transform: uppercase;
font-weight: $font-bold; // Bold
font-size: 13px;
margin-bottom: 25px;
margin-left: 26px;
margin-right: 30px;
}
a {
@ -314,6 +317,8 @@ my-actor-avatar {
a,
span[role=button] {
@include margin-right(8px);
display: inline-block;
text-decoration: none;
color: pvar(--menuForegroundColor);
@ -322,7 +327,6 @@ my-actor-avatar {
font-size: 90%;
font-weight: 500;
line-height: 1.4rem;
margin-right: 8px;
}
}
@ -397,10 +401,10 @@ my-actor-avatar {
my-global-icon {
&[iconName=playlists] {
@include margin-right(16px);
height: 24px;
width: 24px;
margin-right: 16px;
}
&[iconName=videos] {

1
client/src/app/menu/menu.component.ts
View file

@ -94,6 +94,7 @@ export class MenuComponent implements OnInit {
this.htmlServerConfig = this.serverService.getHTMLConfig()
this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
this.isLoggedIn = this.authService.isLoggedIn()
this.updateUserState()
this.buildMenuSections()

2
client/src/app/menu/notification.component.scss
View file

@ -141,7 +141,7 @@
position: relative;
.unread-notifications {
margin-left: 20px;
@include margin-left(20px);
}
.unread-notifications {

3
client/src/app/modal/welcome-modal.component.scss
View file

@ -17,9 +17,10 @@
}
.mascot {
@include margin-right(2rem);
display: block;
min-width: 170px;
margin-right: 2rem;
}
.subtitle {

8
client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
View file

@ -1,3 +1,6 @@
@import '_mixins';
@import '_variables';
.comment-flagged-account,
.account-flagged-handle {
font-size: 11px;
@ -5,13 +8,14 @@
}
.abuse-states .glyphicon-comment {
margin-left: 0.5rem;
@include margin-left(0.5rem);
}
.abuse-messages {
my-global-icon {
@include margin-left(3px);
width: 22px;
margin-left: 3px;
position: relative;
top: -2px;
}

2
client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
View file

@ -5,7 +5,7 @@
display: flex;
my-actor-avatar {
margin-right: 15px;
@include margin-right(15px);
}
.actor-info {

2
client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss
View file

@ -2,7 +2,7 @@
@import '_mixins';
my-video-miniature {
margin-right: 15px;
@include margin-right(15px);
display: inline-block;
min-width: $video-thumbnail-width;
max-width: $video-thumbnail-width;

4
client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
View file

@ -3,11 +3,11 @@
input {
@include peertube-input-text(auto);
@include padding-left(15px !important);
@include padding-right(15px !important);
// set again properties of peertube-input-text that are overriden by .input-group
font-size: 15px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.eye-button {

20
client/src/app/shared/shared-forms/markdown-textarea.component.scss
View file

@ -24,12 +24,13 @@ $input-border-radius: 3px;
}
.nav-preview {
@include padding-left(10px);
@include padding-right(10px);
display: block;
text-align: right;
text-align: end;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
border-top: 1px dashed $input-border-color;
border-left: 1px solid $input-border-color;
border-right: 1px solid $input-border-color;
@ -77,7 +78,7 @@ $input-border-radius: 3px;
border-bottom: 2px solid pvar(--mainColor);
:first-child {
margin-left: auto;
@include margin-left(auto);
}
::ng-deep {
@ -91,7 +92,7 @@ $input-border-radius: 3px;
}
.maximize-button {
margin-left: 5px;
@include margin-left(5px);
}
}
}
@ -120,10 +121,11 @@ $input-border-radius: 3px;
.nav-preview {
@include nav-preview-medium();
@include padding-right(0);
@include padding-left(0);
padding-top: #{$nav-preview-vertical-padding / 2};
padding-bottom: #{$nav-preview-vertical-padding / 2};
padding-left: 0;
padding-right: 0;
position: absolute;
background-color: pvar(--mainBackgroundColor);
width: 100% !important;
@ -132,7 +134,7 @@ $input-border-radius: 3px;
border-right: 0;
:last-child {
margin-right: pvar(--horizontalMarginContent);
@include margin-right(pvar(--horizontalMarginContent));
}
}
@ -181,11 +183,11 @@ $input-border-radius: 3px;
.nav-preview {
::ng-deep .nav-link {
@include ellipsis();
@include margin-right(10px !important);
display: block !important;
max-width: 45% !important;
padding: 5px 0 !important;
margin-right: 10px !important;
text-align: center;
&:not(.active) {

3
client/src/app/shared/shared-forms/peertube-checkbox.component.scss
View file

@ -36,7 +36,8 @@
}
.recommended {
margin-left: .5rem;
@include margin-left(.5rem);
align-self: baseline;
display: inline-block;
padding: 4px 6px;

3
client/src/app/shared/shared-forms/reactive-file.component.scss
View file

@ -16,7 +16,8 @@
}
.filename {
@include margin-left(5px);
font-weight: $font-semibold;
margin-left: 5px;
}
}

4
client/src/app/shared/shared-forms/select/select-shared.component.scss
View file

@ -43,10 +43,10 @@ ng-select ::ng-deep {
my-select-options + input {
@include peertube-input-text($form-base-input-width);
margin-left: 5px;
@include margin-left(5px);
display: block;
}
.input-suffix {
margin-left: 5px;
@include margin-left(5px);
}

3
client/src/app/shared/shared-instance/instance-features-table.component.scss
View file

@ -12,8 +12,9 @@ table {
}
&.sub-label {
@include padding-left(30px);
font-weight: $font-regular;
padding-left: 30px;
}
.more-info {

2
client/src/app/shared/shared-main/buttons/button.component.scss
View file

@ -24,7 +24,7 @@ my-small-loader ::ng-deep .root {
a[class$=-button],
span[class$=-button] {
> span {
margin-left: 5px;
@include margin-left(5px);
}
}

4
client/src/app/shared/shared-main/misc/help.component.scss
View file

@ -24,7 +24,7 @@
.popover-body {
font-family: $main-fonts;
text-align: left;
text-align: start;
padding: 10px;
font-size: 13px;
background-color: pvar(--mainBackgroundColor);
@ -36,7 +36,7 @@
}
ul {
padding-left: 20px;
@include padding-left(20px);
margin-bottom: 0;
}
}

3
client/src/app/shared/shared-main/misc/simple-search-input.component.scss
View file

@ -6,9 +6,10 @@
}
my-global-icon {
@include margin-left(10px);
height: 28px;
width: 28px;
margin-left: 10px;
cursor: pointer;
&:hover {

14
client/src/app/shared/shared-main/users/user-notifications.component.scss
View file

@ -22,19 +22,20 @@
my-global-icon {
@include apply-svg-color(#333);
@include margin-right(11px);
@include margin-left(3px);
width: 24px;
margin-right: 11px;
margin-left: 3px;
}
.avatar {
@include margin-right(10px);
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
border-radius: 5px;
margin-right: 10px;
}
.message {
@ -46,11 +47,12 @@
}
.from-date {
@include padding-left(5px);
@include margin-left(auto);
font-size: 0.85em;
color: pvar(--greyForegroundColor);
padding-left: 5px;
min-width: 70px;
text-align: right;
margin-left: auto;
text-align: end;
}
}

2
client/src/app/shared/shared-main/users/user-quota.component.scss
View file

@ -8,7 +8,7 @@ label {
.user-quota {
label {
margin-right: 5px;
@include margin-right(5px);
}
&,

7
client/src/app/shared/shared-moderation/moderation.scss
View file

@ -9,7 +9,7 @@
font-weight: $font-semibold;
display: inline-block;
vertical-align: top;
text-align: right;
text-align: end;
}
.moderation-expanded-text {
@ -79,10 +79,10 @@ my-action-dropdown.show {
$image-height: 45px;
@include miniature-thumbnail;
@include margin-right(0.5rem);
height: $image-height;
width: #{(16/9) * $image-height};
margin-right: 0.5rem;
border-radius: 2px;
border: 0;
background: transparent;
@ -121,9 +121,10 @@ my-action-dropdown.show {
line-height: 1rem;
div .glyphicon {
@include margin-left(0.1rem);
font-size: 80%;
color: #808080;
margin-left: 0.1rem;
}
div + div {

2
client/src/app/shared/shared-moderation/report-modals/report.component.scss
View file

@ -16,7 +16,7 @@ textarea {
align-items: center;
my-timestamp-input {
margin-left: 10px;
@include margin-left(10px);
}
}

6
client/src/app/shared/shared-share-modal/video-share.component.scss
View file

@ -50,7 +50,7 @@ my-input-toggle-hidden {
cursor: pointer;
.glyphicon {
margin-right: 5px;
@include margin-right(5px);
}
}
@ -66,7 +66,7 @@ my-input-toggle-hidden {
align-items: center;
.peertube-select-container {
margin-left: 10px;
@include margin-left(10px);
}
}
@ -77,7 +77,7 @@ my-input-toggle-hidden {
align-items: center;
my-timestamp-input {
margin-left: 10px;
@include margin-left(10px);
}
}
}

10
client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
View file

@ -38,15 +38,15 @@
// Unlogged
> .dropdown > .dropdown-toggle span {
padding-right: 3px;
@include padding-right(3px);
}
// Logged
> .btn {
padding-right: 4px;
@include padding-right(4px);
+ .dropdown > button {
padding-left: 2px;
@include padding-left(2px);
&::after {
position: relative;
@ -62,7 +62,7 @@
}
span.followers-count {
padding-left: 5px;
@include padding-left(5px);
}
}
&.unsubscribe-button {
@ -108,6 +108,6 @@
span:not(:first-child) {
font-size: 60%;
text-align: left;
text-align: start;
}
}

10
client/src/app/shared/shared-video-miniature/abstract-video-list.scss
View file

@ -21,7 +21,8 @@ $icon-size: 16px;
}
.moderation-block {
margin-left: .4rem;
@include margin-left(.4rem);
display: flex;
justify-content: flex-end;
align-items: center;
@ -54,8 +55,8 @@ $icon-size: 16px;
}
.display-as-row.videos {
margin-left: pvar(--horizontalMarginContent);
margin-right: pvar(--horizontalMarginContent);
@include margin-left(pvar(--horizontalMarginContent));
@include margin-right(pvar(--horizontalMarginContent));
.video-wrapper {
margin-bottom: 15px;
@ -70,8 +71,9 @@ $icon-size: 16px;
margin-bottom: 10px;
.title-page {
@include margin-right(0);
margin-bottom: 10px;
margin-right: 0;
}
}
}

8
client/src/app/shared/shared-video-miniature/video-download.component.scss
View file

@ -19,7 +19,7 @@
}
.glyphicon {
margin-right: 5px;
@include margin-right(5px);
}
}
@ -46,9 +46,9 @@
.peertube-radio-container {
@include peertube-radio-container;
@include margin-right(30px);
display: inline-block;
margin-right: 30px;
}
}
@ -66,8 +66,9 @@
margin-bottom: 12px;
.metadata-attribute-label {
@include padding-right(5px);
min-width: 142px;
padding-right: 5px;
display: inline-block;
color: pvar(--greyForegroundColor);
font-weight: $font-bold;
@ -75,6 +76,7 @@
a.metadata-attribute-value {
@include disable-default-a-behaviour;
color: pvar(--mainForegroundColor);
&:hover {

5
client/src/app/shared/shared-video-miniature/video-miniature.component.scss
View file

@ -13,7 +13,7 @@ $more-button-width: 40px;
}
my-actor-avatar {
margin: 10px 10px 0 0;
@include margin(10px, 10px, 0, 0);
}
.video-miniature-created-at-views {
@ -155,10 +155,11 @@ my-actor-avatar {
}
my-video-thumbnail {
@include margin-right(10px);
min-width: var(--rowThumbnailWidth);
max-width: var(--rowThumbnailWidth);
height: var(--rowThumbnailHeight);
margin-right: 10px;
}
.video-miniature-name {

8
client/src/app/shared/shared-video-miniature/videos-selection.component.scss
View file

@ -11,8 +11,9 @@
position: fixed;
.action-button {
@include margin-left(55px);
display: block;
margin-left: 55px;
}
}
@ -29,10 +30,11 @@
}
.checkbox-container {
@include margin-right(20px);
@include margin-left(12px);
display: flex;
align-items: center;
margin-right: 20px;
margin-left: 12px;
}
my-video-miniature {

19
client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
View file

@ -44,7 +44,7 @@ $timestamp-margin-right: 10px;
}
> .optional-rows {
padding-left: 24px;
@include padding-left(24px);
}
&.has-optional-row:hover {
@ -57,7 +57,7 @@ $timestamp-margin-right: 10px;
display: flex;
my-peertube-checkbox {
margin-right: 10px;
@include margin-right(10px);
align-self: center;
}
@ -78,15 +78,15 @@ $timestamp-margin-right: 10px;
my-global-icon {
@include apply-svg-color(#333);
@include margin-right(0);
width: 19px;
height: 19px;
margin-right: 0;
}
}
my-timestamp-input {
margin-right: $timestamp-margin-right;
@include margin-right($timestamp-margin-right);
::ng-deep .ui-inputtext {
padding: 0;
@ -101,20 +101,23 @@ $timestamp-margin-right: 10px;
}
my-peertube-checkbox {
@include margin-right(0 !important);
display: block;
width: $optional-rows-checkbox-width;
margin-right: 0 !important;
}
.labels {
margin-left: $optional-rows-checkbox-width;
@include margin-left($optional-rows-checkbox-width);
font-size: 13px;
color: pvar(--greyForegroundColor);
padding-top: 5px;
padding-bottom: 0;
div {
margin-right: $timestamp-margin-right;
@include margin-right($timestamp-margin-right);
width: $timestamp-width;
}
}
@ -131,11 +134,11 @@ $timestamp-margin-right: 10px;
my-global-icon {
@include apply-svg-color(#333);
@include margin-right(4px);
position: relative;
left: -1px;
top: -1px;
margin-right: 4px;
width: 21px;
height: 21px;
}

14
client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
View file

@ -17,8 +17,9 @@ my-video-thumbnail {
my-video-thumbnail,
.fake-thumbnail {
@include margin-right(10px);
display: flex; // Avoids an issue with line-height that adds space below the element
margin-right: 10px;
}
.video {
@ -60,8 +61,9 @@ my-video-thumbnail,
cursor: pointer;
.position {
@include margin-right(10px);
font-weight: $font-semibold;
margin-right: 10px;
color: pvar(--greyForegroundColor);
min-width: 25px;
@ -101,8 +103,9 @@ my-video-thumbnail,
.more,
my-edit-button {
@include margin-left(auto);
justify-self: flex-end;
margin-left: auto;
cursor: pointer;
min-width: 24px;
}
@ -135,8 +138,9 @@ my-video-thumbnail,
}
.timestamp-options {
@include padding-left(35px);
padding-top: 0;
padding-left: 35px;
margin-bottom: 15px;
> div {
@ -146,7 +150,7 @@ my-video-thumbnail,
}
my-peertube-checkbox {
margin-right: 5px;
@include margin-right(5px);
}
input {

3
client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
View file

@ -88,9 +88,10 @@
display: flex;
.miniature-thumbnail {
@include margin-right(10px);
width: var(--rowThumbnailWidth);
height: var(--rowThumbnailHeight);
margin-right: 10px;
}
}

34
client/src/sass/application.scss
View file

@ -65,6 +65,9 @@ body {
// Allow to disable the scrollbar instead of hide it when the content fit the body
// And not move the content and header horizontally sticked to right when the content is updating
overflow-y: scroll;
// Fix "reboot" style that set text-align: left
text-align: start;
}
::selection {
@ -130,8 +133,7 @@ my-input-toggle-hidden ::ng-deep input {
.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
max-width: initial;
}
@ -144,13 +146,13 @@ my-input-toggle-hidden ::ng-deep input {
}
.main-col {
margin-left: $menu-width;
@include margin-left($menu-width);
width: calc(100% - #{$menu-width});
outline: none;
.margin-content {
margin-left: pvar(--horizontalMarginContent);
margin-right: pvar(--horizontalMarginContent);
margin: 0 pvar(--horizontalMarginContent);
flex-grow: 1;
}
@ -159,8 +161,7 @@ my-input-toggle-hidden ::ng-deep input {
width: 100%;
display: flex;
align-items: center;
padding-left: pvar(--horizontalMarginContent);
padding-right: pvar(--horizontalMarginContent);
padding: 0 pvar(--horizontalMarginContent);
height: $sub-menu-height;
margin-bottom: $sub-menu-margin-bottom;
overflow-x: auto;
@ -182,7 +183,7 @@ my-input-toggle-hidden ::ng-deep input {
--horizontalMarginContent: #{$expanded-horizontal-margins};
--mainColWidth: 100vw;
margin-left: 0;
@include margin-left(0);
width: 100%;
}
@ -199,12 +200,12 @@ my-input-toggle-hidden ::ng-deep input {
.title-page {
@include disable-default-a-behaviour;
@include margin-right(55px);
opacity: 0.6;
color: pvar(--mainForegroundColor);
font-size: 16px;
display: inline-block;
margin-right: 55px;
font-weight: $font-semibold;
border-bottom: 2px solid transparent;
@ -237,7 +238,7 @@ my-input-toggle-hidden ::ng-deep input {
}
@media screen and (max-width: $mobile-view) {
margin-right: 15px;
@include margin-left(15px);
}
}
@ -365,8 +366,7 @@ ngx-loading-bar {
--horizontalMarginContent: #{$expanded-horizontal-margins / 3};
.sub-menu {
padding-left: 50px;
padding-right: 50px;
padding: 0 50px;
.title-page {
font-size: 17px;
@ -386,12 +386,11 @@ ngx-loading-bar {
.main-col.expanded {
--horizontalMarginContent: 15px;
margin-left: 0;
@include margin-left(0);
.sub-menu {
width: 100vw;
padding-left: 15px;
padding-right: 15px;
padding: 0 15px;
margin-bottom: $sub-menu-margin-bottom-small-view;
overflow-x: auto;
}
@ -405,7 +404,8 @@ ngx-loading-bar {
flex-direction: column;
.form-sub-title {
margin-right: 0 !important;
@include margin-right(0 !important);
margin-bottom: 10px;
text-align: center;
}
@ -419,7 +419,7 @@ ngx-loading-bar {
width: 100%;
a {
margin-left: 5px;
@include margin-left(5px);
}
}
}

29
client/src/sass/bootstrap.scss vendored
View file

@ -62,7 +62,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
font-size: 15px;
.dropdown-header {
padding-left: 1rem;
@include padding-left(1rem);
}
.dropdown-item {
@ -105,7 +105,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
}
.modal-dialog {
text-align: left;
text-align: start;
&:not(.modal-lg):not(.modal-xl) {
min-width: 500px;
@ -153,10 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
.inputs {
margin-bottom: 0;
text-align: right;
text-align: end;
> .peertube-button:not(:first-child) {
margin-left: 10px;
@include margin-left(10px);
}
}
}
@ -342,7 +342,7 @@ ngb-tooltip-window {
position: relative;
input {
padding-right: 1.5rem !important;
@include padding-right(1.5rem !important);
}
.form-control-clear {
@ -392,3 +392,22 @@ ngb-tooltip-window {
border-left-color: pvar(--mainColor);
}
}
// Override these properties for Bidi support
@each $size, $length in $spacers {
.ml-#{$size} {
@include margin-left($length);
}
.mr-#{$size} {
@include margin-right($length);
}
.pl-#{$size} {
@include padding-left($length);
}
.pr-#{$size} {
@include padding-right($length);
}
}

3
client/src/sass/include/_actor.scss
View file

@ -30,7 +30,8 @@
}
> div {
margin-left: $img-margin;
@include margin-left($img-margin);
min-width: 1px;
}

11
client/src/sass/include/_miniature.scss
View file

@ -14,8 +14,9 @@
}
&.blur-filter {
@include padding-left(4px);
filter: blur(3px);
padding-left: 4px;
}
}
@ -102,11 +103,11 @@
--gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
@if $margin {
margin-left: var(--gridVideosMiniatureMargins) !important;
margin-right: var(--gridVideosMiniatureMargins) !important;
@include margin-left(var(--gridVideosMiniatureMargins) !important);
@include margin-right(var(--gridVideosMiniatureMargins) !important);
} @else {
padding-left: var(--gridVideosMiniatureMargins) !important;
padding-right: var(--gridVideosMiniatureMargins) !important;
@include padding-left(var(--gridVideosMiniatureMargins) !important);
@include padding-right(var(--gridVideosMiniatureMargins) !important);
}
@media screen and (max-width: $mobile-view) {

95
client/src/sass/include/_mixins.scss
View file

@ -84,6 +84,7 @@
}
@mixin peertube-input-text($width) {
padding: 0 15px;
display: inline-block;
height: $button-height;
width: $width;
@ -91,8 +92,6 @@
background-color: pvar(--inputBackgroundColor);
border: 1px solid #C6C6C6;
border-radius: 3px;
padding-left: 15px;
padding-right: 15px;
font-size: 15px;
&::placeholder {
@ -257,6 +256,8 @@
}
@mixin peertube-button {
@include padding(0, 17px, 0, 13px);
border: 0;
font-weight: $font-semibold;
font-size: 15px;
@ -265,7 +266,6 @@
// FIXME: because of primeng that redefines border-radius of all input[type="..."]
border-radius: 3px !important;
text-align: center;
padding: 0 17px 0 13px;
cursor: pointer;
}
@ -290,9 +290,10 @@
line-height: normal !important;
my-global-icon {
@include margin-right($margin-right);
position: relative;
width: $width;
margin-right: $margin-right;
top: $top;
}
}
@ -310,7 +311,7 @@
width: 100%;
height: 100%;
font-size: 100px;
text-align: right;
text-align: end;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
@ -428,6 +429,8 @@
cursor: pointer;
&::before {
@include margin-right(10px);
position: relative;
top: -2px;
content: '';
@ -440,7 +443,6 @@
vertical-align: middle;
cursor: pointer;
text-align: center;
margin-right: 10px;
}
}
@ -500,9 +502,10 @@
}
+ span + span {
@include margin-left(5px);
font-size: 15px;
font-weight: $font-regular;
margin-left: 5px;
cursor: pointer;
display: inline;
}
@ -635,10 +638,10 @@
padding: 6px 15px;
my-global-icon {
@include margin-right(10px);
width: 22px;
opacity: .7;
margin-right: 10px;
position: relative;
top: -2px;
}
@ -705,10 +708,12 @@
}
+ .breadcrumb-item {
padding-left: 0.5rem;
@include padding-left(0.5rem);
&::before {
@include padding-right(0.5rem);
display: inline-block;
padding-right: 0.5rem;
color: #6c757d;
content: '/';
}
@ -822,8 +827,8 @@
}
my-actor-avatar {
margin-left: -.4rem;
margin-right: .2rem;
@include margin-left(-.4rem);
@include margin-right(.2rem);
}
&.two-lines {
@ -836,11 +841,11 @@
}
div {
margin: 0 .1rem;
display: flex;
flex-direction: column;
height: $avatar-height;
margin-left: .1rem;
margin-right: .1rem;
justify-content: center;
}
}
@ -875,14 +880,14 @@
> span > my-global-icon,
> my-global-icon {
margin-right: 10px;
@include margin-right(10px);
width: 24px;
height: 24px;
vertical-align: top;
}
.badge {
margin-left: 7px;
@include margin-left(7px);
vertical-align: top;
}
}
@ -930,3 +935,59 @@
}
}
}
@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
@include margin-left($inline-start);
@include margin-right($inline-end);
margin-top: $block-start;
margin-bottom: $block-end;
}
@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
@include padding-left($inline-start);
@include padding-right($inline-end);
padding-top: $block-start;
padding-bottom: $block-end;
}
@mixin margin-left ($value) {
@supports (margin-inline-start: $value) {
margin-inline-start: $value;
}
@supports not (margin-inline-start: $value) {
margin-left: $value;
}
}
@mixin margin-right ($value) {
@supports (margin-inline-end: $value) {
margin-inline-end: $value;
}
@supports not (margin-inline-end: $value) {
margin-right: $value;
}
}
@mixin padding-left ($value) {
@supports (padding-inline-start: $value) {
padding-inline-start: $value;
}
@supports not (padding-inline-start: $value) {
padding-left: $value;
}
}
@mixin padding-right ($value) {
@supports (padding-inline-end: $value) {
padding-inline-end: $value;
}
@supports not (padding-inline-end: $value) {
padding-right: $value;
}
}

6
client/src/sass/ng-select.scss
View file

@ -31,7 +31,7 @@ $ng-select-value-font-size: 15px;
}
.ng-arrow-wrapper {
padding-right: 12px;
@include padding-right(12px);
}
&.ng-select-single .ng-value-container .ng-value {
@ -44,10 +44,10 @@ $ng-select-value-font-size: 15px;
}
&.ng-select-multiple .ng-select-container .ng-value-container {
padding-left: 12px;
@include padding-left(12px);
.ng-value { /* stylelint-disable-line */
margin-left: 3px;
@include margin-left(12px);
}
}
}

3
client/src/sass/player/bezels.scss
View file

@ -9,13 +9,14 @@
}
.vjs-bezel {
@include margin-left(-26px);
position: absolute;
left: 50%;
top: 50%;
width: 52px;
height: 52px;
z-index: 19;
margin-left: -26px;
margin-top: -26px;
background: rgba(0, 0, 0, .5);
border-radius: 26px;

5
client/src/sass/player/context-menu.scss
View file

@ -25,7 +25,7 @@ $context-menu-width: 350px;
cursor: pointer;
font-size: 1em;
padding: 8px 16px;
text-align: left;
text-align: start;
text-transform: none;
&:hover {
@ -35,6 +35,8 @@ $context-menu-width: 350px;
[class^='vjs-icon-'] {
$icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
@include margin-right(0.8rem !important);
display: inline-flex;
position: relative;
top: 2px;
@ -43,7 +45,6 @@ $context-menu-width: 350px;
height: 14px;
background-color: #fff;
mask-size: cover;
margin-right: 0.8rem !important;
@each $icon in $icons {
&[class$="-#{$icon}"] {

41
client/src/sass/player/peertube-skin.scss
View file

@ -20,8 +20,9 @@ body {
color: pvar(--embedForegroundColor);
.vjs-dock-text {
@include padding-right(60px);
padding: $dock-padding;
padding-right: 60px;
background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
}
@ -34,11 +35,11 @@ body {
font-size: 11px;
.text::before {
margin-right: 4px;
@include margin-right(4px);
}
.text::after {
margin-left: 4px;
@include margin-left(4px);
transform: scale(-1, 1);
}
}
@ -55,6 +56,8 @@ body {
$big-play-width: 1.2em;
$big-play-height: 1.2em;
@include margin-left(-($big-play-width / 2));
outline: 0;
font-size: 6em;
@ -66,7 +69,6 @@ body {
width: $big-play-width;
height: $big-play-height;
line-height: $big-play-height;
margin-left: -($big-play-width / 2);
margin-top: -($big-play-height / 2);
transition: 0.4s opacity;
@ -157,7 +159,7 @@ body {
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
> button:first-child {
margin-left: $first-control-bar-element-margin-left;
@include margin-left($first-control-bar-element-margin-left);
}
.vjs-progress-control,
@ -188,11 +190,12 @@ body {
}
.vjs-progress-control {
@include margin-left($progress-margin);
position: absolute;
z-index: 100; // On top of the progress bar
bottom: 29px;
width: calc(100% - (2 * #{$progress-margin}));
margin-left: $progress-margin;
height: 14px;
.vjs-slider {
@ -261,17 +264,19 @@ body {
line-height: inherit;
&.vjs-current-time {
@include margin-left(.5em);
font-size: $font-size;
display: inline-block;
padding: 0;
margin-left: .5em;
.vjs-current-time-display {
line-height: calc(#{$control-bar-height} - 1px);
&::after {
@include margin(0, 1px, 0, 2px);
content: '/';
margin: 0 1px 0 2px;
}
}
}
@ -298,10 +303,11 @@ body {
}
.vjs-peertube {
@include margin-right(6px);
width: 100%;
line-height: $control-bar-height;
text-align: right;
margin-right: 6px;
text-align: end;
overflow: hidden;
.vjs-peertube-displayed {
@ -323,7 +329,7 @@ body {
.upload-speed-text,
.peers-text,
.http-fallback {
margin-right: 15px;
@include margin-right(15px);
}
.icon {
@ -340,7 +346,7 @@ body {
.vjs-next-video,
.vjs-previous-video {
line-height: $control-bar-height;
text-align: right;
text-align: end;
.icon {
&.icon-next,
@ -415,8 +421,9 @@ body {
}
.vjs-volume-control {
@include margin(0, 5px, 0, 0);
width: 30px;
margin: 0 5px 0 0;
}
.vjs-volume-bar {
@ -490,9 +497,9 @@ body {
.vjs-theater-control {
@include disable-outline;
@include margin-right(1px);
width: 37px;
margin-right: 1px;
cursor: pointer;
.vjs-icon-placeholder {
@ -512,9 +519,9 @@ body {
.vjs-fullscreen-control {
@include disable-outline;
@include margin-left($first-control-bar-element-margin-left);
width: 37px;
margin-right: $first-control-bar-element-margin-left;
.vjs-icon-placeholder {
display: inline-block;
@ -641,12 +648,12 @@ body {
.vjs-control-bar {
> button:first-child {
margin-left: $first-control-bar-element-margin-left-small-width;
@include margin-left($first-control-bar-element-margin-left-small-width);
}
}
.vjs-fullscreen-control {
margin-right: $first-control-bar-element-margin-left-small-width;
@include margin-right($first-control-bar-element-margin-left-small-width);
}
&.vjs-live {

16
client/src/sass/player/settings-menu.scss
View file

@ -56,13 +56,13 @@ $setting-transition-easing: ease-out;
}
.vjs-settings-sub-menu-title {
text-align: left;
text-align: start;
font-weight: $font-semibold;
}
.vjs-settings-sub-menu-value {
width: 100%;
text-align: right;
text-align: end;
small {
font-size: 0.85em;
@ -132,7 +132,7 @@ $setting-transition-easing: ease-out;
.vjs-settings-sub-menu-value::after {
@include chevron-right(9px, 2px);
margin-left: 5px;
@include margin-left(5px);
}
}
@ -142,7 +142,7 @@ $setting-transition-easing: ease-out;
.vjs-menu-item {
outline: 0;
font-weight: $font-semibold;
text-align: right;
text-align: end;
padding: 5px 8px;
&.vjs-back-button {
@ -150,12 +150,12 @@ $setting-transition-easing: ease-out;
padding: 8px 8px 13px 12px;
margin-bottom: 5px;
border-bottom: 1px solid #808080;
text-align: left;
text-align: start;
&::before {
@include chevron-left(9px, 2px);
margin-right: 5px;
@include margin-right(5px);
}
}
@ -182,10 +182,10 @@ $setting-transition-easing: ease-out;
width: 200px;
.vjs-menu-item {
text-align: left;
text-align: start;
.vjs-menu-item-text {
margin-left: 25px;
@include margin-left(25px);
text-transform: capitalize;
}
}

2
client/src/sass/player/stats.scss
View file

@ -34,7 +34,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
display: inline-block;
font-weight: 600;
padding: 0 .5em;
text-align: right;
text-align: end;
width: 11.5em;
white-space: nowrap;
}

6
client/src/sass/player/upnext.scss
View file

@ -23,19 +23,17 @@ $browser-context: 16;
}
.vjs-upnext-top {
margin: 0 auto;
width: 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 50%;
margin-bottom: 60px;
}
.vjs-upnext-bottom {
margin: 0 auto;
width: 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
top: 50%;
margin-top: 52px;
}

43
client/src/sass/primeng-custom.scss
View file

@ -139,7 +139,8 @@ body .p-paginator .p-paginator-pages .p-paginator-page:focus {
box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
}
body .p-paginator .p-dropdown {
margin-left: 0.5em;
@include margin-left(0.5em);
height: 2.286em;
min-width: auto;
}
@ -161,7 +162,7 @@ body .p-dropdown:not(.p-disabled).p-focus {
border-color: pvar(--mainColor);
}
body .p-dropdown .p-dropdown-label {
padding-right: 2em;
@include padding-right(2em);
}
body .p-dropdown .p-dropdown-trigger {
background-color: #ffffff;
@ -175,7 +176,7 @@ body .p-dropdown .p-dropdown-clear-icon {
color: #848484;
}
body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
padding-right: 4em;
@include padding-right(4em);
}
body .p-dropdown-panel {
padding: 0;
@ -191,8 +192,9 @@ body .p-dropdown-panel .p-dropdown-filter-container {
margin: 0;
}
body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
@include padding-right(2em);
width: 100%;
padding-right: 2em;
}
body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
top: 50%;
@ -368,17 +370,18 @@ body .p-datepicker.p-datepicker-timeonly .p-timepicker {
border-top: 0 none;
}
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
@include padding-right(0.857em);
@include padding-left(0.857em);
border-right: 1px solid #d8dae2;
padding-right: 0.857em;
padding-left: 0.857em;
padding-top: 0;
padding-bottom: 0;
}
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
padding-left: 0;
@include padding-left(0);
}
body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
padding-right: 0;
@include padding-right(0);
border-right: 0 none;
}
body .p-calendar.p-calendar-w-btn .p-inputtext {
@ -402,7 +405,7 @@ body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
border: 1px solid #a80000;
}
body .p-timepicker .p-separator {
margin-left: 0;
@include margin-left(0);
min-width: 0.75rem;
}
@ -514,7 +517,7 @@ p-table {
align-items: center;
.left-buttons {
padding-left: 15px;
@include padding-left(15px);
}
}
}
@ -534,7 +537,7 @@ p-table {
}
td {
padding-left: 15px !important;
@include padding-left(15px !important);
&.expand-cell {
padding: 10px 15px;
@ -646,10 +649,10 @@ p-table {
my-delete-button,
my-button {
display: inline-block !important;
margin-left: 5px;
@include margin-left(5px);
&:first-child {
margin-left: 0
@include margin-left(0)
}
}
}
@ -714,13 +717,13 @@ p-table {
&.p-paginator-prev {
@extend .glyphicon-chevron-left;
margin-right: 10px;
@include margin-right(10px);
}
&.p-paginator-next {
@extend .glyphicon-chevron-right;
margin-left: 10px;
@include margin-left(10px);
}
&.p-paginator-last {
@ -799,7 +802,7 @@ p-calendar .p-datepicker {
.p-datepicker-header {
.p-datepicker-year {
margin-left: 5px;
@include margin-left(5px);
}
.p-datepicker-next {
@ -807,7 +810,7 @@ p-calendar .p-datepicker {
@include glyphicon-light;
color: #000 !important;
text-align: right;
text-align: end;
.pi.pi-chevron-right {
display: none !important;
@ -819,7 +822,7 @@ p-calendar .p-datepicker {
@include glyphicon-light;
color: #000 !important;
text-align: left;
text-align: start;
.pi.pi-chevron-left {
display: none !important;
@ -945,7 +948,7 @@ p-toast {
.message {
flex-grow: 1;
margin-right: 20px;
@include margin-right(20px);
h3 {
font-size: 21px;
@ -959,7 +962,7 @@ p-toast {
.glyphicon {
font-size: 32px;
margin-right: 5px;
@include margin-right(5px);
}
}
}

11
client/src/standalone/videos/test-embed.scss
View file

@ -1,3 +1,5 @@
@import '_variables';
@import '_mixins';
* {
font-family: sans-serif;
@ -30,21 +32,23 @@ aside {
}
.logo {
@include margin-right(0.5em);
font-size: 150%;
height: 100%;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
margin-right: 0.5em;
.icon {
@include margin-right(0.5em);
height: 100%;
padding: 0 18px 0 32px;
background: #fff;
display: flex;
align-items: center;
margin-right: 0.5em;
}
}
@ -59,6 +63,8 @@ main {
}
header {
@include padding-right(1em);
width: 100%;
height: 3.2em;
background-color: #F1680D;
@ -71,7 +77,6 @@ header {
box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6);
background-size: 50%;
background-position: top left;
padding-right: 1em;
h1 {
margin: 0;

8
scripts/dev/client.sh
View file

@ -2,7 +2,13 @@
set -eu
clientCommand="cd client && node node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration hmr --host 0.0.0.0 --disable-host-check --port 3000"
clientConfiguration="hmr"
if [ ! -z ${2+x} ] && [ "$2" = "--ar-locale" ]; then
clientConfiguration="ar-locale"
fi
clientCommand="cd client && node node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration $clientConfiguration --host 0.0.0.0 --disable-host-check --port 3000"
serverCommand="npm run build:server && NODE_ENV=test node dist/server"
if [ ! -z ${1+x} ] && [ "$1" = "--skip-server" ]; then

2
scripts/dev/index.sh
View file

@ -3,5 +3,5 @@
set -eu
NODE_ENV=test npm run concurrently -- -k \
"sh scripts/dev/client.sh --skip-server" \
"sh scripts/dev/client.sh --skip-server ${1:-}" \
"sh scripts/dev/server.sh --skip-client"