Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Skip/Submit bar static #677

Open
slesingerm opened this issue Sep 4, 2020 · 7 comments
Open

Make Skip/Submit bar static #677

slesingerm opened this issue Sep 4, 2020 · 7 comments

Comments

@slesingerm
Copy link

slesingerm commented Sep 4, 2020

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
Copy link

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.

@slesingerm slesingerm changed the title Make Skip/Continue bar static Make Skip/Submit bar static Sep 4, 2020
@kantord
Copy link
Owner

kantord commented Sep 4, 2020

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

@kantord kantord added good first issue Good for newcomers svelte and removed good first issue Good for newcomers labels Sep 4, 2020
@kantord
Copy link
Owner

kantord commented Sep 4, 2020

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

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:

{#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:

<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
Copy link

stale bot commented Feb 2, 2021

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.

@stale stale bot added the wontfix This will not be worked on label Feb 2, 2021
@stale stale bot closed this as completed Feb 9, 2021
@kantord kantord reopened this Feb 11, 2021
@stale stale bot removed the wontfix This will not be worked on label Feb 11, 2021
@kantord
Copy link
Owner

kantord commented Apr 27, 2021

Partially fixed. I removed the animations in this PR: #1248

@kantord kantord pinned this issue Jun 9, 2021
@stale
Copy link

stale bot commented Sep 24, 2021

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.

@stale stale bot added the wontfix This will not be worked on label Sep 24, 2021
@kantord kantord removed the wontfix This will not be worked on label Sep 26, 2021
@an-spideog
Copy link

I'd like to do this

an-spideog pushed a commit to an-spideog/LibreLingo that referenced this issue Jun 30, 2023
an-spideog added a commit to an-spideog/LibreLingo that referenced this issue Jun 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants