Layout change.

This commit is contained in:
2022-07-13 17:40:38 -07:00
parent dd6437613b
commit d22aca7ff3

View File

@@ -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);
} }