adds name and description to toast, improves devcards. fixes #28

oliyh · Mar 15, 2022 · 3866b47 · 3866b47
1 parent 413a430
commit 3866b47
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/dev-resources/public/css/re-learn-test-overrides.css b/dev-resources/public/css/re-learn-test-overrides.css
@@ -0,0 +1,8 @@
+.toast {
+    position: relative;
+    display: inline-block;
+}
+
+.context-container {
+    position: relative;
+}
diff --git a/dev-resources/public/css/re-learn.css b/dev-resources/public/css/re-learn.css
@@ -114,6 +114,11 @@
     border-top-left-radius: 4px;
 }
 
+.toast .actions {
+    margin: 0 auto;
+    text-align: center;
+}
+
 .toast button {
     margin-left: 4px;
     padding: 4px;
@@ -144,12 +149,12 @@
     z-index: 10000;
 }
 
-.tutorial-description {
+.context-container .tutorial-description {
     width: 40%;
     display: inline-block;
 }
 
-.tutorial-description h2 {
+.context-container .tutorial-description h2 {
     margin-top: 0;
 }
 

diff --git a/dev-resources/public/devcards/index.html b/dev-resources/public/devcards/index.html
@@ -4,6 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta charset="UTF-8">
     <link rel="stylesheet" href="/css/re-learn.css">
+    <link rel="stylesheet" href="/css/re-learn-test-overrides.css">
   </head>
   <body>
     <script src="js/devcards.js" type="text/javascript"></script>

diff --git a/src/re_learn/views.cljs b/src/re_learn/views.cljs
@@ -165,6 +165,19 @@
         [help-mode]
         [lesson-view current-lesson]))))
 
+(defn tutorial-toast [tutorial]
+  [:div.toast
+   [:h2
+    [:span.tutorial-name-prefix "Tutorial: "]
+    [:span.tutorial-name (get-in tutorial [:tutorial :name])]]
+   [:p.tutorial-description (get-in tutorial [:tutorial :description])]
+
+   [:div.actions
+    [:button.accept {:on-click #(re-frame/dispatch [::model/accept-tutorial (get-in tutorial [:tutorial :id])])}
+     "Start tutorial"]
+    [:button.dismiss {:on-click #(re-frame/dispatch [::model/skip-tutorial (get-in tutorial [:tutorial :id])])}
+     "Dismiss"]]])
+
 (defn tutorial
   "Root view for displaying unlearned tutorials on the page.
    The :context? key allows you to turn on the context view which shows progress through the tutorial
@@ -181,12 +194,7 @@
             [help-mode]
 
             (and (false? auto-accept?) (false? (:accepted? @tutorial)))
-            [:div.toast
-             "There is a tutorial available"
-             [:button.accept {:on-click #(re-frame/dispatch [::model/accept-tutorial (get-in @tutorial [:tutorial :id])])}
-              "Start"]
-             [:button.dismiss {:on-click #(re-frame/dispatch [::model/skip-tutorial (get-in @tutorial [:tutorial :id])])}
-              "Dismiss"]]
+            [tutorial-toast @tutorial]
 
             (or auto-accept? (:accepted? @tutorial))
             [:div

diff --git a/test/re_learn/devcards/context.cljs b/test/re_learn/devcards/context.cljs
@@ -34,3 +34,6 @@
 
 (defcard-rg lesson-bubble
   [views/lesson-context context])
+
+(defcard-rg tutorial-toast
+  [views/tutorial-toast @context])