LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added tooltips to placeholder text

Browse source
This commit is contained in:
bill bittner 2017-10-05 18:08:44 -07:00
parent 1345d3e0bc
commit 44c7e29653
3 changed files with 26 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
public/assets/css/general.css
View file

@ -40,7 +40,6 @@ p {
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */

36
views/partials/publishForm-Channel.handlebars
View file

@ -38,23 +38,6 @@
<script src="/assets/js/authFunctions.js"></script>
<script type="text/javascript">
function updateUrl (selectedOption) {
const urlChannel = document.getElementById('url-channel');
if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
// update URL
urlChannel.innerText = '@channelName';
//toolTipText.innerText = 'will be replaced by your channel and id';
urlChannel.setAttribute('class', 'url-text url-text--secondary')
} else if (selectedOption === 'anonymous'){
urlChannel.innerText = 'xyz';
//toolTipText.innerText = 'will be replaced by a random id';
urlChannel.setAttribute('class', 'url-text url-text--secondary')
} else {
urlChannel.innerText = `{{user.channelName}}:{{user.shortChannelId}}`;
//toolTipText.innerText = '';
urlChannel.setAttribute('class', 'url-text url-text--primary')
}
}
// show or hide the channel selection tools
function toggleChannel (selectedOption) {
const channelSelectOptions = document.getElementById('channel-select-options');
@ -96,4 +79,23 @@
// update url
updateUrl(selectedChannel);
}
function updateUrl (selectedOption) {
const urlChannel = document.getElementById('url-channel');
const urlNoChannelPlaceholder = document.getElementById('url-no-channel-placeholder');
const urlChannelPlaceholder = document.getElementById('url-channel-placeholder');
if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
urlChannel.hidden = true;
urlNoChannelPlaceholder.hidden = true;
urlChannelPlaceholder.hidden = false;
} else if (selectedOption === 'anonymous'){
urlChannel.hidden = true;
urlNoChannelPlaceholder.hidden = false;
urlChannelPlaceholder.hidden = true;
} else {
urlChannel.hidden = false;
urlChannel.innerText = `{{user.channelName}}:{{user.shortChannelId}}`;
urlNoChannelPlaceholder.hidden = true;
urlChannelPlaceholder.hidden = true;
}
}
</script>

12
views/partials/publishForm-Url.handlebars
View file

@ -5,11 +5,13 @@
</div><div class="column column--6 column--sml-10">
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>
<div class="input-text--primary">
{{#if user}}
<span class="url-text">Spee.ch/</span><span id="url-channel" class="url-text url-text--primary">{{user.channelName}}:{{user.shortChannelId}}</span>/<input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)"><span id="input-success-claim-name" class="info-message info-message--success"></span>
{{else}}
<span class="url-text">Spee.ch/</span><span id="url-channel" class="url-text url-text--secondary">xyz</span>/<input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)"><span id="input-success-claim-name" class="info-message info-message--success"></span>
{{/if}}
<span class="url-text">Spee.ch /</span>
<span id="url-channel" class="url-text url-text--primary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span>
<span id="url-no-channel-placeholder" class="url-text url-text--secondary tooltip" {{#if user}}hidden="true"{{else}}{{/if}}>xyz<span class="tooltip-text">This will be your random id</span></span>
<span id="url-channel-placeholder" class="url-text url-text--secondary tooltip" hidden="true">@channel<span class="tooltip-text">Select a channel above</span></span>
/
<input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
<span id="input-success-claim-name" class="info-message info-message--success"></span>
</div>
</div>