Permalink
Browse files

Improved mobile experience of todomvc demo

  • Loading branch information...
1 parent 6d9f432 commit 555e7291b19327591eaa62405a8b3f6da3b8513a @oliyh committed Jan 8, 2017
Showing with 20 additions and 6 deletions.
  1. +17 −0 dev-resources/public/todomvc/css/index.css
  2. +3 −6 example/todomvc/todomvc/core.cljs
@@ -377,6 +377,23 @@ html #clear-completed:active {
}
}
+#re-learn-intro {
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ width: 250px;
+ margin-bottom: 500px;
+}
+
+@media (max-width: 1074px) {
+ #re-learn-intro {
+ position: relative;
+ width: 100%;
+ top: 0;
+ left: 0;
+ }
+}
+
.re-learn-controls {
border-top: 1px solid lightgray;
text-align: center;
@@ -27,10 +27,7 @@
[:p [:button {:on-click re-learn/enable-help-mode!} "Help mode"]]])))
(defn- re-learn-intro []
- [:aside {:style {:position "absolute"
- :top 8
- :left 8
- :width 250}}
+ [:aside#re-learn-intro
[:div {:style {:padding 24
:background-color "#eee"}}
[:h3 "Hello"]
@@ -58,7 +55,6 @@
re-learn-controls]}
(fn []
[:div
- [re-learn-intro]
[:section#todoapp
[:header#header
[title/component]
@@ -73,7 +69,8 @@
[todos-count/component]
[todos-filters/component]
[todos-clear/component]]]]
- [footer/component]])))
+ [footer/component]
+ [re-learn-intro]])))
(defn- mount-all []
(reagent/render [todo-app] (js/document.getElementById "app"))

0 comments on commit 555e729

Please sign in to comment.