Settings Page responisve

This commit is contained in:
Aldin296
2023-03-22 09:27:28 +01:00
parent dc6a39bd7b
commit ff37097c2f
4 changed files with 120 additions and 110 deletions
@@ -2,8 +2,10 @@
@using Blazorise.Components;
@using Elektrifikatsiya.Models;
@using System.Net
<Row Style="width: 100%; height: 100%">
<Column ColumnSize="ColumnSize.Is4">
<Div>
<Row Style="width: 100%; height: 100%">
<Div Display="Display.Flex.Row.OnDesktop" Margin=" Margin.Is3.FromBottom" Width="Width.Is100">
<Column ColumnSize="ColumnSize.Is5.OnDesktop.Is12.OnMobile">
<Bar Breakpoint="Breakpoint.Desktop"
Background="Background.White"
ThemeContrast="ThemeContrast.None"
@@ -17,14 +19,14 @@
Data="@plugs"
TextField="@((_)=>(""))"
ValueField="@((_)=>(""))"
Style="border-radius: 0px 0px"
Height="100%"
MaxHeight="90%">
<ItemTemplate>
<ListGroupItem Border="Border.OnBottom">
<Row>
<Column ColumnSize="ColumnSize.Is5">
<Column ColumnSize="ColumnSize.Is6">
<Row>
<Column ColumnSize="ColumnSize.Is7">
<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
@@ -38,22 +40,28 @@
</Column>
</Row>
</Column>
<Column ColumnSize="ColumnSize.Is2">
<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is7.OnMobile">
<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
<BarIcon IconName="IconName.Bolt" />
</Button>
</Column>
<Column ColumnSize="ColumnSize.Is5">
<Button Position="Position.Absolute.Top.Is50.Start.Is50.Translate.Middle" Color="Color.Dark" Outline>
<br />
<br />
<Row>
<Column ColumnSize="ColumnSize.Is1.OnDesktop">
<Button Position="Position.Absolute.Top.Is50.Start.Is100.Translate.Middle" Color="Color.Dark" Outline>
<BarIcon IconName="IconName.Pen" />
</Button>
</Column>
</Row>
</Row>
</ListGroupItem>
</ItemTemplate>
</ListView>
</Column>
<Column ColumnSize="ColumnSize.Is6">
<Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile" Margin="Margin.Is3.OnMobile">
<Field>
<FieldLabel>
<h5>
@@ -118,8 +126,10 @@
<Button Color="Color.Primary">Save</Button>
</Column>
</Column>
</Div>
</Row>
</Div>
</Row>
@code {