Remove jquery from project #239
Conversation
|
The code you commented out is to scroll to the top of the open req layer when you open or close a req |
|
Hmm, I see what you mean, but my personal expected behavior is also that the expansion wouldn't cause things to jump around and simply expand and collapse below the click target. |
|
It’s possible things have changed since the card has gotten bigger, but when I implemented that it was fairly annoying to close things and have to scroll up or down every time to be able to continue viewing it |
|
I totally misunderstood what you meant. I thought you were talking about the audit tree. However, the info card doesn't seem to scroll on prod right now when I do this either? |
|
Just tested on prod and it worked for me. Are you looking at classes like 10.26 that have expandable requirements? |
|
Okay, I finally figured out what you were talking about. I wasn't aware we had this. |
|
All right, I re-implemented it in Javascript. |
| @@ -236,7 +235,7 @@ export default { | |||
| }, | |||
| clickRelatedSubject: function (subject) { | |||
| this.$emit('push-stack', subject.id); | |||
| $('#cardBody').animate({ scrollTop: 0 }); | |||
| document.getElementById('cardBody').scrollTop = 0; | |||
There was a problem hiding this comment.
This no longer animates the scroll nicely. Not sure if there is a way to animate this without jquery? The scroll-behavior:smooth doesn't seem to be having the same effect.
There was a problem hiding this comment.
There are two ways we can do this: figure out the CSS animation or drop in a replacement for jQuery that only handles animations. I can't comment on the former since I'm atrociously awful at CSS animation, but I have used Velocity.js as a replacement for jQuery before. It only contains animation libraries and should be smaller than jQuery, while also having more responsive animations in comparison.
There was a problem hiding this comment.
I think vuetify also has transitions that could be helpful here
| @@ -113,13 +126,14 @@ export default { | |||
| this.open = false; | |||
| let scrollPoint; | |||
| if (!this.doubleScroller) { | |||
| scrollPoint = $('#' + $.escapeSelector(this.reqID)); | |||
| scrollPoint = document.getElementById(escape(this.reqID)); | |||
There was a problem hiding this comment.
This scrolling also does not seem to be animated anymore.
src/pages/MainPage.vue
Outdated
| borders.css({ top: 0, left: scrollWidth - 1 + scrollPosition }); | ||
| }); | ||
|
|
||
| $(window).on('hashchange', function () { |
I just commented out the code in
ExpansionReqsbecause I couldn't figure out what the intended functionality was. If someone could look at that, I would really appreciate it.