From 1ef67006c81869e58aec06800eabd4a5a5de8435 Mon Sep 17 00:00:00 2001 From: Richard Nabaasa Date: Thu, 30 Aug 2018 15:34:22 +0300 Subject: [PATCH] [Feature #159236217] Enable getting exercises for a body part on mouse hover --- wger/core/static/css/workout-manager.css | 115 ++++---- .../images/muscles/main/behind-parts.svg | 243 +++++++++++++++++ .../images/muscles/main/front-parts.svg | 254 ++++++++++++++++++ wger/exercises/static/js/exercises.js | 24 +- .../exercises/templates/muscles/overview.html | 55 ++++ 5 files changed, 631 insertions(+), 60 deletions(-) create mode 100644 wger/core/static/images/muscles/main/behind-parts.svg create mode 100644 wger/core/static/images/muscles/main/front-parts.svg diff --git a/wger/core/static/css/workout-manager.css b/wger/core/static/css/workout-manager.css index ca1eb819..eb14aaad 100644 --- a/wger/core/static/css/workout-manager.css +++ b/wger/core/static/css/workout-manager.css @@ -21,16 +21,16 @@ * **************************************************************/ -#main-footer{ - background: none repeat scroll 0% 0% #EEE; - border-top: 1px solid #E5E5E5; +#main-footer { + background: none repeat scroll 0% 0% #eee; + border-top: 1px solid #e5e5e5; border-bottom: 1px solid #000; padding-top: 1em; padding-bottom: 1em; } -#main{ - background-color: #FFF; +#main { + background-color: #fff; } .social-logins { @@ -47,41 +47,38 @@ * Images in links are vertically aligned */ -a img{ +a img { vertical-align: middle; } /* * "invisible" elements, simply hidden (they still take all the space) */ -.invisible{ +.invisible { display: none; } -.align-right -{ +.align-right { text-align: right; } -.sortable-settings -{ +.sortable-settings { border: 1px solid black; } -.sortable-settings-drag -{ +.sortable-settings-drag { padding-left: 1em; padding-right: 1em; background-color: #babdb6; - border-bottom:1px solid black; + border-bottom: 1px solid black; } /* * Set a more appropriate cursor to the drag'n'drop handle on the * workout view */ -.dragndrop-handle{ - cursor:move +.dragndrop-handle { + cursor: move; } /************************************************************** @@ -90,17 +87,16 @@ a img{ /* * Hide the edit options (edit, delete) on tables, only show them when the mouse is over the row */ -.editoptions -{ +.editoptions { visibility: hidden; } -tr:hover .editoptions, tbody tr:hover td .editoptions, ul:hover .editoptions -{ +tr:hover .editoptions, +tbody tr:hover td .editoptions, +ul:hover .editoptions { visibility: visible; } - /* * Deactivate the default background color on hover */ @@ -113,7 +109,6 @@ tr:hover .editoptions, tbody tr:hover td .editoptions, ul:hover .editoptions background-color: transparent; } - /* * Images inside a link are set to greyscale till mouseover */ @@ -140,22 +135,34 @@ a:hover img /* * Set the sizes for the background where the muscles are shown on the exercise view page */ -div.muscle-background -{ +div.muscle-background { width: 180px; height: 276px; background-size: 150px; background-repeat: no-repeat; } +#front-img { + display: block; + transform: translate(-25px, -48px) scale(0.75); + opacity: 0; + position: absolute; + top: 47px; +} +#behind-img { + display: block; + transform: translate(-26px, -50px) scale(0.74, 0.701); + opacity: 0; + position: absolute; + top: 47px; +} /* * Set an additional padding to the generated DIV on the edit set page */ -#exercise-search-log{ +#exercise-search-log { padding-left: 1em; } - /************************************************************** * Workout log **************************************************************/ @@ -166,7 +173,6 @@ div.muscle-background width: 7em; } - /************************************************************** * Header **************************************************************/ @@ -174,7 +180,7 @@ div.muscle-background /* * Add a shadow to the application name */ -header h1{ +header h1 { text-shadow: 2px 3px 3px #292929; font-family: "Open Sans Bold", Arial, Helvetica, sans-serif; font-weight: 300; @@ -182,53 +188,56 @@ header h1{ header a, header a:hover, -header a:focus{ - color:white; - font-size:90%; +header a:focus { + color: white; + font-size: 90%; } -header span.name{ +header span.name { text-shadow: 2px 3px 3px #292929; font-family: "Open Sans Bold", Arial, Helvetica, sans-serif; font-weight: 300; - font-size: 350%; - color: white; + font-size: 350%; + color: white; } - -header span.regular{ +header span.regular { text-shadow: 2px 3px 3px #292929; font-family: "Open Sans Light", Arial, Helvetica, sans-serif; font-weight: 300; - font-size: 350%; - color: white; + font-size: 350%; + color: white; } /* * Make more space for the page title */ -#page-title{ +#page-title { margin-top: 0.5em; } -#content-wrapper{ +#content-wrapper { padding-top: 0.8em; } - /* * Links in warning boxes get a different style, the default blue doesn't match * well with orange */ -div.success a, div.success a:hover, div.success a:active, -div.warning a, div.warning a:hover, div.warning a:active, -div.info a, div.info a:hover, div.info a:active{ +div.success a, +div.success a:hover, +div.success a:active, +div.warning a, +div.warning a:hover, +div.warning a:active, +div.info a, +div.info a:hover, +div.info a:active { color: black; text-decoration: underline; background-color: transparent; } - /************************************************************** * Autocompleter **************************************************************/ @@ -236,12 +245,12 @@ div.info a, div.info a:hover, div.info a:active{ * Category heading for the ajax autocompleter */ .ui-autocomplete-category { - margin:0; + margin: 0; text-align: center; zoom: 1; width: 100%; font-weight: bold; - background-color: #D3D7CF; + background-color: #d3d7cf; border-bottom: 1px solid #888a85; } @@ -258,17 +267,15 @@ div.info a, div.info a:hover, div.info a:active{ /* * Give odd child's a different background colour (thanks CSS3!) */ -.ui-autocomplete li.ui-menu-item:nth-child(odd) -{ +.ui-autocomplete li.ui-menu-item:nth-child(odd) { background: #eeeeec; } - /************************************************************** * extra-bold fonts **************************************************************/ -.extra-bold{ +.extra-bold { font-family: "Open Sans Bold", Arial, Helvetica, sans-serif; font-weight: 300; } @@ -276,18 +283,16 @@ div.info a, div.info a:hover, div.info a:active{ /************************************************************** * Set edit window **************************************************************/ -#slider{ +#slider { width: 91%; float: right; margin-right: 1em; } - /************************************************************** * Carousel on the feature page **************************************************************/ -#feature-carousel .carousel-caption -{ +#feature-carousel .carousel-caption { background-color: rgba(0, 0, 0, 0.75); position: relative; left: auto; diff --git a/wger/core/static/images/muscles/main/behind-parts.svg b/wger/core/static/images/muscles/main/behind-parts.svg new file mode 100644 index 00000000..4a9d41a5 --- /dev/null +++ b/wger/core/static/images/muscles/main/behind-parts.svg @@ -0,0 +1,243 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/wger/core/static/images/muscles/main/front-parts.svg b/wger/core/static/images/muscles/main/front-parts.svg new file mode 100644 index 00000000..1419094b --- /dev/null +++ b/wger/core/static/images/muscles/main/front-parts.svg @@ -0,0 +1,254 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/wger/exercises/static/js/exercises.js b/wger/exercises/static/js/exercises.js index 1811dccc..bd65459e 100644 --- a/wger/exercises/static/js/exercises.js +++ b/wger/exercises/static/js/exercises.js @@ -29,7 +29,7 @@ function wgerHighlightMuscle(element) { var isFront; var divId; divId = $(element).data('target'); - isFront = ($(element).data('isFront') === 'True') ? 'front' : 'back'; + isFront = $(element).data('isFront') === 'True' ? 'front' : 'back'; muscleId = divId.match(/\d+/); // Reset all other highlighted muscles @@ -42,9 +42,15 @@ function wgerHighlightMuscle(element) { $(element).addClass('muscle-active'); // Set the corresponding background - $('#muscle-system').css('background-image', - 'url(/static/images/muscles/main/muscle-' + muscleId + '.svg),' + - 'url(/static/images/muscles/muscular_system_' + isFront + '.svg)'); + $('#muscle-system').css( + 'background-image', + 'url(/static/images/muscles/main/muscle-' + + muscleId + + '.svg),' + + 'url(/static/images/muscles/muscular_system_' + + isFront + + '.svg)' + ); // Show the corresponding exercises $('.exercise-list').hide(); @@ -88,7 +94,15 @@ function wgerDrawWeightLogChart(data, divId) { height: 200, legend: legend, target: '#svg-' + divId, - colors: ['#204a87', '#4e9a06', '#ce5c00', '#5c3566', '#2e3436', '8f5902', '#a40000'] + colors: [ + '#204a87', + '#4e9a06', + '#ce5c00', + '#5c3566', + '#2e3436', + '8f5902', + '#a40000' + ] }); } } diff --git a/wger/exercises/templates/muscles/overview.html b/wger/exercises/templates/muscles/overview.html index 8fd32881..b6c062b4 100644 --- a/wger/exercises/templates/muscles/overview.html +++ b/wger/exercises/templates/muscles/overview.html @@ -30,8 +30,53 @@ // Highlight on click + //get muscle co-ordinate + //$('#muscle-system').mousemove(function(e){ + // var x = e.pageX - this.offsetLeft; + // var y = e.pageY - this.offsetTop; + // $('#muscle-system').html("x: " + x + " y: " + y); + //}); + + + }); + $(window).load(function(){ + frontImage = document.getElementById('front-img') + behindImage = document.getElementById('behind-img') + behindImage.style.visibility = "hidden"; + + + // get path attribute + $('object').contents().find('path').hover(function(){ + var muscleId = this.getAttributeNS(null, 'muscle'); + //console.log(muscleId) + var divId = 'muscle-' + muscleId + ''; + if (frontImage.getAttribute('data') === '/static/images/muscles/main/front-parts.svg'){ + var isFront = "front" + $('#muscle-system').css('background-image', + 'url(/static/images/muscles/main/muscle-' + muscleId + '.svg),' + + 'url(/static/images/muscles/muscular_system_' + isFront + '.svg)'); + // show corresponding excercise + $('.exercise-list').hide(); + $('#' + divId).show(); + } + else{ + var isFront = 'back' + $('#muscle-system').css('background-image', + 'url(/static/images/muscles/main/muscle-' + muscleId + '.svg),' + + 'url(/static/images/muscles/muscular_system_' + isFront + '.svg)'); + // show corresponding excercise + $('.exercise-list').hide(); + $('#' + divId).show(); + } + + + } + + )}); + + {% endblock %} @@ -49,11 +94,21 @@

{% trans "Muscles" %}

class="muscle-background" style="background-image: url('/static/images/muscles/muscular_system_front.svg');"> + + + + + + + + +
{# Why do we need to use |first? #} {% regroup muscle_list|first by is_front as muscle_group %} {% for group in muscle_group %} + {% if group.grouper %}

{% trans "Front side" %}

{% else %}