mobile viewport

stevenrskelton · Mar 19, 2024 · 11ae33c · 11ae33c
1 parent 042636f
commit 11ae33c
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/_pages/rankings.html b/_pages/rankings.html
@@ -183,17 +183,12 @@ <h1 class="display-6 fw-bold text-center">Influencer Rankings</h1>
                 if (screen.availWidth < 800) {
                   const height = 50;
                   return html`
-                  <li class="list-group-item">
-                    <div style="display:flex;">
+                  <li class="list-group-item" style="padding:6px">
+                    <div style="display:flex;align-items: center;">
                       <img src="${item.profileUrl}" style="width:${height}px;height:${height}px;border-radius:50%;">
                       <div style="flex-grow:1;padding-left:12px;">
-                        <div style="display:flex;">
-                          <div style="text-align:left">
-                            <h5 class="card-title">${this.profileTitle(item)}</h5>
-                          </div>
-                          <div class="card-text text-end" style="flex-grow:1;font-weight:bold">
-                            ${tradeCount} Trade${tradeCount == 1 ? '' : 's'}<br>
-                          </div>
+                        <div style="text-align:left">
+                          <h5 class="card-title">${this.profileTitle(item)}</h5>
                         </div>
                         <div style="display:flex">
                           <div style="text-align:left">
@@ -203,23 +198,28 @@ <h5 class="card-title">${this.profileTitle(item)}</h5>
                         </div>
                       </div>
                     </div>
-                    <div style="display:flex">
+                    <div style="display:flex;align-items: center;">
                       ${a}${this.profileTypeImage(item)}${a != null ? html`</a>` : null}
-                      <div style="flex-grow:1;line-height:1.3;" class="card-text text-end">
-                        ${item.stocks.map(
-                            (stock) => {
-                                const selected = this.selectedStockItem != null &&
-                                      this.selectedStockItem.symbol == stock.symbol ? "btn-secondary active" : "btn-outline-secondary";
-                                return html`<button
-                                  type="button" style="padding:0 10px 0 10px;margin-left:4px;"
-                                  @click=${() => this.selectStockEvent(stock) }
-                                  class="btn ${selected} btn-sm"
-                                >${stock.symbol}</button>`
-                            }
-                        )}
+                       <div style="display:flex;">
+                        <div class="card-text text-end" style="flex-grow:1;font-weight:bold">
+                          ${tradeCount} Trade${tradeCount == 1 ? '' : 's'}<br>
+                        </div>
                       </div>
                       <pie-chart size="${height}" positive="${positivePercent}" negative="${negativePercent}"></pie-chart>
                     </div>
+                    <div style="flex-grow:1;line-height:1.3;" class="card-text text-end">
+                      ${item.stocks.map(
+                          (stock) => {
+                              const selected = this.selectedStockItem != null &&
+                                    this.selectedStockItem.symbol == stock.symbol ? "btn-secondary active" : "btn-outline-secondary";
+                              return html`<button
+                                type="button" style="padding:0 10px 0 10px;margin-left:4px;"
+                                @click=${() => this.selectStockEvent(stock) }
+                                class="btn ${selected} btn-sm"
+                              >${stock.symbol}</button>`
+                          }
+                      )}
+                    </div>
                   </li>`
                 } else {
                   const height = this.height ?? 64;