Peace
/
BlazorRadzenPracs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix layout for mobile env

Browse Source
main
Peace 10 months ago
parent a5095e744a
commit 95bc00a376
12 changed files with 41 additions and 52 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      ComponentPractice/ComponentPractice/Components/Layout/MainLayout.razor
  2. 52
      ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
  3. 4
      ComponentPractice/ComponentPractice/Components/Pages/DataGrid.razor
  4. 4
      ComponentPractice/ComponentPractice/Components/Pages/DataGridAdv.razor
  5. 2
      ComponentPractice/ComponentPractice/Components/Pages/DataGridCsvExport.razor
  6. 2
      ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor
  7. 8
      ComponentPractice/ComponentPractice/Components/Pages/DataGridREST.razor
  8. 2
      ComponentPractice/ComponentPractice/Components/Pages/DataList.razor
  9. 2
      ComponentPractice/ComponentPractice/Components/Pages/DataListPager.razor
  10. 5
      ComponentPractice/ComponentPractice/Components/Pages/Home.razor
  11. 8
      ComponentPractice/ComponentPractice/Components/Pages/Layout.razor
  12. 2
      ComponentPractice/ComponentPractice/Components/Pages/LayoutStack.razor

2
ComponentPractice/ComponentPractice/Components/Layout/MainLayout.razor
Unescape View File

@ -3,7 +3,7 @@
<RadzenLayout>
<NavMenu />
<RadzenBody>
<div class="rz-p-4">
<div class="rz-mt-12">
@Body
</div>
</RadzenBody>

52
ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
Unescape View File

@ -3,54 +3,42 @@
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
<RadzenLabel Text="Radzen Component Practice" />
<RadzenLabel Text=".Net Blazor & Radzen Blazor" />
</RadzenStack>
</RadzenHeader>
<RadzenSidebar class="rz-p-2" Responsive="false" Style="width: max-content">
<RadzenSidebar class="rz-mt-12" Responsive="false" Style="width:max-content; position:absolute;" @bind-Expanded="sidebarExpanded">
<RadzenStack AlignItems="AlignItems.Center">
<RadzenPanelMenu Multiple="true" DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)">
<div onclick="document.querySelector('.navbar-toggler').click()">
<RadzenPanelMenuItem Text="Home" Icon="home" Path="" />
</div>
<RadzenPanelMenu Multiple="false">
<RadzenPanelMenuItem Text="Home" Icon="home" Click="@(() => sidebarExpanded = false)" Path="" />
<RadzenPanelMenuItem Text="Original" Icon="first_page">
<div onclick="document.querySelector('.navbar-toggler').click()">
<RadzenPanelMenuItem Text="Counter" Icon="trending_up" Path="counter" />
<RadzenPanelMenuItem Text="Weather" Icon="cloud" Path="weather" />
</div>
<RadzenPanelMenuItem Text="Counter" Icon="trending_up" Click="@(() => sidebarExpanded = false)" Path="counter" />
<RadzenPanelMenuItem Text="Weather" Icon="cloud" Click="@(() => sidebarExpanded = false)" Path="weather" />
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="UI Fundamentals" Icon="water_drop">
<div onclick="document.querySelector('.navbar-toggler').click()">
<RadzenPanelMenuItem Text="Typo" Icon="text_fields" Path="typo" />
<RadzenPanelMenuItem Text="Icon" Icon="emoji_emotions" Path="icon" />
<RadzenPanelMenuItem Text="Borders" Icon="border_outer" Path="borders" />
<RadzenPanelMenuItem Text="SRBS" Icon="sort_by_alpha" Path="srbs" />
</div>
<RadzenPanelMenuItem Text="Typo" Icon="text_fields" Click="@(() => sidebarExpanded = false)" Path="typo" />
<RadzenPanelMenuItem Text="Icon" Icon="emoji_emotions" Click="@(() => sidebarExpanded = false)" Path="icon" />
<RadzenPanelMenuItem Text="Borders" Icon="border_outer" Click="@(() => sidebarExpanded = false)" Path="borders" />
<RadzenPanelMenuItem Text="SRBS" Icon="sort_by_alpha" Click="@(() => sidebarExpanded = false)" Path="srbs" />
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="DataGrid" Icon="calendar_view_month">
<div onclick="document.querySelector('.navbar-toggler').click()">
<RadzenPanelMenuItem Text="Basic" Icon="view_headline" Path="datagrid" />
<RadzenPanelMenuItem Text="Advanced" Icon="view_headline" Path="datagridadv" />
<RadzenPanelMenuItem Text="REST" Icon="view_headline" Path="datagridrest" />
<RadzenPanelMenuItem Text="Editing" Icon="view_headline" Path="datagridedit" />
<RadzenPanelMenuItem Text="CSV Export" Icon="view_headline" Path="datagridcsvexport" />
</div>
<RadzenPanelMenuItem Text="Basic" Icon="view_headline" Click="@(() => sidebarExpanded = false)" Path="datagrid" />
<RadzenPanelMenuItem Text="Advanced" Icon="view_headline" Click="@(() => sidebarExpanded = false)" Path="datagridadv" />
<RadzenPanelMenuItem Text="REST" Icon="view_headline" Click="@(() => sidebarExpanded = false)" Path="datagridrest" />
<RadzenPanelMenuItem Text="Editing" Icon="view_headline" Click="@(() => sidebarExpanded = false)" Path="datagridedit" />
<RadzenPanelMenuItem Text="CSV Export" Icon="view_headline" Click="@(() => sidebarExpanded = false)" Path="datagridcsvexport" />
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="DataList" Icon="list_alt">
<div onclick="document.querySelector('.navbar-toggler').click()">
<RadzenPanelMenuItem Text="Basic" Icon="format_list_bulleted" Path="datalist" />
<RadzenPanelMenuItem Text="Pager" Icon="format_list_bulleted" Path="datalistpager" />
</div>
<RadzenPanelMenuItem Text="Basic" Icon="format_list_bulleted" Click="@(() => sidebarExpanded = false)" Path="datalist" />
<RadzenPanelMenuItem Text="Pager" Icon="format_list_bulleted" Click="@(() => sidebarExpanded = false)" Path="datalistpager" />
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Layout" Icon="dashboard">
<div onclick="document.querySelector('.navbar-toggler').click()">
<RadzenPanelMenuItem Text="Layout" Icon="dashboard_customize" Path="layout" />
<RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Path="layoutstack" />
</div>
<RadzenPanelMenuItem Text="Layout" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layout" />
<RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutstack" />
</RadzenPanelMenuItem>
</RadzenPanelMenu>
</RadzenStack>
</RadzenSidebar>
@code {
bool sidebarExpanded = true;
bool sidebarExpanded = false;
}

