embed mode: wrap on mobile! (#267)

- add media breakpoint to wrap right toolbar in embed mode - bump version to 0.13.3
webrecorder · Nov 2, 2024 · e463296 · e463296
1 parent ad52d82
commit e463296
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@webrecorder/archivewebpage",
   "productName": "ArchiveWeb.page",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "main": "index.js",
   "description": "Create Web Archives directly in your browser",
   "repository": {

diff --git a/src/ui/coll.ts b/src/ui/coll.ts
@@ -75,6 +75,17 @@ class WrRecColl extends Item {
         display: inline-block;
       }
 
+      @media screen and (max-width: 768px) {
+        div.has-addons {
+          flex-wrap: wrap;
+          justify-content: flex-end;
+        }
+
+        div.has-addons form {
+          display: contents;
+        }
+      }
+
       ${Item.compStyles}
     `;
   }
@@ -151,48 +162,50 @@ class WrRecColl extends Item {
     }
 
     return html`
-      <a
-        href="#"
-        role="button"
-        class="button is-borderless"
-        style="margin-top: 2px"
-        id="fullscreen"
-        @click="${this.onFullscreenToggle}"
-        @keyup="${clickOnSpacebarPress}"
-        title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
-        aria-label="${this.isFullscreen ? "Exit Fullscreen" : "Fullscreen"}"
-      >
-        <span class="icon is-small">
-          <fa-icon
-            size="1.0em"
-            class="has-text-grey"
-            aria-hidden="true"
-            .svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
-          ></fa-icon>
+      <div class="is-flex is-flex-direction-row">
+        <a
+          href="#"
+          role="button"
+          class="button is-borderless"
+          style="margin-top: 2px"
+          id="fullscreen"
+          @click="${this.onFullscreenToggle}"
+          @keyup="${clickOnSpacebarPress}"
+          title="${this.isFullscreen ? "Exit Full Screen" : "Full Screen"}"
+          aria-label="${this.isFullscreen ? "Exit Fullscreen" : "Fullscreen"}"
+        >
+          <span class="icon is-small">
+            <fa-icon
+              size="1.0em"
+              class="has-text-grey"
+              aria-hidden="true"
+              .svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"
+            ></fa-icon>
+          </span>
+        </a>
+        <span class="rec-button" title="Archiving">
+          <span class="dot"></span>
+          <span class="size-label">${prettyBytes(this.totalSize)}</span>
         </span>
-      </a>
-      <span class="rec-button" title="Archiving">
-        <span class="dot"></span>
-        <span class="size-label">${prettyBytes(this.totalSize)}</span>
-      </span>
-      ${this.showFinish
-        ? html` <button
-            class="button is-primary-new"
-            @click="${this.onEmbedFinish}"
-            type="button"
-          >
-            Finish
-          </button>`
-        : html`
-            <a
+        ${this.showFinish
+          ? html` <button
               class="button is-primary-new"
-              role="button"
-              download="my-archive.wacz"
-              href="${this.downloadUrl}"
-              target="_blank"
-              >Download</a
+              @click="${this.onEmbedFinish}"
+              type="button"
             >
-          `}
+              Finish
+            </button>`
+          : html`
+              <a
+                class="button is-primary-new"
+                role="button"
+                download="my-archive.wacz"
+                href="${this.downloadUrl}"
+                target="_blank"
+                >Download</a
+              >
+            `}
+      </div>
     `;
   }