Skip to content

Commit

Permalink
Merge pull request #233 from HBO-i/feature/update-research-pattern-na…
Browse files Browse the repository at this point in the history 
…vigator

Research Pattern Navigator v2
  • Loading branch information
@jochemvogel
jochemvogel authored Jul 30, 2024
2 parents 55c45d2 + fb88cbb commit c97138d
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 109 deletions.
122 changes: 50 additions & 72 deletions src/lib/components/PatternCard.svelte → src/lib/components/QuestionCard.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,31 @@
<script lang="ts">
export let patternTitle: string;
export let patternCategories: string[];
export let patternQuestions: string[];
export let questionTitle: string;
export let questionPattern: string;
import { capitalizeFirstLetter, slugify } from '$lib/utils/format';
import Tag from './utils/Tag.svelte';
</script>

<a href={`/patterns/${slugify(patternTitle)}`} class="article-wrapper">
<a href={`/patterns/${slugify(questionPattern)}`} class="article-wrapper">
<article>
<picture class="img">
<div class="img-title">
<picture class="img">
<source type="image/webp" srcset={`/img/patterns/${slugify(questionPattern)}.webp`} />
<source type="image/png" srcset={`/img/patterns/${slugify(questionPattern)}.png`} />
<img
src={`/img/patterns/${slugify(questionPattern)}.png`}
loading="lazy"
decoding="async"
class="img"
alt=""
height="400"
width="400"
/>
</picture>
<h1>{questionTitle}</h1>
</div>
<p>{questionPattern}</p>
<!-- <picture class="img">
<source type="image/webp" srcset={`/img/patterns/${slugify(patternTitle)}.webp`} />
<source type="image/png" srcset={`/img/patterns/${slugify(patternTitle)}.png`} />
<img
Expand Down Expand Up @@ -39,72 +55,61 @@
<li>{question}</li>
{/each}
</ul>
</div>
</div> -->
</article>
</a>

