49 lines
2.0 KiB
Plaintext
49 lines
2.0 KiB
Plaintext
@model atakanozbancom.Models.classes.AdminSocialIconVM
|
|
@{
|
|
ViewBag.Title = "Add New Social Icon";
|
|
Layout = "~/Views/Shared/_AdminLayout.cshtml";
|
|
}
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
|
|
|
|
<h2 class="text-white mt-3">Add New Social Icon</h2>
|
|
<hr />
|
|
|
|
@using (Html.BeginForm("newsocialicon", "admin", FormMethod.Post))
|
|
{
|
|
@Html.AntiForgeryToken()
|
|
@Html.ValidationSummary(false, "", new { @class = "alert alert-danger" + (ViewData.ModelState.IsValid ? " d-none" : "") })
|
|
|
|
<div class="mb-3">
|
|
@Html.LabelFor(p => p.icon, new { @class = "text-white" })
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-dark text-white fs-4" style="width:3rem;justify-content:center;">
|
|
<i id="icon-preview" class="@Model.icon"></i>
|
|
</span>
|
|
@Html.TextBoxFor(p => p.icon, new { @class = "form-control bg-dark text-white", placeholder = "e.g. fa-brands fa-youtube", id = "icon-input" })
|
|
</div>
|
|
<small class="text-muted">
|
|
Any <a href="https://fontawesome.com/search?ic=brands" target="_blank" rel="noopener" class="text-info">Font Awesome</a> class name, e.g. <code>fa-brands fa-youtube</code> or <code>fa-solid fa-link</code>.
|
|
</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
@Html.LabelFor(p => p.url, new { @class = "text-white" })
|
|
@Html.TextBoxFor(p => p.url, new { @class = "form-control bg-dark text-white", placeholder = "https://..." })
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
@Html.LabelFor(p => p.sort_order, new { @class = "text-white" })
|
|
@Html.TextBoxFor(p => p.sort_order, new { @class = "form-control bg-dark text-white", type = "number" })
|
|
<small class="text-muted">Lower numbers show first.</small>
|
|
</div>
|
|
|
|
<button class="btn btn-success">Save</button>
|
|
}
|
|
|
|
<script>
|
|
document.getElementById('icon-input').addEventListener('input', function () {
|
|
document.getElementById('icon-preview').className = this.value;
|
|
});
|
|
</script>
|