Browse Source

ui: Changed modal to use a h1 in the body instead of title property, tried to fix font flashing.

1.0
Gisle Aune 6 years ago
parent
commit
a3c7ae7bb5
  1. 4
      marko/browser.json
  2. 6
      marko/components/menu/index.marko
  3. 1
      marko/components/modal/index.marko
  4. 1
      marko/global/base.less
  5. 6
      marko/global/colors.less
  6. 8
      marko/global/fonts.less

4
marko/browser.json

@ -1,8 +1,8 @@
{ {
"dependencies": [ "dependencies": [
"./global/fonts.less",
"./global/base.less", "./global/base.less",
"./global/colors.less", "./global/colors.less",
"./global/navbar.less",
"./global/fonts.less"
"./global/navbar.less"
] ]
} }

6
marko/components/menu/index.marko

@ -6,10 +6,12 @@
<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/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> <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 title="Logging you in..." on-close("closeModal")>
<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> <p>You may be redirected to Auth0 if it's been a while.</p>
</modal> </modal>
<modal enabled=state.loggingOut notification title="Logging you out..." on-close("closeModal")>
<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> <p>You can probably log back in without entering your info if you're quick.</p>
</modal> </modal>
</if> </if>

1
marko/components/modal/index.marko

@ -3,7 +3,6 @@
<div class="overlay-options color-menu"> <div class="overlay-options color-menu">
<div if(input.closable) on-click("closeModal")>X</div> <div if(input.closable) on-click("closeModal")>X</div>
</div> </div>
<h1 class="color-primary" if(input.title)>${input.title}</h1>
<div class="modal color-text"> <div class="modal color-text">
<include(input.renderBody) /> <include(input.renderBody) />
</div> </div>

1
marko/global/base.less

@ -2,6 +2,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: Aneliza, sans-serif; font-family: Aneliza, sans-serif;
font-display: swap;
background-color: black; background-color: black;
color: white; color: white;

6
marko/global/colors.less

