css fixes for release (#8523)

* fix scriptmanager view * use my old version of modal overrides which seemed to work * fix count on import modal too
microsoft · Sep 27, 2021 · a7ba4dd · a7ba4dd
1 parent e627d56
commit a7ba4dd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 59 deletions.
diff --git a/theme/home.less b/theme/home.less
@@ -420,7 +420,7 @@
     }
 }
 
-.scriptmanager, .projectsdialog {
+.scriptmanager .ui.cards, .projectsdialog {
     .ui.card {
         margin-right: 5px;
         border-radius: @homeCardBorderRadius;

diff --git a/theme/themes/pxt/modules/modal.overrides b/theme/themes/pxt/modules/modal.overrides
@@ -30,6 +30,7 @@
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
+    transform: none;
     margin: 0 !important;
     padding: 0 !important;
     border: 0 !important;
@@ -43,6 +44,32 @@
     user-select: none;
 }
 
+.modals.dimmer .ui.scrolling.modal {
+    margin-top: 3.5rem auto !important;
+    top: auto;
+}
+
+.ui.modal {
+  position: fixed;
+  display: none;
+  z-index: @zIndex;
+  text-align: left;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  background: @background;
+  border: @border;
+  box-shadow: @boxShadow;
+  transform-origin: @transformOrigin;
+
+  flex: 0 0 auto;
+
+  border-radius: @borderRadius;
+  user-select: text;
+  will-change: top, left, margin, transform, opacity;
+}
+
 /* Back button */
 .ui.button.back-button {
     background: none;
@@ -196,61 +223,6 @@
     }
 }
 
-body .dimmable.dimmed .ui.page.dimmer .ui.modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-}
-
-@media only screen and (max-width: @largestMobileScreen) {
-    body .dimmable.dimmed .ui.page.dimmer .ui.modal {
-        margin: 0 0 0 -47.5%;
-    }
-}
-
-@media only screen and (min-width: @tabletBreakpoint) {
-    body .dimmable.dimmed .ui.page.dimmer {
-        .ui.modal {
-            margin: 0 0 0 -44%;
-        }
-        .ui.tiny.modal {
-            margin: 0 0 0 -26.4%;
-        }
-    }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-    body .dimmable.dimmed .ui.page.dimmer {
-        .ui.modal {
-            margin: 0 0 0 -425px;
-        }
-
-        .ui.tiny.modal {
-            margin: 0 0 0 -255px;
-        }
-
-        .ui.large.modal {
-            margin: 0 0 0 -510px;
-        }
-    }
-}
-
-@media only screen and (min-width: @largeMonitorBreakpoint) {
-    body .dimmable.dimmed .ui.page.dimmer {
-        .ui.modal {
-            margin: 0 0 0 -450px;
-        }
-
-        .ui.tiny.modal {
-            margin: 0 0 0 -270px;
-        }
-
-        .ui.large.modal {
-            margin: 0 0 0 -540px;
-        }
-    }
-}
-
 
 /*******************************
         Modal Close Icon

diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
@@ -1287,14 +1287,20 @@ export class ImportDialog extends data.Component<ISettingsProps, ImportDialogSta
             && !pxt.winrt.isWinRT() // not supported in windows 10
             && !pxt.BrowserUtils.isPxtElectron()
             && pxt.appTarget?.cloud?.cloudProviders?.github;
+        const showOpenFiles = pxt.appTarget.compile && !disableFileAccessinMaciOs && !disableFileAccessinAndroid;
+
+        let cardCount = showOpenFiles ? 1 : 0;
+        cardCount += showImport ? 1 : 0;
+        cardCount += showCreateGithubRepo ? 1 : 0;
+        const cardClass = cardCount === 1 ? "one" : cardCount === 2 ? "two" : "three";
         return (
             <sui.Modal isOpen={visible} className={classes} size="small"
                 onClose={this.close} dimmer={true}
                 closeIcon={true} header={lf("Import")}
                 closeOnDimmerClick closeOnDocumentClick closeOnEscape
             >
-                <div className={pxt.github.token ? "ui three cards" : "ui two cards"}>
-                    {pxt.appTarget.compile && !disableFileAccessinMaciOs && !disableFileAccessinAndroid ?
+                <div className={`ui ${cardClass} cards`}>
+                    {showOpenFiles &&
                         <codecard.CodeCardView
                             ariaLabel={lf("Open files from your computer")}
                             role="button"
@@ -1304,7 +1310,7 @@ export class ImportDialog extends data.Component<ISettingsProps, ImportDialogSta
                             name={lf("Import File...")}
                             description={lf("Open files from your computer")}
                             onClick={this.importHex}
-                        /> : undefined}
+                        />}
                     {showImport &&
                         <codecard.CodeCardView
                             ariaLabel={lf("Open a shared project URL or GitHub repo")}