Feature(web): Fix UI display on mobile and desktop

web/src/App.js

@@ -6,6 +6,7 @@ import {ThemeStore} from './store/ThemeStore';
 
 // Import Tabler styles
 import 'tabler-react/dist/Tabler.css';
+import './assets/main.scss';
 import {ResultStore} from './store/ResultStore';
 
 const App = () => {

web/src/assets/_breakpointMixins.scss

@@ -0,0 +1,27 @@
+// Small devices
+@mixin sm {
+  @media (min-width: #{$screen-sm-min}) {
+    @content;
+  }
+}
+
+// Medium devices
+@mixin md {
+  @media (min-width: #{$screen-md-min}) {
+    @content;
+  }
+}
+
+// Large devices
+@mixin lg {
+  @media (min-width: #{$screen-lg-min}) {
+    @content;
+  }
+}
+
+// Extra large devices
+@mixin xl {
+  @media (min-width: #{$screen-xl-min}) {
+    @content;
+  }
+}

web/src/assets/_variables.scss

@@ -1,3 +1,23 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
 
 $font-stack: 'Open Sans', sans-serif;
+
+// Small tablets and large smartphones (landscape view)
+$screen-sm-min: 576px;
+
+// Small tablets (portrait view)
+$screen-md-min: 768px;
+
+// Tablets and small desktops
+$screen-lg-min: 992px;
+
+// Large tablets and desktops
+$screen-xl-min: 1200px;
+
+$body-bg-dark: #2b2e4d;
+
+$body-bg-light: #fcfcff;
+
+$body-color-light: #96a2b8;
+
+$body-color-dark: #8082a5;

web/src/assets/main.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'breakpointMixins';
 
 // global tabler css overrides
 

web/src/index.scss

@@ -5,3 +5,17 @@
   height: 100%;
   font: 100% $font-stack;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: $body-bg-dark;
+    color: $body-color-dark;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: $body-bg-light;
+    color: $body-color-light;
+  }
+}

web/src/ui/components/BuildCard/BuildCard.js

@@ -77,7 +77,7 @@ const ArtifactCard = ({artifact}) => {
   const ArtifactStateTag = !artifactState ? (
     <React.Fragment />
   ) : (
-    <div className="btn" style={artifactTagStyle}>
+    <div className="btn artifact-tag--yl" style={artifactTagStyle}>
       {artifactState}
     </div>
   );
@@ -91,7 +91,9 @@ const ArtifactCard = ({artifact}) => {
         <div className="card-left-icon--yl icon-top--yl">{PlatformIcon}</div>
         <div className="card-details--yl">
           <div className="card-details-row--yl">
-            <div>[TODO: platform] [TODO: artifact ID]</div>
+            <div className="vertical-center--yl">
+              [TODO: platform] [TODO: artifact ID]
+            </div>
             {ArtifactStateTag}
           </div>
           <div className="card-details-row--yl">
@@ -127,9 +129,12 @@ const BuildCard = ({item}) => {
 
   const COMMIT_LEN = buildCommit === missing('commit') ? [0] : [0, 7];
 
-  const CardTitle = `${
-    buildBranch.toUpperCase() === 'MASTER' ? 'Master' : 'Pull'
-  } [TODO: build name]`;
+  const CardTitle = (
+    <div className="card-title">
+      {`${buildBranch.toUpperCase() === 'MASTER' ? 'Master' : 'Pull'} [TODO:
+      build name]`}
+    </div>
+  );
 
   const CardIcon =
     buildBranch.toUpperCase() === 'MASTER' ? (
@@ -156,7 +161,10 @@ const BuildCard = ({item}) => {
 
   const ChevronIcon = (
     <div
-      style={{color: theme.text.blockTitle, cursor: 'pointer'}}
+      style={{
+        color: theme.text.blockTitle,
+        cursor: 'pointer',
+      }}
       onClick={() => toggleExpanded(!expanded)}
     >
       {expanded ? <ChevronUp /> : <ChevronDown />}
@@ -171,8 +179,10 @@ const BuildCard = ({item}) => {
 
   const branchName = (
     <div
-      className="btn"
-      style={{backgroundColor: theme.border.filterUnselected}}
+      className="btn btn-branch-name--yl"
+      style={{
+        backgroundColor: theme.border.filterUnselected,
+      }}
     >
       {buildBranch}
     </div>
@@ -200,7 +210,11 @@ const BuildCard = ({item}) => {
     </div>
   );
 
-  const BuildCommit = <div>{buildCommit.slice(...COMMIT_LEN)}</div>;
+  const BuildCommit = (
+    <div className="vertical-center--yl">
+      {buildCommit.slice(...COMMIT_LEN)}
+    </div>
+  );
 
   return (
     <div

web/src/ui/components/BuildCard/BuildCard.scss

@@ -5,23 +5,31 @@ div,
   padding: 0px;
 }
 
+div.card {
+  max-width: 100vw;
+}
+
 .card div.card-row--yl {
   display: flex;
   margin: 0px;
   padding: 15px;
   width: 100%;
-  border: none;
   align-items: center;
   height: 100%;
   margin-bottom: 16px;
   &.expanded {
     border-bottom: 1px solid gray;
   }
+  a {
+    cursor: pointer;
+  }
 }
 
 .card div.card-row--yl .card-left-icon--yl {
   height: 100%;
   margin-right: 0.8em;
+  flex-shrink: 0;
+  margin-top: 0.2rem;
   &.rotate-merge--yl {
     transform: rotate(90deg);
   }
@@ -34,47 +42,61 @@ div,
   height: 100%;
   padding: 0px;
   margin: 0px;
-  flex: 0 0 auto;
+  flex: 0 1 auto;
   margin-right: auto;
 }
 
 .card div.card-row--yl .card-author--yl {
   font-size: smaller;
   margin-right: 8px;
+  flex-shrink: 0;
 }
 
 .card div.card-row--yl .card-avatar--yl {
   margin-right: 16px;
+  flex-shrink: 0;
 }
 
 // Build body
 
 .card div.card-row--yl .card-details--yl {
   display: flex;
   flex-flow: row wrap;
-  margin-right: auto;
-  width: 100%;
+  margin-right: 8px;
+  flex-basis: 100%;
   .card-details-row--yl {
     display: flex;
-    width: 100%;
-    flex-basis: 0 0 100%;
+    flex: 1 0 100%;
+    flex-wrap: wrap;
     margin-bottom: 16px;
     div {
-      margin-right: 16px;
+      margin-right: 8px;
+    }
+    div.btn {
+      cursor: default;
+      &.btn-branch-name--yl {
+        word-wrap: unset;
+        white-space: unset;
+        text-align: left;
+      }
     }
   }
 }
 
+.vertical-center--yl {
+  display: flex;
+  align-items: center;
+}
+
 .card div.card-row--yl .card-build-actions--yl {
   height: 100%;
   align-self: flex-start;
   display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
   flex-direction: column;
   div,
   a {
     margin-bottom: 8px;
   }
-  a {
-    cursor: pointer;
-  }
 }

web/src/ui/components/Filters.js

@@ -210,7 +210,6 @@ const Filters = () => {
 
   return (
     <div className="filter-wrapper--yl">
-      <div className="filter-select--yl"></div>
       {FiltersAppWidget()}
       {FiltersPlatformWidget()}
       {FiltersBranchWidget()}

web/src/ui/components/Filters.scss

@@ -1,5 +1,6 @@
+@import '../../assets/main.scss';
+
 .filter-wrapper--yl {
-  margin-left: 10px;
   display: flex;
 }
 

web/src/ui/components/Header/Header.js

@@ -13,15 +13,9 @@ const Header = () => {
   const {theme} = useContext(ThemeContext);
   const {state, updateState} = useContext(ResultContext);
 
-  // TODO: Dynamic, based on device etc
-  const yoloLogo = 'yoloLogo';
-
   return (
-    <div
-      className={'header--yl pt-2 mb-5 px-md-4 pb-0 mt-2'}
-      style={{backgroundColor: theme.bg.page}}
-    >
-      <div className={yoloLogo}>
+    <div className={'header--yl'} style={{backgroundColor: theme.bg.page}}>
+      <div className="header-logo--yl">
         <img src={YoloLogo}></img>
       </div>
       <ActionWidgets>
@@ -40,9 +34,6 @@ const Header = () => {
         </div>
       </ActionWidgets>
       <ThemeToggler />
-      <div className="headerUser">
-        <User />
-      </div>
     </div>
   );
 };

web/src/ui/components/Header/Header.scss

@@ -1,16 +1,35 @@
+@import '../../../assets/main.scss';
+
 .header--yl {
+  box-sizing: border-box;
+  margin: 0;
+  margin-bottom: 0.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 10px;
+  padding-left: 12px;
+  padding-right: 75px;
+  overflow-x: hidden;
+  flex-shrink: 0;
   width: 100%;
   display: flex;
   align-items: center;
-  display: flex;
-  width: 100%;
-  align-items: center;
-}
-
-.yoloLogo {
-  margin-right: 36px;
+  justify-content: flex-start;
+  overflow: hidden;
+  @include sm {
+    padding-right: 75px;
+  }
 }
 
-.headerUser {
-  margin-left: auto;
+.header-logo--yl {
+  display: none;
+  @include sm {
+    margin-left: 1rem;
+    margin-right: 36px;
+    display: block;
+  }
+  img {
+    @include sm {
+      height: 2.75rem;
+    }
+  }
 }

web/src/ui/components/ThemeToggler.js

@@ -4,25 +4,25 @@ import {ThemeContext} from '../../store/ThemeStore';
 const detectBrowserTheme = () => {
   const supportsPreference =
     window.matchMedia('(prefers-color-scheme)').media !== 'not all';
-  const isDark =
+  const isLight =
     supportsPreference &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches;
-  return {isDark};
+    window.matchMedia('(prefers-color-scheme: light)').matches;
+  return {isLight};
 };
 
 const ThemeToggler = () => {
   const {theme, changeTheme} = useContext(ThemeContext);
 
   useEffect(() => {
-    const {isDark} = detectBrowserTheme();
-    if (isDark) changeTheme('dark');
+    const {isLight} = detectBrowserTheme();
+    if (isLight) changeTheme('light');
   }, []);
 
   const buttonStyle = {
     display: 'flex',
     flex: '1 0 auto',
     justifyContent: 'flex-end',
-    marginRight: '80px',
+    marginRight: '0.5rem',
     fontSize: '2rem',
     cursor: 'pointer',
   };