kopia lustrzana https://github.com/snarfed/bridgy-fed
front page redesign: polish button interactions
rodzic
77392ba0e7
commit
ed0612903d
|
@ -5,20 +5,26 @@
|
||||||
function update() {
|
function update() {
|
||||||
// show matching instructions
|
// show matching instructions
|
||||||
// console.log($('.instruction'))
|
// console.log($('.instruction'))
|
||||||
for (instr of $('.instruction')) {
|
|
||||||
if (instr.id == 'front-instruction-placeholder') {
|
|
||||||
instr.style.display = 'none'
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
|
let showed = false;
|
||||||
|
for (instr of $('.instruction')) {
|
||||||
let parts = instr.id.split('-')
|
let parts = instr.id.split('-')
|
||||||
let me = parts[1]
|
let me = parts[1]
|
||||||
let them = parts[2]
|
let them = parts[2]
|
||||||
// console.log(me, them, $(`#me-${me}`)[0].checked, $(`#them-${them}`)[0].checked)
|
// console.log(me, them, $(`#me-${me}`)[0].checked, $(`#them-${them}`)[0].checked)
|
||||||
instr.style.display =
|
|
||||||
($(`#me-${me}`)[0].checked && $(`#them-${them}`)[0].checked)
|
if ($(`#me-${me}`)[0].checked && $(`#them-${them}`)[0].checked) {
|
||||||
? 'block' : 'none'
|
instr.style.display = 'block'
|
||||||
|
document.getElementById('front-instructions')
|
||||||
|
.scrollIntoView({behavior: 'smooth', block: 'nearest'})
|
||||||
|
showed = true;
|
||||||
|
} else {
|
||||||
|
instr.style.display = 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.getElementById('front-instruction-placeholder').style.display =
|
||||||
|
(showed) ? 'none' : 'block'
|
||||||
}
|
}
|
||||||
|
|
||||||
addEventListener('DOMContentLoaded', () => {
|
addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
#topology {
|
#topology {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
background-color: #003355;
|
background-color: var(--bg); /* #003355; */
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -198,14 +198,14 @@ pre .value, code .value, code.value {
|
||||||
.btn.atproto, .btn.atproto:hover {
|
.btn.atproto, .btn.atproto:hover {
|
||||||
background-color: #2b3e5b;
|
background-color: #2b3e5b;
|
||||||
/* not disabled: #113a79; */
|
/* not disabled: #113a79; */
|
||||||
border: 2px solid #2e5884;
|
border: 2px solid #3e6894;
|
||||||
/* not disabled: #4786c9; */
|
/* not disabled: #4786c9; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.nostr, .btn.nostr:hover {
|
.btn.nostr, .btn.nostr:hover {
|
||||||
background-color: #46374F;
|
background-color: #46374F;
|
||||||
/* not disabled: #491F62; */
|
/* not disabled: #491F62; */
|
||||||
border: 2px solid #53415E;
|
border: 2px solid #63516E;
|
||||||
/* not disabled: ; */
|
/* not disabled: ; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -222,7 +222,7 @@ pre .value, code .value, code.value {
|
||||||
height: 1.4em !important;
|
height: 1.4em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.front-instructions {
|
#front-instructions {
|
||||||
min-height: 4em;
|
min-height: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -27,25 +27,28 @@ bluesky light blue
|
||||||
<div class="col-sm-8 big">
|
<div class="col-sm-8 big">
|
||||||
<div class="btn-group" role="group" data-toggle="buttons" aria-label="I'm on">
|
<div class="btn-group" role="group" data-toggle="buttons" aria-label="I'm on">
|
||||||
<label for="me-web" class="btn btn-primary web">
|
<label for="me-web" class="btn btn-primary web">
|
||||||
<input name="me" id="me-web" type="radio">
|
<!-- autocomplete="off" prevents Firefox from preserving these buttons' state
|
||||||
|
https://github.com/twbs/bootstrap/issues/793
|
||||||
|
-->
|
||||||
|
<input name="me" id="me-web" type="radio" autocomplete="off">
|
||||||
🌐 <!-- globe_with_meridians -->
|
🌐 <!-- globe_with_meridians -->
|
||||||
<!-- 🌏 globe_showing_asia-australia -->
|
<!-- 🌏 globe_showing_asia-australia -->
|
||||||
Web
|
Web
|
||||||
</label>
|
</label>
|
||||||
<label for="me-fediverse" class="btn btn-primary fediverse">
|
<label for="me-fediverse" class="btn btn-primary fediverse">
|
||||||
<input name="me" id="me-fediverse" type="radio">
|
<input name="me" id="me-fediverse" type="radio" autocomplete="off">
|
||||||
<img src="/static/fediverse_logo.svg">
|
<img src="/static/fediverse_logo.svg">
|
||||||
Fediverse
|
Fediverse
|
||||||
</label>
|
</label>
|
||||||
<label for="me-atproto" class="btn btn-primary atproto disabled"
|
<label for="me-atproto" class="btn btn-primary atproto disabled"
|
||||||
title="Coming soon">
|
title="Coming soon">
|
||||||
<!-- <input name="me" id="me-atproto" type="radio"> -->
|
<!-- <input name="me" id="me-atproto" type="radio" autocomplete="off"> -->
|
||||||
<img src="/static/atproto_logo.png">
|
<img src="/static/atproto_logo.png">
|
||||||
Bluesky
|
Bluesky
|
||||||
</label>
|
</label>
|
||||||
<label for="me-nostr" class="btn btn-primary nostr disabled"
|
<label for="me-nostr" class="btn btn-primary nostr disabled"
|
||||||
title="Coming soon">
|
title="Coming soon">
|
||||||
<!-- <input name="me" id="me-nostr" type="radio"> -->
|
<!-- <input name="me" id="me-nostr" type="radio" autocomplete="off"> -->
|
||||||
<img src="/static/nostr_logo_transparent.png">
|
<img src="/static/nostr_logo_transparent.png">
|
||||||
Nostr
|
Nostr
|
||||||
</label>
|
</label>
|
||||||
|
@ -61,23 +64,23 @@ bluesky light blue
|
||||||
<div class="btn-group" role="group" data-toggle="buttons"
|
<div class="btn-group" role="group" data-toggle="buttons"
|
||||||
aria-label="...and I want to follow someone on">
|
aria-label="...and I want to follow someone on">
|
||||||
<label for="them-web" class="btn btn-primary web">
|
<label for="them-web" class="btn btn-primary web">
|
||||||
<input name="them" id="them-web" type="radio">
|
<input name="them" id="them-web" type="radio" autocomplete="off">
|
||||||
🌐 Web
|
🌐 Web
|
||||||
</label>
|
</label>
|
||||||
<label for="them-fediverse" class="btn btn-primary fediverse">
|
<label for="them-fediverse" class="btn btn-primary fediverse">
|
||||||
<input name="them" id="them-fediverse" type="radio">
|
<input name="them" id="them-fediverse" type="radio" autocomplete="off">
|
||||||
<img src="/static/fediverse_logo.svg">
|
<img src="/static/fediverse_logo.svg">
|
||||||
Fediverse
|
Fediverse
|
||||||
</label>
|
</label>
|
||||||
<label for="them-atproto" class="btn btn-primary atproto disabled"
|
<label for="them-atproto" class="btn btn-primary atproto disabled"
|
||||||
title="Coming soon">
|
title="Coming soon">
|
||||||
<!-- <input name="them" id="them-atproto" type="radio"> -->
|
<!-- <input name="them" id="them-atproto" type="radio" autocomplete="off"> -->
|
||||||
<img src="/static/atproto_logo.png">
|
<img src="/static/atproto_logo.png">
|
||||||
Bluesky
|
Bluesky
|
||||||
</label>
|
</label>
|
||||||
<label for="them-nostr" class="btn btn-primary nostr disabled"
|
<label for="them-nostr" class="btn btn-primary nostr disabled"
|
||||||
title="Coming soon">
|
title="Coming soon">
|
||||||
<!-- <input name="them" id="them-nostr" type="radio"> -->
|
<!-- <input name="them" id="them-nostr" type="radio" autocomplete="off"> -->
|
||||||
<img src="/static/nostr_logo_transparent.png">
|
<img src="/static/nostr_logo_transparent.png">
|
||||||
Nostr
|
Nostr
|
||||||
</label>
|
</label>
|
||||||
|
@ -86,9 +89,9 @@ bluesky light blue
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- front-form -->
|
</div> <!-- front-form -->
|
||||||
|
|
||||||
<div class="row big front-light front-instructions">
|
<div id="front-instructions" class="row big front-light">
|
||||||
|
|
||||||
<p id="front-instruction-placeholder" class="instruction">
|
<p id="front-instruction-placeholder">
|
||||||
Choose your networks above.
|
Choose your networks above.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
@ -105,7 +108,7 @@ bluesky light blue
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p id="front-fediverse-web" class="instruction">
|
<p id="front-fediverse-web" class="instruction">
|
||||||
To follow the web site <span class="handle">example.com</span>, search for <span class="handle">@example.com@web.brid.gy</span> on your fediverse instance.
|
To follow the web site <a class="handle" href="https://example.com/">example.com</a>, search for <span class="handle">@example.com@web.brid.gy</span> on your fediverse instance.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p id="front-fediverse-fediverse" class="instruction">
|
<p id="front-fediverse-fediverse" class="instruction">
|
||||||
|
|
Ładowanie…
Reference in New Issue