feat/123: enable linux build (#127)

* feat/123: enable linux build
* feat/123: style: handle window width gracefully
* feat/123: update README

.github/workflows/build.yml

@@ -93,3 +93,46 @@ jobs:
           files: ./server/dist/ontime-win64.exe
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_linux:
+    runs-on: ubuntu-latest
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      # React
+      - name: React - Install dependencies
+        run: yarn install
+        working-directory: ./client
+
+      - name: React - Build project
+        run: yarn build
+        working-directory: ./client
+
+      # Node server
+      - name: Server - Install dependencies
+        run: yarn install
+        working-directory: ./server/src
+
+      # App
+      - name: Electron - Install dependencies
+        shell: bash
+        run: yarn install && yarn setdb
+        working-directory: ./server
+      - name: Electron - Build app
+        run: yarn dist-linux
+        working-directory: ./server
+
+      # Release
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: ./server/dist/ontime-linux.AppImage
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -6,7 +6,7 @@
 <div style="display: flex; justify-content: space-around">
   <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/mac-download.png"/></a>
   <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/win-download.png"/></a>
-  <img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/linux-download.png"/>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/linux-download.png"/></a>
 </div>
 
 # Ontime
@@ -126,7 +126,6 @@ friendly order unless there is user demand to bump any of them.
 - [ ] Improvement with event component design
 - [ ] New playback mode
   for [cumulative time keeping](https://github.com/cpvalente/ontime/issues/100)
-- [ ] Linux version
 - [ ] Headless version (run server only anywhere, configure from a browser locally)
 - [ ] Companion module
 - [ ] Lower Third Manager

client/src/features/info/InfoLogger.jsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { HStack } from '@chakra-ui/react';
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import { LoggingContext } from '../../app/context/LoggingContext';
 import style from './InfoLogger.module.scss';
@@ -60,7 +59,7 @@ export default function InfoLogger() {
       <CollapseBar title='Log' isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)} />
       {!collapsed && (
         <>
-          <HStack className={style.toggleBar}>
+          <div className={style.toggleBar}>
             <div
               onClick={() => setShowUser((s) => !s)}
               onAuxClick={() => disableOthers('USER')}
@@ -118,7 +117,7 @@ export default function InfoLogger() {
             <div onClick={clearLog} className={style.clear} role='button'>
               Clear
             </div>
-          </HStack>
+          </div>
           <ul className={style.log}>
             {data.map((d) => (
               <li

client/src/features/info/InfoLogger.module.scss

@@ -28,13 +28,13 @@
     margin-bottom: 2px;
 
     .time {
-      width: 13%;
+      width: 4.5em
     }
     .origin {
-      width: 18%;
+      width: 6em;
     }
     .msg {
-      width: 70%;
+      flex: 1;
     }
   }
 
@@ -63,6 +63,8 @@
 
 .toggleBar {
   display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
   font-size: 0.7em;
   justify-content: flex-start;
   padding: 0.5em 8px;
@@ -82,7 +84,6 @@
   }
 
   .clear {
-    margin-left: auto;
     border: 1px solid rgba($ontime-pink, 0.5);
   }
 }

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",
@@ -39,6 +39,7 @@
     "dist": "electron-builder",
     "dist-win": "electron-builder --publish=never  --x64 --win",
     "dist-mac": "electron-builder --publish=never  --x64 --mac",
+    "dist-linux": "electron-builder --publish=never  --x64 --linux",
     "dist-all": "electron-builder -mw"
   },
   "jest": {
@@ -77,6 +78,10 @@
       "installerSidebar": "ontime-install.bmp",
       "uninstallerSidebar": "ontime-uninstall.bmp"
     },
+    "linux": {
+      "target": "AppImage",
+      "artifactName": "ontime-linux.AppImage"
+    },
     "files": [
       "**/*",
       "assets/",