Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Fix padding issues of project headers on mobile
Sebastian Martinez committed 2 years ago
commit 31be78144f3f6828853c5394378c9164b1a900d2
parent ba57506d6d744e9716bf1de47933d52a5b43a309
8 files changed +189 -26
modified public/index.css
@@ -10,7 +10,7 @@
  --border-radius-round: 10rem;



  --content-max-width: 1920px;
- 
  --content-min-width: 480px;
+ 
  --content-min-width: 400px;



  --scrollbar-width: 0.5rem;
modified src/views/projects/Header.svelte
@@ -38,9 +38,6 @@
    .header {

      padding-left: 2rem;

    }
- 
    .header {
- 
      margin-bottom: 1.5rem;
- 
    }

  }

</style>
modified src/views/projects/View.svelte
@@ -45,12 +45,6 @@
    min-width: var(--content-min-width);

    padding-bottom: 4rem;

  }
- 
  @media (max-width: 960px) {
- 
    main {
- 
      padding-top: 2rem;
- 
      min-width: 0;
- 
    }
- 
  }

</style>



<div class="header">
modified tests/support/fixtures.ts
@@ -7,7 +7,7 @@ import * as FsSync from "node:fs";
import * as Path from "node:path";

import { dirname } from "node:path";

import { fileURLToPath } from "node:url";
- 
import { test as base, expect } from "@playwright/test";
+ 
import { test as base, expect, type ViewportSize } from "@playwright/test";



import * as Process from "./process.js";

import * as issue from "@tests/support/cobs/issue.js";
@@ -24,6 +24,13 @@ export const supportDir = dirname(filename);
export const tmpDir = Path.resolve(supportDir, "..", "./tmp");

export const fixturesDir = Path.resolve(supportDir, "..", "./fixtures");
+ 
type ViewportTypes = "iPhoneXR" | "Desktop";
+
+ 
export const viewportSizes: Record<ViewportTypes, ViewportSize> = {
+ 
  iPhoneXR: { width: 414, height: 896 },
+ 
  Desktop: { width: 1280, height: 720 },
+ 
};
+ 