<style lang="scss">
a {
text-decoration: none;
}
.article-wrapper {
width: 100%;
&:hover {
cursor: pointer;
font-weight: inherit;
transform: scale(1.1);
}
}
article {
box-sizing: border-box;
background-color: var(--color-white);
border-radius: 0.5rem;
display: grid;
grid-template-areas:
'img heading heading heading'
'questions questions questions questions';
grid-template-columns: 7.5rem 1fr;
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
justify-content: space-between;
width: 100%;
padding: 1.5rem;
height: 100%;
padding: 1rem;
@include tablet {
grid-template-areas:
'img heading heading heading heading'
'img questions questions questions questions';
grid-template-columns: 10.5rem 1fr;
grid-gap: 1.5rem;
align-items: center;
width: 60rem;
}
@include desktop-small {
width: 55rem;
&:hover {
transform: scale(1.01);
transition: transform 0.2s ease;
}
@include desktop {
width: 65rem;
}
p {
font-size: 1.2em;
margin: 0;
@include desktop-large {
width: 75rem;
}
&:hover {
text-decoration: underline;
cursor: pointer;
}
&:hover {
transform: scale(1.01);
transition: transform 0.2s ease;
&::after {
content: ' ->';
}
}
}
.img {
height: 6rem;
width: 6rem;
height: 7.5rem;
border-radius: 10px;
width: 100%;
object-fit: contain;
background-color: var(--color-bg);
@include tablet {
height: 10rem;
width: 10rem;
}
}
Expand All @@ -117,36 +122,9 @@
}
}
h2 {
font-size: 1.1em;
@include tablet-landscape {
font-size: 1.2em;
}
}
li {
max-width: 30em;
font-size: 1em;
line-height: 1.4em;
}
.img {
grid-area: img;
}
.heading-container {
grid-area: heading;
}
.questions-container {
grid-area: questions;
}
.tag-container {
.img-title {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
flex-direction: column;
gap: 8px;
}
</style>
87 changes: 50 additions & 37 deletions src/routes/research-pattern-navigator/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,65 @@
<script lang="ts">
import PatternCard from '$lib/components/PatternCard.svelte';
import QuestionCard from '$lib/components/QuestionCard.svelte';
import Alert from '$lib/components/utils/Alert.svelte';
// @TODO: Find cleaner way of storing this (+page.ts?)
const patternsArray = [
const Pattern = {
CLARIFY_FOCUS_AND_SCOPE: 'Clarify focus and scope',
SOLIDIFY: 'Solidify',
VALIDATE: 'Validate',
CHOOSE_FITTING_TECHNOLOGY: 'Choose fitting technology',
REALISE_AS_REQUIRED: 'Realise as required',
REALISE_AS_AN_EXPERT: 'Realise as an expert'
};
const questionsArray = [
{
question: 'How do I get a grasp on what the stakeholders really want?',
categories: ['field', 'workshop'],
pattern: Pattern.CLARIFY_FOCUS_AND_SCOPE
},
{
title: 'Clarify focus and scope',
question: 'How can I help the stakeholders get clear what they really want?',
categories: ['field', 'workshop'],
questions: [
'How do I get a grasp on what the stakeholders really want?',
'How can I help the stakeholders get clear what they really want?'
]
pattern: Pattern.CLARIFY_FOCUS_AND_SCOPE
},
{
title: 'Solidify',
question: 'How do I develop a deep enough understanding of the context using available work?',
categories: ['field', 'library'],
questions: [
'How do I develop a deep enough understanding of the context using available work?'
]
pattern: Pattern.SOLIDIFY
},
{
title: 'Validate',
question: 'How do I monitor the quality of my solution?',
categories: ['workshop', 'lab'],
questions: ['How do I monitor the quality of my solution?']
pattern: Pattern.VALIDATE
},
{
title: 'Choose fitting technology',
question: 'How do I choose the right technologies for my project?',
categories: ['library', 'field', 'workshop'],
questions: ['How do I choose the right technologies for my project?']
pattern: Pattern.CHOOSE_FITTING_TECHNOLOGY
},
{
title: 'Realise as required',
question:
'How can I ensure the product meets the needs of the stakeholders throughout the project?',
categories: ['field', 'workshop', 'lab'],
questions: [
'How can I ensure the product meets the needs of the stakeholders throughout the project?'
]
pattern: Pattern.REALISE_AS_REQUIRED
},
{
title: 'Realise as an expert',
categories: ['library', 'workshop'],
questions: [
question:
'How do I develop a solution that is more generally applicable than just for my immediate stakeholders?',
categories: ['library', 'workshop'],
pattern: Pattern.REALISE_AS_AN_EXPERT
},
{
question:
'How do I develop a state-of-the-art solution that meets professional requirements?',
'How do I develop something using technologies or techniques that I don’t know yet?'
]
categories: ['library', 'workshop'],
pattern: Pattern.REALISE_AS_AN_EXPERT
},
{
question:
'How do I develop something using technologies or techniques that I don’t know yet?',
categories: ['library', 'workshop'],
pattern: Pattern.REALISE_AS_AN_EXPERT
}
];
</script>
Expand All @@ -67,13 +83,9 @@

<section>
<ul>
{#each patternsArray as pattern}
{#each questionsArray as question}
<li>
<PatternCard
patternTitle={pattern.title}
patternCategories={pattern.categories}
patternQuestions={pattern.questions}
/>
<QuestionCard questionTitle={question.question} questionPattern={question.pattern} />
</li>
{/each}
</ul>
Expand All @@ -83,13 +95,14 @@
ul {
list-style: none;
padding-left: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
li {
margin: 2rem 0;
}
p {
max-width: 90vw;
@media (max-width: 768px) {
ul {
grid-template-columns: 1fr;
}
}
</style>

0 comments on commit c97138d

Please sign in to comment.