#157731630 Creates a get exercises on hover over image body part feature #13
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…over body part feature This commit creates a feature that enables users to hover over a body part in the image and display the exercises for that body part. Add event handlers to wger/exercises/templates/muscles/overview.html to get the required target on mouse hover over image, and display the relevant body exercises Add flip-front and flip-back button to enable users flip the image to the back side, in case you want to hover over the back muscles Add default svg css to wger/core/static/css/workout-manager.css to hide the overlapping svg images with the targeted ids and position the image over the background image. [Delivers #157731630]
dondrzzy
force-pushed
the
ft-exercises-muscle-hover-#157731630
branch
from
255a3c8
to
532eac5
Compare
peterwade153
reviewed
Jun 7, 2018
| @@ -45,5 +46,6 @@ def formfield(self, **kwargs): | |||
| Use our custom field | |||
| ''' | |||
| defaults = {'form_class': Html5FormDateField} | |||
|
|
|||
| defaults.update(kwargs) | |||
| return super(Html5DateField, self).formfield(**defaults) | |||
There was a problem hiding this comment.
these two fields are similar, maybe you should look at them
There was a problem hiding this comment.
Thanx @peterwade153 , Peter but one is date and the other is time.
dondrzzy
added
the
ready
King-Benx
approved these changes
Jun 8, 2018
King-Benx
reviewed
Jun 8, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do?
This PR creates a feature that enables users to hover over a body part in the image
and display the exercises for that body part.
Add event handlers to
wger/exercises/templates/muscles/overview.htmlto get the required target on mouse hover over image, and display the relevant body exercises
Add flip-front and flip-back button to enable users flip the image to the back side,
in case you want to hover over the back muscles
Add default svg css to
wger/core/static/css/workout-manager.cssto hide the overlapping svgimages with the targeted ids and position the image over the background image.
Add a new file muscles.js with the muscles svg image variables to
wger/exercises/static/js/muscles.jsDescription of Task to be completed?
The user should be able to move the mouse over a body part on the image and get exercises for that body part.
How should this be manually tested?
1: Clone the application and install the requirements in your virtual environment.
2: Update the database settings in the
settings.pyfile with your postgres user, password and database name.3: Run the application with
python manage.py runserver.4: Register and login.
5: Hover over
Exercisesin the navbar menu and selectMuscle overview.6: Hover over the body parts in the image. Sample image shown below:
7: Expected response: The application should display the exercises related to the muscle you hovered over.
8: The application should also auto highlight the muscle name related to the muscle you hovered over. Sample response shown below.
The exercises are displayed in the far right section.9: Click the
frontorbackbuttons to flip the image.Any background context you want to provide?
This feature was not available.
What are the relevant pivotal tracker stories?
#157731630