A simple Trello clone in Eve (CSS ripped from Trello itself)

kanban.css

.board {
    width: 100%;
    height: 100%;
    /* background-color: #0079bf; */
    display: flex;
    flex-direction: column;
}

.board,
.board textarea {
    font-family: Avenir, "Helvetica neue", sans-serif;
    color: rgb(77, 77, 77);
}

.board * {
    box-sizing: border-box;
}

.board h1 {
    color: #fff;
}

.hidden {
    display: none;
}

.btn {
    min-height: 30px;
    padding: 4px 1pc;
    vertical-align: top;
    cursor: pointer;
    font-weight: 700;
    line-height: 22px;
    background: linear-gradient(to bottom,#61BD4F 0,#5AAC44 100%);
    box-shadow: 0 1px 0 #3F6F21;
    color: #fff;
    border-radius: 3px;
    border: none;
    outline: 0;
}

.btn:hover {
    background: linear-gradient(to bottom,#5AAC44 0,#519839 100%);
}

.btn:active {
    background: linear-gradient(to bottom,#519839 0,#49852E 100%);
}

.lists {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    flex: 1;
}

.list-container,
.add-list-container {
    flex-shrink: 0;
    background-color: #E2E4E6;
    border-radius: 3px;
    width: 230px;
    margin-left: 10px;
}

.add-list-container {
    margin-right: 10px;
}

.list-container h2 {
    padding: 0 8px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
}

.list {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    max-height: 100%;
    overflow-y: auto;
}

.card {
    width: 100%;
    max-width: 300px;
    min-height: 30px;
    margin-bottom: 6px;
    padding: 6px;
    position: relative;

    background-color: #fff;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

.card:hover:not(textarea) {
    cursor: pointer;
    background-color: #EDEFF0;
    border-bottom-color: #D6DADC;
}

textarea.card {
    cursor: text;
    outline: 0;
}

.card-controls {
    display: none;
    position: absolute;
    right: 5px;
}

.card:hover .card-controls {
    display: inline-block;
}

.card-controls > span {
    padding: 2px 5px;
    border-radius: 3px;
    color: rgb(153, 153, 153);
}

.card-controls > span:hover {
    background-color: #D6DADC;
    color: rgb(77, 77, 77);
}

.add-card-trigger {
    padding: 6px 8px;
    color: #8c8c8c;
}

.add-card-trigger:hover {
    cursor: pointer;
    background-color: #CDD2D4;
    color: #4d4d4d;
}

.add-card-form {
    margin: 0 8px;
    padding: 8px 0;
}

.add-card-form .cancel {
    margin-left: 10px;
    color: rgb(153, 153, 153);
    cursor: pointer;
    font-size: 25px;
}

.add-card-form .cancel:hover {
    color: rgb(77, 77, 77);
}

.add-list-container {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(255, 255, 255, 0.7);
    padding: 11px;
    transition: background 85ms ease-in,opacity 40ms ease-in,border-color 85ms ease-in;
    cursor: pointer;
}

.add-list-container:hover {
    background: rgba(0, 0, 0, 0.3);
}

kanban.md

Kanban board

Simple Kanban board implementation in Eve.

App state

Commit the initial app state.

commit
  list1 = [#list title: "Todo", adding: false]
  list2 = [#list title: "Doing", adding: false]

  [#card title: "Book party venue", list: list1, id: 0, editing: false]
  [#card title: "Decide what to wear", list: list1, id: 1, editing: false]
  [#card title: "Make guest list", list: list2, id: 0, editing: false]

Drawing

Initial view

commit @browser
  [#link rel: "stylesheet" href: "examples/css/kanban.css"]
  [#div class: "board" children:
    [#h1 text: "Eve Kanban"]
    [#div #lists class: "lists"]]

search @browser
  lists = [#div #lists]

bind @browser
  lists.children += [#div #add-list-container class: "add-list-container" sort: 9999 children:
    [#div #add-list-trigger class: "add-list-trigger" text: "Add a list..."]]

Draw list

search @browser
  parent = [#lists]

search @session
  list = [#list title]

bind @browser
  parent <- [children:
    [#div #list-container list-id: list.title class: "list-container" children:
      [#h2 text: list.title sort: 1]
      [#div #list list, class: "list" sort: 2]

      [#div #add-card-trigger list, class: "add-card-trigger" class: [hidden: list.adding] sort: 3 children:
        [#a #add-card text: "Add a card..."]]

      [#div #add-card-form class: [add-card-form: true, hidden: is(list.adding = false)] sort: 4 children:
        [#textarea #new-card-input list, class: "card" sort: 1]
        [#button #add-btn list, text: "Add" class: "btn" sort: 2]
        [#a #cancel-add-card list, class: "cancel" text: "×"]]]]

Draw card

search @browser
  parent = [#list list]

search @session
  card = [#card title list: list]

bind @browser
  parent <- [children:
    [#div #card card, id: card.id class: [card: true, dragging: card.moving] text: card.title draggable: true sort: card.id children:
      [#div class: "card-controls" children:
        [#span #delete-card card, text: "×"]]]]

Events

Add list form trigger

TODO

Add card form trigger

search @event @browser @session
  ev = [#click element: [#add-card-trigger list]]
  input = [#new-card-input]

commit
  list.adding := true

Add card

search @event @browser @session
  ev = [#click element: [#add-btn list]]
  // also add card with enter key
  // [#keydown element: [#new-card-input list] key: "enter"]
  input = [#new-card-input value, list: list]
  not(value = "")
  cards-in-list = [#card list: list]

commit
  [#card title: value, list: list, id: count[given: cards-in-list], editing: false]

commit @browser
  input.value := ""

Cancel adding card

search @event @browser @session
  ev = [#click element: [#cancel-add-card list]]
  input = [#new-card-input, list: list]

commit
  list.adding := false

commit @browser
  input.value := ""

Delete card

search @event @browser
  ev = [#click element: [#delete-card card]]

commit
  card := none