openvibers/openvibe.chat Commits

Vibe's greeting fits a short phone: tighter copy, and under 700 px tall the mark goes and one suggestion stays (at 320x640 the heading was above the screen) (#181)

OP OpenVibers committed 20 days ago · ccfac99bfe · 2 files, +7 −1

Changes

ddiff --git a/public/web/vibe.css b/public/web/vibe.css
iindex 8482471..9afe9ee 100644
---- a/public/web/vibe.css
++++ b/public/web/vibe.css
@@@ -246,6 +246,12 @@ body.oc-app-body { overflow: hidden; }
.vb-hello { justify-content: flex-end; padding-bottom: 4px; }
.vb-sub { font-size: .92rem; margin-bottom: 16px; }
}
++/* A short phone (an SE, a landscape tablet with the keyboard up): the greeting, one suggestion and the composer fit. */
++@media (max-width: 520px) and (max-height: 700px) {
++ .vb-hello .vb-mark { display: none; }
++ .vb-hello h1 { font-size: 1.35rem; }
++ .vb-suggest li:nth-child(n+2) { display: none; }
++}
@media (prefers-reduced-motion: reduce) { .vb-rail { transition: none; } }
/* A picture waiting to go with the next message (vibe.js), above the composer; the attach button inside it. */
ddiff --git a/server/web/vibe-pages.js b/server/web/vibe-pages.js
iindex 2edf200..2054547 100644
---- a/server/web/vibe-pages.js
++++ b/server/web/vibe-pages.js
@@@ -180,7 +180,7 @@ function mountVibePages(router, { page, viewerOf, needUser, sameSite, formLimit,
const hello = `<div class="vb-hello">
${MARK}
<h1>${user ? `What can I help with${user.display_name || user.username ? `, ${esc(String(user.display_name || user.username).split(' ')[0])}` : ''}?` : 'Hi, I\'m Vibe. What can I help with?'}</h1>
--<p class="vb-sub">OpenVibe's assistant. I can search the web and everything on OpenVibe, from news and deals to jobs, rentals and videos, read any page you link, look at pictures you send, remember what you ask me to, set up work that runs every day for you, and help you think things through.</p>
++<p class="vb-sub">OpenVibe's assistant. I search the web and all of OpenVibe (news, deals, jobs, rentals, videos), read the pages and pictures you share, remember what you ask me to, and set up work that runs every day for you.</p>
<ul class="vb-suggest">${SUGGESTIONS.map((s) => `<li><button type="button" class="vb-chip" data-prompt="${esc(s.prompt)}"><b>${esc(s.title)}</b><span>${esc(s.text)}</span></button></li>`).join('')}</ul>
</div>`;
const thread = room