Improve a bit

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
diff --git a/Makefile b/Makefile
index daea513..b53dada 100644
--- a/Makefile
+++ b/Makefile
@@ -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'
diff --git a/README.md b/README.md
index 889b42f..00b33f9 100644
--- a/README.md
+++ b/README.md
@@ -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;
diff --git a/shell.nix b/shell.nix
index d3365c2..207a310 100644
--- a/shell.nix
+++ b/shell.nix
@@ -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) ]
     ]