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

refactor event track and session system

pull/79/head
berkansasmaz 5 years ago
parent
d6e1237b82
commit
273d41775b
No known key found for this signature in database GPG Key ID: 884D815C3F32BE00
7 changed files with 156 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/EventHub.Domain.Shared/Localization/EventHub/en.json
  2. 4
      src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addSessionSection.cshtml
  3. 4
      src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml
  4. 2
      src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml
  5. 19
      src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js
  6. 78
      src/EventHub.Web/Pages/Events/Detail.cshtml
  7. 94
      src/EventHub.Web/wwwroot/global-styles.css

2
src/EventHub.Domain.Shared/Localization/EventHub/en.json
View File

@ -18,7 +18,7 @@
"DisplayName:Capacity": "Capacity", "DisplayName:Capacity": "Capacity",
"EventHub:OrganizationNameAlreadyExists": "The organization {Name} already exists. Please use another name.", "EventHub:OrganizationNameAlreadyExists": "The organization {Name} already exists. Please use another name.",
"EventHub:NotAuthorizedToCreateEventInThisOrganization": "You are not authorized to create events for the organization {0}.", "EventHub:NotAuthorizedToCreateEventInThisOrganization": "You are not authorized to create events for the organization {0}.",
"EventHub:EventEndTimeCantBeEarlierThanStartTime": "Event end time can not be earlier than the start time.", "EventHub:EndTimeCantBeEarlierThanStartTime": "Event end time can not be earlier than the start time.",
"EventHub:CantRegisterOrUnregisterForAPastEvent": "Can not register to or unregister from an event in the past.", "EventHub:CantRegisterOrUnregisterForAPastEvent": "Can not register to or unregister from an event in the past.",
"Events": "Events", "Events": "Events",
"Members": "Members", "Members": "Members",

4
src/EventHub.Web/Pages/Events/Components/CreateEventArea/_addSessionSection.cshtml
View File

@ -66,12 +66,12 @@
<span class="d-block mb-2">@speaker.UserName</span> <span class="d-block mb-2">@speaker.UserName</span>
} }
<abp-row> <abp-row>
<abp-column size="_3"> <abp-column size="_5">
<a id="@session.Id" data-track-id="@track.Id" href="javascript:;" data-bs-toggle="modal" data-bs-target="#EditSessionModal" class="mt-3 d-block text-info edit-session-button"> <a id="@session.Id" data-track-id="@track.Id" href="javascript:;" data-bs-toggle="modal" data-bs-target="#EditSessionModal" class="mt-3 d-block text-info edit-session-button">
<small><i class="fa fa-edit me-1"></i>Edit</small> <small><i class="fa fa-edit me-1"></i>Edit</small>
</a> </a>
</abp-column> </abp-column>
<abp-column size="_3"> <abp-column size="_6">
<a id="@session.Id" data-track-id="@track.Id" href="javascript:;" class="mt-3 d-block text-info delete-session-button"> <a id="@session.Id" data-track-id="@track.Id" href="javascript:;" class="mt-3 d-block text-info delete-session-button">
<small><i class="fa fa-trash me-1"></i>Delete</small> <small><i class="fa fa-trash me-1"></i>Delete</small>
</a> </a>

4
src/EventHub.Web/Pages/Events/Components/CreateEventArea/_newEventSection.cshtml
View File

@ -89,12 +89,14 @@
<div class="col-6"> <div class="col-6">
@if (eventId.HasValue) @if (eventId.HasValue)
{ {
<div class="image-area img-fluid rounded shadow-sm mx-auto d-block" style="background-image: url(@(UrlOptions.Value.Api.EnsureEndsWith('/') + $"api/eventhub/event/cover-image/{eventId}")" alt="@Model.Title"></div> <div id="" class="image-area img-fluid rounded shadow-sm mx-auto d-block" style="background-image: url(@(UrlOptions.Value.Api.EnsureEndsWith('/') + $"api/eventhub/event/cover-image/{eventId}")" alt="@Model.Title"></div>
<div class="image-area result-area" style="display: none"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
} }
else else
{ {
<div class="image-area"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div> <div class="image-area"><img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"></div>
} }
</div> </div>
<div class="col-6"> <div class="col-6">
<div> <div>

