[stable7.2] Cherry-pick CSS fixes, skillmap metadata tag fix (microsoft#8537)

shakao · Vivian Li · riknoll · web-flow · commit 65bc27e28c7a · 2021-09-29T11:24:07.000-07:00
* Skillmap metadata tags are arrays (microsoft#8531) * Restore margin styles for scrolling modals (microsoft#8533) * Restore filelist, additional icon classes, sync mini sim visibility with tab state (microsoft#8532) * Restore filelist, full screen button to sandbox view * Add 'rotated', 'flipped' modifiers to icon allow list * Don't hide mini sim by default when loading a new header * Fix padding in home screen details view (microsoft#8534) Co-authored-by: Vivian Li <vivl@microsoft.com> Co-authored-by: Richard Knoll <riknoll@users.noreply.github.com>
diff --git a/theme/home.less b/theme/home.less
@@ -290,9 +290,9 @@
             border-radius: 0.5rem;
             background-color: @primaryColor;
         }
-        .actions {
+        .ui.grid.stackable .actions {
             padding-right: 4rem !important;
-            position: absolute;
+            position: relative;
             bottom: 0;
             text-align: right;
 
diff --git a/theme/themes/pxt/modules/modal.overrides b/theme/themes/pxt/modules/modal.overrides
@@ -45,7 +45,7 @@
 }
 
 .modals.dimmer .ui.scrolling.modal {
-    margin-top: 3.5rem auto !important;
+    margin: 3.5rem auto !important;
     top: auto;
 }
 
diff --git a/theme/tutorial-sidebar.less b/theme/tutorial-sidebar.less
@@ -283,7 +283,7 @@
 }
 
 // Mini sim is visible when tab is hidden
-#root {
+#root.tabTutorial {
     &:not(.fullscreensim) .tab-simulator.tab-content.hidden {
         height: 0;
         padding: 0;
@@ -300,7 +300,7 @@
     }
     .tab-simulator.tab-content:not(.hidden) {
         .simPanel {
-            .sidebar-button, .hidefullscreen { display: none !important; }
+            .sidebar-button, .button.hidefullscreen { display: none !important; }
         }
     }
 }
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
@@ -1564,7 +1564,6 @@ export class ProjectView
     private internalLoadHeaderAsync(h: pxt.workspace.Header, editorState?: pxt.editor.EditorState): Promise<void> {
         pxt.debug(`loading ${h.id} (pxt v${h.targetVersion})`);
         this.stopSimulator(true);
-        this.showMiniSim(false);
         if (pxt.appTarget.simulator && pxt.appTarget.simulator.aspectRatio)
             simulator.driver.preload(pxt.appTarget.simulator.aspectRatio);
         this.clearSerial()
diff --git a/webapp/src/codecard.tsx b/webapp/src/codecard.tsx
@@ -128,7 +128,7 @@ export class CodeCardView extends data.Component<CodeCardProps, CodeCardState> {
             {(card.shortName || name || descriptions) ?
                 <div className={`content ${this.props.tallCard? "tall" : ""}`}>
                     {card.shortName || name ? <div className="header">{card.shortName || name}
-                            <div className="tags">{card.tags}</div>
+                            <div className="tags">{card.tags?.join(" ")}</div>
                         </div> : null}
                     {descriptions && descriptions.map((element, index) => {
                         return <div key={`line${index}`} className={`description tall ${card.icon || card.iconContent || card.imageUrl ? "" : "long"}`}>{renderMd(element)}</div>
diff --git a/webapp/src/marked.tsx b/webapp/src/marked.tsx
diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
@@ -61,7 +61,8 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
             || (this.props.tutorialOptions?.tutorial && props.tutorialOptions?.tutorial
                 && this.props.tutorialOptions.tutorial !== props.tutorialOptions.tutorial)) {
             this.showTutorialTab();
-        } else if (!this.props.inHome && props.inHome) {
+        } else if (!this.props.inHome && props.inHome
+            || (this.props.tutorialOptions && !props.tutorialOptions)) {
             this.showSimulatorTab();
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`.modals.dimmer .ui.scrolling.modal {`
`48`		`- margin-top: 3.5rem auto !important;`
	`48`	`+ margin: 3.5rem auto !important;`
`49`	`49`	`top: auto;`
`50`	`50`	`}`
`51`	`51`
Original file line number	Diff line number	Diff line change
`@@ -283,7 +283,7 @@`
`283`	`283`	`}`
`284`	`284`
`285`	`285`	`// Mini sim is visible when tab is hidden`
`286`		`-#root {`
	`286`	`+#root.tabTutorial {`
`287`	`287`	`&:not(.fullscreensim) .tab-simulator.tab-content.hidden {`
`288`	`288`	`height: 0;`
`289`	`289`	`padding: 0;`
`@@ -300,7 +300,7 @@`
`300`	`300`	`}`
`301`	`301`	`.tab-simulator.tab-content:not(.hidden) {`
`302`	`302`	`.simPanel {`
`303`		`- .sidebar-button, .hidefullscreen { display: none !important; }`
	`303`	`+ .sidebar-button, .button.hidefullscreen { display: none !important; }`
`304`	`304`	`}`
`305`	`305`	`}`
`306`	`306`	`}`
Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,8 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {`
`61`	`61`	`\|\| (this.props.tutorialOptions?.tutorial && props.tutorialOptions?.tutorial`
`62`	`62`	`&& this.props.tutorialOptions.tutorial !== props.tutorialOptions.tutorial)) {`
`63`	`63`	`this.showTutorialTab();`
`64`		`- } else if (!this.props.inHome && props.inHome) {`
	`64`	`+ } else if (!this.props.inHome && props.inHome`
	`65`	`+ \|\| (this.props.tutorialOptions && !props.tutorialOptions)) {`
`65`	`66`	`this.showSimulatorTab();`
`66`	`67`	`}`
`67`	`68`	`}`