Mr.Combet Webshell 🔥

Edit File Name : Department.cshtml

@model List<bnb.Models.DepartmentViewModel>
@{
    ViewBag.Title = "Department";
    Layout = "~/Views/Shared/_Navbar.cshtml";
}

@@media (max-width: 576px) {
        .m-blog__post {
            margin-bottom: 30px;
            min-height: auto;
            min-width: 100%;
        }
        .content__title {
            font-size: 24px;
        }
    }

.m-blog {
        @*display: grid;
        grid-template-columns: repeat(2, 415px);
        grid-column-gap: 12px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        column-gap: 25px;*@
    }

.m-blog__post {
        margin-bottom: 30px;
    }

#search {
        border: none;
        background: none;
        //transform: translate(-50px, 1px);
        color: #8b8b7e;
        width: 15%;
    }

.search-container {
    height: 40px;
    @*margin-left: 80px;*@
    border: 1px solid #e2e2df;
    border-radius: calc(0.5 * 40px);
    box-shadow: 0 1px 6px 0 #e2e2df;
    }

#search-input {
        border: none;
        width: 80%;
        //margin-left: 20px;
        background: transparent;

}
    #search-input:focus {
        border: none;
        @*outline: 0px;*@
        outline: none;
    }
    .l-breadcrumb {
        margin-bottom: 0px;
    }
    .more {
        color: rgba(245, 130, 32, 0.8);
        text-decoration: none;
        cursor: pointer;
    }
    .more:hover {
        color: rgba(245, 130, 32, 0.4);
    }

.img-detaprtment {
        height: 275px;
        object-fit: cover;
    }

</style>

<div class="l-breadcrumb pt-2 pb-2">
    <div class="container">
        <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb" class="d-flex py-3">
            <ol class="mb-0 breadcrumb align-self-center">
                <li class="breadcrumb-item"><a href="@Url.Action("Index","HomeUI")">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Departments</li>
            </ol>
        </nav>
    </div>
</div>

@*<div class="l-banner__inner hidden-xs d-flex" style="margin-top: 0px; margin-bottom: 40px">
    </div>*@

<div class="container mb-5">
    <div class="row mt-5">
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-8">
            <div class="d-lg-flex justify-content-between align-items-center mb-4">
                <h2 class="content__title mb-0 fw-bold mb-3" style="text-transform: uppercase; color: #F58220;">Departments</h2>
                <div class="search-container d-flex pe-2 justify-content-between">
                    <input class="ps-3" type="text" placeholder="Search.." name="search" id="search-input">
                    <button type="submit" id="search"><i class="fa fa-search"></i></button>
                </div>
            </div>
            <div class="row m-blog mb-4 pb-2">

@foreach (var item in Model)
                {
                    <div class="col-md-6 m-blog__post">
                        <div class="mb-4">
                            <div class="m-blog__img mb-4">
                                <a href="@Url.Action("DepartmentDetail", "HomeUI", new { id = item.Url })">
                                    <img src="~/Content/img/@item.Thumbnail" class="w-100 img-detaprtment rounded-3 img-fluid" alt="blog">
                                </a>
                            </div>
                            <div class="m-blog__title">
                                <h3 class="m-0 pb-3">
                                    <a href="@Url.Action("DepartmentDetail", "HomeUI", new { id = item.Url })" class="text-decoration-none">@item.DepartmentName</a>
                                </h3>
                            </div>
                            <div class="m-blog__tags mb-2 text-uppercase">
                                <a class="m-blog__category text-decoration-none rounded-1" href="@Url.Action("DepartmentDetail", "HomeUI", new { id = item.Url })">
                                    @item.DepartmentNameNepali
                                </a>
                            </div>
                            @if (item.ShortDescription == null)
                            {
                                <p>@Html.Raw(item.ShortDescription)</p>
                            }
                            else
                            {
                                <p>@Html.Raw(item.ShortDescription.Length > 200 ? item.ShortDescription.Substring(0, 200) + "<a class=more href=DepartmentDetail/" + item.Url + "> ..more</a> " : item.ShortDescription)</p>

}

</div>
                    </div>
                }

</div>
            @*<nav aria-label="pagination m-auto" class="text-center">
            <ul class="l-pagination pagination justify-content-center">
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item" aria-current="page">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>*@
        </div>
        @Html.Partial("_RightSideNav")
    </div>
</div>

searchInput.addEventListener('input', () => {
        console.log(searchInput.value);
        const filter = searchInput.value.toLowerCase();
        showSidenavOptions();
        const valueExist = !!filter.length;

if (valueExist) {
            sidenavOptions.forEach((el) => {
                const elText = el.textContent.trim().toLowerCase();
                const isIncluded = elText.includes(filter);
                if (!isIncluded) {
                    el.style.display = 'none';
                }
            });
        }
    });

const showSidenavOptions = () => {
        sidenavOptions.forEach((el) => {
            el.style.display = 'flex';
        });
    };

</script>