 (defn history-card
   [{:keys [state columns] :as props} {:keys [num ns expression result output] :as history-item}]
   [:div
-   {:class (str "mdl-cell " (card-columns-class columns))}
+   {:class (str "mdl-cell " (card-size-class columns))}
    [:div.mdl-card.mdl-shadow--2dp
     [history-card-menu props num history-item]
     [:div.card-data.expression


(def max-columns 4)

(defn card-columns-class [columns]
  (when (< 0 columns (inc max-columns))
    (let [desktop (js/Math.floor (/ 12 columns))
          tablet  (js/Math.floor (/ 8 columns))
          phone   (js/Math.floor (/ 6 columns))]
      (str "mdl-cell--" desktop "-col "
           "mdl-cell--" tablet "-col-tablet "
           "mdl-cell--" phone "-col-phone "))))

(defn more-columns [state]
  (let [columns (inc (:columns state))]
    (if (< columns (inc max-columns))
      (assoc state :columns columns)
      state)))

(defn less-columns [state]
  (let [columns (dec (:columns state))]
    (if (< 0 columns)
      (assoc state :columns columns)
      state)))

(defn close-dialog [id]
  (some-> (.querySelector js/document (str "#" id))

(def default-state
  {:repl    nil
   :ns      nil
   :columns 0
   :input   ""
   :cursor  0
   :history (sorted-map)})