2
src/EventHub.Web/Pages/Events/Components/CreateEventArea/_previewSection.cshtml
View File

@ -193,7 +193,7 @@
{ {
<div class="track-item text-center"> <div class="track-item text-center">
<span class="track-name text-primary"><i class="fas fa-exclamation-circle"></i> There is no session!</span> <span class="track-name text-primary"><i class="fas fa-exclamation-circle"></i> There is no session!</span>
<span class="d-block mb-2 mt-3">Please add session.</span> <span class="d-block mb-2 mt-3">Tracks without Session are not visible after the event is published.</span>
</div> </div>
} }
</td> </td>

19
src/EventHub.Web/Pages/Events/Components/CreateEventArea/create-event-area.js
View File

@ -79,6 +79,15 @@
eventUrlCodeInput.val(response.urlCode); eventUrlCodeInput.val(response.urlCode);
} }
SwitchToTrackCreation() SwitchToTrackCreation()
},
error: function (errorRaw) {
abp.notify.error(errorRaw.responseJSON.error.message, 'Error',
toastr.options = {
timeOut: 2500,
progressBar: true,
positionClass: "toast-bottom-right"
}
);
} }
}); });
}); });
@ -392,9 +401,13 @@
function NewEventFormInputAreaChangeHandler() { function NewEventFormInputAreaChangeHandler() {
var isOnline = $("#IsOnline option:selected").val() var isOnline = $("#IsOnline option:selected").val()
if (isOnline === "True") { if (isOnline === "True") {
$("#CountryId").attr("required", false);
$("#inputCity").attr("required", false);
$(".event-link-group").show(); $(".event-link-group").show();
$(".event-location-group").hide(); $(".event-location-group").hide();
} else { } else {
$("#CountryId").attr("required", true);
$("#inputCity").attr("required", true);
$(".event-link-group").hide(); $(".event-link-group").hide();
$(".event-location-group").show(); $(".event-location-group").show();
} }
@ -464,7 +477,7 @@
readURL(file); readURL(file);
} }
} }
var objectURL = URL.createObjectURL(file); var objectURL = URL.createObjectURL(file);
img.src = objectURL; img.src = objectURL;
}); });
@ -474,6 +487,10 @@
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function (e) { reader.onload = function (e) {
if (eventIdInput.val().length === 36){
$('.image-area').css('display', 'none').removeClass('d-block');
$('.result-area').css('display', '');
}
$('#imageResult').attr('src', e.target.result); $('#imageResult').attr('src', e.target.result);
infoArea.textContent = 'File name: ' + input.name; infoArea.textContent = 'File name: ' + input.name;
} }

78
src/EventHub.Web/Pages/Events/Detail.cshtml
View File

