[Layout] Design update on items (#1145)

* Layout improvement

This will Fixes #1012 Will merge discription tab and the item information tab into the item information tab. For any that have technology information on the left this still needs to be sorted.

* Update TabInfo

This adds the standard description name to the main tab.

* Update color

This improves the color to match more the other items

* Updated scss rules

Ihave updated the scss placement, moved some to foundry.scss and the others that where sr5 specific I put in bundle.scss

src/css/bundle.scss

@@ -89,6 +89,120 @@
     .show-situation-modifiers-application {
         @include rollable;
     }
+    .grid-2-col{
+        display: grid;
+    }
+
+    // new SIN Layout
+    .license-section .list-item-content,
+    .license-section .list-item.item-section .list-item-content {
+        display: flex !important;
+        flex-direction: row;
+        justify-content: flex-start !important;
+        margin: 0 !important;
+        padding: 1px !important;
+    }
+
+    /* New or updated rules */
+    .license-section .item-text.rtg.rate,
+    .license-section .rtg-rate.item-text {  /* Updated */
+        margin-left: 0;
+        padding-left: 0;
+        text-align: left;
+        width: 22px;  /* Updated */
+    }
+    //Header Rating
+    .license-section .item-text.rtg.rate-header {
+        max-width: 2em;
+        margin-left: -1em;
+    }
+    //Header detail
+    .detail{
+        margin-left: 1em !important;
+    }
+    //Rating width
+    .license-section .list-item .rtg-rate.item-text {
+        max-width: 2em;
+    }
+    //Item Name field size
+    .license-section .list-item .rtg-rate.item-text {
+        max-width: 1em;
+    }
+    .item-name-field {
+        max-width: 11em;  /* Set to your desired max width */
+    }
+
+    .display.left.name-display {
+        width: 100%;  /* Takes the maximum width of the parent */
+        max-width: 100%;  /* Optional, ensures it doesn't go beyond parent */
+    }
+    // This class is only used for sin license descriptions and seems to be mostly a hack to get the description to better align with the license rating.
+    .display.desc-sin {
+        margin-left: 0.9em;
+    }
+    .license-section .list-item.item-section .item-left .item-text,
+    .license-section .list-item .item-left .item-text.item-name-header {
+        flex-basis: calc(15% - 1em);
+        text-align: left;
+    }
+
+    .item-text.item-name-header {
+        /* Set to your desired width */
+        max-width: 11em;  /* Optional, ensures it doesn't go beyond the set width */
+    }
+
+    .license-section .list-item.item-section .item-text.rtg.rate,
+    .license-section .list-item .rtg-rate.item-text {  /* Updated */
+        flex-basis: calc(25% - 1em);
+        text-align: left;
+        width: 22px;  /* Updated */
+    }
+
+    .license-section .list-item.item-section .item-text.desc.detail,
+    .license-section .list-item {
+        flex-basis: calc(25% - 1em);
+        text-align: left;
+    }
+
+    /* Specifics for the rtg-rate input field */
+    .license-section .list-item .rtg-rate.item-text input {  /* Updated */
+        width: 22px;  /* Updated */
+    }
+
+    // Specific em
+    .license-section .sr5 .list-header .list-item-content .item-text.desc,
+    .license-section .sr5 .list-item .list-item-content .item-text.desc {
+        width: 30em;
+        margin-right: 5px;
+    }
+
+    .license-section .item-left {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .license-section .item-left .item-text {
+        align-self: flex-start;
+    }
+
+    .license-section .sr5 .list-item .list-item-content .item-text.desc {
+        width: 30em !important;
+        margin-left: -1em !important;
+        text-align: left;
+    }
+
+    a.inventory-remove.action-icon.roll {
+        padding: 0.5em;
+        padding-left: 0.1em;
+    }
+    a.inventory-edit.action-icon.roll {
+        padding: 0.5em;
+    }
+    span.selection-inventory {
+        display: flex;
+        margin: 0.2em;
+    }
 }
 
 .align-items-center {
@@ -1161,50 +1275,8 @@ input[type='text'].display {
         color: $pdfColor;
     }
 }
-
-/** Replicate Foundry .dialog stiling for flex row buttons. FormDialog sublcasses simply adding class dialog will
- * otherwise cause issues with custom button styling.
- */
-.form-dialog .window-content .dialog-buttons {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-.form-dialog .window-content .dialog-buttons>* {
-    flex: 1;
-}
-
-.dialog-button.remove-token-modifiers-from-scene,
-.dialog-button.remove-modifiers-from-target{
-    background-color: $bgrButton;
-}
-.far-right {
-    justify-content: center;
-    right: -150px;
-}
 //END SR5 Style
 
-
-.list-header.item-section[data-item-id="weapon"][data-item-type=""] {
-    color: $yellow;  /* set the color to yellow */
-    font-size: small;
-}
-
-.common-test{
-    margin-bottom: 4px;
-    margin-top: 4px;
-    color: $white;
-    display: flex;
-    .test-icon {
-        width: 17px;
-        height: 17px;
-        margin-left: 5px;
-        margin-bottom: 0;
-        border: 0;
-    }
-}
-
 .custom-item-element {
     color: $white;               /* Text color */
 }
@@ -1247,121 +1319,4 @@ input[type='text'].display {
 }
 .SR5 tr p:not(th p) {
     padding-left: 10px;  /* Padding on the left */
-}
-
-.fas.fa-file-pdf //.fas.fa-suitcase.sr5, .fas.fa-book-open.sr5 For now these can´t get changed
-{
-    color: $pdfColor;
-}
-
-// Test new SIN Layout
-
-.license-section .list-item-content,
-.license-section .list-item.item-section .list-item-content {
-    display: flex !important;
-    flex-direction: row;
-    justify-content: flex-start !important;
-    margin: 0 !important;
-    padding: 1px !important;
-}
-
-/* New or updated rules */
-.license-section .item-text.rtg.rate,
-.license-section .rtg-rate.item-text {  /* Updated */
-    margin-left: 0;
-    padding-left: 0;
-    text-align: left;
-    width: 22px;  /* Updated */
-}
-//Header Rating
-.license-section .item-text.rtg.rate-header {
-    max-width: 2em;
-    margin-left: -1em;
-}
-//Header detail
-.detail{
-    margin-left: 1em !important;
-}
-//Rating width
-.license-section .list-item .rtg-rate.item-text {
-    max-width: 2em;
-}
-//Item Name field size
-.license-section .list-item .rtg-rate.item-text {
-    max-width: 1em;
-}
-.item-name-field {
-    max-width: 11em;  /* Set to your desired max width */
-}
-
-.display.left.name-display {
-    width: 100%;  /* Takes the maximum width of the parent */
-    max-width: 100%;  /* Optional, ensures it doesn't go beyond parent */
-}
-// This class is only used for sin license descriptions and seems to be mostly a hack to get the description to better align with the license rating.
-.display.desc-sin {
-    margin-left: 0.9em;
-}
-.license-section .list-item.item-section .item-left .item-text,
-.license-section .list-item .item-left .item-text.item-name-header {
-    flex-basis: calc(15% - 1em);
-    text-align: left;
-}
-
-.item-text.item-name-header {
-    /* Set to your desired width */
-    max-width: 11em;  /* Optional, ensures it doesn't go beyond the set width */
-}
-
-.license-section .list-item.item-section .item-text.rtg.rate,
-.license-section .list-item .rtg-rate.item-text {  /* Updated */
-    flex-basis: calc(25% - 1em);
-    text-align: left;
-    width: 22px;  /* Updated */
-}
-
-.license-section .list-item.item-section .item-text.desc.detail,
-.license-section .list-item {
-    flex-basis: calc(25% - 1em);
-    text-align: left;
-}
-
-/* Specifics for the rtg-rate input field */
-.license-section .list-item .rtg-rate.item-text input {  /* Updated */
-    width: 22px;  /* Updated */
-}
-
-// Specific em
-.license-section .sr5 .list-header .list-item-content .item-text.desc,
-.license-section .sr5 .list-item .list-item-content .item-text.desc {
-    width: 30em;
-    margin-right: 5px;
-}
-
-.license-section .item-left {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.license-section .item-left .item-text {
-    align-self: flex-start;
-}
-
-.license-section .sr5 .list-item .list-item-content .item-text.desc {
-    width: 30em !important;
-    margin-left: -1em !important;
-    text-align: left;
-}
-
-a.inventory-remove.action-icon.roll {
-    padding: 0.5em;
-    padding-left: 0.1em;
-}
-a.inventory-edit.action-icon.roll {
-    padding: 0.5em;
-}
-span.selection-inventory {
-    display: flex;
-    margin: 0.2em;
 }

src/css/foundry.scss

@@ -177,3 +177,47 @@ input[type='text'].display {
         }
     }
 }
+/** Replicate Foundry .dialog stiling for flex row buttons. FormDialog sublcasses simply adding class dialog will
+ * otherwise cause issues with custom button styling.
+ */
+ .form-dialog .window-content .dialog-buttons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.form-dialog .window-content .dialog-buttons>* {
+    flex: 1;
+}
+
+.dialog-button.remove-token-modifiers-from-scene,
+.dialog-button.remove-modifiers-from-target{
+    background-color: $bgrButton;
+}
+.far-right {
+    justify-content: center;
+    right: -150px;
+}
+
+.list-header.item-section[data-item-id="weapon"][data-item-type=""] {
+    color: $yellow;  /* set the color to yellow */
+    font-size: small;
+}
+
+.common-test{
+    margin-bottom: 4px;
+    margin-top: 4px;
+    color: $white;
+    display: flex;
+    .test-icon {
+        width: 17px;
+        height: 17px;
+        margin-left: 5px;
+        margin-bottom: 0;
+        border: 0;
+    }
+}
+.fas.fa-file-pdf //.fas.fa-suitcase.sr5, .fas.fa-book-open.sr5 For now these can´t get changed
+{
+    color: $pdfColor;
+}

src/css/item.scss

@@ -121,9 +121,13 @@
         height: 100%;
         min-height: 16em;
         overflow-y: auto;
+        grid-column-start: 2; //will be ignored by flex and is used to place when grid is on
     }
     .item-form {
         padding: 0 0.5em;
+        &.des{
+            max-width: 14em;
+        }
         .header {
             @include title;
             font-size: 1.75em;
@@ -134,13 +138,19 @@
             justify-content: space-between;
             align-content: center;
             padding: 0.1em 0.25em;
+            &.advanced{
+                color: $yellow;
+            }
             > * {
                 flex: 1;
             }
             .label {
                 color: $light;
                 font-size: 1.15em;
                 @include systemFonts;
+                &.advanced{
+                    color: $yellow;
+                }
             }
             .inputs {
                 display: flex;

src/templates/item/contact.html

@@ -1,16 +1,10 @@
 <form class="{{cssClass}} wholesheet" autocomplete="off">
     {{> "systems/shadowrun5e/dist/templates/item/parts/header.html" }}
     <nav class="tabs" data-group="primary">
-        <a class="item" data-tab="description">{{localize "SR5.Description"}}</a>
-        <a class="item" data-tab="info">{{localize "SR5.Information"}}</a>
+        <a class="item" data-tab="info">{{localize "SR5.Description"}}</a>
         <a class="item" data-tab="effects">{{ localize "SR5.Effects" }}</a>
     </nav>
     <section class="sheetbody">
-        <div class="tab" data-group="primary" data-tab="description">
-            <div class="flexrow align-start nowrap full-height">
-                {{> "systems/shadowrun5e/dist/templates/item/parts/description.html"}}
-            </div>
-        </div>
         <div class="tab" data-group="primary" data-tab="info">
             <div class="tabbody">
                 <div class="inventory">