Layout change.
This commit is contained in:
@@ -35,8 +35,7 @@
|
|||||||
|
|
||||||
if (isOpen_AddAssetType) {
|
if (isOpen_AddAssetType) {
|
||||||
openAddAssetTypeButton.classList.add("reject-button");
|
openAddAssetTypeButton.classList.add("reject-button");
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
openAddAssetTypeButton.classList.remove("reject-button");
|
openAddAssetTypeButton.classList.remove("reject-button");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -72,12 +71,14 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="listContainer">
|
<div class="listContainer">
|
||||||
<Dialog bind:open={openDialog} surface$style="width: 850px; max-width: calc(100vw - 32px);" on:SMUIDialog:closed={dialogClosed}>
|
<Dialog bind:open={openDialog} surface$style="width: 850px; max-width: calc(100vw - 32px);"
|
||||||
|
on:SMUIDialog:closed={dialogClosed}>
|
||||||
<Title id="large-scroll-title">Asset Types</Title>
|
<Title id="large-scroll-title">Asset Types</Title>
|
||||||
<Content id="large-scroll-content">
|
<Content id="large-scroll-content">
|
||||||
<List class="assetTypesList" twoLine singleSelection bind:selectedIndex={assetTypeDialogSelectedIndex}>
|
<List class="assetTypesList" twoLine singleSelection bind:selectedIndex={assetTypeDialogSelectedIndex}>
|
||||||
{#each $assetTypes as type}
|
{#each $assetTypes as type}
|
||||||
<Item on:SMUI:action={() => (assetTypeDialogSelectedValue = type)} selected={assetTypeDialogSelectedValue === type}>
|
<Item on:SMUI:action={() => (assetTypeDialogSelectedValue = type)}
|
||||||
|
selected={assetTypeDialogSelectedValue === type}>
|
||||||
<Text>
|
<Text>
|
||||||
<PrimaryText>{type.name}</PrimaryText>
|
<PrimaryText>{type.name}</PrimaryText>
|
||||||
<SecondaryText>{type.description}</SecondaryText>
|
<SecondaryText>{type.description}</SecondaryText>
|
||||||
@@ -96,8 +97,6 @@
|
|||||||
</Actions>
|
</Actions>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
<div class="columnContainer">
|
|
||||||
<div class="listColumn">
|
|
||||||
<h3 style="display: inline-block">Asset Types</h3>
|
<h3 style="display: inline-block">Asset Types</h3>
|
||||||
<Button class="addBtn" on:click={openAssetTypesDialog}>
|
<Button class="addBtn" on:click={openAssetTypesDialog}>
|
||||||
<Label>Add...</Label>
|
<Label>Add...</Label>
|
||||||
@@ -109,9 +108,6 @@
|
|||||||
</Item>
|
</Item>
|
||||||
{/each}
|
{/each}
|
||||||
</List>
|
</List>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="fieldColumn">
|
|
||||||
<div style="grid-column: 1/span 1">
|
<div style="grid-column: 1/span 1">
|
||||||
<TextField type="text" style="width: 100%" bind:value={assetId} label="AssetId">
|
<TextField type="text" style="width: 100%" bind:value={assetId} label="AssetId">
|
||||||
</TextField>
|
</TextField>
|
||||||
@@ -120,39 +116,35 @@
|
|||||||
<TextField type="text" style="width: 100%" bind:value={serial} label="Serial">
|
<TextField type="text" style="width: 100%" bind:value={serial} label="Serial">
|
||||||
</TextField>
|
</TextField>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="text-align: right">
|
||||||
|
<Button on:click={addAsset} variant="raised">Add</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button on:click={addAsset}>Add</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.columnContainer {
|
.columnContainer {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr);
|
grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.addBtn) {
|
:global(.addBtn) {
|
||||||
margin-left: 4rem;
|
margin-left: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.assetTypeList) {
|
:global(.assetTypeList) {
|
||||||
--mdc-ripple-color: blue;
|
--mdc-ripple-color: blue;
|
||||||
--mdc-ripple-selected-opacity: 0.2;
|
--mdc-ripple-selected-opacity: 0.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listContainer {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 1rem;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
div.listContainer h2 {
|
div.listContainer h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.list {
|
|
||||||
//border: 2px solid #4f4e4e;
|
|
||||||
}
|
|
||||||
.listItem:nth-child(even) {
|
.listItem:nth-child(even) {
|
||||||
/*background: #f6f6f6;*/
|
/*background: #f6f6f6;*/
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem {
|
.listItem {
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -163,9 +155,11 @@
|
|||||||
padding-top: 0.4rem;
|
padding-top: 0.4rem;
|
||||||
border-bottom: 1px solid gray;
|
border-bottom: 1px solid gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:last-child {
|
.listItem:last-child {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem.selected {
|
.listItem.selected {
|
||||||
background-color: rgba(255, 255, 0, 0.38);
|
background-color: rgba(255, 255, 0, 0.38);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user