rpdata/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
gisle
2018-09-16 18:45:12 +02:00
parent bde67f5617
commit a3c7ae7bb5
6 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
marko/browser.json
+2 -2
View File
@@ -1,8 +1,8 @@
{
"dependencies": [
"./global/fonts.less",
"./global/base.less",
"./global/colors.less",
"./global/navbar.less",
"./global/fonts.less"
"./global/navbar.less"
]
}
marko/components/menu/index.marko
+4 -2
View File
@@ -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/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>
</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>
</modal>
</if>
marko/components/modal/index.marko
-1
View File
@@ -3,7 +3,6 @@
<div class="overlay-options color-menu">
<div if(input.closable) on-click("closeModal")>X</div>
</div>
<h1 class="color-primary" if(input.title)>${input.title}</h1>
<div class="modal color-text">
<include(input.renderBody) />
</div>
marko/global/base.less
+1
View File
@@ -2,6 +2,7 @@ body {
margin: 0;
padding: 0;
font-family: Aneliza, sans-serif;
font-display: swap;
background-color: black;
color: white;
marko/global/colors.less
+3 -3
View File
@@ -8,7 +8,7 @@ body.theme-story {
.menu-link:hover, .menu > .head-menu > a:hover {
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-text {
@@ -33,7 +33,7 @@ body.theme-logs {
.menu-link:hover, .Menu > .head-menu > a:hover {
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-text {
@@ -58,7 +58,7 @@ body.theme-logs {
.menu-link:hover, .menu > .head-menu > a:hover {
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-text {
marko/global/fonts.less
+8
View File
@@ -3,6 +3,7 @@
font-family: 'Aneliza';
font-weight: normal;
font-style: normal;
font-display: swap;
src: url(/assets/fonts/Aneliza-Regular.eot);
src: url(/assets/fonts/Aneliza-Regular.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Regular.woff2) format('woff2'),
@@ -16,6 +17,7 @@
font-family: 'Aneliza';
font-weight: normal;
font-style: italic;
font-display: swap;
src: url(/assets/fonts/Aneliza-Italic.eot);
src: url(/assets/fonts/Aneliza-Italic.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Italic.woff2) format('woff2'),
@@ -29,6 +31,7 @@
font-family: 'Aneliza';
font-weight: 100;
font-style: normal;
font-display: swap;
src: url(/assets/fonts/Aneliza-Thin.eot);
src: url(/assets/fonts/Aneliza-Thin.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Thin.woff2) format('woff2'),
@@ -42,6 +45,7 @@
font-family: 'Aneliza';
font-weight: 100;
font-style: italic;
font-display: swap;
src: url(/assets/fonts/Aneliza-ThinItalic.eot);
src: url(/assets/fonts/Aneliza-ThinItalic.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-ThinItalic.woff2) format('woff2'),
@@ -55,6 +59,7 @@
font-family: 'Aneliza';
font-weight: 200;
font-style: normal;
font-display: swap;
src: url(/assets/fonts/Aneliza-Light.eot);
src: url(/assets/fonts/Aneliza-Light.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Light.woff2) format('woff2'),
@@ -68,6 +73,7 @@
font-family: 'Aneliza';
font-weight: 200;
font-style: italic;
font-display: swap;
src: url(/assets/fonts/Aneliza-LightItalic.eot);
src: url(/assets/fonts/Aneliza-LightItalic.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-LightItalic.woff2) format('woff2'),
@@ -81,6 +87,7 @@
font-family: 'Aneliza';
font-weight: bold;
font-style: normal;
font-display: swap;
src: url(/assets/fonts/Aneliza-Bold.eot);
src: url(/assets/fonts/Aneliza-Bold.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-Bold.woff2) format('woff2'),
@@ -94,6 +101,7 @@
font-family: 'Aneliza';
font-weight: bold;
font-style: italic;
font-display: swap;
src: url(/assets/fonts/Aneliza-BoldItalic.eot);
src: url(/assets/fonts/Aneliza-BoldItalic.eot?#iefix) format('embedded-opentype'),
url(/assets/fonts/Aneliza-BoldItalic.woff2) format('woff2'),