lein-sass support

Author: abtv

.gitignore

@@ -1,6 +1,8 @@
 twitter-security.edn
 resources/public/js/
 resources/public/main.js
+resources/public/css/site.css
+resources/public/css/site.css.map
 target/
 backend-release/
 frontend-release/main.js

resources/public/css/sb-admin.css renamed to design/site.scss

@@ -27,29 +27,27 @@
 
 #wrapper {
     padding-left: 0;
+
+    @media(min-width:768px){
+        padding-left: 171px;
+    }
 }
 
 #page-wrapper {
     width: 100%;
     padding: 0;
     background-color: #fff;
+
+    @media(min-width:768px){
+        padding: 10px;
+    }
 }
 
 .huge {
     font-size: 50px;
     line-height: normal;
 }
 
-@media(min-width:768px) {
-    #wrapper {
-        padding-left: 171px;
-    }
-
-    #page-wrapper {
-        padding: 10px;
-    }
-}
-
 /* Top Navigation */
 
 .top-nav {
@@ -303,28 +301,24 @@ ul.alert-dropdown {
 
 .desktop-time {
     display: block;
+
+    @media(max-width: 768px){
+        display: none;
+    }
 }
 
 .mobile-time {
     display: none;
-}
 
-@media(max-width: 768px) {
-    .desktop-time {
-        display: none;
-    }
-
-    .mobile-time {
+    @media(max-width: 768px){
         display: block;
     }
 }
 
 .fork-me-desktop {
     display: block;
-}
 
-@media(max-width: 768px){
-    .fork-me-desktop {
+    @media(max-width: 768px){
         display: none;
     }
 }
@@ -339,10 +333,8 @@ ul.alert-dropdown {
     display: none;
     height: 50px;
     margin: 0;
-}
 
-@media(max-width: 768px){
-    .fork-me-mobile-wrapper{
+    @media(max-width: 768px){
         display: inline;
     }
 }
@@ -374,20 +366,16 @@ ul.alert-dropdown {
 
 .trends-controls-desktop {
     display: block;
-}
 
-@media(max-width: 768px){
-    .trends-controls-desktop {
+    @media(max-width: 768px){
         display: none;
     }
 }
 
 .trends-controls-mobile {
     display: none;
-}
 
-@media(max-width: 768px){
-    .trends-controls-mobile {
+    @media(max-width: 768px){
         display: block;
     }
 }

project.clj

@@ -46,13 +46,24 @@
   :plugins [[lein-environ "1.0.2"]
             [ragtime/ragtime.lein "0.3.9"]
             [lein-cljsbuild "1.1.3"]
-            [lein-figwheel "0.5.0-6"]]
+            [lein-figwheel "0.5.0-6"]
+            [lein-sass "0.3.7"]]
+
+  :figwheel {:css-dirs ["resources/public/css"]}
+
+  :sass {:src               "design/"
+         :output-directory  "resources/public/css/"
+         :delete-output-dir false
+         :source-maps       true}
+
+  :hooks [leiningen.sass]
 
   :aliases {"migrate"  ["run" "-m" "tech-radar.migrations/migrate"]
             "rollback" ["run" "-m" "tech-radar.migrations/rollback"]}
 
-  :cljsbuild {:builds {:dev     {:source-paths ["src/cljs"]
-                                 :figwheel     {:websocket-host "localhost"}
+  :cljsbuild {:builds {:dev     {:figwheel     {:load-warninged-code true
+                                                :on-jsload           "tech-radar.core/init-render"}
+                                 :source-paths ["src/cljs"]
                                  :compiler     {:main       tech-radar.core
                                                 :asset-path "js"
                                                 :output-dir "resources/public/js"}}

resources/public/index.html

@@ -14,7 +14,7 @@
 
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
-    <link href="css/sb-admin.css" rel="stylesheet">
+    <link href="css/site.css" rel="stylesheet">
 
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

src/cljs/tech-radar/core.cljs

@@ -13,10 +13,15 @@
 (statistic-request app-state)
 
 (def reconciler
-  (om/reconciler {:state app-state
+  (om/reconciler {:state     app-state
                   :normalize false
-                  :parser parser}))
+                  :parser    parser}))
 
-(om/add-root! reconciler
-              RootComponent
-              (.getElementById js/document "app"))
+(defn init-render []
+  (when-let [element (.getElementById js/document "app")]
+    (om/remove-root! reconciler element))
+  (om/add-root! reconciler
+                RootComponent
+                (.getElementById js/document "app")))
+
+(init-render)