openvibers/openvibe.network Commits

openvibe.my: the public page form looks like the profile form above it (#699)

OP OpenVibers committed 4 days ago · 313b084bb4 · 2 files, +24 −4

Your public page's fields were bare labels and boxes in one line ("Pronouns (40 characters) [box] Bio (280"),
at the browser's default size, with a default bordered fieldset for Places to show. They now use the same
.form-field fields as Edit Profile, the limits as hints under each box, and the places as a row of checkboxes under
a field name.

Changes

ddiff --git a/public/css/my.css b/public/css/my.css
iindex ff6cbf89..6e4bd35b 100644
---- a/public/css/my.css
++++ b/public/css/my.css
@@@ -666,3 +666,11 @@ button.td-stat:hover span { color: var(--accent-light); }
  .me-status[data-state="invisible"] i, .me-status[data-state="offline"] i { background: transparent; box-shadow: inset 0 0 0 2px #94a3b8; }
  .me-status small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
  .me-status small::before { content: "·"; margin-right: 6px; }
++
++/* Your public page: its places to show, as a group of checkboxes under a field name like the others. */
++.pp-places{border:0;padding:0;margin:0 0 14px;min-width:0}
++.pp-places legend{display:block;padding:0;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
++.pp-places-row{display:flex;flex-wrap:wrap;gap:10px 18px}
++.pp-places-row .data-check{align-items:center}
++.pp-places-row .data-check input{margin-top:0}
++#public-page-card > p.muted{margin-bottom:16px}
ddiff --git a/public/my.html b/public/my.html
iindex 12e475ff..bf08fdd1 100644
---- a/public/my.html
++++ b/public/my.html
@@@ -224,10 +224,22 @@
          <div class="card" id="public-page-card">
              <h3><span class="icon"><i class="fa-solid fa-address-card"></i></span> Your public page</h3>
              <p class="muted">A link-in-bio page at <a id="public-page-url" href="https://openvibe.network/" target="_blank" rel="noopener">openvibe.network/@you</a>. Only information already public while signed out can appear here.</p>
--            <label for="public-page-pronouns">Pronouns <small>(40 characters)</small></label><input id="public-page-pronouns" maxlength="40" autocomplete="off">
--            <label for="public-page-bio">Bio <small>(280 characters)</small></label><textarea id="public-page-bio" maxlength="280" rows="3"></textarea>
--            <label for="public-page-links">Links <small>(up to 8; one per line: label | https://…)</small></label><textarea id="public-page-links" rows="5" placeholder="My website | https://example.com"></textarea>
--            <fieldset><legend>Places to show</legend><label><input type="checkbox" id="public-place-live" checked> Live</label> <label><input type="checkbox" id="public-place-media" checked> Videos</label> <label><input type="checkbox" id="public-place-space" checked> Sites</label> <label><input type="checkbox" id="public-place-community" checked> Community</label></fieldset>
++            <!-- The same fields as Edit Profile above (.form-field): they were bare labels and boxes in a line (11-09). -->
++            <div class="form-field">
++                <label for="public-page-pronouns">Pronouns</label><input id="public-page-pronouns" maxlength="40" autocomplete="off">
++                <div class="hint">Up to 40 characters.</div>
++            </div>
++            <div class="form-field">
++                <label for="public-page-bio">Bio</label><textarea id="public-page-bio" maxlength="280" rows="3"></textarea>
++                <div class="hint">Up to 280 characters.</div>
++            </div>
++            <div class="form-field">
++                <label for="public-page-links">Links</label><textarea id="public-page-links" rows="5" placeholder="My website | https://example.com"></textarea>
++                <div class="hint">Up to 8, one per line: a label, a bar, then the address.</div>
++            </div>
++            <fieldset class="form-field pp-places"><legend>Places to show</legend>
++                <div class="pp-places-row"><label class="data-check"><input type="checkbox" id="public-place-live" checked> <span>Live</span></label><label class="data-check"><input type="checkbox" id="public-place-media" checked> <span>Videos</span></label><label class="data-check"><input type="checkbox" id="public-place-space" checked> <span>Sites</span></label><label class="data-check"><input type="checkbox" id="public-place-community" checked> <span>Community</span></label></div>
++            </fieldset>
              <div class="btn-row"><button type="button" class="btn" id="public-page-preview-toggle">Preview</button><button type="button" class="btn btn-primary" id="public-page-save">Save public page</button></div>
              <div id="public-page-preview" hidden aria-live="polite"></div><div id="public-page-msg" role="status"></div>
          </div>