Skip to content

Commit

Permalink
574 restrict length of title components and keep it one line in web v…
Browse files Browse the repository at this point in the history 
…iew (#589)

* handle the title next stp the subtitle to do

* fixing the length of the title of campaign to fit all the screen with a 100% width and fix the brand to fit all the screens

---------

Co-authored-by: skanderKhabou <[email protected]>
  • Loading branch information
@skanderKha @skanderKhabou
skanderKha and skanderKhabou authored Oct 2, 2023
1 parent 90b9ae1 commit 11b93dc
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 118 deletions.
240 changes: 129 additions & 111 deletions src/app/campaigns/campaign-details/components/campaign-detail/campaign-detail.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,60 @@
<head>
<meta property="og:title" content="{{ 'SaTT TO THE MOON'}}" />
<meta property="og:title" content="{{ 'SaTT TO THE MOON' }}" />
<meta property="og:description" content="{{ 'SaTT TO THE MOON' }}" />
<meta property="og:image" content="{{ 'https://satt-token.com/assets/img/share_img_200px.png'}}" />
<meta
property="og:image"
content="{{ 'https://satt-token.com/assets/img/share_img_200px.png' }}"
/>
</head>
<div *ngIf="!isLoading">
<span id="span-top" class="span-top"></span>
<div
style="position: absolute; top: 0; width: 100vw; height: 100vh; z-index: 1"
></div>

<!--
-->

<div class="campaign-cover img-container" id="" *ngIf="!showInfoSpinner">

<img
<img
class="campaign-img desktopClass"
src="/assets/Images/img_placeholder.svg"
*ngIf="!campaign || !campaign.cover"
/>
<img
[className]="campaign.cover.includes('ipfs') ? 'campaign-img desktopClass' : 'campaign-img desktopClass'"
[src]="campaign.cover.includes('ipfs') ? ipfsURL + campaign.cover.substring(27, campaign.cover.length) : campaign.cover"
[className]="
campaign.cover.includes('ipfs')
? 'campaign-img desktopClass'
: 'campaign-img desktopClass'
"
[src]="
campaign.cover.includes('ipfs')
? ipfsURL + campaign.cover.substring(27, campaign.cover.length)
: campaign.cover
"
alt="{{ campaign.title }}"
*ngIf="campaign && campaign.cover"
/>






<img
[className]="campaign.coverSrcMobile.includes('ipfs') ? 'campaign-img mobileClass' :'campaign-img mobileClass'"
[src]="campaign.coverSrcMobile.includes('ipfs') ? ipfsURL + campaign.coverSrcMobile.substring(27, campaign.coverSrcMobile.length) : campaign.coverSrcMobile"
<img
[className]="
campaign.coverSrcMobile.includes('ipfs')
? 'campaign-img mobileClass'
: 'campaign-img mobileClass'
"
[src]="
campaign.coverSrcMobile.includes('ipfs')
? ipfsURL +
campaign.coverSrcMobile.substring(
27,
campaign.coverSrcMobile.length
)
: campaign.coverSrcMobile
"
alt="{{ campaign.title }}"
/>





/>

<!-- <app-edit-cover-btn
*ngIf="campaign.isOwnedByUser"
class="btn-edit"
Expand Down Expand Up @@ -76,7 +89,7 @@
[disabled]="!this.downloadKit"
(click)="downloadFile()"
>
{{'downloadAdPoolKit' | translate }}
{{ 'downloadAdPoolKit' | translate }}
</button>
<button
type="button"
Expand All @@ -95,9 +108,9 @@
(click)="goToEditPage(campaign.id)"
*ngIf="campaign.isOwnedByUser && campaign.isActive"
>
{{'editAdpool' | translate}}
{{ 'editAdpool' | translate }}
</button>

<button type="button" class="btn-scroll-top" (click)="scrollToTop()">
<img src="/assets/Images/chevron_up.svg" />
</button>
Expand Down Expand Up @@ -321,7 +334,6 @@
<main
class="campaing-detail-content"
id="campaign-main-content"

*ngIf="!showInfoSpinner"
>
<div class="">
Expand Down Expand Up @@ -355,7 +367,7 @@
/>
</div>
<div
class="col d-flex flex-column align-items-xl-start align-items-lg-start align-items-md-start align-items-sm-center align-items-center"
class="container_title col d-flex flex-column align-items-xl-start align-items-lg-start align-items-md-start align-items-sm-center align-items-center"
>
<h1 class="campaign-title">
{{ campaign.title | capitalizePhrase }}
Expand Down Expand Up @@ -422,7 +434,7 @@ <h1 class="campaign-brand">
(this.campaign.isOwnedByUser && !editMode)
"
>
< {{'backToList' | translate }}</a
< {{ 'backToList' | translate }}</a
>
</div>
<button
Expand All @@ -433,7 +445,7 @@ <h1 class="campaign-brand">
*ngIf="campaign.isOwnedByUser && campaign.isActive"
>
<span class="padding-16" *ngIf="!this.showSpinner"
>{{'editAdpool' | translate }}
>{{ 'editAdpool' | translate }}
</span>
<div
*ngIf="this.showSpinner"
Expand All @@ -445,22 +457,30 @@ <h1 class="campaign-brand">
</button>
<!--*ngIf="campaign.isOwnedByUser && campaign.type === 'finished' && !loadingData && campaign.budget !== '0'"-->
<button
type="button"
[className]="refundButtonDisable ? 'btn-edit-refunds-pool-disabled' : 'btn-edit-refunds-pool'"

id="btn-edit-refunds-pool"
(click)="getRefunds(campaign.id)"
*ngIf="campaign.isOwnedByUser && campaign.type === 'finished' && !loadingData && campaign.budget !== '0'"
type="button"
[className]="
refundButtonDisable
? 'btn-edit-refunds-pool-disabled'
: 'btn-edit-refunds-pool'
"
id="btn-edit-refunds-pool"
(click)="getRefunds(campaign.id)"
*ngIf="
campaign.isOwnedByUser &&
campaign.type === 'finished' &&
!loadingData &&
campaign.budget !== '0'
"
>
<p *ngIf="refundButtonDisable">
<img src="../../../../../assets/Images/Vector-loading.svg"/>
{{'retrieveBudget' | translate }} ( {{dateRefundDays}}d {{dateRefundHours}}h {{dateRefundMinutes}}min)
</p>
<p *ngIf="!refundButtonDisable">
<img src="../../../../../assets/Images/retrieve.svg"/>
{{'retrieveBudget' | translate }}
</p>

<p *ngIf="refundButtonDisable">
<img src="../../../../../assets/Images/Vector-loading.svg" />
{{ 'retrieveBudget' | translate }} ( {{ dateRefundDays }}d
{{ dateRefundHours }}h {{ dateRefundMinutes }}min)
</p>
<p *ngIf="!refundButtonDisable">
<img src="../../../../../assets/Images/retrieve.svg" />
{{ 'retrieveBudget' | translate }}
</p>
</button>
<button
type="button"
Expand Down Expand Up @@ -596,85 +616,83 @@ <h1 class="campaign-brand">
</div>
</div>




<ng-template #transactionPassword>
<div [className]="getScreenWidth > 768 ? 'modal-transaction-password' :'modal-transaction-password-mobile'">
<form [formGroup]="passwordForm">
<div class="row d-flex justif-content-center campaign-password-logo">
<div class="col-12">
<img src="/assets/Images/Password_modal_logo.svg" alt="" />
</div>
</div>

<div class="row d-flex justif-content-center campaign-password-title">
<div class="col-12">
<h3>{{ 'campaign_password.title' | translate }}</h3>
</div>
</div>

<div class="row mt-3">
<div class="col-12 d-flex justif-content-center campaign-password-description">
<p>{{ 'campaign_password.description2' | translate }}</p>
<div
[className]="
getScreenWidth > 768
? 'modal-transaction-password'
: 'modal-transaction-password-mobile'
"
>
<form [formGroup]="passwordForm">
<div class="row d-flex justif-content-center campaign-password-logo">
<div class="col-12">
<img src="/assets/Images/Password_modal_logo.svg" alt="" />
</div>
</div>
</div>

<div class="row">
<div class="col-12">
<div [className]="getScreenWidth > 768 ? 'div_input_add position-relative' : 'div_input_add_mobile position-relative' ">
<img
src="/assets/Images/input_password_logo.svg"
width="46px"
alt=""
/>
<input
type="password"
name="password"
formControlName="password"
class="input_oeil"
/>

<div class="row d-flex justif-content-center campaign-password-title">
<div class="col-12">
<h3>{{ 'campaign_password.title' | translate }}</h3>
</div>
</div>
</div>


<div *ngIf="errorMessage.length > 0" class="error-message">
<p>{{ errorMessage }}</p>
</div>
<div class="row mt-3">
<div
class="col-12 d-flex justif-content-center campaign-password-description"
>
<p>{{ 'campaign_password.description2' | translate }}</p>
</div>
</div>

<div *ngIf="successMessage.length > 0" class="success-message">
<p>{{ successMessage }}</p>
</div>
<div class="row">
<div class="col-12">
<div
[className]="
getScreenWidth > 768
? 'div_input_add position-relative'
: 'div_input_add_mobile position-relative'
"
>
<img
src="/assets/Images/input_password_logo.svg"
width="46px"
alt=""
/>
<input
type="password"
name="password"
formControlName="password"
class="input_oeil"
/>
</div>
</div>
</div>

<div *ngIf="errorMessage.length > 0" class="error-message">
<p>{{ errorMessage }}</p>
</div>

<div class="row mt-5">
<div class="col-12">
<button
type="button"
class="change_btn"
(click)="callRemaining()"
>
<div
*ngIf="loadingButton"
class="spinner-border text-white"
role="status"
>
<span class="sr-only">Loading...</span>
<div *ngIf="successMessage.length > 0" class="success-message">
<p>{{ successMessage }}</p>
</div>

<div class="row mt-5">
<div class="col-12">
<button type="button" class="change_btn" (click)="callRemaining()">
<div
*ngIf="loadingButton"
class="spinner-border text-white"
role="status"
>
<span class="sr-only">Loading...</span>
</div>
<span *ngIf="!loadingButton">
{{ 'campaign_password.confirm' | translate }}
</span>


</button>
</div>
</button>
</div>
</div>


</form>



</div>
</form>
</div>
</ng-template>
Loading

0 comments on commit 11b93dc

Please sign in to comment.