Improve design on creation event page

src/EventHub.Web.Theme/Themes/EventHub/Components/MainNavbar/Default.cshtml

@@ -59,7 +59,7 @@
                             <a class="dropdown-item" href="@Url.Page("/Profile")" title="@L["Settings"]">
                                 <i class="fas fa-cog"></i> @L["Settings"]
                             </a>
-                            <a class="dropdown-item" href="/Account/Logout?returnUrl=@EventHubExternalUrls.EhWww" title="@L["Logout"]">
+                            <a class="dropdown-item" href="/Account/Logout?returnUrl=@EventHubExternalUrls.EhWww@(System.Net.WebUtility.UrlEncode(Context.Request.GetEncodedPathAndQuery()))" title="@L["Logout"]">
                                 <i class="fas fa-sign-out-alt"></i> @L["Logout"]
                             </a>
                         </div>

src/EventHub.Web/Pages/Events/New.cshtml

@@ -10,10 +10,14 @@
 
 @if (!Model.Organizations.Any())
 {
-    <abp-alert alert-type="Danger">
+  <div class="container">
+    <div class="m-5 text-center">
+      <abp-alert alert-type="Danger">
         <p>@L["NewEventYouHaveNoOrganizationYetMessage"]</p>
         <a abp-button="Primary" href="@Url.Page("/Organizations/New")">@L["CreateAnOrganization"]</a>
-    </abp-alert>
+      </abp-alert>
+    </div>
+  </div>
 }
 else
 {

src/EventHub.Web/Pages/Events/New.js

@@ -1,89 +1,90 @@
 $(function () {
     var l = abp.localization.getResource('EventHub');
-    
+
     var isOnline = $("#Event_IsOnline option:selected").val()
     if (isOnline === "True") {
         $(".event-link-group").show();
         $(".event-location-group").hide();
-    }else{
+    } else {
         $(".event-link-group").hide();
         $(".event-location-group").show();
     }
-    
+
-    $('#Event_IsOnline').on('change', '', function() {
+    $('#Event_IsOnline').on('change', '', function () {
         var isOnline = $("#Event_IsOnline option:selected").val()
         if (isOnline === "True") {
             $(".event-link-group").show();
             $(".event-location-group").hide();
-        }else{
+        } else {
             $(".event-link-group").hide();
             $(".event-location-group").show();
         }
     });
 
-    var infoArea = document.getElementById( 'upload-label' );
+    var infoArea = document.getElementById('upload-label');
     var fileInput = document.getElementById('Event_CoverImageFile');
     var file;
 
-    fileInput.addEventListener('change', function () {
+    if (fileInput !== null) {
-        var showFile = true;
+        fileInput.addEventListener('change', function () {
+            var showFile = true;
 
-        file = fileInput.files[0];
+            file = fileInput.files[0];
 
-        if (file === undefined){
+            if (file === undefined) {
-            $('#Event_CoverImageFile').val('');
+                $('#Event_CoverImageFile').val('');
-            $('#imageResult').attr('src', '#');
+                $('#imageResult').attr('src', '#');
-            infoArea.textContent = 'Choose file'
+                infoArea.textContent = 'Choose file'
-            return;
+                return;
-        }
+            }
 
-        var permittedExtensions = ["jpg", "jpeg", "png"]
+            var permittedExtensions = ["jpg", "jpeg", "png"]
-        var fileExtension = $(this).val().split('.').pop();
+            var fileExtension = $(this).val().split('.').pop();
-        if (permittedExtensions.indexOf(fileExtension) === -1) {
+            if (permittedExtensions.indexOf(fileExtension) === -1) {
-            showFile = false;
+                showFile = false;
-            abp.message.error(l('EventCoverImageExtensionNotAllowed'))
+                abp.message.error(l('EventCoverImageExtensionNotAllowed'))
-                .then(() => {
+                    .then(() => {
-                    $('#Event_CoverImageFile').val('');
+                        $('#Event_CoverImageFile').val('');
-                    file = null;
+                        file = null;
-                });
+                    });
-        }
+            } else if (file.size > 1024 * 1024) {
-        else if(file.size > 1024*1024) {
+                showFile = false;
-            showFile = false;
+                abp.message.error(l('EventCoverImageSizeExceedMessage'))
-            abp.message.error(l('EventCoverImageSizeExceedMessage'))
+                    .then(() => {
-                .then(() => {
+                        $('#Event_CoverImageFile').val('');
-                    $('#Event_CoverImageFile').val('');
+                        file = null;
-                    file = null;
+                    });
-                });
+            }
-        }
 
-        var img = new Image();
+            var img = new Image();
-        img.onload = function () {
+            img.onload = function () {
-            var imageError = true;
+                var imageError = true;
-            var sizes = {
+                var sizes = {
-                width: this.width,
+                    width: this.width,
-                height: this.height
+                    height: this.height
-            };
+                };
-            URL.revokeObjectURL(this.src);
+                URL.revokeObjectURL(this.src);
 
-            if(showFile && imageError) {
+                if (showFile && imageError) {
-                readURL(file);
+                    readURL(file);
+                }
             }
-        }
 
-        var objectURL = URL.createObjectURL(file);
+            var objectURL = URL.createObjectURL(file);
-        img.src = objectURL;
+            img.src = objectURL;
-    });
+        });
-    
-    function readURL(input) {
-        if (input) {
-            var reader = new FileReader();
 
-            reader.onload = function (e) {
+        function readURL(input) {
-                $('#imageResult').attr('src', e.target.result);
+            if (input) {
-                infoArea.textContent = 'File name: ' + input.name;
+                var reader = new FileReader();
-            }
+
+                reader.onload = function (e) {
+                    $('#imageResult').attr('src', e.target.result);
+                    infoArea.textContent = 'File name: ' + input.name;
+                }
 
-            reader.readAsDataURL(input);
+                reader.readAsDataURL(input);
+            }
         }
     }
 });