Open Closed

Lepton X public site mobile view issues #4736

User avatar
0
jfistelmann created
  • ABP Framework version: v7.0.3
  • UI type: MVC
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Steps to reproduce the issue: Should be reproducable by boilerplating a new project
  • Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX version: 2.0.4

Account Image points to nothing when unauthorized

There seems to be an issue here https://github.com/abpframework/abp/issues/13297 which may be related.

Whats strange is that the mobile view shows the <authorized> thing instead of <notauthorized>

System Theme shows up twice

My ...WebPublicModule doesn't have anything special in it.

private void ConfigureTheme()
    {
        Configure<LeptonXThemeOptions>(options =>
        {
            options.DefaultStyle = LeptonXStyleNames.System;
        });

        Configure<LeptonXThemeMvcOptions>(options =>
        {
            options.ApplicationLayout = LeptonXMvcLayouts.TopMenu;
        });
    }

The default top menu (same site, just scrolled back to trigger different view) is fine.

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Go to accepted answer
14 Answer(s)
  • User Avatar
    0
    jfistelmann created

    Updated to 7.1.0 and LeptonX 2.1.0 today. Issues still apply

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    alper created
    Support Team Director

    when you navigate to the URL, what happens?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    jfistelmann created

    when you navigate to the URL, what happens?

    well, as expected a 404. Because the link is not built to end and displaying it is wrong in the first place.

    This opens when I click on the image:

    The real question is: Why does it think that I am authorized when I'm not? Because that is leading to this behavior.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    jfistelmann created

    I just started the demo app from the leptonx project. Same issue applies.

    See Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX.Themes.LeptonX.Components.SideMenu.MobileNavbar.MobileNavbarViewComponent

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    alper created
    Support Team Director

    @maliming he's using the MVC template and as he says; the app renders as authorized, but he's not.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    I just started the demo app from the leptonx project. Same issue applies.

    please share the steps I will try to reproduce it. Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    jfistelmann created

    I just started the demo app from the leptonx project. Same issue applies.

    please share the steps I will try to reproduce it. Thanks

    Sure,

    First get source of LeptonXTheme.Pro

    abp get-source Volo.Abp.LeptonXTheme.Pro --version 2.1.0

    Replace $(abpVersion) with 7.1.0 in all csproj files. Have no process for that, so I just open vs code and do some good old find and replace magic.

    Next step is to start docker.

    After that, run tye with .\demo\run-app.ps1 -setup

    Little note here: You have

    try {
        dotnet tool install -g Microsoft.Tye --prerelease
    }
    catch {
        { 1:dotnet tool update -g Microsoft.Tye --prerelease }
    }

    You only need dotnet tool update - it will automatically install a package if it is not there.

    Alternatively, you may start things directly from within visual studio (I had to, because tye has thrown some weird issues which I have to look into)

    Now wait until stuff has started.

    Now go to https://localhost:44360/

    Change to mobile view thing and tadaaa

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Thanks. Can you share the LeptonxDemoApp project? liming.ma@volosoft.com

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    jfistelmann created

    Thanks. Can you share the LeptonxDemoApp project? liming.ma@volosoft.com

    Uhm. As described this is your demo project without a single change.

    You can get it by executing abp get-source Volo.Abp.LeptonXTheme.Pro --version 2.1.0 But if it helps you, I'll send it to you

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Thanks. I will check it asap.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Please update the src/Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX/Themes/LeptonX/Components/SideMenu/MobileNavbar/Default.cshtml with below code

    @using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX.Themes.LeptonX.Components.SideMenu.MainMenu
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX.Themes.LeptonX.Components.Common.MobileGeneralSettings
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX.Themes.LeptonX.Components.SideMenu.MobileNavbar
@using Volo.Abp.LeptonX.Shared.Localization
@using Microsoft.Extensions.Localization
@using Volo.Abp.Users

@model MobileNavbarViewModel
@inject ICurrentUser CurrentUser
@inject IStringLocalizer<LeptonXResource> L

