tsai
/
eventhub
mirror of https://github.com/abpframework/eventhub
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add the Event List View component to the home page

pull/41/head
Berkan Sasmaz 5 years ago
parent
d30f97258e
commit
ad37938e2f
5 changed files with 45 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      src/EventHub.Web/Pages/Index.cshtml
  2. 10
      src/EventHub.Web/Pages/Index.cshtml.cs
  3. 20
      src/EventHub.Web/Pages/Index.css
  4. 20
      src/EventHub.Web/Pages/Index.js
  5. 3
      src/EventHub.Web/Pages/_ViewImports.cshtml

95
src/EventHub.Web/Pages/Index.cshtml
View File

@ -3,7 +3,12 @@
@using System.Globalization
@using Microsoft.AspNetCore.Mvc.Localization
@using EventHub.Localization
@using EventHub.Web.Pages.Events
@using EventHub.Web
@using EventHub.Web.Pages.Events.Components.ListArea
@using Volo.Abp.Timing
@using Volo.Abp.Users
@inject ICurrentUser CurrentUser
@inject IClock Clock
@inject IHtmlLocalizer<EventHubResource> L
@section styles {
@ -67,8 +72,6 @@
<option value=@country.Id>@country.Name</option>
}
</select>
<input type="hidden" id="inputCity" class="form-control" placeholder="City" aria-describedby="backToLocation">
<button style="visibility: hidden" class="backToLocation">Back</button>
</div>
</div>
<div class="col-md mb-3 mb-md-0">
@ -89,58 +92,25 @@
</div>
<div class="container">
<div class="row mb-4">
<div class="col-md">
<h2>Upcoming Events</h2>
<div class="row mb-4">
<div class="col-md">
<h2>Upcoming Events</h2>
</div>
</div>
</div>
<div class="row">
@foreach (var eventItem in Model.Events)
{
<div class="col-lg-4 col-md-6">
<div class="card">
@if (eventItem.CoverImageContent is null)
{
<img abp-card-image="Top" src="/assets/card-img.png" alt="@eventItem.Title"/>
}
else
{
<img abp-card-image="Top" style="max-height: 400px; min-height: 160px;" src="@($"data:image/png;base64,{Convert.ToBase64String(eventItem.CoverImageContent)}")" alt="@eventItem.Title"/>
}
<div class="card-body">
<div class="event-container">
<div class="form-row">
<div class="col-3">
<div class="event-date text-center">
<small>@eventItem.StartTime.ToString("MMM")</small>
<span>@eventItem.StartTime.Day</span>
</div>
</div>
<div class="col-9">
<div class="event-info">
<h5>@eventItem.Title</h5>
<small>@eventItem.StartTime.ToString("hh:mm") | @EventDateHelper.GetLocationInfo(eventItem)</small>
<p>@eventItem.Description.TruncateWithPostfix(100)</p>
</div>
<a href="@Url.Page("/Events/Detail", new {url = eventItem.Url})" class="btn btn-link p-0">Learn More <img src="/assets/more-btn.svg"></a>
</div>
</div>
</div>
</div>
</div>
</div>
}
</div>
@await Component.InvokeAsync(typeof(ListAreaViewComponent), new
{
minDate = Clock.Now,
MaxResultCount = 15
})
<div class="row">
<div class="col text-center">
<button class="btn btn-secondary btn-lg ">
Load More
</button>
<div class="row">
<div class="col text-center">
<a href="@Url.Page("/Events/Index")" class="btn btn-secondary btn-lg">See All Events</a>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-white my-5 py-5">
@ -155,7 +125,14 @@
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="/assets/card-left-image.png" class="card-img-left">
@if (Model.OnlineEvents[i].CoverImageContent is null)
{
<img src="/assets/card-left-image.png" class="card-img-left" alt="@Model.OnlineEvents[i].Title">
}
else
{
<img class="card-img-left" src="@($"data:image/png;base64,{Convert.ToBase64String(Model.OnlineEvents[i].CoverImageContent)}")" alt="@Model.OnlineEvents[i].Title"/>
}
</div>
<div class="col-md-7">
<div class="card-body">
@ -174,7 +151,14 @@
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="/assets/card-left-image.png" class="card-img-left">
@if (Model.OnlineEvents[i + 1].CoverImageContent is null)
{
<img src="/assets/card-left-image.png" class="card-img-left" alt="@Model.OnlineEvents[i + 1].Title">
}
else
{
<img class="card-img-left" src="@($"data:image/png;base64,{Convert.ToBase64String(Model.OnlineEvents[i + 1].CoverImageContent)}")" alt="@Model.OnlineEvents[i + 1].Title"/>
}
</div>
<div class="col-md-7">
<div class="card-body">
@ -207,14 +191,17 @@
List who is organizing local events
with one click.
</p>
<a href="#" class="btn btn-link btn-lg">Join EventHub</a>
@if (!CurrentUser.IsAuthenticated)
{
<a href="@EventHubExternalUrls.EhAccount/Account/Register?returnUrl=@EventHubExternalUrls.EhWww" class="btn btn-link btn-lg">Join EventHub</a>
}
</div>
</div>
<div class="col-md-5 mr-auto border-left">
<div class="px-5">
<h3>Start an Event</h3>
<p class="lead">Create your own Eventhub group and benefit from a community of millions.</p>
<a href="#" class="btn btn-link btn-lg">Start</a>
<a href="@Url.Page("/Events/New")" class="btn btn-link btn-lg">Start</a>
</div>
</div>
</div>

