Fix responsive
This commit is contained in:
Chocobozzz
parent
6c6740aded
commit
4a58c08c5b
|
|
@ -20,7 +20,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ms-auto d-flex gap-1 flex-wrap">
|
||||
<div class="ms-auto d-flex gap-2 flex-wrap">
|
||||
<my-advanced-input-filter [filters]="searchFilters" (search)="onSearch($event)"></my-advanced-input-filter>
|
||||
|
||||
<my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
|
||||
|
|
|
|||
|
|
@ -13,18 +13,8 @@ a {
|
|||
.admin-sub-header {
|
||||
justify-content: flex-end;
|
||||
|
||||
.select-filter-block {
|
||||
&:not(:last-child) {
|
||||
@include margin-right(10px);
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.peertube-select-container {
|
||||
@include peertube-select-container(auto);
|
||||
}
|
||||
.peertube-select-container {
|
||||
@include peertube-select-container(auto);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
></my-select-options>
|
||||
</div>
|
||||
|
||||
<div class="button-filter-block">
|
||||
<div class="align-self-end">
|
||||
<my-button i18n-label label="Refresh" icon="refresh" (click)="refresh()"></my-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,25 +33,10 @@
|
|||
}
|
||||
|
||||
.admin-sub-header {
|
||||
flex-direction: row !important;
|
||||
justify-content: flex-end;
|
||||
|
||||
.select-filter-block {
|
||||
&:not(:last-child) {
|
||||
@include margin-right(10px);
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.peertube-select-container {
|
||||
@include peertube-select-container(auto);
|
||||
}
|
||||
}
|
||||
|
||||
.button-filter-block {
|
||||
align-self: flex-end;
|
||||
.peertube-select-container {
|
||||
@include peertube-select-container(auto);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,64 +35,6 @@ export class ScreenService {
|
|||
return this.windowInnerWidth
|
||||
}
|
||||
|
||||
// https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
|
||||
onFingerSwipe (direction: 'left' | 'right' | 'up' | 'down', action: () => void, removeEventOnEnd = true) {
|
||||
let touchDownClientX: number
|
||||
let touchDownClientY: number
|
||||
|
||||
const onTouchStart = (event: TouchEvent) => {
|
||||
const firstTouch = event.touches[0]
|
||||
touchDownClientX = firstTouch.clientX
|
||||
touchDownClientY = firstTouch.clientY
|
||||
}
|
||||
|
||||
const onTouchMove = (event: TouchEvent) => {
|
||||
if (!touchDownClientX || !touchDownClientY) {
|
||||
return
|
||||
}
|
||||
|
||||
const touchUpClientX = event.touches[0].clientX
|
||||
const touchUpClientY = event.touches[0].clientY
|
||||
|
||||
const touchClientX = Math.abs(touchDownClientX - touchUpClientX)
|
||||
const touchClientY = Math.abs(touchDownClientY - touchUpClientY)
|
||||
|
||||
if (touchClientX > touchClientY) {
|
||||
if (touchClientX > 0) {
|
||||
if (direction === 'left') {
|
||||
if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
|
||||
action()
|
||||
}
|
||||
} else {
|
||||
if (direction === 'right') {
|
||||
if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
|
||||
action()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (touchClientY > 0) {
|
||||
if (direction === 'up') {
|
||||
if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
|
||||
action()
|
||||
}
|
||||
} else {
|
||||
if (direction === 'down') {
|
||||
if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
|
||||
action()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('touchstart', onTouchStart, false)
|
||||
document.addEventListener('touchmove', onTouchMove, false)
|
||||
}
|
||||
|
||||
private removeFingerSwipeEventListener (onTouchStart: (event: TouchEvent) => void, onTouchMove: (event: TouchEvent) => void) {
|
||||
document.removeEventListener('touchstart', onTouchStart)
|
||||
document.removeEventListener('touchmove', onTouchMove)
|
||||
}
|
||||
|
||||
private refreshWindowInnerWidth () {
|
||||
this.lastFunctionCallTime = new Date().getTime()
|
||||
|
||||
|
|
|
|||
|
|
@ -189,6 +189,7 @@ my-actor-avatar {
|
|||
|
||||
.buttons-container {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
@if (customItemTemplate) {
|
||||
<ng-template [ngTemplateOutlet]="customItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
|
||||
} @else {
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="d-flex align-items-center item-label">
|
||||
<img *ngIf="item.imageUrl" alt="" class="me-2" [src]="item.imageUrl" />
|
||||
|
||||
<span [ngClass]="item.classes">{{ item.label }}</span>
|
||||
|
|
|
|||
|
|
@ -11,3 +11,7 @@ img {
|
|||
.muted {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
min-height: 22px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,15 @@
|
|||
{{ h1 }}
|
||||
</h1>
|
||||
|
||||
<ng-template #entryTemplate let-item="item">
|
||||
<ng-template #entryTemplate let-item="item" let-dropdown="dropdown" let-modal="modal">
|
||||
<a
|
||||
myPluginSelector [pluginSelectorId]="item.pluginSelectorId"
|
||||
[routerLink]="item.routerLink" [queryParams]="item.queryParams" routerLinkActive="active" class="entry"
|
||||
[ngClass]="{ 'child-active': activeParent === item }">{{ item.label }}</a>
|
||||
[ngClass]="{ 'child-active': activeParent === item, 'dropdown-item': dropdown, 'in-modal': modal }"
|
||||
(click)="onLinkClick(modal)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</ng-template>
|
||||
|
||||
<div class="parent-container">
|
||||
|
|
|
|||
|
|
@ -19,39 +19,79 @@ h1 {
|
|||
}
|
||||
}
|
||||
|
||||
.parent-container {
|
||||
.entry {
|
||||
color: pvar(--fg-100);
|
||||
display: inline-block;
|
||||
font-weight: $font-bold;
|
||||
white-space: nowrap;
|
||||
@mixin parent-active {
|
||||
color: pvar(--fg);
|
||||
|
||||
@include font-size(22px);
|
||||
@include disable-default-a-behaviour;
|
||||
@include margin-right(2rem);
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 4px;
|
||||
background-color: pvar(--border-primary);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.child-active {
|
||||
color: pvar(--fg);
|
||||
position: relative;
|
||||
@mixin child-active {
|
||||
color: pvar(--fg-350);
|
||||
font-weight: $font-bold;
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 4px;
|
||||
background-color: pvar(--border-primary);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.parent-container my-list-overflow ::ng-deep .overflow-button {
|
||||
&:has(+ * .active),
|
||||
&:has(+ * .child-active) {
|
||||
@include parent-active;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: pvar(--fg);
|
||||
}
|
||||
.children-container my-list-overflow ::ng-deep .overflow-button {
|
||||
&:has(+ * .active),
|
||||
&:has(+ * .child-active) {
|
||||
@include child-active;
|
||||
}
|
||||
}
|
||||
|
||||
.parent-container .entry,
|
||||
.entry.in-modal {
|
||||
color: pvar(--fg-100);
|
||||
display: inline-block;
|
||||
font-weight: $font-bold;
|
||||
white-space: nowrap;
|
||||
|
||||
@include font-size(22px);
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: pvar(--fg);
|
||||
}
|
||||
}
|
||||
|
||||
.parent-container .entry {
|
||||
@include margin-right(2rem);
|
||||
|
||||
&.active,
|
||||
&.child-active {
|
||||
position: relative;
|
||||
|
||||
@include parent-active;
|
||||
}
|
||||
}
|
||||
|
||||
.entry.in-modal {
|
||||
padding: 9px 12px;
|
||||
width: 100%;
|
||||
|
||||
&.active,
|
||||
&.child-active {
|
||||
color: pvar(--on-primary) !important;
|
||||
background-color: pvar(--primary-450);
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -87,11 +127,9 @@ h1 {
|
|||
@include font-size(18px);
|
||||
|
||||
&.active {
|
||||
color: pvar(--fg-350);
|
||||
font-weight: $font-bold;
|
||||
background-color: pvar(--bg-secondary-400);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
||||
@include child-active;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { logger } from '@root-helpers/logger'
|
|||
import { filter, Subscription } from 'rxjs'
|
||||
import { PluginSelectorDirective } from '../plugins/plugin-selector.directive'
|
||||
import { ListOverflowComponent } from './list-overflow.component'
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
||||
|
||||
export type HorizontalMenuEntry = {
|
||||
label: string
|
||||
|
|
@ -51,7 +52,11 @@ export class HorizontalMenuComponent implements OnInit, OnChanges, OnDestroy {
|
|||
|
||||
private routerSub: Subscription
|
||||
|
||||
constructor (private router: Router, private route: ActivatedRoute) {
|
||||
constructor (
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private modal: NgbModal
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -69,6 +74,12 @@ export class HorizontalMenuComponent implements OnInit, OnChanges, OnDestroy {
|
|||
if (this.routerSub) this.routerSub.unsubscribe()
|
||||
}
|
||||
|
||||
onLinkClick (modal: boolean) {
|
||||
if (modal) {
|
||||
this.modal.dismissAll()
|
||||
}
|
||||
}
|
||||
|
||||
private buildChildren () {
|
||||
this.children = []
|
||||
this.activeParent = undefined
|
||||
|
|
|
|||
|
|
@ -13,28 +13,26 @@
|
|||
|
||||
@if (isMenuDisplayed()) {
|
||||
@if (isInMobileView) {
|
||||
<button type="button" class="peertube-button tertiary-button p-0 list-overflow-menu" (click)="toggleModal()">
|
||||
<button type="button" class="peertube-button tertiary-button p-0 list-overflow-menu overflow-button" (click)="toggleModal()">
|
||||
<span class="chevron-down"></span>
|
||||
</button>
|
||||
} @else {
|
||||
<div class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown">
|
||||
<button class="peertube-button tertiary-button p-0" ngbDropdownToggle type="button">
|
||||
<span class="chevron-down"></span>
|
||||
</button>
|
||||
|
||||
<ul class="ul-unstyle" ngbDropdownMenu>
|
||||
@for (item of items | slice:showItemsUntilIndexExcluded:items.length; track item.label) {
|
||||
@if (!item.isDisplayed || item.isDisplayed()) {
|
||||
<li>
|
||||
<a [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div [hidden]="isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown">
|
||||
<button class="peertube-button tertiary-button p-0 overflow-button" ngbDropdownToggle type="button">
|
||||
<span class="chevron-down"></span>
|
||||
</button>
|
||||
|
||||
<ul class="ul-unstyle" ngbDropdownMenu>
|
||||
@for (item of items | slice:showItemsUntilIndexExcluded:items.length; track item.label) {
|
||||
@if (!item.isDisplayed || item.isDisplayed()) {
|
||||
<li>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {item: item, dropdown: true}"></ng-container>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div >
|
||||
|
||||
|
|
@ -44,9 +42,7 @@
|
|||
@for (item of items | slice:showItemsUntilIndexExcluded:items.length; track item.label) {
|
||||
@if (!item.isDisplayed || item.isDisplayed()) {
|
||||
<li>
|
||||
<a [routerLink]="item.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
|
||||
{{ item.label }}
|
||||
</a>
|
||||
<ng-container *ngTemplateOutlet="itemTemplate; context: {item: item, modal: true}"></ng-container>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,39 +33,9 @@ li {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.route-active {
|
||||
&::after {
|
||||
display: inherit;
|
||||
border: 2px solid pvar(--primary);
|
||||
position: relative;
|
||||
right: 95%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
a {
|
||||
color: currentColor;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
padding: 9px 12px;
|
||||
text-align: initial;
|
||||
text-transform: unset;
|
||||
width: 100%;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
&.active {
|
||||
color: pvar(--on-primary) !important;
|
||||
background-color: pvar(--primary-450);
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
.overflow-button::after {
|
||||
display: none;
|
||||
margin-left: inherit;
|
||||
vertical-align: inherit;
|
||||
border: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import {
|
|||
ViewChild,
|
||||
ViewChildren
|
||||
} from '@angular/core'
|
||||
import { RouterLink, RouterLinkActive } from '@angular/router'
|
||||
import { ScreenService } from '@app/core'
|
||||
import { NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { randomInt } from '@peertube/peertube-core-utils'
|
||||
|
|
@ -41,14 +40,12 @@ export interface ListOverflowItem {
|
|||
NgbDropdownToggle,
|
||||
NgClass,
|
||||
NgbDropdownMenu,
|
||||
RouterLinkActive,
|
||||
RouterLink,
|
||||
SlicePipe
|
||||
]
|
||||
})
|
||||
export class ListOverflowComponent<T extends ListOverflowItem> implements OnInit, AfterViewInit {
|
||||
@Input() items: T[]
|
||||
@Input() itemTemplate: TemplateRef<{ item: T }>
|
||||
@Input() itemTemplate: TemplateRef<{ item: T, dropdown?: boolean, modal?: boolean }>
|
||||
@Input({ transform: booleanAttribute }) hasBorder = false
|
||||
|
||||
@ViewChild('modal', { static: true }) modal: ElementRef
|
||||
|
|
@ -110,10 +107,6 @@ export class ListOverflowComponent<T extends ListOverflowItem> implements OnInit
|
|||
this.modalService.open(this.modal, { centered: true })
|
||||
}
|
||||
|
||||
dismissOtherModals () {
|
||||
this.modalService.dismissAll()
|
||||
}
|
||||
|
||||
getId (id: number | string = uniqueId()): string {
|
||||
return lowerFirst(this.constructor.name) + '_' + this.randomInt + '_' + id
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
:host {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.playlist-dropdown {
|
||||
position: absolute;
|
||||
|
||||
|
|
|
|||
|
|
@ -135,6 +135,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
|
|||
}
|
||||
|
||||
ngOnChanges () {
|
||||
console.log('on changes')
|
||||
|
||||
if (this.loaded) {
|
||||
this.loaded = false
|
||||
if (this.playlistAdd) this.playlistAdd.reload()
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
>
|
||||
<ng-container *ngIf="highlightedLives.length !== 0">
|
||||
<h2 class="date-title">
|
||||
<my-global-icon iconName="live"></my-global-icon> Current lives
|
||||
<my-global-icon class="pt-icon" iconName="live"></my-global-icon> Current lives
|
||||
</h2>
|
||||
|
||||
<ng-container *ngFor="let live of highlightedLives; trackBy: videoById;">
|
||||
|
|
|
|||
|
|
@ -12,3 +12,7 @@
|
|||
.revert-margin-content.banner {
|
||||
width: calc(100% + 2 * #{pvar(--x-margin-content)});
|
||||
}
|
||||
|
||||
.pt-icon {
|
||||
@include icon(24px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,11 +53,9 @@
|
|||
.admin-sub-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media screen and (max-width: $small-view) {
|
||||
flex-direction: column;
|
||||
}
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-breadcrumb {
|
||||
|
|
|
|||
|
|
@ -763,9 +763,10 @@ p-table {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
.left-buttons {
|
||||
@include padding-left(15px);
|
||||
@include padding-left(1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1172,14 +1173,9 @@ p-toast {
|
|||
@media screen and (max-width: $mobile-view) {
|
||||
p-table {
|
||||
.p-datatable-header {
|
||||
.caption {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
padding: 0 !important;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.caption > div {
|
||||
width: 100%;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue