T keng/fix section spacing (#513)

* change div wrapping * fix spacing on sidebar and centerview
microsoft · Apr 18, 2019 · d6b9da8 · d6b9da8
1 parent dd7e70b
commit d6b9da8
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 9 deletions.
diff --git a/src/client/src/appStyles.module.css b/src/client/src/appStyles.module.css
@@ -13,10 +13,10 @@
   height: calc(100vh - 122px);
   margin-top: 51px;
   margin-bottom: 71px;
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .centerViewMaxHeight {
   height: calc(100vh - 51px);
   margin-bottom: 0px;
-}
+}
diff --git a/src/client/src/components/LeftSidebar/index.tsx b/src/client/src/components/LeftSidebar/index.tsx
@@ -73,9 +73,12 @@ const LeftSidebar = (props: Props) => {
   });
   const { isVisited, intl } = props;
   return (
-    <nav aria-label={intl.formatMessage(messages.ariaNavLabel)}>
+    <React.Fragment>
       {pathname !== ROUTES.PAGE_DETAILS && (
-        <div className={classnames(styles.leftView, styles.container)}>
+        <nav
+          className={classnames(styles.leftView, styles.container)}
+          aria-label={intl.formatMessage(messages.ariaNavLabel)}
+        >
           <div>
             {leftSidebarData.map((sidebartitle, idx) => {
               return (
@@ -108,9 +111,9 @@ const LeftSidebar = (props: Props) => {
               defaultMessage="Give Feedback"
             />
           </a>
-        </div>
+        </nav>
       )}
-    </nav>
+    </React.Fragment>
   );
 };
 

diff --git a/src/client/src/components/LeftSidebar/styles.module.css b/src/client/src/components/LeftSidebar/styles.module.css
@@ -1,8 +1,8 @@
 .container {
-  padding-top: 15%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  padding-top: 15%;
 }
 
 .itemBorder {

diff --git a/src/client/src/containers/RightSidebar/index.tsx b/src/client/src/containers/RightSidebar/index.tsx
@@ -120,9 +120,10 @@ class RightSidebar extends React.Component<Props, IRightSidebarState> {
     const { formatMessage } = intl;
     const { frontendOptions, backendOptions, projectTypes } = contentOptions;
     return (
-      <div role="complementary">
+      <React.Fragment>
         {pathname !== ROUTES.PAGE_DETAILS && (
           <div
+            role="complementary"
             className={classNames(styles.container, styles.rightViewCropped)}
           >
             {pathname !== ROUTES.REVIEW_AND_GENERATE && (
@@ -180,7 +181,7 @@ class RightSidebar extends React.Component<Props, IRightSidebarState> {
             </div>
           </div>
         )}
-      </div>
+      </React.Fragment>
     );
   }
 }

diff --git a/src/client/src/translations/en.json b/src/client/src/translations/en.json
@@ -1,5 +1,6 @@
 {
   "about.about": "About",
+  "about.reportAnIssue": "Report an issue",
   "about.templatesVersion": "Templates version:",
   "about.wizardVersion": "Wizard version:",
   "azureFunctions.Title": "Azure Functions",

diff --git a/src/client/src/translations/whitelist_en.json b/src/client/src/translations/whitelist_en.json
@@ -12,6 +12,7 @@
   "leftSidebar.pages",
   "leftSidebar.services",
   "leftSidebar.summary",
+  "leftSideBar.ariaNavLabel",
   "loginCard.details",
   "loginCard.createAccount",
   "loginCard.signIn",
@@ -69,10 +70,12 @@
   "footer.back",
   "footer.next",
   "footer.generate",
+  "footer.navAriaLabel",
   "header.signOut",
   "licenses.licenses",
   "postGenerationModal.deploymentHalted",
   "postGenerationModal.restartWizard",
+  "postGenerationModal.deploymentFailure",
   "postGenerationModal.closeWizard",
   "postGenerationModal.success",
   "postGenerationModal.isDeploying",