Skip to content

feat: adopt Tailwind CSS utility classes for styling #6

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

Draft
nicomiguelino wants to merge 1 commit into
base: development
Choose a base branch
from
Draft

feat: adopt Tailwind CSS utility classes for styling #6

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
30 changes: 22 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,33 @@
<title>Simple Table</title>
<script src="screenly.js?version=1"></script>
</head>
<body>
<body
class="text-[#f2f2f3] bg-[url('/static/images/bg.webp')] bg-no-repeat bg-center bg-cover bg-[#08080d] before:content-[''] before:fixed before:inset-0 before:z-[var(--z-index-backdrop)] before:pointer-events-none before:bg-black/45 before:backdrop-blur-[7px]"
>
<auto-scaler
reference-width="1920"
reference-height="1080"
orientation="auto"
class="relative z-[var(--z-index-content)]"
>
<div id="app">
<app-header class="header" show-date></app-header>
<main class="content">
<div id="table-wrapper">
<h2 id="table-title" hidden></h2>
<div class="table-card">
<table id="data-table">
<div id="app" class="w-full h-full flex flex-col">
<app-header class="header shrink-0" show-date></app-header>
<main
class="flex-1 flex justify-center items-center px-12 py-8 min-h-0 portrait:px-8 portrait:py-6 [@media_(max-width:1280px)_and_(orientation:landscape)]:px-8 [@media_(max-width:1280px)_and_(orientation:landscape)]:py-6"
>
<div
id="table-wrapper"
class="w-full max-w-[100rem] flex flex-col gap-5 portrait:max-w-full"
>
<h2
id="table-title"
hidden
class="text-[2rem] font-semibold text-[#f2f2f3] m-0 tracking-[-0.03em] text-shadow-[0_0.125rem_0.5rem_rgba(0,0,0,0.4)] portrait:text-[1.75rem]"
></h2>
<div
class="table-card rounded-2xl overflow-hidden bg-white/[0.08] border border-white/[0.12] backdrop-blur-[20px] shadow-[0_1.25rem_3rem_rgba(0,0,0,0.4),0_0.5rem_1rem_rgba(0,0,0,0.2)]"
>
<table id="data-table" class="w-full border-collapse">
<thead id="table-head"></thead>
<tbody id="table-body"></tbody>
</table>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"prettier": "./.prettierrc.json",
"devDependencies": {
"@playwright/test": "^1.60.0",
"@screenly/edge-apps": "^1.2.1",
"@screenly/edge-apps": "^1.3.0",
"@types/bun": "^1.3.14",
"@types/jsdom": "^28.0.3",
"@types/papaparse": "^5.5.2",
Expand Down
Binary file modified screenshots/1080x1920.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/1280x720.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/1920x1080.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/2160x3840.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/2160x4096.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/3840x2160.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/4096x2160.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/480x800.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/720x1280.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/800x480.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import {
} from '@screenly/edge-apps'
import Papa from 'papaparse'

const ROW_DIVIDER_CLASSES =
'bg-[linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15))] [background-size:calc(100%-4rem)_1px] bg-bottom bg-no-repeat'

const CELL_PADDING_CLASSES =
'whitespace-nowrap portrait:px-5 [@media_(max-width:1280px)_and_(orientation:landscape)]:px-6'

export function parseCSV(csv: string): string[][] {
const result = Papa.parse<string[]>(csv.trim(), {
skipEmptyLines: true,
Expand Down Expand Up @@ -34,17 +40,21 @@ export function renderTable(csv: string): void {
const [headers, ...dataRows] = rows

const headerRow = document.createElement('tr')
headerRow.className = ROW_DIVIDER_CLASSES
headers.forEach((header) => {
const th = document.createElement('th')
th.className = `px-8 py-5 text-left text-xs font-semibold tracking-[0.08em] uppercase text-[#9d9d9f] ${CELL_PADDING_CLASSES} portrait:py-4 portrait:text-[0.7rem] [@media_(max-width:1280px)_and_(orientation:landscape)]:py-4`
th.textContent = header
headerRow.appendChild(th)
})
thead.appendChild(headerRow)

dataRows.forEach((row) => {
const tr = document.createElement('tr')
tr.className = `${ROW_DIVIDER_CLASSES} last:bg-none`
row.forEach((cell) => {
const td = document.createElement('td')
td.className = `px-8 py-[1.125rem] text-lg font-normal text-[#dadadb] ${CELL_PADDING_CLASSES} portrait:py-[0.875rem] portrait:text-base [@media_(max-width:1280px)_and_(orientation:landscape)]:py-[0.875rem] [@media_(max-width:1280px)_and_(orientation:landscape)]:text-base`
td.textContent = cell
tr.appendChild(td)
})
Expand Down
190 changes: 10 additions & 180 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,180 +1,10 @@
@import '@screenly/edge-apps/styles';

:root {
--color-surface-low: #08080d;
--color-surface-mid: #050508;
--color-surface-high: #030304;
--color-text-primary: #f2f2f3;
--color-text-secondary: #dadadb;
--color-text-muted: #9d9d9f;
--color-border-subtle: #212126;
--color-border-strong: #494949;
--color-accent-default: #0066ff;
--color-info: #00a8ff;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
overflow: hidden;
color: var(--color-text-primary);
font-family: 'Inter', system-ui, sans-serif;
background: url('/static/images/bg.webp') no-repeat center center;
background-size: cover;
background-color: var(--color-surface-low);
}

body::before {
content: '';
position: fixed;
inset: 0;
z-index: var(--z-index-backdrop);
pointer-events: none;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(7px);
}

auto-scaler {
position: relative;
z-index: var(--z-index-content);
}

#app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}

.header {
flex-shrink: 0;
}

.content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 3rem;
min-height: 0;
}

#table-wrapper {
width: 100%;
max-width: 100rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}

#table-title {
font-size: 2rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.03em;
text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
}

.table-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 1.5rem;
overflow: hidden;
backdrop-filter: blur(20px);
box-shadow:
0 1.25rem 3rem rgba(0, 0, 0, 0.4),
0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

#data-table {
width: 100%;
border-collapse: collapse;
}

#data-table thead tr {
background-image: linear-gradient(
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0.15)
);
background-size: calc(100% - 4rem) 1px;
background-position: center bottom;
background-repeat: no-repeat;
}

#data-table th {
padding: 1.25rem 2rem;
text-align: left;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
white-space: nowrap;
}

