Skip to content

Commit

Permalink
Added images and preview.
Browse files Browse the repository at this point in the history
  • Loading branch information
@miguelcanosantana
miguelcanosantana committed Nov 26, 2023
1 parent ce0e137 commit dec6371
Showing 1 changed file with 37 additions and 24 deletions.
61 changes: 37 additions & 24 deletions Pages/Dashboard.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,31 @@
.non-resizable-text-area {
resize: none;
}
.preview-image {
margin-top: 15px;
max-width: 100px;
max-height: 100px;
border-radius: 10px;
}
</style>


<div class="container py-2">

<div class="row">
<div class="row gy-4">

<!-- Affiliate Link -->
<!-- Affiliate text -->
<div class="col-12 col-xl-6">
<div class="container py-4 jumbotron-a">

<div class="container">
<div class="row">

<div class="col-12 col-md-4">
<h3 class="fw-bold">Compartir</h3>
<h3 class="fw-bold"> Textos </h3>
<p>
Compárte tu página de afiliado con los clientes a través del siguiente enlace.
Añade un título corto y una descripción sobre tu invitación al cliente.
</p>
</div>

Expand All @@ -36,8 +43,13 @@
<form class="user-form">

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Link de afiliado</label>
<textarea value="@GetAbsoluteUri()" class="form-control non-resizable-text-area" rows="3" readonly></textarea>
<label for="exampleInputEmail1" class="form-label">Título</label>
<input @bind-value="customTitle" @bind-value:event="oninput" class="form-control">
</div>

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Descripción</label>
<textarea @bind-value="customDescription" @bind-value:event="oninput" rows="10" class="form-control non-resizable-text-area"></textarea>
</div>

</form>
Expand All @@ -50,17 +62,18 @@
</div>
</div>

<!-- Affiliate text -->
<!-- Affiliate images -->
<div class="col-12 col-xl-6">
<div class="container py-4 jumbotron-a">

<div class="container">
<div class="row">

<div class="col-12 col-md-4">
<h3 class="fw-bold"> Textos </h3>
<h3 class="fw-bold"> Imágenes </h3>
<p>
Añade un título corto y una descripción sobre tu invitación al cliente.
Añade imágenes para captar la atención del cliente. <br />
El fondo de la página debe de ser un tile (un trozo de un patrón que se repita)
</p>
</div>

Expand All @@ -69,13 +82,15 @@
<form class="user-form">

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Título</label>
<input @bind-value="customTitle" @bind-value:event="oninput" class="form-control">
<label for="exampleInputEmail1" class="form-label">Imagen Avatar</label>
<input @bind-value="customAvatar" @bind-value:event="oninput" class="form-control">
<img class="preview-image" src="@customAvatar"/>
</div>

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Descripción</label>
<textarea @bind-value="customDescription" @bind-value:event="oninput" rows="10" class="form-control non-resizable-text-area"></textarea>
<label for="exampleInputEmail1" class="form-label">Fondo Tilleable</label>
<input @bind-value="customBackground" @bind-value:event="oninput" class="form-control">
<img class="preview-image" src="@customBackground" />
</div>

</form>
Expand All @@ -88,18 +103,17 @@
</div>
</div>

<!-- Affiliate images -->
<!-- Affiliate Link -->
<div class="col-12 col-xl-6">
<div class="container py-4 jumbotron-a">

<div class="container">
<div class="row">

<div class="col-12 col-md-4">
<h3 class="fw-bold"> Imágenes </h3>
<h3 class="fw-bold">Compartir</h3>
<p>
Añade imágenes para captar la atención del cliente. <br/>
El fondo de la página debe de ser un tile (un trozo de un patrón que se repita)
Compárte tu página de afiliado con los clientes a través del siguiente enlace.
</p>
</div>

Expand All @@ -108,13 +122,8 @@
<form class="user-form">

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Título</label>
<input @bind-value="customTitle" @bind-value:event="oninput" class="form-control">
</div>

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Descripción</label>
<textarea @bind-value="customDescription" @bind-value:event="oninput" rows="10" class="form-control non-resizable-text-area"></textarea>
<label for="exampleInputEmail1" class="form-label">Link de afiliado</label>
<textarea value="@GetAbsoluteUri()" class="form-control non-resizable-text-area" rows="3" readonly></textarea>
</div>

</form>
Expand All @@ -137,6 +146,8 @@
private AffiliateStyle? customStyle;
private String customTitle = "";
private String customDescription = "";
private String customAvatar = "";
private String customBackground = "";

protected override async Task OnInitializedAsync()

Check warning on line 152 in Pages/Dashboard.razor

View workflow job for this annotation

GitHub Actions / deploy-to-github-pages 

This async method lacks 'await' operators and will run synchronously. Consider using the 'await' operator to await non-blocking API calls, or 'await Task.Run(...)' to do CPU-bound work on a background thread.
{
Expand All @@ -152,6 +163,8 @@
{
customTitle = customStyle.GetTitle();
customDescription = customStyle.GetSummary();
customAvatar = customStyle.GetAvatarUrl();
customBackground = customStyle.GetBackgroundUrl();
}
}

Expand Down

0 comments on commit dec6371

Please sign in to comment.