AddPlug Progress

AddPlug first prototype done + responsive

src/Elektrifikatsiya/Elektrifikatsiya/Pages/AddPlug.razor

@@ -2,17 +2,18 @@
 @using Blazorise.Components;
 @using Elektrifikatsiya.Models;
 @inject IVersionProvider VersionProvider
-
+<Div >
-<Row Height=Height.Is50 Padding="Padding.Is3.OnDesktop.Is0" style="border-bottom-style:solid; border-bottom-color:#1a237e">
+	<Row Style="height:50%; width:100%" Padding="Padding.Is3.OnDesktop.Is0">
 		<Row Style="height:90%; width:100%">
-		<Column style="align-content:center" ColumnSize="ColumnSize.Is4.Is4.WithOffset">
+			<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
+			<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
 				<Bar Breakpoint="Breakpoint.Desktop"
 					 Background="Background.White"
 					 ThemeContrast="ThemeContrast.None"
 					 Shadow="Shadow.Remove"
 					 Border="Border.Is1.RoundedTop">
 					<BarBrand>
-					Add plug via wifi
+						Add a plug via wifi
 					</BarBrand>
 				</Bar>
 				<ListView Class="w-100"
@@ -26,11 +27,6 @@
 						<ListGroupItem>
 							<Row>
 								<Column ColumnSize="ColumnSize.Is7">
-								<Row>
-									<Column>
-										<Heading Size="HeadingSize.Is6" Margin="Margin.Is1.FromBottom">@context.Item.Name</Heading>
-									</Column>
-								</Row>
 									<Row Width="Width.Is100">
 										<Column>
 											<Small>IP: @context.Item.Address</Small>
@@ -49,16 +45,39 @@
 			</Column>
 		</Row>
 	</Row>
-<Row Height="Height.Is50">
+	<Row Style="height:50%; width:100%; border-top-style:solid; border-top-color:#1a237e">
+		<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is1"></Column>
+		<Column ColumnSize="ColumnSize.Is4.OnDesktop.Is12">
+			<Row Style="height:15%; width:100%"></Row>
+			<Row Style="height:10%; width:100%">
+				<Bar Breakpoint="Breakpoint.Desktop"
+					 Background="Background.White"
+					 ThemeContrast="ThemeContrast.None"
+					 Shadow="Shadow.Remove"
+					 Border="Border.Is1.RoundedTop"
+					 Style="width:100%">
+					<BarBrand>
+						Add a plug via IP
+					</BarBrand>
+				</Bar>
+				<ListGroup Style="width:100%; border-radius: 0px 0px">
+					<ListGroupItem Color="Color.Default">
 						<Form>
 							<Field Horizontal>
 								<FieldBody ColumnSize="ColumnSize.Is12">
 									<TextEdit Placeholder="Enter the Device IP here" />
-				<Button style="background-color:#1a237e; color:white" Type="ButtonType.Submit" PreventDefaultOnSubmit>Submit</Button>
+									<br>
+									<Button style="background-color:#1a237e; color:white" Type="ButtonType.Submit" PreventDefaultOnSubmit>CONNECT</Button>
 								</FieldBody>
 							</Field>
 						</Form>
+					</ListGroupItem>
+				</ListGroup>
 			</Row>
+			<Row Style="height:75%; width:100%"></Row>
+		</Column>
+	</Row>
+</Div>
 
 @code {
 	List<Device> plugs = new List<Device>() { new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF"), new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF"), new Device("Placeholder", "Plug", System.Net.IPAddress.Broadcast, 60, "Oldin", "4AHINF") };

src/Elektrifikatsiya/Elektrifikatsiya/Pages/Dashboard.razor

@@ -12,7 +12,7 @@
 					  ValueField="@((_)=>(""))"
 					  Mode="ListGroupMode.Static">
 				<ItemTemplate>
-					<ListGroupItem>
+					<ListGroupItem Border="Border.OnBottom">
 						<Row>
 							<Column ColumnSize="ColumnSize.Is8">
 								<Row>
@@ -52,7 +52,7 @@
 						<Heading Size="HeadingSize.Is6" Margin="Margin.Is2.FromBottom">@context.Item.EventName</Heading>
 						<Small>@context.Item.Date</Small>
 					</Div>
-					<Paragraph Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph>
+					<Paragraph Border="Border.OnBottom" Margin="Margin.Is2.FromBottom">@context.Item.Description</Paragraph>
 				</ItemTemplate>
 			</ListView>
 		</Column>