Skip to content

Commit

Permalink
Improve interaction on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@jverneaut
jverneaut committed Sep 24, 2024
1 parent 9a0c810 commit 8ebf0bb
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 92 deletions.
84 changes: 41 additions & 43 deletions src/autostereogram/components/Gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,21 +74,49 @@ const Gallery = ({

return (
<div className="gallery">
<button
ref={ref}
className="gallery__toggle"
onClick={() => setOpen(!open)}
>
<div className="gallery__indicator">
<div className="gallery__current">
{(index + 1).toString().padStart(2, '0')}
<div className="gallery__toggle-container" ref={ref}>
<button className="gallery__toggle" onClick={() => setOpen(!open)}>
<div className="gallery__indicator">
<div className="gallery__current">
{(index + 1).toString().padStart(2, '0')}
</div>
<div className="gallery__separator">/</div>
<div className="gallery__total">{gallery.length}</div>
</div>
<div className="gallery__separator">/</div>
<div className="gallery__total">{gallery.length}</div>
</div>

<div className="gallery__title">{gallery[index].title}</div>
</button>
<div className="gallery__title">{gallery[index].title}</div>
</button>
<div
className={[
'gallery__list',
open ? 'gallery__list--open' : null,
].join(' ')}
>
{gallery.map((item, i) => (
<div
key={i}
className={[
'gallery__item',
i === index ? 'gallery__item--selected' : null,
].join(' ')}
onClick={() => {
setIndex(i);
setOpen(false);
}}
>
<div
className="gallery__thumbnail"
style={{
backgroundImage: `url(${
flatBackgrounds[item.background].previewSrc
})`,
}}
></div>
<div className="gallery__item-title">{item.title}</div>
</div>
))}
</div>
</div>

<div className="gallery__buttons">
<button
Expand All @@ -113,36 +141,6 @@ const Gallery = ({
<img src={chevronRight} alt="Next" />
</button>
</div>

<div
className={['gallery__list', open ? 'gallery__list--open' : null].join(
' '
)}
>
{gallery.map((item, i) => (
<div
key={i}
className={[
'gallery__item',
i === index ? 'gallery__item--selected' : null,
].join(' ')}
onClick={() => {
setIndex(i);
setOpen(false);
}}
>
<div
className="gallery__thumbnail"
style={{
backgroundImage: `url(${
flatBackgrounds[item.background].previewSrc
})`,
}}
></div>
<div className="gallery__item-title">{item.title}</div>
</div>
))}
</div>
</div>
);
};
Expand Down
97 changes: 48 additions & 49 deletions src/autostereogram/components/ImageSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,56 @@ const ImageSelect = ({
return (
<div className="control">
<div className="control__current-container">
<button
ref={ref}
className="control__current"
onClick={() => setOpen(!open)}
>
<img
className="control__current-image"
src={selected.previewSrc}
alt=""
/>
<div className="control__current-toggle" ref={ref}>
<button className="control__current" onClick={() => setOpen(!open)}>
<img
className="control__current-image"
src={selected.previewSrc}
alt=""
/>

<div className="control__current-title">
<span>{title}</span>
<h2>{selected.name}</h2>
<div className="control__current-title">
<span>{title}</span>
<h2>{selected.name}</h2>
</div>
</button>

<div
className={[
'control__list',
open ? 'control__list--open' : null,
].join(' ')}
>
{Object.keys(images).map((category, index) => (
<div className="control__category" key={index}>
<div className="control__category-title">{category}</div>
<div className="control__category-list">
{images[category].map((image, index) => (
<button
className={[
'control__button',
image.slug === selected.slug
? 'control__button--selected'
: null,
].join(' ')}
key={index}
onClick={() => setSelectedSlug(image.slug)}
>
<img
className="control__image"
src={image.previewSrc}
alt=""
/>
{image.slug === selected.slug && (
<img className="control__icon" src={checkIcon} />
)}
</button>
))}
</div>
</div>
))}
</div>
</button>
</div>

<button
className="control__randomize"
Expand All @@ -52,41 +86,6 @@ const ImageSelect = ({
<img src={randomizeIcon} alt="" />
</button>
</div>

<div
className={['control__list', open ? 'control__list--open' : null].join(
' '
)}
>
{Object.keys(images).map((category, index) => (
<div className="control__category" key={index}>
<div className="control__category-title">{category}</div>
<div className="control__category-list">
{images[category].map((image, index) => (
<button
className={[
'control__button',
image.slug === selected.slug
? 'control__button--selected'
: null,
].join(' ')}
key={index}
onClick={() => setSelectedSlug(image.slug)}
>
<img
className="control__image"
src={image.previewSrc}
alt=""
/>
{image.slug === selected.slug && (
<img className="control__icon" src={checkIcon} />
)}
</button>
))}
</div>
</div>
))}
</div>
</div>
);
};
Expand Down
15 changes: 15 additions & 0 deletions src/autostereogram/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,10 @@ html {
aspect-ratio: 1/1;
}

.control__current-toggle {
flex: 1;
}

.control__current-container {
width: 100%;
display: flex;
Expand Down Expand Up @@ -409,6 +413,7 @@ html {
gap: 2px;
font-variant-numeric: tabular-nums;
padding-left: 12px;
letter-spacing: -0.1rem;
}

.gallery__current {
Expand All @@ -433,6 +438,11 @@ html {
font-size: 20px;
}

.gallery__toggle-container {
flex: 1;
display: flex;
}

.gallery__toggle {
height: 44px;
-webkit-appearance: none;
Expand Down Expand Up @@ -510,6 +520,7 @@ button {
user-select: none;
color: inherit;
text-decoration: none;
font-family: inherit;
}

* {
Expand Down Expand Up @@ -576,3 +587,7 @@ button {
background-size: cover;
background-position: center;
}

.gallery__item-title {
font-size: 16px;
}

0 comments on commit 8ebf0bb

Please sign in to comment.