Skip to content

Commit

Permalink
fix: year in hog fangling (#19189)
Browse files Browse the repository at this point in the history 
* fix: year in hog fangling

* fangling

* fix

* remove skip

* style improvements

* tooltip the explanation

* achievements unlocked needs to have 2 badges to not be a bit rubbish
  • Loading branch information
@pauldambra
pauldambra authored Dec 7, 2023
1 parent f2554dc commit d229aa6
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 79 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/notebooks.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe('Notebooks', () => {
cy.get('.ph-recording.NotebookNode').should('exist')
})

it.skip('Insertion suggestions can be dismissed', () => {
it('Insertion suggestions can be dismissed', () => {
cy.visit(urls.notebook('h11RoiwV'))
cy.get('.SessionRecordingPlayer').click()
cy.get('.ProseMirror').type('{enter}')
Expand Down
188 changes: 137 additions & 51 deletions posthog/year_in_posthog/2023.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
display: flex;
flex-direction: column;
font-weight: 400;
font-size: 5vw;
font-size: 32px;
line-height: 1.25;
align-items: center;
}
Expand All @@ -113,6 +113,7 @@
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
pointer-events: none;
}

h1 {
Expand Down Expand Up @@ -142,7 +143,7 @@

@media only screen and (min-width: 650px) {
body {
font-size: 2.5vw;
font-size: 1.5rem;
}
}

Expand Down Expand Up @@ -204,8 +205,8 @@
color: {{ highlight_color }};
}

{% for b in badges %}
.highlight.{{ b }} {
{% for _, b in badges.items %}
.highlight.{{ b.badge }} {
color: {{ b.highlight_color }};
}
{% endfor %}
Expand All @@ -214,6 +215,12 @@
color: #969696;
}

.text-sm {
font-weight: 300;
font-size: 1rem;
line-height: 1rem;
}

.text-xl {
font-weight: 600;
font-size: 1.5rem;
Expand All @@ -228,10 +235,15 @@

.text-3xl {
font-weight: 600;
font-size: 3rem;
font-size: 2rem;
line-height: 1;
}

.my-4 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

.my-8 {
margin-top: 1rem;
margin-bottom: 1rem;
Expand All @@ -258,24 +270,14 @@
padding-bottom: 1rem;
}

.pt-4 {
padding-top: 1rem;
.pt-2 {
padding-top: 0.5rem;
}

.pl-8 {
padding-left: 2rem;
}

.badge {
width: 326px;
height: 326px;
}

.badge.mini {
width: 163px;
height: 163px;
}

.stats {
display: flex;
flex-direction: row;
Expand All @@ -287,7 +289,6 @@
display: flex;
flex-direction: column;
flex-basis: 100%;
font-size: 1.5rem;
}


Expand All @@ -300,30 +301,30 @@

.achievements {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
gap: 10px; /* Adjust the gap between grid items as needed */
width: 100%;
}

@media screen and (max-width: 930px) {
.achievements {
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* Change to 3 column with smaller images */
}
.badge {
width: 326px;
height: 326px;
}

.badge.mini {
width: 100px;
height: 100px;
}
.badge.mini {
width: 100px;
height: 100px;
}

@media screen and (max-width: 600px) {
@media screen and (max-width: 980px) {
.achievements {
grid-template-columns: repeat(auto-fill, minmax(48%, 1fr)); /* Change to 2 columns */
grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
}
}

.badge.mini {
width: 160px;
height: 160px;
@media screen and (max-width: 790px) {
.achievements {
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}
}

Expand All @@ -346,7 +347,6 @@
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.5rem;
}

.sharing {
Expand Down Expand Up @@ -404,6 +404,44 @@
}
}

[data-tooltip] {
cursor: help;
}

[role="tooltip"] {
opacity: 0;
position: absolute;
width: auto;
max-width: 20%;
height: auto;
min-height: 25px;
line-height: 25px;
font-size: 1rem;
background-color: rgba(0, 0, 0, 0.7);
color: #ffffff;
border-radius: 5px;
margin-top: 10px;
padding: 10px 15px;
transform: translateX(-50%);
}

[role="tooltip"].active {
opacity: 1;
transition: opacity 0.1s;
}

[role="tooltip"]::before {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(0, 0, 0, 0.7);
position: absolute;
margin-top: -20px;
transform: translateX(-50%);
left: 50%;
}
</style>
<meta name="description" content="{{ explanation }}">
<meta name="image" content="{{ request.scheme }}://{{ request.META.HTTP_HOST }}{% static opengraph_image %}">
Expand Down Expand Up @@ -442,36 +480,40 @@ <h1 class="highlight text-3xl">{{ human_badge }}</h1>
</div>
<div class="right column">
<div class="muted">You earned this badge because...</div>
<div class="highlight text-2xl my-8">{{ explanation }}</div>
<div class="stats pt-4">
<div class="highlight text-2xl my-4">{{ explanation }}</div>
<div class="stats pt-2">
{% for stat in stats %}
<div class="stat px-1">
<div class="highlight text-3xl">{{ stat.count }}</div>
<div>{{ stat.description }}</div>
</div>
{% endfor %}
</div>
<div class="achievements-wrapper pt-4">
<h2 class="highlight text-2xl">Achievements unlocked</h2>
<div class="achievements">
{% for _, b in badges.items %}
<div class="achievement" title="{{ b.explanation }}">
<picture class="badge mini">
<source type="image/webp" srcset="{% static b.image_webp %}" width="163" height="163">
<source type="image/png" srcset="{% static b.image_png %}" width="163" height="163">
<img class="badge mini" src="{% static b.image_png %}" width="163" height="163"
alt="An illustration of a hedgehog who is a {{ b.human_badge }}">
</picture>
<div class="my-4 text-center highlight {{ b.badge }}">{{ b.human_badge }}</div>
</div>
{% endfor %}
{% if badges %}
<div class="achievements-wrapper pt-2">
<h2 class="highlight text-xl">Achievements unlocked</h2>
<div class="achievements">
{% for _, b in badges.items %}
<div class="achievement text-sm" data-tooltip="{{ b.explanation }}">
<picture class="badge mini">
<source type="image/webp" srcset="{% static b.image_webp %}" width="100" height="100">
<source type="image/png" srcset="{% static b.image_png %}" width="100" height="100">
<img class="badge mini" src="{% static b.image_png %}" width="100" height="100"
alt="An illustration of a hedgehog who is a {{ b.human_badge }}">
</picture>
<div class="my-4 text-center highlight {{ b.badge }}">{{ b.human_badge }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<div class="sharing">{% include "sharing-buttons.html" %}</div>
</div>

</main>
<footer class="footer" role="contentinfo">
<div class="pl-8 text-xl grow items-center flex">
<span>Year in </span>
{# copied from <FriendlyLogo/>#}
<svg
fill="none"
Expand Down Expand Up @@ -523,11 +565,55 @@ <h2 class="highlight text-2xl">Achievements unlocked</h2>
<path d="m120.815 23.0299c1.113 0 2.105-.3846 2.631-1.0525v.9715c0 1.1334-.911 1.9228-2.307 1.9228-.992 0-1.862-.4858-2.004-1.3156l-2.712.425c.364 1.9228 2.328 3.2181 4.716 3.2181 3.137 0 5.222-1.8418 5.222-4.5741v-9.4721h-2.935v.8703c-.546-.6274-1.477-1.0322-2.672-1.0322-2.833 0-4.614 1.943-4.614 5.0194s1.781 5.0194 4.675 5.0194zm-1.781-5.0194c0-1.518.891-2.4895 2.267-2.4895 1.396 0 2.287.9715 2.287 2.4895 0 1.5179-.891 2.4894-2.287 2.4894-1.376 0-2.267-.9715-2.267-2.4894z"/>
</g>
</svg>
<span>&nbsp;unwrapped</span>
</div>
<div>
<div class="sharing">{% include "sharing-buttons.html" %}</div>
</div>
</footer>
<script>
const tooltips = document.querySelectorAll("[data-tooltip]");

const displayTooltip = (e) => {
const trigger = e.target;
const tooltip = trigger.querySelector("[role=tooltip]");

const {x, y, width, height} = trigger.getBoundingClientRect();
tooltip.style.left = `${Math.floor(x + width / 2)}px`;
tooltip.style.top = `${Math.floor(y + height)}px`;

tooltip.classList.add("active");
};

const hideTooltip = (e) => {
const tooltip = e.target.querySelector("[role=tooltip]");
tooltip.classList.remove("active");
};

const DELAY = 100;
let tooltipTimer = null;

tooltips.forEach((trigger) => {
let tooltip = document.createElement("div");

tooltip.setAttribute("role", "tooltip");
tooltip.setAttribute("inert", true);
tooltip.textContent = trigger.dataset.tooltip;

trigger.appendChild(tooltip);

trigger.addEventListener("mouseenter", (e) => {
clearTimeout(tooltipTimer);

tooltipTimer = setTimeout(() => {
displayTooltip(e);
}, DELAY);
});

trigger.addEventListener("mouseleave", (e) => {
clearTimeout(tooltipTimer);
hideTooltip(e);
});
});
</script>
</body>
</html>
8 changes: 5 additions & 3 deletions posthog/year_in_posthog/calculate_2023.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
from django.db import connection

from posthog.cache_utils import cache_for
from posthog.logging.timing import timed

query = """
with insight_stats AS (
Expand Down Expand Up @@ -38,7 +37,11 @@
FROM
posthog_featureflag
WHERE
date_part('year', created_at) = 2023
-- only having a single percentage symbol here gives very misleading Python errors :/
key not ilike 'survey-targeting%%'
AND key not ilike 'prompt-%%'
AND key not ilike 'interview-%%'
AND date_part('year', created_at) = 2023
AND created_by_id = (select id from posthog_user where uuid = %(user_uuid)s)
GROUP BY
created_by_id
Expand Down Expand Up @@ -148,7 +151,6 @@ def dictfetchall(cursor):
return [dict(zip(columns, row)) for row in cursor.fetchall()]


@timed("year_in_posthog_2023_calculation")
@cache_for(timedelta(seconds=0 if settings.DEBUG else 30))
def calculate_year_in_posthog_2023(user_uuid: str) -> Optional[Dict]:
with connection.cursor() as cursor:
Expand Down
4 changes: 2 additions & 2 deletions posthog/year_in_posthog/hibernating.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,8 @@
</head>
<body>

<h1>Year in PostHog is hibernating.</h1>
<img alt="Year in PostHog is hibernating."
<h1>{{ message }}</h1>
<img alt="A sleeping max the hedgehog"
width="578" height="400"
src="{% static 'year_in_hog/sleeping-hog.png' %}"
/>
Expand Down
Loading

0 comments on commit d229aa6

Please sign in to comment.