From 5ca1481ca311c036508c9c81cd0231dcacabca82 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 14 Sep 2020 11:23:15 +0200 Subject: [PATCH 1/5] changed the way media panels are shown --- .../src/app/ui/landing-page/landing-page.js | 258 ++++++++++-------- 1 file changed, 151 insertions(+), 107 deletions(-) diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js index 0fdf657bfc..74a86ad83d 100644 --- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js +++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js @@ -32,12 +32,24 @@ let css = csjs` margin:30px; padding-right: 90px; } + .mediaBadge { + font-size: 2em; + height: 2em; + width: 2em; + } + .logoImg { + height: 10em; + } .hpSections { min-width: 640px; } .remixHomeMedia { - overflow-x: hidden; overflow-y: auto; + overflow-x: hidden; + max-height: 570px; + } + .panels { + box-shadow: 5px 5px 15px 0px; } .labelIt { margin-bottom: 0; @@ -49,9 +61,6 @@ let css = csjs` .importFrom p { margin-right: 10px; } - .logoContainer { - float: left; - } .logoContainer img{ height: 150px; opacity: 0.7; @@ -66,18 +75,14 @@ let css = csjs` width: 120px; height: 70px; } - .block input[type='radio']:checked ~ .media{ - width: auto; - display: block; - transition: .5s ease-in; - } - .media{ - width: 0; - display: none; + .media { overflow: hidden; + width: 400px; transition: .5s ease-out; + z-index: 1000; } - .mediumPanel { + + .mediaMedium { width: 400px; } } @@ -106,7 +111,7 @@ export class LandingPage extends ViewPlugin { this.twitterFrame = yo`
` + this.badgeTwitter = yo`` + this.badgeMedium = yo`` + this.twitterPanel = yo` +
+ ${this.twitterFrame} +
+ ` + this.mediumPanel = yo` +
+
+
+
+
+
+ ` globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => { console.log("theme is ", theme.quality) this.onThemeChanged(theme.quality) @@ -127,7 +165,7 @@ export class LandingPage extends ViewPlugin { let twitterFrame = yo`

Documentation -

-

- - Gitter channel -

-

- - Medium Posts -

-

- - switchToPreviousVersion()}>Old experience -

+
+

Featured Plugins

+
+ ${solEnv} + ${pipelineEnv} + ${mythXEnv} + ${sourceVerifyEnv} + ${debuggerEnv} + ${moreEnv} +
-
-
-
-
-
-
- - - ${this.twitterFrame} -
-
- - -
-
-
+
+
+

File

+

+ + createNewFile()}>New File +

+

+ + + Open Files + + +

+

+ + connectToLocalhost()}>Connect to Localhost +

+

+
+ + + + + + +
+
+
+

Resources

+

+ + Documentation +

+

+ + Gitter channel +

+

+ + Medium Posts +

+

+ + switchToPreviousVersion()}>Old experience +

+
+
+
+
+
+
+ ${this.badgeTwitter} + ${this.badgeMedium} +
+
+ ${this.mediumPanel} + ${this.twitterPanel}
From b3cb6979142a296665afcaae91c0557c383d4dc0 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 14 Sep 2020 12:54:32 +0200 Subject: [PATCH 2/5] removed outline on media badges when focusing --- apps/remix-ide/src/app/ui/landing-page/landing-page.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js index 74a86ad83d..c61f4a17d2 100644 --- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js +++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js @@ -37,6 +37,9 @@ let css = csjs` height: 2em; width: 2em; } + .mediaBadge:focus { + outline: none; + } .logoImg { height: 10em; } @@ -49,7 +52,7 @@ let css = csjs` max-height: 570px; } .panels { - box-shadow: 5px 5px 15px 0px; + box-shadow: 0px 0px 8px 0px; } .labelIt { margin-bottom: 0; @@ -80,11 +83,6 @@ let css = csjs` width: 400px; transition: .5s ease-out; z-index: 1000; - } - - .mediaMedium { - width: 400px; - } } ` From a9dffbe00def1db252240dd1f17d6d60d89db37d Mon Sep 17 00:00:00 2001 From: LianaHus Date: Mon, 14 Sep 2020 17:13:06 +0200 Subject: [PATCH 3/5] fixed syntax error --- apps/remix-ide/src/app/ui/landing-page/landing-page.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js index c61f4a17d2..a49d991426 100644 --- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js +++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js @@ -83,6 +83,7 @@ let css = csjs` width: 400px; transition: .5s ease-out; z-index: 1000; + } } ` From 08e70ec5fa7631652d1cca9b4e4e70661ef7d721 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Tue, 15 Sep 2020 09:06:36 +0200 Subject: [PATCH 4/5] added margine for media panels --- apps/remix-ide/src/app/ui/landing-page/landing-page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js index a49d991426..91e8cd2028 100644 --- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js +++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js @@ -404,7 +404,7 @@ export class LandingPage extends ViewPlugin { ${this.badgeTwitter} ${this.badgeMedium}
-
+
${this.mediumPanel} ${this.twitterPanel}
From 17fc9599009ea86582e4a741b5830ffde87efecb Mon Sep 17 00:00:00 2001 From: LianaHus Date: Tue, 15 Sep 2020 16:30:04 +0200 Subject: [PATCH 5/5] less shadow --- apps/remix-ide/src/app/ui/landing-page/landing-page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js index 91e8cd2028..5fb0a700d0 100644 --- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js +++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js @@ -52,7 +52,7 @@ let css = csjs` max-height: 570px; } .panels { - box-shadow: 0px 0px 8px 0px; + box-shadow: 0px 0px 17px -7px; } .labelIt { margin-bottom: 0;