scrollbar css changed #120

ArunTeltia · 2020-10-04T22:59:49Z

customized the scrollbar as per #119 issue

Abhishek-kumar09 · 2020-10-04T23:02:49Z

src/App.css

@@ -0,0 +1,14 @@
+::-webkit-scrollbar-track {


Just realizied that you had made a seperate css file for this, but can't we do it with makeStyles?

Actually we cant apply psuedo selector css inline
Have a look at this
https://stackoverflow.com/questions/47345981/customize-webkit-scrollbar-inline-with-react

Abhishek-kumar09 · 2020-10-04T23:07:45Z

I cant see your changes with build preview, Is it same from your side?

Abhishek-kumar09 · 2020-10-04T23:09:40Z

src/App.css

+    border-radius: 10px;
+    background-color: #000000;
+}
+


please add a newline at the end of file.

okay , I will
but for the above query for me its working in whole website

can you tell me more about newline please

You have to end every file with a blank line according to POSIX standards. In this file you could see that the line written with your code is the last line, but that should not be the case. You should add a new blank line.

okay wait ,i am doing it thanks for telling me

Abhishek-kumar09 · 2020-10-04T23:17:07Z

but for the above query for me its working in whole website

Okay, now I got it...Webkit is only working with chrome, you have to additionally add -moz- support to make the webpage same in both browser. Currently you can't see your changes with mozilla.

ArunTeltia · 2020-10-04T23:20:28Z

okay so i will add more classes for other browser support

ArunTeltia · 2020-10-05T00:08:42Z

check this view for mozzilla @Abhishek-kumar09
check this stack overflow thread
https://stackoverflow.com/questions/56975071/how-to-make-firefox-scrollbar-thinner-than-thin
the scrollbar issue in firefox is relatively new

now i also checked the ways to make the scrollbar thin and curved and i got to this reddit post
https://www.reddit.com/r/firefox/comments/7f6kc4/floating_scrollbar_finally_possible_in_firefox_57/

Abhishek-kumar09 · 2020-10-06T18:14:40Z

Hey @ArunTeltia, can we make a carasouel out of this horizontal scrolling and leave the side scroll bar as it is?

ArunTeltia · 2020-10-06T22:16:31Z

yes and it would be okay for laptop users to scroll sidewise but what about the pc users ,they need some scrollbar to scroll for reading testimonials

Abhishek-kumar09 · 2020-10-07T14:15:27Z

@ArunTeltia, some changes:

Revert to the previous scroll bars
Delete App.css
About testimonial section: We want some automatic scrolling on testimonial section, the cards should move horizontally automatically.

ArunTeltia · 2020-10-07T14:20:23Z

remove scroll bar in testimonials and make them movable ?
okay i will do that

KeenWarrior · 2020-10-10T09:16:29Z

@ArunTeltia Any update

ArunTeltia · 2020-10-10T12:33:54Z

Working on it sir @KeenWarrior

ArunTeltia · 2020-10-10T15:10:52Z

@Abhishek-kumar09 , i know how to make this infinitely moving by writing advance css for example adding animation and keyframes but i dont know if that is being supported by react inline style , can i use a library for implementing this feature or i can simply add a css file ?

animation: animate 60s linear infinite;

this is the line of css i need to write for the smooth transitional effect
Please check this out

Abhishek-kumar09 · 2020-10-10T15:31:09Z

OK, you could write it with creating a new css file or use makeStyles(), its your choice we are happy with both.

ArunTeltia · 2020-10-10T17:58:49Z

It is going to and fro first go to last then go back to first
Check this @Abhishek-kumar09 @KeenWarrior

Abhishek-kumar09 · 2020-10-10T18:39:03Z

Its looking great now, Please commit those changes here.

ArunTeltia · 2020-10-10T18:51:24Z

can you help me with how to get the commits from the upstream
I dont know how to do that
Or i can create a new branch and add add a new pr ?

Abhishek-kumar09 · 2020-10-10T18:54:19Z

do:

git remote add upstream
git fetch upstream
git rebase upstream/development
git push -f

ArunTeltia · 2020-10-10T19:18:24Z

I just check I accidently removed the comments do i have to add those ?

Abhishek-kumar09 · 2020-10-10T19:23:47Z

Its safe if you could restore those.

Abhishek-kumar09 · 2020-10-11T19:14:25Z

@ArunTeltia Please make it uni-directional, infinite. Sorry I gave you wrong info before, we have update to keep it unidirectional and infinite movement.

ArunTeltia · 2020-10-11T21:37:39Z

u mean it must be an infinite loop?
Okay give me time i will do that

ArunTeltia · 2020-10-11T23:25:46Z

can you help me with this i tried but i am not able to make it look like circular
My deduction:
I will need a js library for implementing this
2nd
I will need to duplicate the cards such that i can make them appear side by side like a circular linked list and than i can try animation that
For now I can make the list disappear as it go left and after it disappear it will start to reappear from the right
but there will be a gap between those
Please help me
PS: I dont like libraries i like to write in pure css so it would be great if you recommend me a library to implement this feature

ArunTeltia · 2020-10-12T00:14:14Z

Okay so what i did is add 3 starting cards at the end of the cardlist in the grid so that there is no gap between each other

ArunTeltia · 2020-10-12T00:16:14Z

Please check @KeenWarrior @Abhishek-kumar09
Edit: If this approach is okay then i will write a dry code :D

Abhishek-kumar09 · 2020-10-12T08:34:19Z

src/views/pages/common/Recommendations.js

+                className="recommendation_slide"
+                key={index}
+                style={{
+                  margin: '20px',
+                  borderRadius: '5px',
+                  height: 'auto',
+                  overflow: 'hidden',
+                  boxShadow: '0px 0px 14px rgba(0, 0, 0, 0.1)'
+                }}
+              >
+                <Card className={classes.card}>
+                  <CardContent className={classes.cardContent}>
+                    <img
+                      alt=""
+                      width="70px"
+                      src={
+                        index % 2 === 0
+                          ? '/static/reviews/high.png'
+                          : '/static/reviews/low.png'
+                      }
+                    />
+                  </CardContent>
+
+                  <CardContent className={classes.cardContent}>
+                    <Box display="flex" justifyContent="center">
+                      <Typography


Okay so what i did is add 3 starting cards at the end of the cardlist in the grid so that there is no gap between each other

Please remove this, as no one is gonna starr at testimonial for so long, and afterall we are still getting some motion discontinuity after those 3 added card. I think., else is great 🥇

Okay got it let me check that

Why I have to remove these lines These are essential piece of code and will break the component totally
Can you please recheck @Abhishek-kumar09

Oh Sorry my mistake, you have to remove the code for 3 extra cards that you had added.

ArunTeltia · 2020-10-12T18:26:24Z

Okay done @Abhishek-kumar09 you can check
Please also allot one more issue to me :D

Abhishek-kumar09 · 2020-10-12T18:36:34Z

Please also allot one more issue to me :D

Great you are enthuastic about it!
Wanna try: https://github.com/codeforcauseorg/codeforcause.org/issues/95 its bit complicated and some part of it is done, you could always take help from that. But ofcourse your personal ground level idea is more welcome, because in earlier approach there were some problems that's why it could only solve the issue partially.

ArunTeltia · 2020-10-12T18:57:10Z

Great will start work right away via reading previous logs

Abhishek-kumar09 reviewed Oct 4, 2020

View reviewed changes

ArunTeltia force-pushed the test1 branch from 1793b4f to 4eb44be Compare October 5, 2020 00:16

ArunTeltia force-pushed the test1 branch from 4eb44be to 80f07dc Compare October 10, 2020 19:02

Abhishek-kumar09 approved these changes Oct 10, 2020

View reviewed changes

Abhishek-kumar09 assigned KeenWarrior Oct 10, 2020

animation in testimonials section

3e29287

ArunTeltia force-pushed the test1 branch from 80f07dc to 3e29287 Compare October 10, 2020 19:45

Abhishek-kumar09 suggested changes Oct 12, 2020

View reviewed changes

testimonials to and fro animation added

1c0bf62

ArunTeltia force-pushed the test1 branch from 28d8221 to 1c0bf62 Compare October 12, 2020 18:23

Abhishek-kumar09 approved these changes Oct 12, 2020

View reviewed changes

KeenWarrior merged commit 185fa0a into codeforcauseorg:development Oct 18, 2020

ArunTeltia deleted the test1 branch November 7, 2020 17:22

scrollbar css changed #120

scrollbar css changed #120

Conversation

ArunTeltia commented Oct 4, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Abhishek-kumar09 commented Oct 4, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Abhishek-kumar09 Oct 4, 2020 • edited Loading

Choose a reason for hiding this comment

ArunTeltia Oct 4, 2020 • edited Loading

Choose a reason for hiding this comment

Abhishek-kumar09 commented Oct 4, 2020

ArunTeltia commented Oct 4, 2020

ArunTeltia commented Oct 5, 2020

Abhishek-kumar09 commented Oct 6, 2020 • edited Loading

ArunTeltia commented Oct 6, 2020 • edited Loading

Abhishek-kumar09 commented Oct 7, 2020 • edited Loading

ArunTeltia commented Oct 7, 2020

KeenWarrior commented Oct 10, 2020

ArunTeltia commented Oct 10, 2020

ArunTeltia commented Oct 10, 2020

Abhishek-kumar09 commented Oct 10, 2020

ArunTeltia commented Oct 10, 2020 • edited Loading

Abhishek-kumar09 commented Oct 10, 2020

ArunTeltia commented Oct 10, 2020

Abhishek-kumar09 commented Oct 10, 2020 • edited Loading

ArunTeltia commented Oct 10, 2020

Abhishek-kumar09 commented Oct 10, 2020

Abhishek-kumar09 commented Oct 11, 2020

ArunTeltia commented Oct 11, 2020

ArunTeltia commented Oct 11, 2020 • edited Loading

ArunTeltia commented Oct 12, 2020

ArunTeltia commented Oct 12, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ArunTeltia commented Oct 12, 2020

Abhishek-kumar09 commented Oct 12, 2020

ArunTeltia commented Oct 12, 2020

Abhishek-kumar09 Oct 4, 2020 •

edited

Loading

ArunTeltia Oct 4, 2020 •

edited

Loading

Abhishek-kumar09 commented Oct 6, 2020 •

edited

Loading

ArunTeltia commented Oct 6, 2020 •

edited

Loading

Abhishek-kumar09 commented Oct 7, 2020 •

edited

Loading

ArunTeltia commented Oct 10, 2020 •

edited

Loading

Abhishek-kumar09 commented Oct 10, 2020 •

edited

Loading

ArunTeltia commented Oct 11, 2020 •

edited

Loading

ArunTeltia commented Oct 12, 2020 •

edited

Loading