export const test = base.extend<{

  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type

  forAllTests: void;
modified tests/visual/markdown.spec.ts
@@ -1,5 +1,10 @@
import type { Page } from "@playwright/test";
- 
import { test, expect, markdownUrl } from "@tests/support/fixtures.js";
+ 
import {
+ 
  test,
+ 
  expect,
+ 
  markdownUrl,
+ 
  viewportSizes,
+ 
} from "@tests/support/fixtures.js";



async function goToSection(section: string, page: Page) {

  await page.goto(`${markdownUrl}/tree/main/cheatsheet.md`, {
@@ -8,9 +13,11 @@ async function goToSection(section: string, page: Page) {
  await page.locator(`[href="${section}"]`).click();

}
+ 
const viewportWidth = viewportSizes["Desktop"].width;
+ 


test.describe("markdown rendering", async () => {

  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 450 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 450 } });

    test("table of contents", async ({ page }) => {

      await page.goto(

        `${markdownUrl}/tree/main/cheatsheet.md#table-of-contents`,
@@ -24,7 +31,9 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 1030 } });
+ 
    test.use({
+ 
      viewport: { width: viewportWidth, height: 1030 },
+ 
    });

    test("headers", async ({ page }) => {

      await goToSection("#headers", page);

      await expect(page.locator("text=###### H6")).toBeVisible();
@@ -33,7 +42,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 470 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 470 } });

    test("emphasis", async ({ page }) => {

      await goToSection("#emphasis", page);

      await expect(page.locator("text=Emphasis, aka").first()).toBeVisible();
@@ -42,7 +51,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 1100 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 1100 } });

    test("lists", async ({ page }) => {

      await goToSection("#lists", page);

      await expect(
@@ -53,7 +62,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 1024 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 1024 } });

    test("links", async ({ page }) => {

      await goToSection("#links", page);

      await expect(page.locator("text=There are two ways")).toBeVisible();
@@ -62,7 +71,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 520 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 520 } });

    test("images", async ({ page }) => {

      await goToSection("#images", page);

      await expect(page.locator("text=Here's our logo").first()).toBeVisible();
@@ -71,7 +80,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 1130 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 1130 } });

    test("code and syntax highlighting", async ({ page }) => {

      await goToSection("#code", page);

      await expect(page.locator("text=Code blocks are part")).toBeVisible();
@@ -109,7 +118,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 1100 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 1100 } });

    test("tables", async ({ page }) => {

      await goToSection("#tables", page);

      await expect(
@@ -120,7 +129,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 450 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 450 } });

    test("blockquotes", async ({ page }) => {

      await goToSection("#blockquotes", page);

      await expect(page.locator("text=Blockquotes are").first()).toBeVisible();
@@ -129,7 +138,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 510 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 510 } });

    test("inline HTML", async ({ page }) => {

      await goToSection("#html", page);

      await expect(
@@ -140,7 +149,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 710 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 710 } });

    test("horizontal rule", async ({ page }) => {

      await goToSection("#hr", page);

      await expect(page.locator("text=Three or more...").first()).toBeVisible();
@@ -149,7 +158,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 625 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 625 } });

    test("line breaks", async ({ page }) => {

      await goToSection("#lines", page);

      await expect(page.locator("text=My basic recommendation")).toBeVisible();
@@ -158,7 +167,7 @@ test.describe("markdown rendering", async () => {
  });



  test.describe(async () => {
- 
    test.use({ viewport: { width: 1280, height: 500 } });
+ 
    test.use({ viewport: { width: viewportWidth, height: 500 } });

    test("videos", async ({ page }) => {

      await goToSection("#videos", page);

      await expect(page.locator("text=They can't be added")).toBeVisible();
added tests/visual/mobile/cob.spec.ts
@@ -0,0 +1,101 @@
+ 
import {
+ 
  test,
+ 
  expect,
+ 
  cobUrl,
+ 
  viewportSizes,
+ 
} from "@tests/support/fixtures.js";
+
+ 
test.use({ viewport: viewportSizes["iPhoneXR"] });
+
+ 
test.beforeEach(async ({ page }) => {
+ 
  await page.addInitScript(() => {
+ 
    window.initializeTestStubs = () => {
+ 
      window.e2eTestStubs.FakeTimers.install({
+ 
        now: new Date("November 24 2022 12:00:00").valueOf(),
+ 
        shouldClearNativeTimers: true,
+ 
        shouldAdvanceTime: false,
+ 
      });
+ 
    };
+ 
  });
+ 
});
+
+ 
test("issues page", async ({ page }) => {
+ 
  await page.goto(`${cobUrl}/issues`, { waitUntil: "networkidle" });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+
+ 
  await page.goto(`${cobUrl}/issues?state=closed`, {
+ 
    waitUntil: "networkidle",
+ 
  });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
});
+
+ 
test("issue page", async ({ page }) => {
+ 
  await page.goto(`${cobUrl}/issues/4fc727e722d3979fd2073d9b56b2751658a4ae79`, {
+ 
    waitUntil: "networkidle",
+ 
  });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  await page.goto(`${cobUrl}/issues/4038cc5bf6d38f0a5606982236e2abb113affaea`, {
+ 
    waitUntil: "networkidle",
+ 
  });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  await page.goto(`${cobUrl}/issues/673c51821aee4b780d9661c20d267d66ec43d7ae`, {
+ 
    waitUntil: "networkidle",
+ 
  });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
});
+
+ 
test("patches page", async ({ page }) => {
+ 
  await page.goto(`${cobUrl}/patches`, {
+ 
    waitUntil: "networkidle",
+ 
  });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  await page.goto(`${cobUrl}/patches?state=draft`, {
+ 
    waitUntil: "networkidle",
+ 
  });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  await page.goto(`${cobUrl}/patches?state=archived`, {
+ 
    waitUntil: "networkidle",
+ 
  });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  await page.goto(`${cobUrl}/patches?state=merged`, {
+ 
    waitUntil: "networkidle",
+ 
  });
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
});
+
+ 
test("patch page", async ({ page }) => {
+ 
  // Draft patch
+ 
  await page.goto(
+ 
    `${cobUrl}/patches/f85dce5dced961ee0f47735401cee72a0ee77900`,
+ 
    { waitUntil: "networkidle" },
+ 
  );
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  // Archived patch
+ 
  await page.goto(
+ 
    `${cobUrl}/patches/8d83959d9889da0a94129d9ba06b87c8823972a8`,
+ 
    { waitUntil: "networkidle" },
+ 
  );
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  // Merged patch
+ 
  await page.goto(
+ 
    `${cobUrl}/patches/a5b1d30035da686ba1c4742f6fd25c43238df671`,
+ 
    { waitUntil: "networkidle" },
+ 
  );
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  // Open patch
+ 
  await page.goto(
+ 
    `${cobUrl}/patches/0f3697fed2743549e3bf531e9fa81284a6de1466`,
+ 
    { waitUntil: "networkidle" },
+ 
  );
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  await page.goto(
+ 
    `${cobUrl}/patches/0f3697fed2743549e3bf531e9fa81284a6de1466?tab=commits`,
+ 
    { waitUntil: "networkidle" },
+ 
  );
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
  await page.goto(
+ 
    `${cobUrl}/patches/0f3697fed2743549e3bf531e9fa81284a6de1466?tab=files`,
+ 
    { waitUntil: "networkidle" },
+ 
  );
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
});
added tests/visual/mobile/project.spec.ts
@@ -0,0 +1,55 @@
+ 
import {
+ 
  aliceRemote,
+ 
  expect,
+ 
  sourceBrowsingUrl,
+ 
  test,
+ 
  viewportSizes,
+ 
} from "@tests/support/fixtures.js";
+
+ 
test.use({ viewport: viewportSizes["iPhoneXR"] });
+
+ 
test("source tree page", async ({ page }) => {
+ 
  await page.goto(sourceBrowsingUrl, { waitUntil: "networkidle" });
+ 
  await expect(page).toHaveScreenshot();
+ 
});
+
+ 
test("commits page", async ({ page }) => {
+ 
  await page.addInitScript(() => {
+ 
    window.initializeTestStubs = () => {
+ 
      window.e2eTestStubs.FakeTimers.install({
+ 
        now: new Date("November 24 2022 12:00:00").valueOf(),
+ 
        shouldClearNativeTimers: true,
+ 
        shouldAdvanceTime: false,
+ 
      });
+ 
    };
+ 
  });
+
+ 
  await page.goto(
+ 
    `${sourceBrowsingUrl}/remotes/${aliceRemote.substring(8)}/history`,
+ 
    {
+ 
      waitUntil: "networkidle",
+ 
    },
+ 
  );
+
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
});
+
+ 
test("commit page", async ({ page }) => {
+ 
  await page.addInitScript(() => {
+ 
    window.initializeTestStubs = () => {
+ 
      window.e2eTestStubs.FakeTimers.install({
+ 
        now: new Date("November 24 2022 12:00:00").valueOf(),
+ 
        shouldClearNativeTimers: true,
+ 
        shouldAdvanceTime: false,
+ 
      });
+ 
    };
+ 
  });
+
+ 
  await page.goto(
+ 
    `${sourceBrowsingUrl}/remotes/${aliceRemote.substring(
+ 
      8,
+ 
    )}/commits/1aded56c3ad55299df9f06c326af50b802a05949`,
+ 
  );
+ 
  await expect(page.locator("text=subconscious.txt added")).toBeVisible();
+ 
  await expect(page).toHaveScreenshot({ fullPage: true });
+ 
});
modified tests/visual/project.spec.ts
@@ -45,7 +45,7 @@ test("commit page", async ({ page }) => {
  await page.goto(

    `${sourceBrowsingUrl}/remotes/${aliceRemote.substring(

      8,
- 
    )}/commits/d6318f7f3d9c15b8ac6dd52267c53220d00f0982`,
+ 
    )}/commits/1aded56c3ad55299df9f06c326af50b802a05949`,

  );

  await expect(page.locator("text=subconscious.txt added")).toBeVisible();

  await expect(page).toHaveScreenshot({ fullPage: true });