@ -73,16 +73,74 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-7"> <div class="col-md-7">
<h5 class="detail-head mt-5 font-weight-bold">Event Description</h5> @if (Model.Event.Tracks.Any())
<p id="EventDescription"> {
@Model.Event.Description <abp-tabs>
</p> <abp-tab class="tab" title="Description">
<h5 class="detail-head mt-5 font-weight-bold">Event Description</h5>
<p id="EventDescription">
@Model.Event.Description
</p>
<h5 class="detail-head mt-5 font-weight-bold">Date</h5>
<p>
@EventDateHelper.GetDateRangeText(Model.Event.StartTime, Model.Event.EndTime)
</p>
@await Component.InvokeAsync(typeof(AttendeesAreaViewComponent), new { eventId = Model.Event.Id })
</abp-tab>
<abp-tab class="tab" title=" Track / Session">
<table class="table">
<thead>
<tr>
@foreach (var track in Model.Event.Tracks)
{
@if (track.Sessions.Any())
{
<th class="text-center" width="25%">@track.Name</th>
}
}
</tr>
</thead>
<tbody>
<tr>
@foreach (var track in Model.Event.Tracks)
{
@if (track.Sessions.Any())
{
<td>
@foreach (var session in track.Sessions)
{
<div class="track-item">
<span class="track-name">@session.Title.TruncateWithPostfix(25)</span>
<small class="text-primary d-block my-2">@EventDateHelper.GetTimeRangeText(TimeOnly.FromDateTime(session.StartTime), TimeOnly.FromDateTime(session.EndTime)) | @session.Language</small>
@foreach (var speaker in session.Speakers)
{
<span class="d-block mb-2">@speaker.UserName</span>
}
</div>
}
</td>
}
}
</tr>
</tbody>
</table>
</abp-tab>
</abp-tabs>
}
else
{
<h5 class="detail-head mt-5 font-weight-bold">Event Description</h5>
<p id="EventDescription">
@Model.Event.Description
</p>
<h5 class="detail-head mt-5 font-weight-bold">Date</h5> <h5 class="detail-head mt-5 font-weight-bold">Date</h5>
<p> <p>
@EventDateHelper.GetDateRangeText(Model.Event.StartTime, Model.Event.EndTime) @EventDateHelper.GetDateRangeText(Model.Event.StartTime, Model.Event.EndTime)
</p> </p>
@await Component.InvokeAsync(typeof(AttendeesAreaViewComponent), new {eventId = Model.Event.Id}) @await Component.InvokeAsync(typeof(AttendeesAreaViewComponent), new { eventId = Model.Event.Id })
}
</div> </div>
</div> </div>
</div> </div>
@ -102,4 +160,4 @@
MaxResultCount = 6, MaxResultCount = 6,
isPagination = false isPagination = false
}) })
</div> </div>

94
src/EventHub.Web/wwwroot/global-styles.css
View File

