Skip to content

fix(projects): tags should be aligned on the right #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
not-matthias wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(projects): tags should be aligned on the right #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions content/projects/project_no_links.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
+++
title = "Example Project Without Links"
description = "A project that only has tags but no demo or github link"
weight = 100
date = 2024-10-25

[extra]
remote_image = "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
tags = ["example", "test", "layout"]
+++

This project demonstrates a layout issue where tags should be aligned to the right even when there are no demo or github links.
12 changes: 12 additions & 0 deletions sass/parts/_cards.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@
align-items: center;
gap: 12px;
margin-top: auto;
flex-wrap: wrap;

@media (max-width: 640px) {
flex-direction: column;
align-items: flex-end;
}
}

&-links {
Expand All @@ -93,6 +99,12 @@
gap: 4px;
justify-content: flex-end;
align-items: center;
margin-left: auto;

@media (max-width: 640px) {
margin-left: 0;
width: 100%;
}
}

&-tag {
Expand Down
90 changes: 90 additions & 0 deletions tests/content/tag-alignment.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { test, expect } from '@playwright/test';
import { TestHelpers } from '../helpers';

test.describe('Tag Alignment in Project Cards', () => {
let helpers: TestHelpers;

test.beforeEach(async ({ page }) => {
helpers = new TestHelpers(page);
await page.goto('/projects');
await helpers.waitForPageReady();
});

test('tags should be aligned to the right when there are no github/demo links', async ({ page }) => {
// Find the card for "Example Project Without Links"
const projectCard = page.locator('.card', { has: page.locator('h1:has-text("Example Project Without Links")') });

// Verify the card exists
await expect(projectCard).toBeVisible();

// Get the card footer
const cardFooter = projectCard.locator('.card-footer');
await expect(cardFooter).toBeVisible();

// Verify there are no card links (github/demo buttons)
const cardLinks = cardFooter.locator('.card-links');
await expect(cardLinks).not.toBeVisible();

// Verify there are tags
const cardTags = cardFooter.locator('.card-tags');
await expect(cardTags).toBeVisible();

const tags = cardTags.locator('.card-tag');
const tagCount = await tags.count();
expect(tagCount).toBeGreaterThan(0);

// Get the bounding boxes
const footerBox = await cardFooter.boundingBox();
const tagsBox = await cardTags.boundingBox();

expect(footerBox).toBeTruthy();
expect(tagsBox).toBeTruthy();

if (footerBox && tagsBox) {
// Tags should be aligned to the right (right edge should be close to footer's right edge)
const footerRight = footerBox.x + footerBox.width;
const tagsRight = tagsBox.x + tagsBox.width;

// Allow a small margin for padding (20px is the card padding)
const rightMargin = footerBox.width * 0.1; // 10% tolerance
expect(tagsRight).toBeGreaterThan(footerRight - rightMargin);
}
});

test('tags should still be aligned to the right when github/demo links are present', async ({ page }) => {
// Find a card that has both links and tags (e.g., "Apollo" project)
const projectCard = page.locator('.card', { has: page.locator('h1:has-text("Apollo")') });

// Verify the card exists
await expect(projectCard).toBeVisible();

// Get the card footer
const cardFooter = projectCard.locator('.card-footer');
await expect(cardFooter).toBeVisible();

// Verify there are card links
const cardLinks = cardFooter.locator('.card-links');
await expect(cardLinks).toBeVisible();

// Verify there are tags
const cardTags = cardFooter.locator('.card-tags');
await expect(cardTags).toBeVisible();

// Get the bounding boxes
const footerBox = await cardFooter.boundingBox();
const tagsBox = await cardTags.boundingBox();

expect(footerBox).toBeTruthy();
expect(tagsBox).toBeTruthy();

if (footerBox && tagsBox) {
// Tags should be aligned to the right (right edge should be close to footer's right edge)
const footerRight = footerBox.x + footerBox.width;
const tagsRight = tagsBox.x + tagsBox.width;

// Allow a small margin for padding
const rightMargin = footerBox.width * 0.1; // 10% tolerance
expect(tagsRight).toBeGreaterThan(footerRight - rightMargin);
}
});
});
Loading