Skip to content

Sample apps design fixes #80

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

Merged
merged 4 commits into from
Jul 1, 2025
Merged

Sample apps design fixes #80

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f37311
Fix top alignment of cards and badges
remotesynth Jul 1, 2025
354d75c
Fix search alignment
remotesynth Jul 1, 2025
33a18d7
Fix icon alignment and link color
remotesynth Jul 1, 2025
c165e04
Update ApplicationsShowcase.tsx
remotesynth Jul 1, 2025
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
230 changes: 128 additions & 102 deletions src/components/applications/ApplicationsShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@ const ApplicationCard: React.FC<{
deployments: Record<string, string>;
}> = ({ app, services, platforms, deployments }) => {
return (
<div className="app-card">
<a
href={app.url}
target="_blank"
rel="noopener noreferrer"
className="app-card"
>
<div className="card-image">
<img src={app.teaser} alt={app.title} loading="lazy" />
<div className="card-badges">
Expand Down Expand Up @@ -65,17 +70,12 @@ const ApplicationCard: React.FC<{
)}
</div>

<a
href={app.url}
target="_blank"
rel="noopener noreferrer"
className="card-link"
>
<span className="card-link">
View Project →
</a>
</span>
</div>
</div>
</div>
</a>
);
};

Expand Down Expand Up @@ -197,15 +197,23 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({

/* Top Bar */
.top-bar {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--sl-color-bg-sidebar);
border: 1px solid var(--sl-color-gray-6);
border-radius: 0.5rem;
}

.top-bar-row {
display: flex;
gap: 1rem;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 1rem;
}

.top-bar-row:last-child {
margin-bottom: 0;
}

.search-container {
Expand All @@ -222,6 +230,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
background: var(--sl-color-bg);
color: var(--sl-color-white);
font-size: 0.875rem;
margin-top: 0;
}

.search-input:focus {
Expand Down Expand Up @@ -258,6 +267,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
color: var(--sl-color-white);
font-size: 0.875rem;
min-width: 140px;
margin-top: 0;
}

.filter-select:focus {
Expand All @@ -273,6 +283,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
color: var(--sl-color-white);
cursor: pointer;
white-space: nowrap;
margin-top: 0.375rem;
}

.sort-select {
Expand Down Expand Up @@ -320,6 +331,13 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
border-radius: 0.75rem;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin-top: 0;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
cursor: pointer;
}

.app-card:hover {
Expand Down Expand Up @@ -371,6 +389,9 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({

.card-content {
padding: 1.25rem;
display: flex;
flex-direction: column;
flex: 1;
}

.card-title {
Expand All @@ -393,6 +414,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-top: auto;
}

.service-icons {
Expand All @@ -411,6 +433,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
align-items: center;
justify-content: center;
transition: all 0.2s ease;
margin-top: 0;
}

.service-icon:hover {
Expand All @@ -436,8 +459,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: white;
text-decoration: none;
color: var(--sl-color-white);
font-weight: 500;
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
Expand All @@ -446,7 +468,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
white-space: nowrap;
}

.card-link:hover {
.app-card:hover .card-link {
color: var(--sl-color-accent);
}

Expand Down Expand Up @@ -486,7 +508,7 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({
padding: 0 0.75rem;
}

.top-bar {
.top-bar-row {
flex-direction: column;
align-items: stretch;
}
Expand Down Expand Up @@ -519,96 +541,100 @@ export const ApplicationsShowcase: React.FC<ApplicationsShowcaseProps> = ({

<div className="applications-showcase">
<div className="top-bar">
<div className="search-container">
<input
type="text"
placeholder="Search applications..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="search-input"
/>
{searchTerm && (
<button onClick={() => setSearchTerm('')} className="search-clear">
×
<div className="top-bar-row">
<div className="search-container">
<input
type="text"
placeholder="Search applications..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="search-input"
/>
{searchTerm && (
<button onClick={() => setSearchTerm('')} className="search-clear">
×
</button>
)}
</div>

<select
value={filters.services[0] || ''}
onChange={(e) => e.target.value ? toggleFilter('services', e.target.value) : null}
className="filter-select"
>
<option value="">Services</option>
{uniqueServices.map((service) => (
<option key={service} value={service}>
{services[service] || service}
</option>
))}
</select>

<select
value={filters.platforms[0] || ''}
onChange={(e) => e.target.value ? toggleFilter('platforms', e.target.value) : null}
className="filter-select"
>
<option value="">Languages</option>
{uniquePlatforms.map((platform) => (
<option key={platform} value={platform}>
{platforms[platform] || platform}
</option>
))}
</select>

<select
value={filters.deployments[0] || ''}
onChange={(e) => e.target.value ? toggleFilter('deployments', e.target.value) : null}
className="filter-select"
>
<option value="">Deployment</option>
{uniqueDeployments.map((deployment) => (
<option key={deployment} value={deployment}>
{deployments[deployment] || deployment}
</option>
))}
</select>

<select
value={filters.complexities[0] || ''}
onChange={(e) => e.target.value ? toggleFilter('complexities', e.target.value) : null}
className="filter-select"
>
<option value="">Complexity</option>
{uniqueComplexities.map((complexity) => (
<option key={complexity} value={complexity}>
{complexities.data[complexity] || complexity}
</option>
))}
</select>

<label className="pro-toggle">
<input
type="checkbox"
checked={filters.showProOnly}
onChange={(e) => setFilters(prev => ({ ...prev, showProOnly: e.target.checked }))}
/>
Pro Only
</label>

{hasActiveFilters && (
<button onClick={clearAllFilters} className="clear-filters">
Clear
</button>
)}
</div>

<select
value={filters.services[0] || ''}
onChange={(e) => e.target.value ? toggleFilter('services', e.target.value) : null}
className="filter-select"
>
<option value="">Services</option>
{uniqueServices.map((service) => (
<option key={service} value={service}>
{services[service] || service}
</option>
))}
</select>

<select
value={filters.platforms[0] || ''}
onChange={(e) => e.target.value ? toggleFilter('platforms', e.target.value) : null}
className="filter-select"
>
<option value="">Languages</option>
{uniquePlatforms.map((platform) => (
<option key={platform} value={platform}>
{platforms[platform] || platform}
</option>
))}
</select>

<select
value={filters.deployments[0] || ''}
onChange={(e) => e.target.value ? toggleFilter('deployments', e.target.value) : null}
className="filter-select"
>
<option value="">Deployment</option>
{uniqueDeployments.map((deployment) => (
<option key={deployment} value={deployment}>
{deployments[deployment] || deployment}
</option>
))}
</select>

<select
value={filters.complexities[0] || ''}
onChange={(e) => e.target.value ? toggleFilter('complexities', e.target.value) : null}
className="filter-select"
>
<option value="">Complexity</option>
{uniqueComplexities.map((complexity) => (
<option key={complexity} value={complexity}>
{complexities.data[complexity] || complexity}
</option>
))}
</select>

<label className="pro-toggle">
<input
type="checkbox"
checked={filters.showProOnly}
onChange={(e) => setFilters(prev => ({ ...prev, showProOnly: e.target.checked }))}
/>
Pro Only
</label>

<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value as 'title' | 'complexity')}
className="sort-select"
>
<option value="title">A-Z</option>
<option value="complexity">By Complexity</option>
</select>

{hasActiveFilters && (
<button onClick={clearAllFilters} className="clear-filters">
Clear
</button>
)}
<div className="top-bar-row">
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value as 'title' | 'complexity')}
className="sort-select"
>
<option value="title">A-Z</option>
<option value="complexity">By Complexity</option>
</select>
</div>
</div>

<div className="results-info">
Expand Down