fix(editors/subscription): several styling issues (openscd#661)

* fix(editors/subscription): several style issues * style(editors/subscription): use common font-weight * fix(editors/subscription): remove unused import statement * test(editors/subscription): update snapshots * test(editors/subscription): update snapshots
sprinteins · Apr 4, 2022 · b9f5555 · b9f5555
1 parent 4a5549d
commit b9f5555
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 124 deletions.
diff --git a/src/editors/Subscription.ts b/src/editors/Subscription.ts
@@ -12,14 +12,12 @@ export default class SubscriptionABBPlugin extends LitElement {
   doc!: XMLDocument;
 
   render(): TemplateResult {
-    return html`
-    <div id="containerTemplates">
-      <section>
-        <publisher-goose-list .doc=${this.doc}></publisher-goose-list>
-      </section>
-      <section>
-        <subscriber-ied-list-goose .doc=${this.doc}></subscriber-ied-list-goose>
-      </section>
+    return html` <div class="container">
+      <publisher-goose-list class="row" .doc=${this.doc}></publisher-goose-list>
+      <subscriber-ied-list-goose
+        class="row"
+        .doc=${this.doc}
+      ></subscriber-ied-list-goose>
     </div>`;
   }
 
@@ -28,22 +26,18 @@ export default class SubscriptionABBPlugin extends LitElement {
       width: 100vw;
     }
 
-    section {
-      width: 49vw;
+    .container {
+      display: flex;
+      padding: 8px 6px 16px;
+      height: 86vh;
     }
 
-    #containerTemplates {
-      display: grid;
-      grid-gap: 12px;
-      padding: 8px 12px 16px;
-      box-sizing: border-box;
-      grid-template-columns: repeat(auto-fit, minmax(316px, auto));
-    }
-
-    @media (max-width: 387px) {
-      #containerTemplates {
-        grid-template-columns: repeat(auto-fit, minmax(196px, auto));
-      }
+    .row {
+      flex: 50%;
+      margin: 0px 6px 0px;
+      min-width: 300px;
+      height: 100%;
+      overflow-y: scroll;
     }
   `;
 }
diff --git a/src/editors/subscription/foundation.ts b/src/editors/subscription/foundation.ts
@@ -105,6 +105,10 @@ export const styles = css`
     cursor: inherit !important;
     text-decoration: none !important;
   }
+
+  mwc-list-item[noninteractive] {
+    font-weight: 500;
+  }
 `;
 
 declare global {

diff --git a/src/editors/subscription/publisher-goose-list.ts b/src/editors/subscription/publisher-goose-list.ts
@@ -62,14 +62,14 @@ export class PublisherGOOSEList extends LitElement {
   }
 
   render(): TemplateResult {
-    return html` <section>
+    return html` <section tabindex="0">
       <h1>${translate('subscription.publisherGoose.title')}</h1>
       <filtered-list>
         ${this.ieds.map(
           ied =>
             html`
               <mwc-list-item noninteractive graphic="icon">
-                <span class="iedListTitle">${getNameAttribute(ied)}</span>
+                <span>${getNameAttribute(ied)}</span>
                 <mwc-icon slot="graphic">developer_board</mwc-icon>
               </mwc-list-item>
               <li divider role="separator"></li>
@@ -84,14 +84,5 @@ export class PublisherGOOSEList extends LitElement {
 
   static styles = css`
     ${styles}
-
-    filtered-list {
-      height: 100vh;
-      overflow-y: scroll;
-    }
-
-    .iedListTitle {
-      font-weight: bold;
-    }
   `;
 }
diff --git a/src/editors/subscription/subscriber-ied-list-goose.ts b/src/editors/subscription/subscriber-ied-list-goose.ts
@@ -112,7 +112,7 @@ export class SubscriberIEDListGoose extends LitElement {
     this.onGOOSEDataSetEvent = this.onGOOSEDataSetEvent.bind(this);
     this.onIEDSubscriptionEvent = this.onIEDSubscriptionEvent.bind(this);
 
-    const parentDiv = this.closest('div[id="containerTemplates"]');
+    const parentDiv = this.closest('.container');
     if (parentDiv) {
       parentDiv.addEventListener('goose-dataset', this.onGOOSEDataSetEvent);
       parentDiv.addEventListener(
@@ -424,7 +424,7 @@ export class SubscriberIEDListGoose extends LitElement {
       localState.currentGseControl?.getAttribute('name') ?? undefined;
 
     return html`
-      <section>
+      <section tabindex="0">
         <h1>
           ${translate('subscription.subscriberIed.title', {
             selected: gseControlName
@@ -442,7 +442,7 @@ export class SubscriberIEDListGoose extends LitElement {
             </div>`
           : html`<mwc-list>
               <mwc-list-item noninteractive>
-                <span class="iedListTitle">${translate(
+                <span>${translate(
                   'subscription.subscriberIed.noGooseMessageSelected'
                 )}</span>
               </mwc-list-item>
@@ -454,20 +454,5 @@ export class SubscriberIEDListGoose extends LitElement {
 
   static styles = css`
     ${styles}
-
-    h1 {
-      overflow: unset;
-      white-space: unset;
-      text-overflow: unset;
-    }
-
-    .subscriberWrapper {
-      height: 100vh;
-      overflow-y: scroll;
-    }
-
-    .iedListTitle {
-      font-weight: bold;
-    }
   `;
 }