@ -3,8 +3,9 @@
.border-light { .border-light {
border-color: #E1E5E9 !important; border-color: #E1E5E9 !important;
} }
.text-info {
color: #6F32E2!important; .text-info {
color: #6F32E2 !important;
} }
@ -34,8 +35,8 @@
.progresses ul li.create-steps.blue { .progresses ul li.create-steps.blue {
color: #fff; color: #fff;
background-color: #00044A; background-color: #00044A;
border-color: #00044A; border-color: #00044A;
} }
.progresses ul li.create-steps span { .progresses ul li.create-steps span {
@ -44,12 +45,12 @@
left: -30px; left: -30px;
font-size: 0.8rem; font-size: 0.8rem;
width: 90px; width: 90px;
color:#bfc6cd; color: #bfc6cd;
} }
.progresses ul li.create-steps.blue span { .progresses ul li.create-steps.blue span {
color:#00044A; color: #00044A;
} }
.progresses .progress { .progresses .progress {
height: 2px; height: 2px;
@ -59,64 +60,73 @@
background-color: #DCE0E5; background-color: #DCE0E5;
border-radius: 10px border-radius: 10px
} }
.progress-bar {
background-color: #00044A; .progress-bar {
background-color: #00044A;
} }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: #00044A !important; background-color: #00044A !important;
} }
.big-square-btn .btn { .big-square-btn .btn {
border: 1px solid rgba(107, 126, 146, 0.20); border: 1px solid rgba(107, 126, 146, 0.20);
min-height: 177px; min-height: 177px;
background: rgba(107, 126, 146, 0.05); background: rgba(107, 126, 146, 0.05);
} }
.big-square-btn .btn:hover {
.big-square-btn .btn:hover {
color: #E8345D; color: #E8345D;
background: #fff; background: #fff;
} }
.big-square-btn .fa-plus {
border: 2px dashed; .big-square-btn .fa-plus {
border: 2px dashed;
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: 34px; border-radius: 34px;
line-height: 30px; line-height: 30px;
} }
.track-item { .track-item {
border: 1px solid rgba(107, 126, 146, 0.20); border: 1px solid rgba(107, 126, 146, 0.20);
padding: 1.5em; padding: 1.5em;
border-radius: 10px; border-radius: 10px;
min-height: 177px; min-height: 177px;
margin-bottom: 1em; margin-bottom: 1em;
} }
.track-item .track-name{
.track-item .track-name {
font-weight: 500; font-weight: 500;
font-size: 1.125em; font-size: 1.125em;
color: #03044a; color: #03044a;
} }
.table > :not(:first-child) { .table > :not(:first-child) {
border-top: 1px solid currentColor; border-top: 1px solid currentColor;
} }
.table td, .table th {
.table td, .table th {
font-weight: normal; font-weight: normal;
padding: 16px 8px; padding: 16px 8px;
color: #6B7E92; color: #6B7E92;
} }
.text-primary { .text-primary {
color: #E8345D !important; color: #E8345D !important;
} }
.preview-item { .preview-item {
color: #00044A; color: #00044A;
} }
.price small{ .price small {
font-size: 20px; font-size: 20px;
color: #00044A; color: #00044A;
font-weight: 800; font-weight: 800;
} }
.price span{
.price span {
font-size: 60px; font-size: 60px;
color: #00044A; color: #00044A;
font-weight: 800; font-weight: 800;
@ -127,11 +137,13 @@
padding: 0; padding: 0;
margin: 0 30px 0 40px; margin: 0 30px 0 40px;
} }
.list-check-icon li{
.list-check-icon li {
margin: 1em 2em; margin: 1em 2em;
} }
.list-check-icon .fa { .list-check-icon .fa {
color:#E8345D; color: #E8345D;
margin: 0 10px 0 -28px; margin: 0 10px 0 -28px;
} }
@ -140,16 +152,19 @@
border-color: #6F32E2; border-color: #6F32E2;
color: white; color: white;
} }
.btn-info:hover { .btn-info:hover {
background: #662ad6; background: #662ad6;
border-color: #662ad6; border-color: #662ad6;
color: white; color: white;
} }
.btn-check:focus + .btn-info, .btn-info:focus { .btn-check:focus + .btn-info, .btn-info:focus {
background: #662ad6; background: #662ad6;
border-color: #662ad6; border-color: #662ad6;
color: white; color: white;
} }
.faq.shown { .faq.shown {
background-color: #fff9f7; background-color: #fff9f7;
} }
@ -167,17 +182,17 @@
} }
.faq-container .faq button.btn.btn-faq.collapsed { .faq-container .faq button.btn.btn-faq.collapsed {
} }
.faq-container .faq button.btn.btn-faq .fas{ .faq-container .faq button.btn.btn-faq .fas {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 0px; left: 0px;
} }
.faq-container .faq button.btn.btn-faq.collapsed .fas{ .faq-container .faq button.btn.btn-faq.collapsed .fas {
color:#E8345D; color: #E8345D;
transform: rotate(180deg); transform: rotate(180deg);
} }
@ -196,14 +211,15 @@
padding: 15px 0 10px 0; padding: 15px 0 10px 0;
} }
.btn-check:focus + .btn, .btn:focus { .btn-check:focus + .btn, .btn:focus {
box-shadow: none; box-shadow: none;
} }
.text-dark { .text-dark {
font-weight: 700; font-weight: 700;
color: #03044a !important; color: #03044a !important;
} }
.modal-icon { .modal-icon {
display: block; display: block;
font-size: 64px; font-size: 64px;
@ -211,6 +227,7 @@
margin-bottom: 30px; margin-bottom: 30px;
color: #6F32E2; color: #6F32E2;
} }
.rounded-3 { .rounded-3 {
border-radius: 1rem !important; border-radius: 1rem !important;
} }
@ -222,3 +239,18 @@
overflow: hidden; overflow: hidden;
width: 140px; width: 140px;
} }
.nav-tabs .nav-link {
width: 217px !important;
left: 452px !important;
top: 567px !important;
border-radius: unset !important;
font-size: 20px !important;
line-height: 24px !important;
color: #6B7E92 !important;
}
.nav-tabs .active, .btn:hover {
color: #00044A !important;
border: unset !important;
}

Write Preview
Loading…
Cancel
Save