Browse Source

components/modal: Fixed ugly overlap and no styles for logging in/out modals

1.0
Gisle Aune 6 years ago
parent
commit
396544e879
  1. 17
      marko/components/menu/index.marko
  2. 20
      marko/components/modal/index.marko

17
marko/components/menu/index.marko

@ -5,17 +5,16 @@
<menu-header>User</menu-header>
<menu-link if(!input.user.loggedIn) icon="L" href="/auth/login" on-click("loginClicked")>Login</menu-link>
<menu-link if(input.user.loggedIn) icon="L" href="/auth/logout" on-click("logoutClicked")>Logout <span class="weak">(${input.user.name})</span></menu-link>
<modal enabled=state.loggingIn notification on-close("closeModal")>
<h1>Logging you in...</h1>
<p>You may be redirected to Auth0 if it's been a while.</p>
</modal>
<modal enabled=state.loggingOut notification on-close("closeModal")>
<h1>Logging you out...</h1>
<p>You can probably log back in without entering your info if you're quick.</p>
</modal>
</if>
<else-if(!input.allowNoUser)>
<menu-blurb class="error">input.user is missing!</menu-blurb>
</else-if>
</div>
<modal class="modal" enabled=state.loggingIn notification>
<h1>Logging you in...</h1>
<p>You may be redirected to Auth0 if it's been a while.</p>
</modal>
<modal class="modal" enabled=state.loggingOut notification>
<h1>Logging you out...</h1>
<p>You can probably log back in without entering your info if you're quick.</p>
</modal>

20
marko/components/modal/index.marko

@ -1,10 +1,12 @@
<if(input.enabled)>
<div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
<div class="overlay-options color-menu">
<div if(input.closable) on-click("closeModal")>Close</div>
<div class="modal-wrapper">
<if(input.enabled)>
<div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
<div class="overlay-options color-menu">
<div if(input.closable) on-click("closeModal")>Close</div>
</div>
<div class=input.class>
<include(input.renderBody) />
</div>
</div>
<div class=input.class>
<include(input.renderBody) />
</div>
</div>
</if>
</if>
</div>
Loading…
Cancel
Save