Make Skip/Submit bar static

[slesingerm]

When an exercise first shows up, only the "skip" button appears in the bottom bar. Once you make an action (click, start writing, etc) the bar does a little "jump" where it slides down and slides back up, now including the option to "submit". This is somewhat distracting as the bar keeps jumping up and down in your peripheral vision.

Since the skip/submit bar is already there, I would suggest for it to be static and to instead have a greyed out "submit" option which changes color once you make an action.

[issue-label-bot]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.89. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[kantord]

Nice! Interesting! I think this could indeed be an improvement

[kantord]

This is a good first issue *for someone who is already a bit familiar with Svelte AND Gherkin *, as it doesn't require a complex understanding of the project structure.

That being said, expect this task to take a non-trivial amount of time, because you will be doing some refactoring and also update Gherkin feature files.

Feature files

You will be changing the feature descriptions in Gherkin across all challenge types from this folder: https://github.com/kantord/LibreLingo/tree/master/workspaces/web/cypress/integration

One example of a change that you have to make in feature files

LibreLingo/workspaces/web/cypress/integration/listening.feature

Line 9 in b04d3cd

And I see a panel with only a skip button

That line should probably say something like this instead:

    And I see a panel with a skip button and a disabled submit button

Components

Making sure ChallengePanel supports disabled buttons

You'll probably have to modify this line, based on a new prop that you add:

https://github.com/kantord/LibreLingo/blob/master/workspaces/web/src/components/ChallengePanel.svelte#L39

Updating behavior in challenge types:

You'll have to make sure that each challenge type handles the new props of ChallengePanel. This will involve changing all relevant components across this folder: https://github.com/kantord/LibreLingo/tree/master/workspaces/web/src/components

And example of a part of the code you will need to update:

LibreLingo/workspaces/web/src/components/ListeningChallenge.svelte

Lines 96 to 128 in b04d3cd

	{#if answer && !submitted}
	<ChallengePanel
	message=""
	buttonText="Submit"
	submit
	skipAction="{skipChallenge}" />
	{/if}
	{#if answer === '' && !submitted}
	<ChallengePanel
	message="{null}"
	buttonText="{null}"
	skipAction="{skipChallenge}" />
	{/if}
	{#if submitted}
	{#if !correct}
	<ChallengePanel
	message="Incorrect solution!"
	messageDetail="{`Correct answer: ${challenge.answer}`}"
	buttonText="Continue"
	incorrect
	buttonAction="{finishChallenge}" />
	{/if}
	{#if correct}
	<ChallengePanel
	message="Correct solution!"
	messageDetail="{spellingSuggestion || `Meaning: "${challenge.meaning}"`}"
	buttonText="Continue"
	correct
	buttonAction="{finishChallenge}" />
	{/if}
	{/if}

Disabling animation

This is the simplest part of this issue. You'll simply have to remove animations from ChallengePanel, from these code lines:

LibreLingo/workspaces/web/src/components/ChallengePanel.svelte

Lines 15 to 20 in b04d3cd

	<div
	class:correct
	class:incorrect
	class="panel is-primary"
	out:slide|local="{{ duration: 100 }}"
	in:slide|local="{{ duration: 300, delay: 50 }}">

fixed in this PR: #1248

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.