Skip to content

Title bar: mortarboard icon #11

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
roxburghm merged 1 commit into from
Nov 13, 2026
+9 −4
Merged

Title bar: mortarboard icon #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div v-if="!narrow" class="d-shell">
<header class="app-header">
<div class="brand">
<span class="brand__mark" aria-hidden="true"><school-icon kind="distance"/></span>
<span class="brand__mark" aria-hidden="true"><school-icon kind="cap"/></span>
<div>
<h1>Ealing secondary school places</h1>
<p>How close did you need to live to get a place? Cut-off distances for every school, 2019–2026.</p>
Expand Down Expand Up @@ -83,7 +83,7 @@
<div v-else class="m-shell">
<header class="m-bar">
<div class="m-bar__top">
<span class="brand__mark brand__mark--small" aria-hidden="true"><school-icon kind="distance"/></span>
<span class="brand__mark brand__mark--small" aria-hidden="true"><school-icon kind="cap"/></span>
<h1>Ealing school places</h1>
<button type="button" class="icon-btn" aria-label="Compare schools" @click="showTable = true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
Expand Down
9 changes: 7 additions & 2 deletions src/components/SchoolIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<!-- One of four glyphs saying how a school offered places in a year. Drawn in currentColor. -->
<!-- One of four glyphs saying how a school offered places in a year, plus the app's
mortarboard mark. Drawn in currentColor. -->
<svg viewBox="0 0 24 24" aria-hidden="true" class="school-icon">
<!-- Everyone offered: a tick -->
<path v-if="kind === 'open'" d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="3.5"
Expand All @@ -9,6 +10,10 @@
<path v-else-if="kind === 'walk'" fill="currentColor"
d="M14.12,10H19V8.2H15.38L13.38,4.87C13.08,4.37 12.54,4.03 11.92,4.03C11.74,4.03 11.58,4.06 11.42,4.11L6,5.8V11H7.8V7.33L9.91,6.67L6,22H7.8L10.67,13.89L13,17V22H14.8V15.59L12.31,11.05L13.04,8.18M14,3.8C15,3.8 15.8,3 15.8,2C15.8,1 15,0.2 14,0.2C13,0.2 12.2,1 12.2,2C12.2,3 13,3.8 14,3.8Z"/>

<!-- App mark: a mortarboard (Material Design Icons "school") -->
<path v-else-if="kind === 'cap'" fill="currentColor"
d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"/>

<!-- No places by distance: a dash -->
<path v-else-if="kind === 'none'" d="M6.5 12h11" fill="none" stroke="currentColor" stroke-width="3.5"
stroke-linecap="round"/>
Expand All @@ -26,7 +31,7 @@
export default {
name: 'SchoolIcon',
props: {
// 'open' | 'walk' | 'none' | 'distance'
// 'open' | 'walk' | 'none' | 'distance' | 'cap'
kind: {type: String, required: true},
},
};
Expand Down
Loading