Skip to content

Commit 722be89

Browse files
joeshoopjoeshoop
committed
semi-weekly commit
Lots of in-progress ui updates. Focused mostly on the method page.
1 parent 2621908 commit 722be89

20 files changed

Lines changed: 797 additions & 20859 deletions

‎web/_11ty/shortcodes/forceLayout.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎web/_11ty/shortcodes/resourceCard.js‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import urlFor from '../../utils/imageUrl.js'
2929
* the resource.
3030
* @param {string} [size='compact-card'] - The size of the card.
3131
* Defaults to 'compact-card'.
32+
* - 'chip': Uses the smallest image size (50px max width).
3233
* - 'compact-card': Uses a smaller image size (125px max width).
3334
* - 'full-card': Uses a larger image size (375px max width).
3435
*
@@ -37,21 +38,43 @@ import urlFor from '../../utils/imageUrl.js'
3738
export default (resource, size = 'compact-card') => {
3839
const image = resource.heroImage
3940
const srcset =
40-
size == 'compact-card' // if size is compact-card, use smaller image sizes
41-
? [125, 250] // compact card image sizes (max-width: 125px)
42-
: [375, 750] // full card image sizes (max-width: 375px)
41+
size == 'chip'
42+
? [50, 100] // chip card image sizes (max-width: 50px)
43+
: size == 'compact-card'
44+
? [125, 250] // compact card image sizes (max-width: 125px)
45+
: [375, 750] // full card image sizes (max-width: 375px)
4346
const sizes =
44-
size == 'compact-card'
45-
? '125px' // compact card image max width
46-
: '375px' // full card max width
47+
size == 'chip'
48+
? '50px' // chip card image max width
49+
: size == 'compact-card'
50+
? '125px' // compact card image max width
51+
: '375px' // full card max width
4752
const srcSetContent = srcset
4853
.map((size) => {
4954
const url = urlFor(resource.heroImage).width(size).height(size).auto('format').url()
5055
return `${url} ${size}w`
5156
})
5257
.join(',')
5358

54-
return `<li class="card ${size}">
59+
if (size === "chip") {
60+
return `<li class="chip" data-slug="${resource.slug}">
61+
<a href="/${resource.type}/${resource.slug}/">
62+
<h3>${resource.title}</h3>
63+
<div class="tooltip">
64+
<img src="${urlFor(image).width(srcset[0])}"
65+
srcset="${srcSetContent}"
66+
sizes="${sizes}"
67+
max-width="${srcset[0]}"
68+
max-height="${srcset[0]}"
69+
loading="lazy"
70+
alt="${image.altText}">
71+
<p>${resource.metaDescription}</p>
72+
</div>
73+
</a>
74+
</li>`;
75+
}
76+
77+
return `<li class="card ${size}" data-slug="${resource.slug}">
5578
<a href="/${resource.type}/${resource.slug}/">
5679
<img src="${urlFor(image).width(srcset[0])}"
5780
srcset="${srcSetContent}"

‎web/_11ty/shortcodes/resourceCardExt.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,27 @@ export default (resource) => {
4141
? author
4242
: 'External Link' // fallback for missing author/publisher
4343

44-
return `<li class="card compact-card resource">
44+
return `<li class="resource-ext">
4545
<a href="${resourceUrl}">
46+
<img src="/r/img/icon/Document.svg"
47+
width="21"
48+
height="26"
49+
alt="Document icon"
50+
class="icon"
51+
>
4652
<img src="${image}"
4753
srcset="${srcSetContent}"
4854
sizes="${sizes}"
4955
max-width="${srcset[0]}"
5056
max-height="${srcset[0]}"
5157
loading="lazy"
5258
alt="${altText}"
59+
class="image"
5360
>
54-
<div>
55-
<h3>${title}</h3>
56-
<p>
57-
<span class="byline">${byline}</span>
61+
<div class="content">
62+
<p class="title">${title}</p>
63+
<p class="--mt-0">
64+
<span class="--font-emphasis --text-muted --text-md">${byline}</span>
5865
<span class="icon"></span>
5966
</p>
6067
</div>

‎web/_includes/partials/footer.njk‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<footer>
2-
<section>
2+
<section class="flow">
33
<div class="overview">
4-
<h1>{{ metadata.title }}</h1>
4+
{# <h3>{{ metadata.title }}</h3> #}
55
{{ metadata.overview | safe }}
66
</div>
77
<div class="social">
8-
<h1>Share This Project</h1>
9-
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.uxmethods.org/" target="_blank" rel="noopener">
8+
<h3 class="--text-muted --pb-sm">Share This Project</h3>
9+
<a class="--text-muted" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.uxmethods.org/" target="_blank" rel="noopener">
1010
{% include 'icons/linkedIn.svg' %}
1111
</a>
12-
<a href="https://bsky.app/intent/compose?url=https://www.uxmethods.org/&text=UX%20Methods%20is%20a%20community%20powered,%20linked%20data%20driven%20knowledge%20graph%20for%20learning%20about%20the%20techniques%20of%20user%20experience%20design." target="_blank" rel="noopener">
12+
<a class="--text-muted" href="https://bsky.app/intent/compose?url=https://www.uxmethods.org/&text=UX%20Methods%20is%20a%20community%20powered,%20linked%20data%20driven%20knowledge%20graph%20for%20learning%20about%20the%20techniques%20of%20user%20experience%20design." target="_blank" rel="noopener">
1313
{% include 'icons/bluesky.svg' %}
1414
</a>
1515
{# Mastadon is a bit more involved — add this later #}
@@ -18,14 +18,16 @@
1818
</a> #}
1919
</div>
2020
<div class="colophon">
21-
<h1>Colophon</h1>
21+
<h3 class="--text-muted">Colophon</h3>
2222
<p>{{ metadata.colophon | safe }}</p>
2323
</div>
24-
<div class="credit">
24+
<div class="credit flow-tight">
2525
{% for credit in metadata.credits %}
2626
{{ credit | safe }}
2727
{% endfor %}
28-
{% include 'icons/creativeCommons.svg' %}
28+
<div>
29+
{% include 'icons/creativeCommons.svg' %}
30+
</div>
2931
</div>
3032
</section>
3133
</footer>

‎web/_includes/partials/head.njk‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66

77
</title>
88
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.basic.js" async></script>
9-
<script src="/js/main.js" type="module" defer></script>
9+
<script src="/r/js/d3.js"></script>
10+
<script src="/r/js/network-graph.js"></script>
11+
{# <script src="/r/js/main.js" type="module" defer></script> #}
1012
<script type="application/ld+json">
1113
{% getBundle "jsonld" %}
1214
</script>

‎web/_includes/partials/theme-control.njk‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,16 @@
11
<div class="theme-control">
22
<div class="theme-control-group">
33
<label for="color-toggle">Color Mode</label>
4-
<button id="color-toggle" class="button --sm" aria-pressed="true">On</button>
4+
<button id="color-toggle" class="button --sm" aria-pressed="false">Off</button>
55
</div>
66
<div class="theme-control-group" id="hue-control">
7-
<label for="hue-slider">Hue: <span id="hue-value">100</span>°</label>
8-
<input type="range" id="hue-slider" min="0" max="360" value="100" step="1">
7+
<label for="hue-slider">Hue: <span id="hue-value">var(--hue)</span>°</label>
8+
<input type="range" id="hue-slider" min="0" max="360" value="150" step="1">
9+
</div>
10+
<div class="theme-control-group" id="chroma-control">
11+
<label for="chroma-slider">Chroma: <span id="chroma-value">10</span>%</label>
12+
<input type="range" id="chroma-slider" min="0" max="0.25" value="0.1" step="0.01">
913
</div>
10-
1114
</div>
1215

13-
<script>
14-
const hueSlider = document.getElementById('hue-slider');
15-
const hueValue = document.getElementById('hue-value');
16-
const colorToggle = document.getElementById('color-toggle');
17-
const hueControl = document.getElementById('hue-control');
18-
19-
hueSlider.addEventListener('input', (e) => {
20-
const value = e.target.value;
21-
document.documentElement.style.setProperty('--hue', value);
22-
hueValue.textContent = value;
23-
});
24-
25-
colorToggle.addEventListener('click', (e) => {
26-
const isPressed = e.target.getAttribute('aria-pressed') === 'true';
27-
e.target.setAttribute('aria-pressed', !isPressed);
28-
e.target.textContent = isPressed ? 'Off' : 'On';
29-
document.documentElement.style.setProperty('--chroma', isPressed ? '0' : '0.075');
30-
hueControl.style.display = isPressed ? 'none' : 'flex';
31-
});
32-
</script>
16+
<script src="/r/js/theme-control.js"></script>

‎web/_src/all-disciplines.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ permalink: /disciplines/index.html
66
<article class="disciplines container">
77
<section class="resource-cards">
88
<h1>UX Disciplines</h1>
9-
<ul class="grid">
9+
<ul class="cards">
1010
{% for discipline in disciplines %}
1111
{% resourceCard discipline, "full-card" %}
1212
{% endfor %}

‎web/_src/all-methods.njk‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,5 @@ title: "UX Methods A-Z"
1010
{% resourceCard method %}
1111
{% endfor %}
1212
</ul>
13-
<ul class="small-cards">
14-
{% for method in methods %}
15-
{% resourceCard method %}
16-
{% endfor %}
17-
</ul>
1813
</section>
1914
</article>

‎web/_src/discipline.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ permalink: /discipline/{{ resource.slug }}/index.html
2828
</section>
2929
<section>
3030
<h2>{{ resource.title | safe }} Methods</h2>
31-
<ul class="grid">
31+
<ul class="cards">
3232
{% for method in resource.methods %}
3333
{% resourceCard method, "full-card"%}
3434
{% endfor %}

‎web/_src/index.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ data:
3434
<h2>Top UX Methods</h2>
3535
<a href="/all-methods" class="header-link">All Methods A-Z</a>
3636
</header>
37-
<ul class="grid">
37+
<ul class="cards">
3838
{% for method in metadata.rankedMethods.slice(0, 6) %}
3939
{% resourceCard method, "full-card" %}
4040
{% endfor %}
4141
</ul>
4242
<header>
4343
<h2>UX Disciplines</h2>
4444
</header>
45-
<ul class="grid">
45+
<ul class="cards">
4646
{% for discipline in disciplines %}
4747
{% resourceCard discipline %}
4848
{% endfor %}

0 commit comments

Comments
 (0)