mirror of https://github.com/Chocobozzz/PeerTube
Refactoring style for about component
Wicklow
Chocobozzz
parent
27f84cc337
commit
35fe58c2f8
|
|
@ -2,7 +2,7 @@
|
|||
<h1 class="visually-hidden" i18n>Follows</h1>
|
||||
|
||||
<div class="col-xl-6 col-md-12">
|
||||
<h2 i18n class="subtitle">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
|
||||
<h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
|
||||
|
||||
<div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
|
||||
|
||||
|
|
@ -10,11 +10,11 @@
|
|||
{{ follower }}
|
||||
</a>
|
||||
|
||||
<button i18n class="show-more" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
|
||||
<button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowers && canLoadMoreFollowers()" (click)="loadAllFollowers()">Show full list</button>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-6 col-md-12">
|
||||
<h2 i18n class="subtitle">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
|
||||
<h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
|
||||
|
||||
<div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
|
||||
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
{{ following }}
|
||||
</a>
|
||||
|
||||
<button i18n class="show-more" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
|
||||
<button i18n class="peertube-button-link grey-button mt-1" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
font-weight: $font-semibold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
|
|
@ -17,10 +11,3 @@ a {
|
|||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.show-more {
|
||||
@include peertube-button-link;
|
||||
@include grey-button;
|
||||
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-xl-6">
|
||||
|
||||
<div class="about-instance-title">
|
||||
<h1 i18n class="title">About {{ instanceName }}</h1>
|
||||
<div class="d-flex justify-content-between">
|
||||
<h1 i18n class="fw-semibold pt-fs-5">About {{ instanceName }}</h1>
|
||||
|
||||
<a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact us</a>
|
||||
<a routerLink="/about/contact" i18n *ngIf="isContactFormEnabled" class="peertube-button-link orange-button h-100 d-flex align-items-center">Contact us</a>
|
||||
</div>
|
||||
|
||||
<div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
|
||||
<div class="mb-4" *ngIf="categories.length !== 0 || languages.length !== 0">
|
||||
<span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span>
|
||||
|
||||
<span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
|
||||
</div>
|
||||
|
||||
<div class="short-description">
|
||||
<div class="block short-description">{{ shortDescription }}</div>
|
||||
<div class="mt-2">
|
||||
<div class="block">{{ shortDescription }}</div>
|
||||
|
||||
<div i18n *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
|
||||
<div i18n *ngIf="isNSFW" class="block mt-4 fw-semibold">This instance is dedicated to sensitive/NSFW content.</div>
|
||||
</div>
|
||||
|
||||
<div class="anchor" id="administrators-and-sustainability"></div>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,9 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
.about-instance-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
||||
.contact-admin {
|
||||
@include peertube-button-link;
|
||||
@include orange-button;
|
||||
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.instance-badges {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.pt-badge {
|
||||
@include margin-right(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: $font-semibold;
|
||||
|
|
@ -36,22 +15,13 @@
|
|||
|
||||
.middle-title {
|
||||
@include in-content-small-title;
|
||||
@include margin-bottom(1.5rem);
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
|
||||
.short-description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.short-description .dedicated-to-nsfw {
|
||||
margin-top: 20px;
|
||||
font-weight: $font-semibold;
|
||||
@include margin-bottom(4.5rem);
|
||||
}
|
||||
|
||||
.anchor-link {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<div class="root">
|
||||
<h1 i18n class="about-peertube-title">
|
||||
<h1 i18n class="pt-fs-3 text-center fw-semibold mb-3">
|
||||
This website is powered by PeerTube
|
||||
</h1>
|
||||
|
||||
<img class="mascot" width="121px" height="147px" src="/client/assets/images/mascot/default.svg" alt="mascot"/>
|
||||
<img class="d-block my-4 mx-auto" width="121px" height="147px" src="/client/assets/images/mascot/default.svg" alt="mascot"/>
|
||||
|
||||
<div class="description">
|
||||
<div class="text-center">
|
||||
<p i18n>
|
||||
PeerTube is a self-hosted ActivityPub-federated video streaming platform using P2P directly in your web browser.
|
||||
</p>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="documentation">
|
||||
<div class="d-flex flex-wrap justify-content-center my-5">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
|
@ -59,9 +59,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="privacy-contributors">
|
||||
<div class="p2p-privacy">
|
||||
<h2 class="section-title">
|
||||
<div class="d-flex flex-column">
|
||||
<h2 class="mb-4 mt-5 text-center pt-fs-5 fw-semibold">
|
||||
<div class="anchor" id="privacy"></div> <!-- privacy anchor -->
|
||||
<ng-container i18n>P2P & Privacy</ng-container>
|
||||
</h2>
|
||||
|
|
@ -77,7 +76,7 @@
|
|||
tracker as long as you download or watch the video.
|
||||
</p>
|
||||
|
||||
<h3 i18n class="p2p-privacy-title">What are the consequences?</h3>
|
||||
<h3 i18n class="pt-fs-5">What are the consequences?</h3>
|
||||
|
||||
<p i18n>
|
||||
In theory, someone with enough technical skills could create a script that tracks which IP is downloading which video.
|
||||
|
|
@ -157,6 +156,4 @@
|
|||
WebRTC in your browser.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,63 +6,14 @@
|
|||
margin: auto;
|
||||
}
|
||||
|
||||
.about-peertube-title {
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
font-weight: $font-semibold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.mascot {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
::ng-deep .section-title {
|
||||
font-weight: $font-semibold;
|
||||
font-size: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.documentation {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 50px 0;
|
||||
justify-content: center;
|
||||
|
||||
.card {
|
||||
margin: 30px;
|
||||
@include rfs(2rem, margin);
|
||||
|
||||
flex-basis: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-contributors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.p2p-privacy {
|
||||
.section-title {
|
||||
margin: 50px 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.p2p-privacy-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue