k0-board 0.1.1 → 0.2.0

package/web/board.css

@@ -95,7 +95,8 @@ body {
 
 /* The "+" sits next to k0, at the start of the bar: that is where a card is born.
    The sign is drawn, not typed: a font glyph never sits in the middle of the circle. */
-.new {
+.new,
+.log {
   flex: none;
   padding: 0;
   width: 34px;
@@ -105,7 +106,17 @@ body {
   align-items: center;
   justify-content: center;
 }
-.new svg { width: 17px; height: 17px; display: block; }
+.new svg,
+.log svg { width: 17px; height: 17px; display: block; }
+
+/* The way out to the ChangeLog. It is a link, not a button, because it goes somewhere — and it
+   is drawn quieter than the plus, because starting work matters more than reading about it. */
+.log {
+  border: 1px solid var(--line);
+  background: var(--paper);
+  color: var(--muted);
+}
+.log:hover { background: #fff; border-color: #c9c3b4; color: var(--ink); }
 
 /* ── The four modes ───────────────────────────────────────────────────
    At the end of the bar, a row of four: how awake the machine has to stay. Switched off they are
@@ -180,12 +191,51 @@ body {
   transform-origin: 0 0;
   will-change: transform;
 }
-.column { flex: 0 0 268px; }
+/* A column is exactly one card wide. The number lives in a variable because the card reads it
+   too: a post-it is never taller than it is wide. */
+:root { --card-w: 268px; }
+.column { flex: 0 0 var(--card-w); }
+/* Two groups with the name between them: on the left what you press — the `+` and the fold — and
+   on the right what tells you how things stand, the git mark and the globe. The count of post-its
+   that used to follow the name is gone: it took the room the name now has, and answered nothing.
+   Flex is what lets the name give up characters instead of pushing the marks off the end. */
 .column > h2 {
+  display: flex;
+  align-items: center;
   margin: 0 0 14px 4px;
   font: 600 1.5rem/1 var(--hand);
   color: #5f5a4e;
 }
+.column > h2 .name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+  text-decoration: none;
+}
+/* With the server up the name is the way into the site, and it says so standing still — a dotted
+   line under it, there for as long as the server is. Waiting for a hover was the first idea and it
+   was the wrong one: the whole question the globe answers is "is this one up", and a heading you
+   have to go and touch to find out is a second place to ask it. Dotted rather than solid because
+   this is a hand-written heading, not a link in a paragraph: enough to say there is something
+   underneath, not enough to turn the row into a web page. Under the pointer it firms up. */
+.column > h2 a.name {
+  /* Dashed, and the same green as the globe, so the two marks say one thing. The first attempt
+     was a grey dotted line at half opacity, which is in the stylesheet and invisible on the
+     board: next to a lit globe it read as nothing at all. What rescued it was the dash and the
+     colour, not weight — a hairline is enough once it is green, and anything thicker starts
+     underlining the heading rather than marking it. */
+  text-decoration: underline dashed;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  text-decoration-color: var(--calm);
+  /* The ellipsis needs `overflow: hidden`, and that clips the underline too. This is the room it
+     needs to survive. */
+  padding-bottom: 3px;
+}
+.column > h2 a.name:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
 .column > h2 small {
   font-family: var(--sans);
   color: var(--muted);
@@ -195,8 +245,10 @@ body {
   vertical-align: middle;
 }
 /* The column's "+": from here a card is born already addressed to this repository.
-   It sits to the left of the name, faded, and darkens when you hover over it. */
-.column .add {
+   It sits to the left of the name, faded, and darkens when you hover over it. The button that
+   puts the column away stands next to it and is cut from the same cloth. */
+.column .add,
+.column > h2 .fold {
   padding: 0;
   width: 19px;
   height: 19px;
@@ -211,8 +263,17 @@ body {
   align-items: center;
   justify-content: center;
 }
-.column .add svg { width: 15px; height: 15px; display: block; }
+.column .add svg,
+.column > h2 .fold svg { width: 15px; height: 15px; display: block; }
 .column .add:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
+/* And next to it, the one that puts the column away. It stands there in plain sight, exactly as
+   faint as the `+`: a button that only comes out on hover is a button nobody knows exists. Where
+   the column cannot be put away it goes fainter still and stops answering — it does not leave,
+   because a column runs and goes back to your turn every few seconds and the button would spend
+   the session blinking. */
+.column > h2 .fold:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
+.column > h2 .fold[disabled] { opacity: .12; cursor: default; }
+.column > h2 .fold[disabled]:hover { opacity: .12; background: none; }
 
 .empty {
   position: absolute;
@@ -278,6 +339,10 @@ body {
 }
 
 /* ── Cards ───────────────────────────────────────────────────────────── */
+/* A square, at most. Text that keeps coming does not push the card taller — a post-it that grows
+   with what is written on it stops being a post-it and becomes a page. Everything but the body is
+   `flex: none`, so the repository, the title, the age and the buttons are always there to read;
+   the body is what gives way. */
 .postit {
   background: var(--BACKLOG);
   border-radius: 2px;
@@ -287,6 +352,16 @@ body {
   cursor: default;
   transition: transform .12s ease, box-shadow .12s ease;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: var(--card-w);
+  overflow: hidden;
+}
+.postit > * { flex: none; }
+.postit .body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
 }
 .postit:hover { box-shadow: 3px 6px 14px rgba(0, 0, 0, .24); z-index: 2; }
 .postit.ASK { background: var(--ASK); }
@@ -321,6 +396,12 @@ body {
   font-size: .94rem;
   letter-spacing: 0;
   word-break: break-word;
+  /* Two lines and an ellipsis. A session name is a name: if it does not fit in two lines of
+     monospace it was never going to be read at a glance anyway. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 /* What the card is about. On imported sessions it is the only thing that says what happened in
    there, so it sits right under the title — and in italics, so it is not mistaken for the prompt,
@@ -331,7 +412,7 @@ body {
   color: rgba(0, 0, 0, .56);
   margin-top: 6px;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -342,7 +423,7 @@ body {
   /* The prompt's line breaks stay line breaks: a list has to read like a list. */
   white-space: pre-wrap;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -367,11 +448,11 @@ body {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 3px 0;
+  padding: 4px 0;
   min-width: 0;
 }
 .column.repos .name {
-  font: 500 1.1rem/1.25 var(--hand);
+  font: 500 1.35rem/1.25 var(--hand);
   color: var(--muted);
   min-width: 0;
   overflow-wrap: anywhere;
@@ -379,6 +460,20 @@ body {
 .column.repos .repo:hover .name { color: var(--ink); }
 .column.repos .git { margin-left: auto; }
 
+/* ── Old ──────────────────────────────────────────────────────────────
+   The repositories that do have work on the board, just not lately. Built like `Others` next to
+   it, because it is the same gesture — one click from being a column again — with two things
+   `Others` has nothing to say about: how much work is parked in there, and how long it has been
+   quiet. The name is a button here, not a label: it is what brings the column back. */
+.column.old .repo { cursor: pointer; }
+.column.old .name {
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+
 /* ── The git mark ─────────────────────────────────────────────────────
    One symbol: the dot if there is work that is nowhere yet, the arrow if it is committed but not
    pushed, the tick if everything is safe. The detail is in the title, which comes out on hover.
@@ -410,6 +505,38 @@ body {
 .git.none { color: rgba(0, 0, 0, .32); }
 .column > h2 .git { margin-left: 8px; vertical-align: middle; }
 
+/* ── The dev server ───────────────────────────────────────────────────
+   The last thing on the right, after the git mark: is this repository's site up. Grey is off,
+   green is up — the same green as the git tick, because it means the same thing — and red is
+   tried and could not. One click switches it, two restart it.
+
+   While it is coming up it breathes rather than spins. Breathing is already what a card does
+   while a session is working (see `.postit.WORKING` above), and there is no reason for the board
+   to have two different ways of saying the same thing. */
+.column > h2 .globe {
+  flex: none;
+  padding: 0;
+  margin-left: 7px;
+  width: 19px;
+  height: 19px;
+  border: none;
+  background: none;
+  border-radius: 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: rgba(0, 0, 0, .32);
+}
+.column > h2 .globe svg { width: 14px; height: 14px; display: block; }
+.column > h2 .globe:hover { background: rgba(0, 0, 0, .07); }
+.column > h2 .globe.up { color: var(--calm); }
+.column > h2 .globe.failed { color: var(--alert); }
+.column > h2 .globe.starting { color: var(--muted); cursor: default; animation: pulse 1.4s ease-in-out infinite; }
+.column > h2 .globe[disabled] { cursor: default; }
+.column > h2 .globe[disabled]:hover { background: none; }
+@keyframes pulse { 50% { opacity: .3; } }
+
 /* ── What a session weighs ────────────────────────────────────────────
    At the head of the card, after the repository name and the git mark: repository · changes ·
    load. Grey like the rest of the row — the colour comes from the gauge at the top — except for
@@ -468,6 +595,19 @@ body {
   background: rgba(255, 255, 255, .72);
   border-color: rgba(0, 0, 0, .14);
 }
+/* The one you reach for rarely: a link at the end of the row, so it is there without competing
+   with the button next to it. */
+.postit .actions button.link {
+  font-weight: 500;
+  padding: 6px 2px;
+  background: none;
+  border-color: transparent;
+  box-shadow: none;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  opacity: .55;
+}
+.postit .actions button.link:hover, .postit .actions button.link:focus-visible { opacity: 1; }
 
 /* ── Editor ───────────────────────────────────────────────────────────
    The dialog and its buttons live in base.css, which belongs to both pages: the file viewer opens
@@ -545,9 +685,18 @@ html[data-driving] .modes button svg { width: 27px; height: 27px; }
 html[data-driving] .column .add { width: 26px; height: 26px; }
 html[data-driving] .column .add svg { width: 20px; height: 20px; }
 
+/* Putting a column away: the same target as the `+`, and it grows with it. */
+html[data-driving] .column > h2 .fold { width: 26px; height: 26px; }
+html[data-driving] .column > h2 .fold svg { width: 20px; height: 20px; }
+html[data-driving] .column > h2 .fold[disabled] { opacity: .12; }
+
 /* The git lens: it is the door to the files, and at 12px it is a target for sitting still. */
 html[data-driving] .git svg { width: 18px; height: 18px; }
 
+/* The globe, which is a switch and so needs a target rather than a glyph. */
+html[data-driving] .column > h2 .globe { width: 26px; height: 26px; }
+html[data-driving] .column > h2 .globe svg { width: 20px; height: 20px; }
+
 /* The corner pencil. As well as growing, it stays visible: normally it appears on hover, and a
    target that expects to be found before it will show itself is, in driving mode, not a target. */
 html[data-driving] .postit .corner { width: 34px; height: 34px; opacity: 1; }
@@ -557,5 +706,6 @@ html[data-driving] .postit .corner svg { width: 20px; height: 20px; }
 html[data-driving] .zoom button { width: 40px; height: 40px; }
 html[data-driving] .zoom button svg { width: 22px; height: 22px; }
 
-/* The column is in pixels too: with the text at 22 the cards would choke inside it. */
-html[data-driving] .column { flex: 0 0 340px; }
+/* The card is in pixels too: with the text at 22 it would choke inside 268. And since the card is
+   never taller than it is wide, raising this raises the ceiling with it. */
+html[data-driving] { --card-w: 340px; }