4
ComponentPractice/ComponentPractice/Components/Pages/DataGrid.razor
Unescape View File

@ -4,7 +4,7 @@
@rendermode RenderMode.InteractiveServer
<RadzenCard class="rz-p-12" style="width: 900px;">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">DataGrid <strong>IQuariable</strong></RadzenText>
<RadzenDataGrid Data="@employees" @bind-Value=@selectedEmployees
AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.Advanced" AllowSorting="true" AllowPaging="true" PageSize="10" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
@ -16,7 +16,7 @@
<RadzenImage Path="@employee.Photo" class="rz-gravatar" AlternateText="@($"{employee.FirstName} {employee.LastName}")" />
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" Frozen="true" Width="160px" />
<RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" Width="160px" />
<RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name" Width="160px" />
<RadzenDataGridColumn Property="@nameof(Employee.Job)" Title="Job" Width="200px" />
<RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" Width="120px" />

4
ComponentPractice/ComponentPractice/Components/Pages/DataGridAdv.razor
Unescape View File

@ -5,7 +5,7 @@
@rendermode RenderMode.InteractiveServer
<RadzenCard class="rz-p-12" style="width: 900px;">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">DataGrid <strong>LoadData Event</strong></RadzenText>
<RadzenButton Text="Reset" Click="@Reset" Style="margin-bottom: 20px"/>
<RadzenDataGrid @ref="grid" Data="@employees" IsLoading="@isLoading" Count="@count" LoadData="@LoadData"
@ -18,7 +18,7 @@
<RadzenImage Path="@employee.Photo" class="rz-gravatar" AlternateText="@($"{employee.FirstName} {employee.LastName}")" />
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" Frozen="true" Width="160px" />
<RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" Width="160px" />
<RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name" Width="160px" />
<RadzenDataGridColumn Property="@nameof(Employee.Job)" Title="Job" Width="200px" />
<RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" Width="120px"

2
ComponentPractice/ComponentPractice/Components/Pages/DataGridCsvExport.razor
Unescape View File

@ -6,7 +6,7 @@
@rendermode RenderMode.InteractiveServer
<RadzenCard class="rz-p-12">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenButton class="mb-4" Text="Export CSV" Icon="wrap_text" Click="@(args => Export("csv"))" />
<RadzenDataGrid @ref="grid2" Data="@employees2"
AllowColumnPicking="true" AllowFiltering="true" AllowPaging="true" AllowSorting="true" ShowPagingSummary="true">

2
ComponentPractice/ComponentPractice/Components/Pages/DataGridEdit.razor
Unescape View File

@ -11,7 +11,7 @@
}
</style>
<RadzenCard class="rz-p-12" style="rz-m-12">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">DataGrid <strong>InLine Editing</strong></RadzenText>
<RadzenButton ButtonStyle="ButtonStyle.Success" Icon="add_circle_outline" Text="Add New Order" Click="@InsertRow" Disabled="@(employeesToInsert.Count > 0)" />
<RadzenDataGrid @ref="grid" TItem="@Employee" Data="@employees" IsLoading="@isLoading" EditMode="DataGridEditMode.Single"

