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.


14 Answer(s)
  • User Avatar
    0
    jfistelmann created

    Updated to 7.1.0 and LeptonX 2.1.0 today. Issues still apply

  • User Avatar
    0
    alper created
    Support Team Director

    when you navigate to the URL, what happens?

  • 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.

  • 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

  • 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.

  • 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

  • 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

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

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

  • 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

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Thanks. I will check it asap.

  • 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>
    
    

  • 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

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    We will update it in next patch version. Thanks

  • User Avatar
    0
    alper created
    Support Team Director

    thank you @maliming

Made with ❤️ on ABP v9.1.0-preview. Updated on November 01, 2024, 05:35