/
lessons.cljs
102 lines (84 loc) · 3.9 KB
/
lessons.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
(ns re-learn.devcards.lessons
(:require [devcards.core :as dc :refer-macros [defcard-rg]]
[re-learn.views :as views]))
(defcard-rg instructions
[:p "You may need to touch a file to get figwheel to fresh the view before the devcards start displaying as expected"])
(defcard-rg lesson-bubble
(let [attrs {:style {:display "inline-block"
:width "30%"
:margin-left "calc(1.5% - 1px)"
:margin-right "calc(1.5% - 1px)"
:height 100
:border "1px solid black"}}]
[:div {:style {:padding-top 100 :padding-bottom 100}}
[:div#lesson-top-left attrs "Top left"]
[:div#lesson-top attrs "Top"]
[:div#lesson-top-right attrs "Top right"]
[:div#lesson-left attrs "Left"]
[:div#lesson-unattached attrs "Unattached"]
[:div#lesson-right attrs "Right"]
[:div#lesson-bottom-left attrs "Bottom left"]
[:div#lesson-bottom attrs "Bottom"]
[:div#lesson-bottom-right attrs "Bottom right"]
[:div#tutorial {:style {:position "fixed" :top 0 :left 0}}
[views/lesson-view {:id :abc
:description "Unattached"
:position :unattached}]
[views/lesson-view {:id :abc
:description "Left"
:attach [:#lesson-left]
:position :left}]
[views/lesson-view {:id :abc
:description "Right"
:attach [:#lesson-right]
:position :right}]
[views/lesson-view {:id :abc
:description "Top"
:attach [:#lesson-top]
:position :top}]
[views/lesson-view {:id :abc
:description "Bottom"
:attach [:#lesson-bottom]
:position :bottom}]
[views/lesson-view {:id :abc
:description "Bottom left"
:attach [:#lesson-bottom-left]
:position :bottom-left}]
[views/lesson-view {:id :abc
:description "Bottom right"
:attach [:#lesson-bottom-right]
:position :bottom-right}]
[views/lesson-view {:id :abc
:description "Top left"
:attach [:#lesson-top-left]
:position :top-left}]
[views/lesson-view {:id :abc
:description "Top right"
:attach [:#lesson-top-right]
:position :top-right}]]]))
(defcard-rg lesson-size
(let [attrs {:style {:display "inline-block"
:width "20%"
:margin-right "13%"
:border "1px solid black"}}]
[:div
[:div#lesson-1 attrs "1"]
[:div#lesson-2 (assoc-in attrs [:style :height] 200) "2"]
[:div#lesson-3 (assoc-in attrs [:style :height] 400) "3"]
[:div#tutorial {:style {:position "fixed" :top 0 :left 0}}
[views/lesson-view {:id "1"
:description "Short"
:attach [:#lesson-1]
:position :left}]
[views/lesson-view {:id "2"
:description "A little bit longer"
:attach [:#lesson-2]
:position :left}]
[views/lesson-view {:id "3"
:description [:p "Much, much longer than all the others."
[:br]
"In fact multiple lines and everything else"
[:br]
"That's what's going on"]
:attach [:#lesson-3]
:position :left}]]]))