Client: Tweak UI

Author: winwiz1

client/src/components/ComponentB.tsx

@@ -2,11 +2,22 @@
  * ComponentC is a sample component.
  * It is the only component of the Second SPA.
  */
+/** @jsx jsx */
+import { jsx, css } from "@emotion/react";
 import * as React from "react";
-import { Header, Container, Menu } from "semantic-ui-react";
+import { Header, Icon, Container, Menu } from "semantic-ui-react";
 import { BaseComponent } from "./BaseComponent";
 import * as SPAs from "../../config/spa.config";
 
+const cssNav = css({
+  marginRight: "2em",
+});
+
+const cssIcon = css({
+  transform: "translate(0%, -30%)",
+});
+
+
 const Description: React.FC = _props => {
   return (
     <section>
@@ -41,12 +52,23 @@ const Description: React.FC = _props => {
 
 const Navigation: React.FC = _props => {
   return (
-    <nav>
-      <Menu vertical compact borderless className="nav_menu">
+    <nav css={cssNav}>
+      <Menu
+        vertical
+        size="large"
+        className="nav_menu"
+      >
         <Menu.Item>
           <Menu.Header>Go back to</Menu.Header>
           <Menu.Menu>
-            <Menu.Item href={`/${SPAs.getNames()[0]}.html`}>First SPA</Menu.Item>
+            <Menu.Item href={`/${SPAs.getNames()[0]}.html`}>
+              First SPA
+              <Icon
+                name="object group outline"
+                size="big"
+                css={cssIcon}
+              />
+            </Menu.Item>
           </Menu.Menu>
         </Menu.Item>
       </Menu>

client/src/components/Navigation.tsx

@@ -6,7 +6,7 @@
 import { jsx } from "@emotion/react";
 import * as React from "react";
 import { NavLink } from "react-router-dom";
-import { Menu } from "semantic-ui-react";
+import { Menu, Icon } from "semantic-ui-react";
 import * as SPAs from "../../config/spa.config";
 import styles from "../css/navigation.module.css";
 
@@ -16,21 +16,40 @@ const cssStyle: Record<string, string> = {
 
 export const Navigation: React.FC = _props => {
   return (
-    <nav css={cssStyle.menu}>
-      <Menu vertical className="nav_menu">
+    <nav className={cssStyle.menu}>
+      <Menu
+        vertical
+        size="large"
+        className="nav_menu"
+      >
         <Menu.Item>
           <Menu.Header>First SPA</Menu.Header>
           <Menu.Menu>
-            <Menu.Item header as={NavLink} exact to="/" children="Overview" />
-            <Menu.Item header as={NavLink} to="/a" children="ComponentA" />
-            <Menu.Item header as={NavLink} to="/lighthouse" children="Lighthouse" />
-            <Menu.Item header as={NavLink} to="/namelookup" children="NameLookup" />
+            <Menu.Item header as={NavLink} exact to="/">
+              Overview
+              <Icon name="file alternate outline" size="large" />
+            </Menu.Item>
+            <Menu.Item header as={NavLink} to="/a">
+              ComponentA
+              <Icon name="cube" size="large" />
+            </Menu.Item>
+            <Menu.Item header as={NavLink} to="/lighthouse">
+              Lighthouse
+              <Icon name="tachometer alternate" size="large" />
+            </Menu.Item>
+            <Menu.Item header as={NavLink} to="/namelookup">
+              NameLookup
+              <Icon name="search" size="large" />
+            </Menu.Item>
           </Menu.Menu>
         </Menu.Item>
         <Menu.Item>
           <Menu.Header>Second SPA</Menu.Header>
           <Menu.Menu>
-            <Menu.Item href={`/${SPAs.getNames()[1]}.html`}>ComponentB</Menu.Item>
+            <Menu.Item href={`/${SPAs.getNames()[1]}.html`}>
+              ComponentB
+              <Icon name="cube" size="large" />
+            </Menu.Item>
           </Menu.Menu>
         </Menu.Item>
       </Menu>

client/src/css/app.css

@@ -15,3 +15,9 @@ that remains unmangled.
   margin-top: 2em;
   margin-bottom: 3em;
 }
+
+@media only screen and (max-width: 767px) {
+  .ui.text.justified.container {
+    margin-left: 0 !important;
+  }
+}

client/src/css/base-component.module.css

@@ -6,24 +6,24 @@ code {
 
 .component_container {
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: row wrap;
   align-items: flex-start;
 }
 
-@media only screen and (max-width: 550px) {
-  .component_container {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-  }
-}
-
 .left_component {
   flex: initial;
-  margin-bottom: 1rem;
-  margin-left: 2rem;
+  margin-bottom: 1em;
+  margin-left: 2em;
 }
 
 .right_component {
-  flex: auto;
+  flex: 0 1 auto;
+  margin-left: 2em;
+}
+
+@media only screen and (min-width: 1024px) {
+  .right_component {
+    flex: auto;
+    margin-left: 2em;
+  }
 }

client/src/css/navigation.module.css

@@ -5,5 +5,6 @@ in class selectors. No name collisions with third
 party libraries or other components.
 */
 .menu {
-  margin-right: 1em;
+  /* just a placeholder */
+  margin-right: 0;
 }

client/src/css/overview.module.css

@@ -6,4 +6,5 @@ party libraries or other components.
 */
 .msg {
   margin-top: 0 !important;
+  hyphens: manual;
 }