8
ComponentPractice/ComponentPractice/Components/Pages/DataGridREST.razor
Unescape View File

@ -7,7 +7,7 @@
@rendermode RenderMode.InteractiveServer
<RadzenCard class="rz-p-12" Style="width: 900px">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">DataGrid <strong>REST</strong></RadzenText>
<RadzenButton Text="Reset" Click="@Reset" Style="margin-bottom: 20px" />
@ -17,7 +17,7 @@
AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.CheckBoxList" AllowSorting="true">
<Columns>
<RadzenDataGridColumn Property="@nameof(Customer.CustomerID)" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.CompanyName)" Filterable="true" Title="Company" Frozen="true" Width="240px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.CompanyName)" Filterable="true" Title="Company" Width="240px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.ContactTitle)" Filterable="true" Title="Contact" Width="320px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.Address)" Filterable="true" Title="Address" Width="240px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.City)" Filterable="true" Title="City" Width="160px" TextAlign="TextAlign.Center" />
@ -30,7 +30,7 @@
</RadzenDataGrid>
</RadzenCard>
<RadzenCard class="rz-p-12" Style="width: 900px">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">DataGrid <strong>Virtualization & ContextMenu</strong></RadzenText>
<RadzenDataGrid TItem="@Customer" Data="@vtzdCustomers" @bind-Value="selectedVtzdCustomers" Style="height:500px"
@ -40,7 +40,7 @@
AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.CheckBoxList" AllowSorting="true">
<Columns>
<RadzenDataGridColumn Property="@nameof(Customer.CustomerID)" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.CompanyName)" Filterable="true" Title="Company" Frozen="true" Width="240px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.CompanyName)" Filterable="true" Title="Company" Width="240px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.ContactTitle)" Filterable="true" Title="Contact" Width="320px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.Address)" Filterable="true" Title="Address" Width="240px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn Property="@nameof(Customer.City)" Filterable="true" Title="City" Width="160px" TextAlign="TextAlign.Center" />

2
ComponentPractice/ComponentPractice/Components/Pages/DataList.razor
Unescape View File

@ -17,7 +17,7 @@
}
</style>
<RadzenCard class="rz-p-12">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenStack class="rz-p-2" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
<RadzenCheckBox @bind-Value="@allowVirtualization" Name="allowVirtualization"/>
<RadzenLabel Text="Allow virtualization" Component="allowVirtualization"/>

2
ComponentPractice/ComponentPractice/Components/Pages/DataListPager.razor
Unescape View File

@ -4,7 +4,7 @@
@rendermode RenderMode.InteractiveServer
<RadzenCard class="rz-p-12">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenStack class="rz-p-2 rz-border-radius-1" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Style="border: var(--rz-grid-cell-border);">
<RadzenText TextStyle="TextStyle.Body1">Pager density</RadzenText>
<RadzenSelectBar @bind-Value="@density" TextProperty="Text" ValueProperty="Value"

5
ComponentPractice/ComponentPractice/Components/Pages/Home.razor
Unescape View File

@ -7,12 +7,13 @@
<h1>Hello, Radzen!</h1>
<RadzenButton Text="@text" Click="@ButtonClicked"></RadzenButton>
<RadzenText Text="@message"/>
@code {
string text = "Hi";
string message = "";
void ButtonClicked()
{
message = "This is site for practicing Blazor and Radzen Blazor! Please click the menu toggle button on the top-left 😊";
}
}

8
ComponentPractice/ComponentPractice/Components/Pages/Layout.razor
Unescape View File

@ -8,7 +8,7 @@
}
</style>
<RadzenCard class="rz-p-12 rz-m-12">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Sidebar, Header and Footer</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenLayout class="sample-layout">
@ -38,7 +38,7 @@
</RadzenLayout>
</RadzenCard>
<RadzenCard class="rz-p-12 rz-m-12">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Full-height Sidebar</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenLayout class="sample-layout">
@ -65,7 +65,7 @@
</RadzenLayout>
</RadzenCard>
<RadzenCard class="rz-p-12 rz-m-12" >
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Overlay Sidebar</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenLayout class="sample-layout" Style="position: relative">
@ -95,7 +95,7 @@
</RadzenLayout>
</RadzenCard>
<RadzenCard class="rz-p-12 rz-m-12">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Icon Sidebar</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenLayout class="sample-layout">

2
ComponentPractice/ComponentPractice/Components/Pages/LayoutStack.razor
Unescape View File

@ -2,7 +2,7 @@
@rendermode RenderMode.InteractiveServer
<RadzenCard class="rz-p-12 rz-m-12">
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Stack</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
@* Option card *@

Write Preview
Loading…
Cancel
Save