<div class="lpx-mobile-navbar-container">
	<div class="lpx-mobile-navbar">
		<ul class="lpx-mobile-nav-tabs">

			@foreach (var viewModel in Model.SelectedMenuItems)
			{
				var url = string.IsNullOrEmpty(viewModel.MenuItem.Url) ? "#" : Url.IsLocalUrl(viewModel.MenuItem.Url) ? Url.Content(viewModel.MenuItem.Url.EnsureStartsWith('~')) : viewModel.MenuItem.Url;

				<li class="lpx-mobile-nav-tab">
					<a id="@viewModel.MenuItem.ElementId" href="@url" target="@viewModel.MenuItem.Target" class="lpx-mobile-nav-item @viewModel.MenuItem.CssClass">
						<i class="menu-item-icon @viewModel.MenuItem.Icon" aria-hidden="true"></i>
						<span class="mobile-item-text"> @viewModel.MenuItem.DisplayName </span>
					</a>
				</li>
			}

			<li class="lpx-mobile-nav-tab menu-toggle">
				<a href="javascript:void(0)" class="lpx-mobile-hamburger" data-lpx-mobile-menu-toggle="routes">
					<span class="hamburger-icon" aria-hidden="true">
						<span class="icon-part"></span>
						<span class="icon-part"></span>
						<span class="icon-part"></span>
						<span class="icon-part"></span>
						<span class="icon-part"></span>
						<span class="icon-part"></span>
					</span>
				</a>
			</li>

			<li class="lpx-mobile-nav-tab">
				<a class="lpx-mobile-nav-item" data-lpx-mobile-menu-toggle="settings">
					<i class="menu-item-icon bi bi-gear-wide-connected" aria-hidden="true"></i>
					<span class="mobile-item-text">Settings</span>
				</a>
			</li>
			<li class="lpx-mobile-nav-tab">
				@if (CurrentUser.Id.HasValue)
                {
	                <a class="lpx-mobile-nav-item" data-lpx-mobile-menu-toggle="user">
		                <div class="lpx-avatar">
			                <img class="lpx-avatar-img" src="@Model.ProfileImageUrl" alt="@CurrentUser.UserName avatar"/>
		                </div>

		                <span class="mobile-item-text">@CurrentUser.UserName</span>
	                </a>
                }
				else
				{
					<a href="~/account/login" class="lpx-mobile-nav-item">
						<i class="menu-item-icon bi bi-person-fill" aria-hidden="true"></i>
						<span class="mobile-item-text">@L["Login"]</span>
					</a>
				}
			</li>
		</ul>
	</div>

	<div class="lpx-mobile-menu hidden">
		<div class="lpx-logo-container">
			<a href="/">
				<div class="lpx-brand-logo"></div>
			</a>
		</div>
		<ul class="lpx-nav-menu d-none" data-lpx-mobile-menu="routes">
			@await Component.InvokeAsync(typeof(MainMenuViewComponent))
		</ul>

		<ul class="lpx-nav-menu d-none" data-lpx-mobile-menu="settings">
			@await Component.InvokeAsync(typeof(MobileGeneralSettingsViewComponent))
		</ul>

		<ul class="lpx-nav-menu d-none" data-lpx-mobile-menu="user">
			<div class="d-flex ps-3 pe-3">
				<div class="lpx-avatar me-2">
					<img class="lpx-avatar-img" src="@Model.ProfileImageUrl" alt="@CurrentUser.UserName avatar" />
				</div>

				<div class="d-flex flex-column" style="line-height: normal">
					<span class="fs-12">@L["Welcome"] <span class="color-active-text"> @CurrentUser.UserName </span> </span>
					<span class="color-active-text">@CurrentUser.Name @CurrentUser.SurName</span>
					<span class="fs-12">@CurrentUser.Email</span>
				</div>
			</div>

			@if (Model.UserMenu != null)
			{
				foreach (var menuItem in Model.UserMenu.Items)
				{
					var url = string.IsNullOrEmpty(menuItem.Url) ? "#" : Url.IsLocalUrl(menuItem.Url) ? Url.Content(menuItem.Url.EnsureStartsWith('~')) : menuItem.Url;

					<li class="outer-menu-item">
						<a class="lpx-menu-item-link lpx-menu-item @menuItem.CssClass" href="@url" target="@menuItem.Target" id="@menuItem.ElementId">
							<span class="lpx-menu-item-icon"><i class="lpx-icon bi @menuItem.Icon" aria-hidden="true"></i></span>

							<span class="lpx-menu-item-text hidden-in-hover-trigger">@menuItem.DisplayName</span>
						</a>
					</li>
				}
			}
		</ul>
	</div>
</div>

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    jfistelmann created

    hi

    Please update the src/Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX/Themes/LeptonX/Components/SideMenu/MobileNavbar/Default.cshtml with below code

    Hey, did that on my side. Works now as expected.

    As for the Theme-Bug. Took a look into that and that just can not work as expected.

    src\Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX\Themes\LeptonX\Components\Common\MobileGeneralSettings\Default.cshtml

    In the first loop, you add every style. then, you add the system menu - no matter what and style it as selected.

    I removed lines 36 to 44 and live with the fact that on page load - the currently selected theme is not highlighted. The logic would need to be adjusted so that the loop considers the current style setting

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    We will update it in next patch version. Thanks

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
    1
  • User Avatar
    0
    alper created
    Support Team Director

    thank you @maliming

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Assignee
User avatar maliming
Labels
lepton-x
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.