@ -8,7 +8,7 @@ body.theme-story {
.menu-link:hover, .menu > .head-menu > a:hover { .menu-link:hover, .menu > .head-menu > a:hover {
background-color: rgba(17, 187, 255, 0.25); background-color: rgba(17, 187, 255, 0.25);
} }
.color-primary, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
.color-primary, .modal h1, .modal h2, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
color: #4BF; color: #4BF;
} }
.color-text { .color-text {
@ -33,7 +33,7 @@ body.theme-logs {
.menu-link:hover, .Menu > .head-menu > a:hover { .menu-link:hover, .Menu > .head-menu > a:hover {
background-color: rgba(255, 187, 17, 0.25); background-color: rgba(255, 187, 17, 0.25);
} }
.color-primary, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
.color-primary, .modal h1, .modal h2, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
color: #DA1; color: #DA1;
} }
.color-text { .color-text {
@ -58,7 +58,7 @@ body.theme-logs {
.menu-link:hover, .menu > .head-menu > a:hover { .menu-link:hover, .menu > .head-menu > a:hover {
background-color: rgba(35, 255, 128, 0.25); background-color: rgba(35, 255, 128, 0.25);
} }
.color-primary, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
.color-primary, .modal h1, .modal h2, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
color: #1F8; color: #1F8;
} }
.color-text { .color-text {

8
marko/global/fonts.less

@ -3,6 +3,7 @@
font-family: 'Aneliza'; font-family: 'Aneliza';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap;
src: url(/assets/fonts/Aneliza-Regular.eot); src: url(/assets/fonts/Aneliza-Regular.eot);
src: url(/assets/fonts/Aneliza-Regular.eot?#iefix) format('embedded-opentype'), src: url(/assets/fonts/Aneliza-Regular.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Regular.woff2) format('woff2'), url(/assets/fonts/Aneliza-Regular.woff2) format('woff2'),
@ -16,6 +17,7 @@
font-family: 'Aneliza'; font-family: 'Aneliza';
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
font-display: swap;
src: url(/assets/fonts/Aneliza-Italic.eot); src: url(/assets/fonts/Aneliza-Italic.eot);
src: url(/assets/fonts/Aneliza-Italic.eot?#iefix) format('embedded-opentype'), src: url(/assets/fonts/Aneliza-Italic.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Italic.woff2) format('woff2'), url(/assets/fonts/Aneliza-Italic.woff2) format('woff2'),
@ -29,6 +31,7 @@
font-family: 'Aneliza'; font-family: 'Aneliza';
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
font-display: swap;
src: url(/assets/fonts/Aneliza-Thin.eot); src: url(/assets/fonts/Aneliza-Thin.eot);
src: url(/assets/fonts/Aneliza-Thin.eot?#iefix) format('embedded-opentype'), src: url(/assets/fonts/Aneliza-Thin.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Thin.woff2) format('woff2'), url(/assets/fonts/Aneliza-Thin.woff2) format('woff2'),
@ -42,6 +45,7 @@
font-family: 'Aneliza'; font-family: 'Aneliza';
font-weight: 100; font-weight: 100;
font-style: italic; font-style: italic;
font-display: swap;
src: url(/assets/fonts/Aneliza-ThinItalic.eot); src: url(/assets/fonts/Aneliza-ThinItalic.eot);
src: url(/assets/fonts/Aneliza-ThinItalic.eot?#iefix) format('embedded-opentype'), src: url(/assets/fonts/Aneliza-ThinItalic.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-ThinItalic.woff2) format('woff2'), url(/assets/fonts/Aneliza-ThinItalic.woff2) format('woff2'),
@ -55,6 +59,7 @@
font-family: 'Aneliza'; font-family: 'Aneliza';
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
font-display: swap;
src: url(/assets/fonts/Aneliza-Light.eot); src: url(/assets/fonts/Aneliza-Light.eot);
src: url(/assets/fonts/Aneliza-Light.eot?#iefix) format('embedded-opentype'), src: url(/assets/fonts/Aneliza-Light.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Light.woff2) format('woff2'), url(/assets/fonts/Aneliza-Light.woff2) format('woff2'),
@ -68,6 +73,7 @@
font-family: 'Aneliza'; font-family: 'Aneliza';
font-weight: 200; font-weight: 200;
font-style: italic; font-style: italic;
font-display: swap;
src: url(/assets/fonts/Aneliza-LightItalic.eot); src: url(/assets/fonts/Aneliza-LightItalic.eot);
src: url(/assets/fonts/Aneliza-LightItalic.eot?#iefix) format('embedded-opentype'), src: url(/assets/fonts/Aneliza-LightItalic.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-LightItalic.woff2) format('woff2'), url(/assets/fonts/Aneliza-LightItalic.woff2) format('woff2'),
@ -81,6 +87,7 @@
font-family: 'Aneliza'; font-family: 'Aneliza';
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap;
src: url(/assets/fonts/Aneliza-Bold.eot); src: url(/assets/fonts/Aneliza-Bold.eot);
src: url(/assets/fonts/Aneliza-Bold.eot?#iefix) format('embedded-opentype'), src: url(/assets/fonts/Aneliza-Bold.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Bold.woff2) format('woff2'), url(/assets/fonts/Aneliza-Bold.woff2) format('woff2'),
@ -94,6 +101,7 @@
font-family: 'Aneliza'; font-family: 'Aneliza';
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
font-display: swap;
src: url(/assets/fonts/Aneliza-BoldItalic.eot); src: url(/assets/fonts/Aneliza-BoldItalic.eot);
src: url(/assets/fonts/Aneliza-BoldItalic.eot?#iefix) format('embedded-opentype'), src: url(/assets/fonts/Aneliza-BoldItalic.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-BoldItalic.woff2) format('woff2'), url(/assets/fonts/Aneliza-BoldItalic.woff2) format('woff2'),

Loading…
Cancel
Save