<p>Usually, the welcome box is shown for new users and should never appear again as soon as the welcome box gets closed (and a _osm_welcome cookie set). The way it is implemented now, the welcome box is always shown, and in case it should be closed, it gets closed about 100ms later. This leads to some annoying flickering on the screen.</p>
<p>Can we change this in a way so that the welcome box is always hidden, and only displayed if needed, i.e. turn around today's logic?</p>
<details>
<summary>Screencast (click to open)</summary>
<p><a target="_blank" href="https://user-images.githubusercontent.com/5842757/44306876-093ab900-a398-11e8-9c4a-e683823b7bc1.gif"><img src="https://user-images.githubusercontent.com/5842757/44306876-093ab900-a398-11e8-9c4a-e683823b7bc1.gif" alt="flicker" style="max-width:100%;"></a></p>
</details>
<p>I tried the following approach. However, it's not perfect for mobile, as show() gets immediately overruled by a <code>!important</code> css setting in small.scss, resulting again in some flickering :(</p>
<details>
<div class="highlight highlight-source-js"><pre>diff <span class="pl-k">--</span>git a<span class="pl-k">/</span>app<span class="pl-k">/</span>assets<span class="pl-k">/</span>javascripts<span class="pl-k">/</span><span class="pl-smi">index</span>.<span class="pl-smi">js</span> b<span class="pl-k">/</span>app<span class="pl-k">/</span>assets<span class="pl-k">/</span>javascripts<span class="pl-k">/</span><span class="pl-smi">index</span>.<span class="pl-smi">js</span>
index ccf4e561c..<span class="pl-ii">64aae48bd</span> <span class="pl-c1">100644</span>
<span class="pl-k">--</span><span class="pl-k">-</span> a<span class="pl-k">/</span>app<span class="pl-k">/</span>assets<span class="pl-k">/</span>javascripts<span class="pl-k">/</span><span class="pl-smi">index</span>.<span class="pl-smi">js</span>
<span class="pl-k">++</span><span class="pl-k">+</span> b<span class="pl-k">/</span>app<span class="pl-k">/</span>assets<span class="pl-k">/</span>javascripts<span class="pl-k">/</span><span class="pl-smi">index</span>.<span class="pl-smi">js</span>
@@ <span class="pl-k">-</span><span class="pl-c1">187</span>,<span class="pl-c1">8</span> <span class="pl-k">+</span><span class="pl-c1">187</span>,<span class="pl-c1">8</span> @@ <span class="pl-en">$</span>(<span class="pl-c1">document</span>).<span class="pl-en">ready</span>(<span class="pl-k">function</span> () {
<span class="pl-smi">$</span>.<span class="pl-c1">cookie</span>(<span class="pl-s"><span class="pl-pds">'</span>_osm_location<span class="pl-pds">'</span></span>, <span class="pl-c1">OSM</span>.<span class="pl-en">locationCookie</span>(map), { expires<span class="pl-k">:</span> expiry, path<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>/<span class="pl-pds">'</span></span> });
});
<span class="pl-k">-</span> <span class="pl-k">if</span> (<span class="pl-smi">$</span>.<span class="pl-c1">cookie</span>(<span class="pl-s"><span class="pl-pds">'</span>_osm_welcome<span class="pl-pds">'</span></span>) <span class="pl-k">===</span> <span class="pl-s"><span class="pl-pds">'</span>hide<span class="pl-pds">'</span></span>) {
<span class="pl-k">-</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">'</span>.welcome<span class="pl-pds">'</span></span>).<span class="pl-en">hide</span>();
<span class="pl-k">+</span> <span class="pl-k">if</span> (<span class="pl-smi">$</span>.<span class="pl-c1">cookie</span>(<span class="pl-s"><span class="pl-pds">'</span>_osm_welcome<span class="pl-pds">'</span></span>) <span class="pl-k">!==</span> <span class="pl-s"><span class="pl-pds">'</span>hide<span class="pl-pds">'</span></span>) {
<span class="pl-k">+</span> <span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">'</span>.welcome<span class="pl-pds">'</span></span>).<span class="pl-en">show</span>();
}
<span class="pl-en">$</span>(<span class="pl-s"><span class="pl-pds">'</span>.welcome .close-wrap<span class="pl-pds">'</span></span>).<span class="pl-en">on</span>(<span class="pl-s"><span class="pl-pds">'</span>click<span class="pl-pds">'</span></span>, <span class="pl-k">function</span>() {
diff <span class="pl-k">--</span>git a<span class="pl-k">/</span>app<span class="pl-k">/</span>assets<span class="pl-k">/</span>stylesheets<span class="pl-k">/</span><span class="pl-smi">common</span>.<span class="pl-smi">scss</span> b<span class="pl-k">/</span>app<span class="pl-k">/</span>assets<span class="pl-k">/</span>stylesheets<span class="pl-k">/</span><span class="pl-smi">common</span>.<span class="pl-smi">scss</span>
index f9214b24d..<span class="pl-smi">dd4a70693</span> <span class="pl-c1">100644</span>
<span class="pl-k">--</span><span class="pl-k">-</span> a<span class="pl-k">/</span>app<span class="pl-k">/</span>assets<span class="pl-k">/</span>stylesheets<span class="pl-k">/</span><span class="pl-smi">common</span>.<span class="pl-smi">scss</span>
<span class="pl-k">++</span><span class="pl-k">+</span> b<span class="pl-k">/</span>app<span class="pl-k">/</span>assets<span class="pl-k">/</span>stylesheets<span class="pl-k">/</span><span class="pl-smi">common</span>.<span class="pl-smi">scss</span>
@@ <span class="pl-k">-</span><span class="pl-c1">613</span>,<span class="pl-c1">7</span> <span class="pl-k">+</span><span class="pl-c1">613</span>,<span class="pl-c1">7</span> @@ <span class="pl-smi">body</span>.<span class="pl-c1">compact</span> {
#banner,
.<span class="pl-smi">welcome</span> {
<span class="pl-k">-</span> display<span class="pl-k">:</span> block;
<span class="pl-k">+</span> display<span class="pl-k">:</span> none;
}
#sidebar_content {
</pre></div>
</details>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/1951">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/ABWnLYopLtqioRg1yRjZ2QpbXdCBxNGCks5uSR--gaJpZM4WC4Lh">mute the thread</a>.<img src="https://github.com/notifications/beacon/ABWnLZsdQP3ME1DOSJpS7JkdADsou24cks5uSR--gaJpZM4WC4Lh.gif" height="1" width="1" alt="" /></p>
<script type="application/json" data-scope="inboxmarkup">{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/openstreetmap/openstreetmap-website","title":"openstreetmap/openstreetmap-website","subtitle":"GitHub repository","main_image_url":"https://assets-cdn.github.com/images/email/message_cards/header.png","avatar_image_url":"https://assets-cdn.github.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/openstreetmap/openstreetmap-website"}},"updates":{"snippets":[{"icon":"DESCRIPTION","message":"Welcome box flickers (#1951)"}],"action":{"name":"View Issue","url":"https://github.com/openstreetmap/openstreetmap-website/issues/1951"}}}</script>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/1951",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/1951",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
},
{
"@type": "MessageCard",
"@context": "http://schema.org/extensions",
"hideOriginalBody": "false",
"originator": "AF6C5A86-E920-430C-9C59-A73278B5EFEB",
"title": "Welcome box flickers (#1951)",
"sections": [
{
"text": "",
"activityTitle": "**mmd**",
"activityImage": "https://assets-cdn.github.com/images/email/message_cards/avatar.png",
"activitySubtitle": "@mmd-osm",
"facts": [
{
"name": "Repository: ",
"value": "openstreetmap/openstreetmap-website"
},
{
"name": "Issue #: ",
"value": 1951
}
]
}
],
"potentialAction": [
{
"name": "Add a comment",
"@type": "ActionCard",
"inputs": [
{
"isMultiLine": true,
"@type": "TextInput",
"id": "IssueComment",
"isRequired": false
}
],
"actions": [
{
"name": "Comment",
"@type": "HttpPOST",
"target": "https://api.github.com",
"body": "{\n\"commandName\": \"IssueComment\",\n\"repositoryFullName\": \"openstreetmap/openstreetmap-website\",\n\"issueId\": 1951,\n\"IssueComment\": \"{{IssueComment.value}}\"\n}"
}
]
},
{
"name": "Close issue",
"@type": "HttpPOST",
"target": "https://api.github.com",
"body": "{\n\"commandName\": \"IssueClose\",\n\"repositoryFullName\": \"openstreetmap/openstreetmap-website\",\n\"issueId\": 1951\n}"
},
{
"targets": [
{
"os": "default",
"uri": "https://github.com/openstreetmap/openstreetmap-website/issues/1951"
}
],
"@type": "OpenUri",
"name": "View on GitHub"
},
{
"name": "Unsubscribe",
"@type": "HttpPOST",
"target": "https://api.github.com",
"body": "{\n\"commandName\": \"MuteNotification\",\n\"threadId\": 369853153\n}"
}
],
"themeColor": "26292E"
}
]</script>