Skip to content
This repository has been archived by the owner on Jan 1, 2024. It is now read-only.

Blurring page dimmer #37

Closed
1 of 2 tasks
ghost opened this issue Jul 24, 2017 · 3 comments
Closed
1 of 2 tasks

Blurring page dimmer #37

ghost opened this issue Jul 24, 2017 · 3 comments

Comments

@ghost
Copy link

ghost commented Jul 24, 2017

I'm submitting a ...

  • bug report
  • feature request

Bug Report:

Tried to add Dimmable dimmer to use blurring feature of semantic

{isLoggedIn && !sidebarOpened && <Dimmer.Dimmable dimmed={true}><Dimmer active={true} /></Dimmer.Dimmable>}
Doesn't work. Even with a <StyledDimmerDimmable> with zIndex applied.
{isLoggedIn && !sidebarOpened && <Dimmer active={true} />}
or with <StyledDimmer {...dimmerProps}
Works

Useful Info:

  • Your environment:

    • Node version: Latest Stable
    • Browser: Chrome
    • OS: OSX
    • Language/Platform/etc:
  • Other information

    (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, useful links, eg. stackoverflow, gitter, etc)
    Spent forever on this :( . Not really part of your scope though! Feel free to close.

@ghost ghost changed the title Dimmer.Dimmable Funkiness Dimmer.Dimmable and Other CSS Funkiness Jul 24, 2017
@ghost ghost changed the title Dimmer.Dimmable and Other CSS Funkiness Dimmer.Dimmable Jul 24, 2017
@Metnew
Copy link
Owner

Metnew commented Jul 24, 2017

I'm going to implement this, have never thought about blurring dimmer

@Metnew Metnew self-assigned this Jul 24, 2017
@Metnew
Copy link
Owner

Metnew commented Aug 1, 2017

Hi @TheDolo, I faced next issues when I was trying to add blurred dimmer: There are 2 ways to add blurred dimmer:

  1. wrap whole app in Dimmer.Dimmable, like:
         <SidebarSemanticPusherStyledPatch>
           <Dimmer.Dimmable {...dimmerDimmableProps}>
           <StyledDimmer {...dimmerProps} />
           <Header {...headerProps} />
           <MainLayout>
             <MainContent>
               <MainContainer id="main-container">
                 {children}
               </MainContainer>
             </MainContent>
             <Footer />
           </MainLayout>
           </Dimmer.Dimmable>
</SidebarSemanticPusherStyledPatch>

Problem: bad performance.

  1. Add Dimmer with page:true prop, so the dimmer renders outside the app + add class="blurred" to <body>.
    Problem: Sidebar is blurred and covered by the dimmer.

I still try to find the simplest way to add blurred dimmer without a lot of custom code.

@Metnew Metnew changed the title Dimmer.Dimmable Blurring page dimmer Aug 5, 2017
@Metnew
Copy link
Owner

Metnew commented Feb 16, 2018

I'm closing it, because it's not directly connected to the boilerplate, but mostly to SUIR

@Metnew Metnew closed this as completed Feb 16, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant