Skip to content

Commit

Permalink
Update wireframe landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@gilesdring
gilesdring committed Oct 29, 2024
1 parent 7f12e98 commit 228272b
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 28 deletions.
1 change: 0 additions & 1 deletion src/_includes/css/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ hr {
);
height: 2.3rem;
margin: 0;
margin-block-start: 1.25rem;
}

pre {
Expand Down
11 changes: 6 additions & 5 deletions src/_includes/css/visual.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@
& > *:last-child {
margin-block-end: 0;
}
&:is(a) {
text-decoration: unset;
&:hover {
text-decoration: underline;
}
& a, &:is(a) {
color: inherit;
text-decoration: unset;
&:hover {
text-decoration: underline;
}
}
}

Expand Down
109 changes: 87 additions & 22 deletions src/landing/wireframe.vto
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ title: Home
layout: templates/page.vto
---

<section style="max-width: 50rem;margin-inline:auto;">
<section class="grid regular">
<section class="grid regular" style="padding-bottom: 1rem;">
<h2 class="full-width">Events (topic)</h2>
<div class="block c-yellow" style="max-width: min(15rem, 100%); margin-inline: auto;">
<p style="font-size: 3rem" class="centred">xxx events</p>

<div class="block c-yellow centred" style="max-width: min(15rem, 100%); margin-inline: auto;">
<p style="margin-block:0;">Total scheduled events</p>
<p style="font-size: 3rem; font-weight: 900;margin-block:0.5rem;">987</p>
<p style="margin-block:0;"><em>Example data</em></p>
</div>
<div>
<p style="margin-block-start: 0;">
Expand All @@ -19,49 +19,114 @@ layout: templates/page.vto
</div>
</section>

<section class="grid">
<section class="grid regular block" style="padding-bottom: 1rem;">
<h2 class="full-width">Engagement (perspective)</h2>
<div>
<p>
The <q>Engagement</q> perspective presents monitoring and evaluation data about engagement
across the Bradford 2025 area.
</p>
<p>
<a class="block c-yellow" href="/volunteers/">Explore the engagement perspective &rarr;</a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolore ipsam minima. Quidem, tenetur quis voluptas illo dignissimos hic, reiciendis officia in cumque dolore impedit placeat fugiat perspiciatis, rem eius.
</p>
<p>
<a class="block c-yellow" href="/perspectivces/engagement/">Explore the engagement perspective &rarr;</a>
</p>
</div>
<div class="block">Map in here</div>
<div class="block">
{{ comp.oi.map.svg({
config: {
geojson: { key: "WD24CD", data: geojson.bd_wards },
bounds: bounds.bradford,
data: search.data('/design/geospatial').wards,
key: 'code',
tooltip: 'name',
tooltip: '{{ name }} ({{ short_code }})',
tools: {
filter: {
label: 'name'
}
}
}
}) }}
</div>
</section>

<section class="grid">
<section class="grid regular" style="padding-bottom: 1rem;">
<h2 class="full-width">Volunteers (topic)</h2>
<div class="block">Graph in here</div>
<div class="block">{{
comp.oi.chart.line({
config: {
data: Array.from(Array(20)).map((_, x) => ({ x, y: Math.round(Math.random(x) * 20) })),
width: 600,
height: 400,
series: [
{
title: 'Example data',
x: 'x',
y: 'y',
}
],
axis: {
x: { tick: { spacing: 5 }, title: "Input" },
y: { min: 0, max: 20, tick: { spacing: 5 }, grid: { show: true } },
}
}
})
}}</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore dolor, libero, accusantium hic aspernatur explicabo magni, deserunt autem repellat id possimus. Expedita hic sed ut doloremque quaerat beatae autem id?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, fugit perferendis et cum magni recusandae aliquam, incidunt porro harum animi, voluptas quisquam expedita quos. Voluptatem numquam ab accusamus commodi eos!
</p>
<a class="block c-pink" href="/volunteers/">Explore the volunteers topic &rarr;</a>
</div>
</section>

<section class="grid">
<section class="grid regular block" style="padding-bottom: 1rem;">
<h2 class="full-width">Tickets (topic)</h2>
<div>
EXPLORE THE TICKETS TOPIC.
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio ipsa odit nesciunt harum recusandae nisi alias asperiores consequuntur eaque labore. Reiciendis iure fugiat voluptates eaque tenetur rerum consequatur, perferendis non!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro et distinctio harum assumenda labore? Accusantium corporis quas doloremque omnis incidunt placeat, quo explicabo veritatis rem facere enim sit error magnam.</p>
<p class="block c-green"><a href="/topic/tickets/">Explore the Tickets topic &rarr;</a></p>
</div>
<div class="block">Graph in here</div>
</section>

<div>{{
comp.oi.chart.bar({
config: {
data: Array.from(Array(5)).map((_, i) => ({ category: `Category ${i+1}`, value: Math.round(Math.random() * 20) })),
width: 600,
height: 400,
category: 'category',
series: [
{ title: "Example series", value: "value" }
]
}
})
}}</div>
</section>

<section>
<h2>Explore the {{ metas.site }}</h2>
<ul class="grid regular centred" style="--grid-basis: 5rem; font-size: 1.5em;">
<li>
<a class="block c-yellow" href="{{ '~/topics/index.yml' |> url }}">Topics &rarr;</a>
<ul class="grid regular centred" style="--grid-basis: 10rem;">
<li class="block c-yellow">
<a href="{{ '~/topics/index.yml' |> url }}">
<div style="font-size: 1.5em;">Topics</div>
<div>{{ search.data('/topics/').description }} &rarr;</div>
</a>
</li>
<li>
<a class="block c-green" href="{{ '~/perspectives/index.yml' |> url }}">Perspectives &rarr;</a>
<li class="block c-green">
<a href="{{ '~/perspectives/index.yml' |> url }}">
<div style="font-size: 1.5em;">Perspectives</div>
<div>{{ search.data('/perspectives/').description }} &rarr;</div>
</a>
</li>
<li>
<a class="block c-pink" href="{{ '~/experiments/index.yml' |> url }}">Experiments &rarr;</a>
<li class="block c-pink">
<a href="{{ '~/experiments/index.yml' |> url }}">
<div style="font-size: 1.5em;">Experiments</div>
<div>{{ search.data('/experiments/').description }} &rarr;</div>
</a>
</li>
</ul>
</section>
Expand Down

0 comments on commit 228272b

Please sign in to comment.