series detail page mobile redesign
This commit is contained in:
Christopher
parent
d9f1ab0d1a
commit
9b6b2c6df1
3 changed files with 308 additions and 263 deletions
|
|
@ -1,26 +1,141 @@
|
||||||
@use './theme/variables' as theme;
|
@use './theme/variables' as theme;
|
||||||
|
|
||||||
.title {
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-container {
|
|
||||||
align-self: flex-start;
|
|
||||||
max-height: 400px;
|
|
||||||
max-width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: lightgrey;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
overflow: unset !important;
|
overflow: unset !important;
|
||||||
margin-top: 15px;
|
margin-top: 0.9375rem;
|
||||||
|
|
||||||
|
.info-container {
|
||||||
|
.image-container-background.series {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.info-grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 20% 80%;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
.image-container {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1 / 3;
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
}
|
||||||
|
.metadata-details-upper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
.title {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
color: lightgrey;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.metadata-details-lower {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
|
.continue-container {
|
||||||
|
display: flex;
|
||||||
|
.actions-row {
|
||||||
|
display: flex;
|
||||||
|
width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upper-details {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-tabs-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
|
scrollbar-width: none;
|
||||||
|
box-shadow: inset -0.0625rem -0.125rem 0.0rem -0.0625rem var(--elevation-layer9);
|
||||||
|
.nav-tabs {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: theme.$grid-breakpoints-lg) {
|
||||||
|
.main-container {
|
||||||
|
.info-container {
|
||||||
|
.info-grid-container {
|
||||||
|
grid-template-columns: 30% 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: theme.$grid-breakpoints-sm) {
|
||||||
|
.main-container {
|
||||||
|
.info-container {
|
||||||
|
.info-grid-container {
|
||||||
|
grid-template-columns: 35% 65%;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
display: block !important;
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-details-upper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
.title {
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-details-lower {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
grid-row: 2;
|
||||||
|
.continue-container {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host ::ng-deep {
|
||||||
|
.read-more-cont {
|
||||||
|
div {
|
||||||
|
max-width: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: theme.$grid-breakpoints-smm) {
|
||||||
|
.main-container {
|
||||||
|
.info-container {
|
||||||
|
.info-grid-container {
|
||||||
|
.metadata-details-lower {
|
||||||
|
.continue-container {
|
||||||
|
flex-direction: column;
|
||||||
|
.actions-row {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .badge-expander .content a {
|
::ng-deep .badge-expander .content a {
|
||||||
|
|
@ -30,15 +145,15 @@
|
||||||
.btn-group > .btn.dropdown-toggle-split:not(first-child){
|
.btn-group > .btn.dropdown-toggle-split:not(first-child){
|
||||||
border-top-right-radius: var(--bs-border-radius) !important;
|
border-top-right-radius: var(--bs-border-radius) !important;
|
||||||
border-bottom-right-radius: var(--bs-border-radius) !important;
|
border-bottom-right-radius: var(--bs-border-radius) !important;
|
||||||
border-width: 1px 1px 1px 0 !important;
|
border-width: 0.0625rem 0.0625rem 0.0625rem 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
|
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||||
border-width: 1px 0 1px 1px !important;
|
border-width: 0.0625rem 0 0.0625rem 0.0625rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body > div:nth-child(2) {
|
.card-body > div:nth-child(2) {
|
||||||
height: 50px;
|
height: 3.125rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
|
|
@ -46,97 +161,16 @@
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
.under-image ~ .overlay-information {
|
|
||||||
top: -404px;
|
|
||||||
height: 364px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay-information {
|
|
||||||
position: relative;
|
|
||||||
top: -364px;
|
|
||||||
height: 364px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: var(--card-overlay-hover-bg-color) !important;
|
|
||||||
|
|
||||||
.overlay-information--centered {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay-information--centered {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 15px;
|
|
||||||
background-color: rgba(0, 0, 0, .7);
|
|
||||||
border-radius: 50px;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
z-index: 115;
|
|
||||||
visibility: hidden;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--primary-color) !important;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
i {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
line-height: 60px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-banner.series {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .progress-banner.series span {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
color: white;
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-tabs-container {
|
|
||||||
overflow-x: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
||||||
scrollbar-width: none;
|
|
||||||
box-shadow: inset -1px -2px 0px -1px var(--elevation-layer9);
|
|
||||||
}
|
|
||||||
.carousel-tabs-container::-webkit-scrollbar {
|
.carousel-tabs-container::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.nav-tabs {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upper-details {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen{
|
::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen{
|
||||||
border-width: 1px;
|
border-width: 0.0625rem;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: 5px;
|
border-radius: 0.3125rem;
|
||||||
border-color: var(--primary-color);
|
border-color: var(--primary-color);
|
||||||
padding: 5px;
|
padding: 0.3125rem;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -144,8 +178,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .image-container.mobile-bg app-image img {
|
::ng-deep .image-container-background.mobile-bg app-image img {
|
||||||
max-height: 400px;
|
max-height: 25rem;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -156,16 +190,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .image-container.mobile-bg app-image img {
|
::ng-deep .image-container-background.mobile-bg app-image img {
|
||||||
max-height: 100dvh !important;
|
max-height: 100dvh !important;
|
||||||
object-fit: cover !important;
|
object-fit: cover !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* col-lg */
|
/* col-lg */
|
||||||
@media (max-width: theme.$grid-breakpoints-lg) {
|
@media (max-width: theme.$grid-breakpoints-lg) {
|
||||||
.image-container.mobile-bg{
|
.image-container-background.mobile-bg{
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
top: calc(var(--nav-offset) - 20px);
|
top: calc(var(--nav-offset) - 1.25rem);
|
||||||
left: 0;
|
left: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
|
|
@ -175,10 +209,10 @@
|
||||||
height: 100dvh !important;
|
height: 100dvh !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .image-container.mobile-bg app-image img {
|
::ng-deep .image-container-background.mobile-bg app-image img {
|
||||||
max-height: unset !important;
|
max-height: unset !important;
|
||||||
opacity: 0.05 !important;
|
opacity: 0.05 !important;
|
||||||
filter: blur(5px) !important;
|
filter: blur(0.3125rem) !important;
|
||||||
max-width: 100dvw;
|
max-width: 100dvw;
|
||||||
height: 100dvh !important;
|
height: 100dvh !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
||||||
|
|
@ -4,173 +4,183 @@
|
||||||
@if (series && seriesMetadata && libraryType !== null) {
|
@if (series && seriesMetadata && libraryType !== null) {
|
||||||
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
|
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
|
||||||
<div class="row mb-0 mb-xl-3 info-container">
|
<div class="row mb-0 mb-xl-3 info-container">
|
||||||
|
|
||||||
<div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-bg' : ''"
|
<div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-bg' : ''"
|
||||||
class="image-container series col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3 position-relative">
|
class="image-container-background series col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 mb-3 position-relative">
|
||||||
<app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
|
<app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xl-10 col-lg-7 col-md-12 col-sm-12 col-xs-12">
|
<div class="info-grid-container">
|
||||||
<h4 class="title mb-2">
|
<div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-image' : ''"
|
||||||
<span>{{series.name}}
|
class="image-container series position-relative">
|
||||||
|
<app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
|
||||||
@if(isLoadingExtra || isLoading) {
|
|
||||||
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
|
||||||
<span class="visually-hidden">loading...</span>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</h4>
|
|
||||||
<div class="subtitle mt-2 mb-2">
|
|
||||||
@if (series.localizedName !== series.name && series.localizedName) {
|
|
||||||
<span>{{series.localizedName | defaultValue}}</span>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<app-metadata-detail-row [entity]="seriesMetadata"
|
<div class="metadata-details-upper">
|
||||||
[readingTimeLeft]="readingTimeLeft"
|
<div class="metadata-details-wrapper">
|
||||||
[ageRating]="seriesMetadata.ageRating"
|
<h4 class="title mb-2">
|
||||||
[hasReadingProgress]="hasReadingProgress"
|
<span>{{series.name}}
|
||||||
[readingTimeEntity]="series"
|
|
||||||
[libraryType]="libraryType"
|
@if(isLoadingExtra || isLoading) {
|
||||||
[mangaFormat]="series.format">
|
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
||||||
</app-metadata-detail-row>
|
<span class="visually-hidden">loading...</span>
|
||||||
|
|
||||||
<div class="mt-2 mb-2">
|
|
||||||
<app-external-rating [seriesId]="series.id"
|
|
||||||
[ratings]="ratings"
|
|
||||||
[userRating]="series.userRating"
|
|
||||||
[hasUserRated]="series.hasUserRated"
|
|
||||||
[libraryType]="libraryType"
|
|
||||||
[webLinks]="WebLinks">
|
|
||||||
</app-external-rating>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-3 mb-3">
|
|
||||||
<div class="row g-0" style="align-items: center;">
|
|
||||||
<div class="col-auto">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="button" class="btn btn-outline-primary" (click)="read()">
|
|
||||||
<span>
|
|
||||||
<i class="fa {{hasReadingProgress ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
|
|
||||||
<span class="read-btn--text"> {{(hasReadingProgress) ? t('continue') : t('read')}}</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<div class="btn-group" ngbDropdown role="group" display="dynamic" [attr.aria-label]="t('read-options-alt')">
|
|
||||||
<button type="button" class="btn btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
|
|
||||||
<div class="dropdown-menu" ngbDropdownMenu>
|
|
||||||
<button ngbDropdownItem (click)="read(true)">
|
|
||||||
<span>
|
|
||||||
<i class="fa fa-glasses" aria-hidden="true"></i>
|
|
||||||
<span class="read-btn--text"> {{(hasReadingProgress) ? t('continue-incognito') : t('read-incognito')}}</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
|
</span>
|
||||||
|
</h4>
|
||||||
|
<div class="subtitle mt-2 mb-2">
|
||||||
|
@if (series.localizedName !== series.name && series.localizedName) {
|
||||||
|
<span>{{series.localizedName | defaultValue}}</span>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<app-metadata-detail-row [entity]="seriesMetadata"
|
||||||
<div class="col-auto ms-2">
|
[readingTimeLeft]="readingTimeLeft"
|
||||||
<button class="btn btn-actions" (click)="toggleWantToRead()" ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
|
[ageRating]="seriesMetadata.ageRating"
|
||||||
|
[hasReadingProgress]="hasReadingProgress"
|
||||||
|
[readingTimeEntity]="series"
|
||||||
|
[libraryType]="libraryType"
|
||||||
|
[mangaFormat]="series.format">
|
||||||
|
</app-metadata-detail-row>
|
||||||
|
|
||||||
|
<div class="mt-2 mb-2">
|
||||||
|
<app-external-rating [seriesId]="series.id"
|
||||||
|
[ratings]="ratings"
|
||||||
|
[userRating]="series.userRating"
|
||||||
|
[hasUserRated]="series.hasUserRated"
|
||||||
|
[libraryType]="libraryType"
|
||||||
|
[webLinks]="WebLinks">
|
||||||
|
</app-external-rating>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="metadata-details-lower">
|
||||||
|
<div class="continue-container row g-0" style="align-items: center;">
|
||||||
|
<div class="col-auto">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-outline-primary" (click)="read()">
|
||||||
|
<span>
|
||||||
|
<i class="fa {{hasReadingProgress ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
|
||||||
|
<span class="read-btn--text"> {{(hasReadingProgress) ? t('continue') : t('read')}}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<div class="btn-group" ngbDropdown role="group" display="dynamic" [attr.aria-label]="t('read-options-alt')">
|
||||||
|
<button type="button" class="btn btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
|
||||||
|
<div class="dropdown-menu" ngbDropdownMenu>
|
||||||
|
<button ngbDropdownItem (click)="read(true)">
|
||||||
|
<span>
|
||||||
|
<i class="fa fa-glasses" aria-hidden="true"></i>
|
||||||
|
<span class="read-btn--text"> {{(hasReadingProgress) ? t('continue-incognito') : t('read-incognito')}}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-row">
|
||||||
|
<div class="col-auto ms-2">
|
||||||
|
<button class="btn btn-actions" (click)="toggleWantToRead()" ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
|
||||||
<span>
|
<span>
|
||||||
<i class="{{isWantToRead ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i>
|
<i class="{{isWantToRead ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if (isAdmin) {
|
||||||
|
<div class="col-auto ms-2">
|
||||||
|
<button class="btn btn-actions" id="edit-btn--komf" (click)="openEditSeriesModal()" [ngbTooltip]="t('edit-series-alt')">
|
||||||
|
<span><i class="fa fa-pen" aria-hidden="true"></i></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
|
||||||
|
<div class="col-auto ms-2">
|
||||||
|
<button class="btn btn-actions" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip', {value: isScrobbling ? t('on') : t('off')})">
|
||||||
|
<i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="col-auto ms-2">
|
||||||
|
<div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')">
|
||||||
|
<app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto ms-2 d-none d-md-block btn-actions">
|
||||||
|
<app-download-button [download$]="download$" [entity]="series" entityType="series"></app-download-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if (isAdmin) {
|
<div class="mt-2 mb-3">
|
||||||
<div class="col-auto ms-2">
|
<app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
|
||||||
<button class="btn btn-actions" id="edit-btn--komf" (click)="openEditSeriesModal()" [ngbTooltip]="t('edit-series-alt')">
|
|
||||||
<span><i class="fa fa-pen" aria-hidden="true"></i></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
@if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
|
|
||||||
<div class="col-auto ms-2">
|
|
||||||
<button class="btn btn-actions" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip', {value: isScrobbling ? t('on') : t('off')})">
|
|
||||||
<i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="col-auto ms-2">
|
|
||||||
<div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')">
|
|
||||||
<app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-auto ms-2 d-none d-md-block btn-actions">
|
<div class="mt-2 upper-details">
|
||||||
<app-download-button [download$]="download$" [entity]="series" entityType="series"></app-download-button>
|
<div class="row g-0">
|
||||||
|
<div class="col-6 pe-5">
|
||||||
|
<span class="fw-bold">{{t('writers-title')}}</span>
|
||||||
|
<div>
|
||||||
|
<app-badge-expander [items]="seriesMetadata.writers"
|
||||||
|
[itemsTillExpander]="3"
|
||||||
|
[allowToggle]="false"
|
||||||
|
(toggle)="switchTabsToDetail()">
|
||||||
|
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
||||||
|
<a routerLink="/person/{{encodeURIComponent(item.name)}}/" class="dark-exempt btn-icon">{{item.name}}</a>
|
||||||
|
</ng-template>
|
||||||
|
</app-badge-expander>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<span class="fw-bold">{{t('publication-status-title')}}</span>
|
||||||
|
<div>
|
||||||
|
@if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) {
|
||||||
|
<a class="dark-exempt btn-icon" (click)="openFilter(FilterField.PublicationStatus, seriesMetadata.publicationStatus)"
|
||||||
|
href="javascript:void(0);"
|
||||||
|
[ngbTooltip]="t('publication-status-tooltip') + (seriesMetadata.totalCount === 0 ? '' : ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')')">
|
||||||
|
{{pubStatus}}
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="mt-3 mb-2 upper-details">
|
||||||
</div>
|
<div class="row g-0">
|
||||||
|
<div class="col-6 pe-5">
|
||||||
|
<span class="fw-bold">{{t('genres-title')}}</span>
|
||||||
|
<div>
|
||||||
|
<app-badge-expander [items]="seriesMetadata.genres"
|
||||||
|
[itemsTillExpander]="3"
|
||||||
|
[allowToggle]="false"
|
||||||
|
(toggle)="switchTabsToDetail()">
|
||||||
|
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
||||||
|
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Genres, item.id)">{{item.title}}</a>
|
||||||
|
</ng-template>
|
||||||
|
</app-badge-expander>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mt-2 mb-3">
|
<div class="col-6">
|
||||||
<app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
|
<span class="fw-bold">{{t('tags-title')}}</span>
|
||||||
</div>
|
<div>
|
||||||
|
<app-badge-expander [items]="seriesMetadata.tags"
|
||||||
<div class="mt-2 upper-details">
|
[itemsTillExpander]="3"
|
||||||
<div class="row g-0">
|
[allowToggle]="false"
|
||||||
<div class="col-6 pe-5">
|
(toggle)="switchTabsToDetail()">
|
||||||
<span class="fw-bold">{{t('writers-title')}}</span>
|
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
||||||
<div>
|
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Tags, item.id)">{{item.title}}</a>
|
||||||
<app-badge-expander [items]="seriesMetadata.writers"
|
</ng-template>
|
||||||
[itemsTillExpander]="3"
|
</app-badge-expander>
|
||||||
[allowToggle]="false"
|
</div>
|
||||||
(toggle)="switchTabsToDetail()">
|
</div>
|
||||||
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
</div>
|
||||||
<a routerLink="/person/{{encodeURIComponent(item.name)}}/" class="dark-exempt btn-icon">{{item.name}}</a>
|
|
||||||
</ng-template>
|
|
||||||
</app-badge-expander>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
|
||||||
<span class="fw-bold">{{t('publication-status-title')}}</span>
|
|
||||||
<div>
|
|
||||||
@if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) {
|
|
||||||
<a class="dark-exempt btn-icon" (click)="openFilter(FilterField.PublicationStatus, seriesMetadata.publicationStatus)"
|
|
||||||
href="javascript:void(0);"
|
|
||||||
[ngbTooltip]="t('publication-status-tooltip') + (seriesMetadata.totalCount === 0 ? '' : ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')')">
|
|
||||||
{{pubStatus}}
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-3 mb-2 upper-details">
|
|
||||||
<div class="row g-0">
|
|
||||||
<div class="col-6 pe-5">
|
|
||||||
<span class="fw-bold">{{t('genres-title')}}</span>
|
|
||||||
<div>
|
|
||||||
<app-badge-expander [items]="seriesMetadata.genres"
|
|
||||||
[itemsTillExpander]="3"
|
|
||||||
[allowToggle]="false"
|
|
||||||
(toggle)="switchTabsToDetail()">
|
|
||||||
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
|
||||||
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Genres, item.id)">{{item.title}}</a>
|
|
||||||
</ng-template>
|
|
||||||
</app-badge-expander>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-6">
|
|
||||||
<span class="fw-bold">{{t('tags-title')}}</span>
|
|
||||||
<div>
|
|
||||||
<app-badge-expander [items]="seriesMetadata.tags"
|
|
||||||
[itemsTillExpander]="3"
|
|
||||||
[allowToggle]="false"
|
|
||||||
(toggle)="switchTabsToDetail()">
|
|
||||||
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
|
||||||
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Tags, item.id)">{{item.title}}</a>
|
|
||||||
</ng-template>
|
|
||||||
</app-badge-expander>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ $accordion-icon-active-color: #cecece;
|
||||||
|
|
||||||
|
|
||||||
$grid-breakpoints-xs: 0;
|
$grid-breakpoints-xs: 0;
|
||||||
|
$grid-breakpoints-smm: 327px;
|
||||||
$grid-breakpoints-sm: 576px;
|
$grid-breakpoints-sm: 576px;
|
||||||
$grid-breakpoints-md: 768px;
|
$grid-breakpoints-md: 768px;
|
||||||
$grid-breakpoints-lg: 992px;
|
$grid-breakpoints-lg: 992px;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue