fix: making side menu sticky #3621

maze-runnar · 2019-11-11T10:50:19Z

Fixes #3510
Making side bar sticky .
working fine on computers :

And Mobile Device :

Checklist

I have read the Contribution & Best practices Guide.
My branch is up-to-date with the Upstream development branch.
The acceptance, integration, unit tests and linter pass locally with my changes
I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

maze-runnar · 2019-11-12T12:53:09Z

@kushthedude @uds5501 please review this .

uds5501

Works fine.

kushthedude · 2019-11-13T06:21:58Z

I think you didn't get the issue, We have to make it stick to the top irrespective of scrolls. Using rails the navbar is stick to the top and to navigate to other option I had to scroll up back.

kushthedude · 2019-11-13T06:22:46Z

See the second image on issue description, We have to make sure that doesn't happen.

maze-runnar · 2019-11-13T14:11:06Z

See the second image on issue description, We have to make sure that doesn't happen.

@kushthedude i have seen the issue description's second image . but once i refresh the page it disappeared .Making it sticky will be solve that problem (as user is not going to refresh the page every time:smile:) . As in profile section also the side menu is sticky and one have to scroll back to change the page(at https://eventyay.com/account/billing/payment-info). I think there should be no problem in scrolling back as they do in mobile phones .

kushthedude · 2019-12-05T13:40:49Z

See the second image on issue description, We have to make sure that doesn't happen.

@kushthedude i have seen the issue description's second image . but once i refresh the page it disappeared .Making it sticky will be solve that problem (as user is not going to refresh the page every time😄) . As in profile section also the side menu is sticky and one have to scroll back to change the page(at https://eventyay.com/account/billing/payment-info). I think there should be no problem in scrolling back as they do in mobile phones .

The sidebar should be stick to the top, irrespective of user scrolls or not.

maze-runnar · 2019-12-05T14:46:11Z

@kushthedude please take a look at this .may be This will make clear what i want to say about ui-sticky .
https://stackoverflow.com/questions/51102492/refreshing-semantic-ui-sticky-with-ember-does-not-work

iamareebjamal · 2020-02-13T06:39:38Z

@maze-runnar Use position sticky

maze-runnar · 2020-02-13T07:22:51Z

Ok

maze-runnar · 2020-02-13T09:28:22Z

@maze-runnar Use position sticky

@iamareebjamal position: sticky is also not working. cause ui menu uses flex-box (https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/components/menu.min.css) and sticky not works in this case.https://stackoverflow.com/questions/43707076/position-sticky-not-working-css-and-html/47878455

What i should do next?

iamareebjamal · 2020-02-13T10:14:52Z

See if there is overflow hidden in parent

maze-runnar · 2020-02-13T10:15:29Z

See if there is overflow hidden in parent

ok

maze-runnar · 2020-02-13T10:19:58Z

@iamareebjamal actual problem is here :

{{#ui-sticky context='#public-event-content' observeChanges=true}}
       {{public/side-menu event=model}}
 {{/ui-sticky}}

in {{ui-sticky}}.

I used

div class="ui fluid" style="position: sticky; top:0px;">
      {{public/side-menu event=model}}
</div>

and it resolves the issue. should i remove {{ui-sticky}} ?

iamareebjamal · 2020-02-13T10:20:48Z

Yes, wherever used

codecov · 2020-02-13T10:23:26Z

Codecov Report

❗ No coverage uploaded for pull request base (development@b339938). Click here to learn what that means.
The diff coverage is 13.33%.

@@              Coverage Diff               @@
##             development    #3621   +/-   ##
==============================================
  Coverage               ?   21.89%           
==============================================
  Files                  ?      460           
  Lines                  ?     4736           
  Branches               ?        0           
==============================================
  Hits                   ?     1037           
  Misses                 ?     3699           
  Partials               ?        0

Impacted Files	Coverage Δ
...ntrollers/events/view/tickets/access-codes/list.js	`0% <ø> (ø)`
...omponents/forms/admin/content/social-links-form.js	`0% <ø> (ø)`
app/mixins/custom-form.js	`0% <ø> (ø)`
app/routes/events/view/speakers/list.js	`0% <ø> (ø)`
app/routes/account/billing/payment-info.js	`100% <ø> (ø)`
app/routes/events/list.js	`90.47% <ø> (ø)`
app/models/event.js	`53.84% <ø> (ø)`
app/components/tables/utilities/pagination.js	`57.14% <ø> (ø)`
app/components/forms/admin/settings/system-form.js	`0% <ø> (ø)`
app/routes/events/view/sessions/create.js	`0% <ø> (ø)`
... and 133 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b339938...2380ce2. Read the comment docs.

iamareebjamal · 2020-02-13T10:27:03Z

app/templates/public.hbs

@@ -35,9 +35,9 @@
            {{/if}}
          {{/if}}
        {{else}}
-          {{#ui-sticky context='#public-event-content' observeChanges=true}}
+          <div class="ui fluid" style="position:sticky; top:0px;">


I don't think top 0px is right. Besides, it should be moved to CSS file

it's working on top:0px - https://youtu.be/8cqPH3b4X58
and if i should change then what should be the value.

iamareebjamal · 2020-02-13T18:19:11Z

@maze-runnar top: 14px will look better

making side menu sticky

e19ad36

auto-label bot added the fix label Nov 11, 2019

uds5501 previously approved these changes Nov 12, 2019

View reviewed changes

maze-runnar added 2 commits November 13, 2019 19:41

Merge branch 'development' into patch-9

3b33704

Merge branch 'development' into patch-9

b339938

Merge branch 'development' into patch-9

d6eb057

maze-runnar dismissed uds5501’s stale review via d6eb057 February 13, 2020 09:31

Update side-menu.hbs

07103eb

remove {{ui-sticky}} and using position:sticky in place

7af0994

iamareebjamal reviewed Feb 13, 2020

View reviewed changes

maze-runnar added 2 commits February 13, 2020 16:34

Update public.scss

a5f4089

Update public.hbs

64afe10

maze-runnar requested a review from iamareebjamal February 13, 2020 11:14

iamareebjamal previously approved these changes Feb 13, 2020

View reviewed changes

setting position top:14px

2380ce2

maze-runnar dismissed iamareebjamal’s stale review via 2380ce2 February 13, 2020 18:25

iamareebjamal approved these changes Feb 13, 2020

View reviewed changes

iamareebjamal merged commit 67c0bdd into fossasia:development Feb 13, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: making side menu sticky #3621

fix: making side menu sticky #3621

maze-runnar commented Nov 11, 2019 •

edited

Loading

maze-runnar commented Nov 12, 2019

uds5501 left a comment

kushthedude commented Nov 13, 2019

kushthedude commented Nov 13, 2019

maze-runnar commented Nov 13, 2019 •

edited

Loading

kushthedude commented Dec 5, 2019

maze-runnar commented Dec 5, 2019 •

edited

Loading

iamareebjamal commented Feb 13, 2020

maze-runnar commented Feb 13, 2020

maze-runnar commented Feb 13, 2020 •

edited

Loading

iamareebjamal commented Feb 13, 2020

maze-runnar commented Feb 13, 2020

maze-runnar commented Feb 13, 2020

iamareebjamal commented Feb 13, 2020

codecov bot commented Feb 13, 2020 •

edited

Loading

iamareebjamal Feb 13, 2020

maze-runnar Feb 13, 2020

iamareebjamal commented Feb 13, 2020

fix: making side menu sticky #3621

fix: making side menu sticky #3621

Conversation

maze-runnar commented Nov 11, 2019 • edited Loading

Checklist

maze-runnar commented Nov 12, 2019

uds5501 left a comment

Choose a reason for hiding this comment

kushthedude commented Nov 13, 2019

kushthedude commented Nov 13, 2019

maze-runnar commented Nov 13, 2019 • edited Loading

kushthedude commented Dec 5, 2019

maze-runnar commented Dec 5, 2019 • edited Loading

iamareebjamal commented Feb 13, 2020

maze-runnar commented Feb 13, 2020

maze-runnar commented Feb 13, 2020 • edited Loading

iamareebjamal commented Feb 13, 2020

maze-runnar commented Feb 13, 2020

maze-runnar commented Feb 13, 2020

iamareebjamal commented Feb 13, 2020

codecov bot commented Feb 13, 2020 • edited Loading

Codecov Report

iamareebjamal Feb 13, 2020

Choose a reason for hiding this comment

maze-runnar Feb 13, 2020

Choose a reason for hiding this comment

iamareebjamal commented Feb 13, 2020

maze-runnar commented Nov 11, 2019 •

edited

Loading

maze-runnar commented Nov 13, 2019 •

edited

Loading

maze-runnar commented Dec 5, 2019 •

edited

Loading

maze-runnar commented Feb 13, 2020 •

edited

Loading

codecov bot commented Feb 13, 2020 •

edited

Loading