diff options
| -rw-r--r-- | .gitlab-ci.yml | 6 | ||||
| -rw-r--r-- | .tmuxinator.yml | 8 | ||||
| -rw-r--r-- | Makefile | 27 | ||||
| -rw-r--r-- | README.md | 13 | ||||
| -rwxr-xr-x | bin/deploy | 12 | ||||
| -rwxr-xr-x | bin/dev-server | 20 | ||||
| -rw-r--r-- | package.json | 6 | ||||
| -rw-r--r-- | public/style/main.css | 139 | ||||
| -rw-r--r-- | shell.nix | 28 | ||||
| -rw-r--r-- | src/Timer/View.elm | 16 |
10 files changed, 136 insertions, 139 deletions
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 22a4be4..a872f80 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,6 +1,10 @@ +image: alpine:latest pages: + stage: deploy + script: + - echo 'Nothing to do...' artifacts: paths: - public only: - - demo + - pages diff --git a/.tmuxinator.yml b/.tmuxinator.yml deleted file mode 100644 index 2be1fda..0000000 --- a/.tmuxinator.yml +++ /dev/null @@ -1,8 +0,0 @@ -name: sharedCost - -windows: - - main: - layout: fff4,119x58,0,0{94x58,0,0,0,24x58,95,0,1} - panes: - - # Empty - - make install && make && make watch @@ -1,26 +1,9 @@ -all: build +build: install + @elm make src/Main.elm --output public/client.js || true clean: - @rm -r node_modules >/dev/null 2>&1 || true - @rm -r elm-stuff >/dev/null 2>&1 || true + @echo "Cleaning" + @rm -rf elm-stuff -install: - @npm install +install: elm-package.json @elm package install - -watch: kill-server launch-server watch-client - -# Build and launch -# ---------------- - -kill-server: - @fuser -k 8080/tcp || true - -launch-server: - @./node_modules/http-server/bin/http-server ./public -p 8080 & - -build: - @elm make src/Main.elm --output public/client.js || true - -watch-client: - @./node_modules/nodemon/bin/nodemon.js --watch src -e elm --exec 'clear && make build --silent' @@ -1,16 +1,15 @@ # Timer - [Try It!](http://guyonvarch.gitlab.io/timer) -Getting started ---------------- +## Getting started -Install nix: +Install [nix](https://nixos.org/), then: ``` -curl https://nixos.org/nix/install | sh +nix-shell --run "bin/dev-server" ``` -Inside the project directory, open a nix shell: +## Deploy -``` -nix-shell +```bash +nix-shell --run ./deploy ``` diff --git a/bin/deploy b/bin/deploy new file mode 100755 index 0000000..a4e72bd --- /dev/null +++ b/bin/deploy @@ -0,0 +1,12 @@ +#!/usr/bin/env bash +set -euo pipefail + +# Build +git branch -D pages || true +git checkout -b pages +make clean build +git add --force public/client.js +git commit -m "Deploy pages" +git push --force origin pages +git checkout master +git branch -D pages diff --git a/bin/dev-server b/bin/dev-server new file mode 100755 index 0000000..053ba57 --- /dev/null +++ b/bin/dev-server @@ -0,0 +1,20 @@ +#!/usr/bin/env bash +set -euo + +function finish { + if [ -n "$LIVE_SERVER_PID" ]; then + kill "$LIVE_SERVER_PID" > /dev/null 2>&1 + fi +} + +trap finish EXIT + +(cd public; python -m SimpleHTTPServer) & +LIVE_SERVER_PID="$!" + +make build || true + +watchman-make \ + --pattern 'src/**' elm-package.json Makefile public/style/main.css \ + --target "build" \ + --settle 0.5 diff --git a/package.json b/package.json deleted file mode 100644 index ba7eb37..0000000 --- a/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "devDependencies": { - "nodemon": "1.9.1", - "http-server": "0.8.5" - } -} diff --git a/public/style/main.css b/public/style/main.css index 7602c7d..facafac 100644 --- a/public/style/main.css +++ b/public/style/main.css @@ -1,52 +1,44 @@ -/**************/ -/* Header bar */ -/**************/ +/******************/ +/* Root font-size */ +/******************/ -.headerBar { - background-color: #111111; - font-size: 70px; - box-shadow: 0px 2px 2px grey; - min-width: 1020px; - margin-bottom: 2px; +@media screen and (max-width: 500px) { + html { + font-size: 60%; + } } -.headerBar > button { - background-color: #111111; - color: white; - height: 150px; - line-height: 150px; - font-size: 70px; - border: none; - font-family: "DejaVu Serif"; - transition: color 0.4s ease; -} - -.headerBar > button:focus { - background-color: #222222; +@media screen and (min-width: 500px) and (max-width: 900px) { + html { + font-size: 80%; + } } -.headerBar > button.title { - letter-spacing: 12px; - padding: 0 50px; +@media screen and (min-width: 900px) { + html { + font-size: 100%; + } } -.headerBar > button.addTimer { - float: right; - padding: 0 50px; -} +/**************/ +/* Header bar */ +/**************/ -.headerBar > button:hover, -.headerBar > button:hover { - color: #CCCC88; - border-color: #CCCC88; +.headerBar { + display: flex; + justify-content: space-between; + background-color: #111111; + box-shadow: 0 0.1rem 0.1rem grey; + margin-bottom: 0.1rem; } .headerBar > button { + display: flex; + align-items: center; background-color: #111111; color: white; - height: 150px; - line-height: 150px; - font-size: 70px; + height: 6rem; + font-size: 3rem; border: none; font-family: "DejaVu Serif"; transition: color 0.4s ease; @@ -56,14 +48,10 @@ background-color: #222222; } -.headerBar > button.title { - letter-spacing: 12px; - padding: 0 50px; -} - +.headerBar > button.title, .headerBar > button.addTimer { - float: right; - padding: 0 50px; + letter-spacing: 0.5rem; + padding: 0 2rem; } .headerBar > button:hover, @@ -77,20 +65,29 @@ /**********/ .timers { - text-align: center; - font-size: 30px; - display: table; - table-layout: auto; - margin-left: auto; - margin-right: auto; - width: 1020px; + display: flex; + flex-direction: column; + font-size: 2rem; + align-items: center; } .timer { - line-height: 140px; - height: 140px; + display: flex; + align-items: center; + height: 10rem; position: relative; - display: table-row; +} + +@media screen and (min-width: 700px) { + .timer { + width: 70%; + } +} + +@media screen and (max-width: 700px) { + .timer { + width: 100%; + } } .timer:nth-child(even) { @@ -101,19 +98,13 @@ background-color: #FED5AE; } -.timer .name, -.timer .time, -.timer button { - display: table-cell; -} - .timer button { background-color: rgba(0, 0, 0, 0); border: none; - width: 140px; - height: 140px; - font-size: 35px; - padding: 0px; + width: 10%; + height: 100%; + font-size: 2rem; + padding: 0; position: relative; } @@ -126,24 +117,28 @@ } .timer .name { - width: 400px; - letter-spacing: 2px; + width: 50%; + letter-spacing: 0.1rem; cursor: text; + margin-left: 1rem; } .timer .time { - width: 200px; - letter-spacing: 2px; + width: 8rem; + letter-spacing: 0.1rem; + border-radius: 0; +} + +.timer .time .text { cursor: text; - border-radius: 0px; } .timer .progressBar { background-color: darkgrey; position: absolute; left: 0; - top: 133px; - height: 10px; + bottom: 0; + height: 0.8rem; } .timer.isRunning .progressBar { @@ -155,8 +150,8 @@ } .timer:hover.isRinging .progressBar { - top: 0px; - height: 143px; + top: 0; + height: 100%; z-index: 1; opacity: 0; cursor: pointer; @@ -1,15 +1,15 @@ -with import <nixpkgs> {}; { - env = stdenv.mkDerivation { - name = "env"; - buildInputs = [ - elmPackages.elm - nodejs - tmux - tmuxinator - ]; - shellHook = '' - tmux kill-session -t timer >/dev/null 2>&1 - tmuxinator local - ''; - }; +with (import (builtins.fetchGit { + name = "nixpkgs-16.09"; + url = "git@github.com:nixos/nixpkgs.git"; + rev = "f22817d8d2bc17d2bcdb8ac4308a4bce6f5d1d2b"; + ref = "refs/tags/16.09"; +}){}); + +stdenv.mkDerivation { + name = "env"; + buildInputs = [ + elmPackages.elm + python2 + python2Packages.pywatchman + ]; } diff --git a/src/Timer/View.elm b/src/Timer/View.elm index 561ae8f..662173a 100644 --- a/src/Timer/View.elm +++ b/src/Timer/View.elm @@ -60,7 +60,6 @@ nameBlockEdition id timer edition = , ("empty", isEmpty edition) ] |> classList - , onClick Msg.NoOp ] [ if isEmpty edition then @@ -79,7 +78,6 @@ timeBlockReadOnly : (Id, Timer) -> Html Msg timeBlockReadOnly (id, timer) = div [ class "time" - , onClick (Msg.Edit id Time) ] [ timeWithProgressBar (id, timer) ] @@ -91,7 +89,6 @@ timeBlockEdition (id, timer) edition = , ("empty", isEmpty edition) ] |> classList - , onClick Msg.NoOp ] [ if isEmpty edition then @@ -119,17 +116,18 @@ timeWithProgressBar (id, timer) = [ span [ class "progressBar" , let width = - 1 - timer.time / timer.initialTime - |> (*) 1020 - |> round + 1 - (timer.time / timer.initialTime) + |> (*) 100 |> toString - |> flip String.append "px" + |> flip String.append "%" in style [ ("width", width) ] - , onClick (Msg.UpdateTimer id Timer.Stop) + , onClick (if timer.state == Ringing then Msg.UpdateTimer id Timer.Stop else Msg.NoOp) ] [] , span - [ class "text" ] + [ class "text" + , onClick (Msg.Edit id Time) + ] [ text (timeView timer.time) ] ] |