10
src/EventHub.Web/Pages/Index.cshtml.cs
View File

@ -5,15 +5,12 @@ using System.Linq;
using System.Threading.Tasks;
using EventHub.Events;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Mvc.Rendering;
using NUglify.Helpers;
namespace EventHub.Web.Pages
{
public class IndexModel : EventHubPageModel
{
public IReadOnlyList<EventInListDto> Events { get; private set; }
public IReadOnlyList<EventInListDto> OnlineEvents { get; private set; }
public List<CultureInfo> Languages { get; private set; }
@ -29,13 +26,6 @@ namespace EventHub.Web.Pages
public async Task OnGetAsync()
{
Events = (await _eventAppService.GetListAsync(
new EventListFilterDto
{
MinDate = Clock.Now
}
)).Items;
OnlineEvents = (await _eventAppService.GetListAsync(
new EventListFilterDto
{

20
src/EventHub.Web/Pages/Index.css
View File

@ -1,19 +1 @@
.inputLocation {
width: 300px;
position: relative;
}
.backToLocation {
position: absolute;
top: 0;
border-radius: 5px;
right: 10px;
z-index: 2;
border: none;
top: 10px;
height: 30px;
cursor: pointer;
color: white;
background-color: #D64560;
transform: translateX(2px);
}


20
src/EventHub.Web/Pages/Index.js
View File

@ -26,25 +26,7 @@
},
dots: true,
});
var countryId = "00000000-0000-0000-0000-000000000000"
$('#inputLocation').on('change', function (e) {
countryId = this.value
if (countryId !== "00000000-0000-0000-0000-000000000000" && countryId !== "Location"){
$('#inputLocation').hide()
$('.locationGroup').append("<label class=\"labelCity\" for=\"inputCity\">City</label>")
$('.backToLocation').css('visibility', 'visible')
$('#inputCity').attr('type', 'text').show()
}
});
$('.backToLocation').on('click', '', function (e) {
$('.labelCity').remove()
$('.backToLocation').css('visibility', 'hidden')
$('#inputCity').val('').attr('type', 'text').hide()
$('#inputLocation').show()
});
var $inputWhen = $("#inputWhen");
$inputWhen.daterangepicker({
autoUpdateInput: false,

3
src/EventHub.Web/Pages/_ViewImports.cshtml
View File

@ -1,4 +1,5 @@
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
@addTagHelper *, EventHub.Web.Theme
Write Preview
Loading…
Cancel
Save