#data-table td {
padding: 1.125rem 2rem;
font-size: 1.125rem;
font-weight: 400;
color: var(--color-text-secondary);
white-space: nowrap;
}

#data-table tbody tr {
background-image: linear-gradient(
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0.15)
);
background-size: calc(100% - 4rem) 1px;
background-position: center bottom;
background-repeat: no-repeat;
}

#data-table tbody tr:last-child {
background-image: none;
}

@media (orientation: portrait) {
.content {
padding: 1.5rem 2rem;
align-items: center;
}

#table-wrapper {
max-width: 100%;
}

#table-title {
font-size: 1.75rem;
}

#data-table th {
padding: 1rem 1.25rem;
font-size: 0.7rem;
}

#data-table td {
padding: 0.875rem 1.25rem;
font-size: 1rem;
}
}

@media screen and (max-width: 1280px) and (orientation: landscape) {
.content {
padding: 1.5rem 2rem;
}

#data-table th {
padding: 1rem 1.5rem;
}

#data-table td {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
}
/* Tailwind CSS, skipping Preflight (resets border/margin/padding on every
element via a universal selector and breaks custom-element hosts like
<app-header>). @screenly/edge-apps/styles goes in the `base` layer so any
Tailwind utility classes added later always win the cascade, regardless
of selector specificity. */
@layer theme, base, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import '@screenly/edge-apps/styles' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities);
Loading