light9 Changeset - 3f0b889c8fa9

Changeset - 3f0b889c8fa9

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

drewp@bigasterisk.com - 20 months ago 2023-05-31 20:50:13
drewp@bigasterisk.com

don't let phone users click on song uris by mistake

3 files changed with 4 insertions and 3 deletions:

light9/ascoltami/Light9AscoltamiUi.ts

light9/ascoltami/index.html

light9/web/ResourceDisplay.ts

0 comments (0 inline, 0 general)

light9/ascoltami/Light9AscoltamiUi.ts

➞

Show inline comments

@@ @@ -117,25 +117,25 @@ export class Light9AscoltamiUi extends L @@
       <div id="grow">
         <span>
           <div id="songList">
             <table>
               ${this.songList.map(
                 (song) => html`
                   <tr
                     class="row ${classMap({
                       playing: !!(this.song && song.equals(this.song)),
                     })}"
+                  >
                     <td><resource-display .uri=${song}></resource-display></td>
+                    <td><resource-display .uri=${song} noclick></resource-display></td>
                     <td>
                       <button @click=${this.onSelectSong.bind(this, song)}>
                         <span>Select</span>
                       </button>
                     </td>
                   </tr>
+                `
               )}
             </table>
           </div> </span
         ><span>
           <div id="right">

light9/ascoltami/index.html

➞

Show inline comments

@@ @@ -33,25 +33,25 @@ @@
+      }
       #page > div,
       #page > p {
         flex: 0 1 auto;
         margin: 0;
+      }
       light9-ascoltami-ui {
         flex: 1 1 auto;
+      }
     </style>
     <meta
       name="viewport"
-      content="user-scalable=no, width=500, initial-scale=1"
+      content="user-scalable=no, width=device-width, initial-scale=.7"
     />
     <script type="module" src="../ascoltami/Light9AscoltamiUi"></script>
   </head>
   <body>
     <h1>ascoltami on {{host}}</h1>
     <div id="page">
       <div class="songs" style="display: none"></div>
       <div class="dimStalled">
         <table>
           <tr>
             <td colspan="3">

light9/web/ResourceDisplay.ts

➞

Show inline comments

@@ @@ -68,24 +68,25 @@ export class ResourceDisplay extends Lit @@
         <a href="${this.href()}" id="uri"> <!-- type icon goes here -->${this.label}</a>
         ${this.rename ? html`<button @click=${this.onRename}>Rename</button>` : ""} </span
       >${renameDialog}`;
     //
+  }
   @property() uri?: NamedNode;
   @state() label: string = "";
   @state() renameDialogOpen = false;
   @state() renameTo = "";
   @property({ type: Boolean }) rename: boolean = false;
   @property({ type: Boolean }) noclick: boolean = false;
   @property({ type: Boolean }) minor: boolean = false;
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.onUri();
     });
+  }
   updated(changedProperties: PropertyValues) {
     if (changedProperties.has("uri")) {
@@ @@ -103,25 +104,25 @@ export class ResourceDisplay extends Lit @@
       this.graph.runHandler(this.compile.bind(this, this.graph), `label for ${this.uri.id}`);
+    }
+  }
   private compile(graph: SyncedGraph) {
     if (this.uri === undefined) {
       return;
     } else {
       this.label = this.graph.labelOrTail(this.uri);
+    }
+  }
   private href(): string {
     if (!this.uri) {
+    if (!this.uri || this.noclick) {
       return "javascript:;";
+    }
     return this.uri.value;
+  }
   private resClasses() {
     return this.minor ? "resource minor" : "resource";
+  }
   private onRename() {
     this.renameTo = this.label;
     this.renameDialogOpen = true;

0 comments (0 inline, 0 general)