Implementation of Story #26, #27 and #28

.gitignore

@@ -9,3 +9,4 @@ resources/public/css
 .nrepl-port
 data
 .lein-failures
+.DS_Store

src/cljs/conference_rating/add_rating_page/add_rating_page.cljs

@@ -21,20 +21,22 @@
                                                                    :error-handler #(js/alert (str "could not create rating" %1))})))
 
 (defn recommendation-panel []
-  [:div {:class "panel rating-panel-container bg-orange cl-light"}
-   [:span
-    [:i {:class "glyphicon glyphicon-star"}]
-    [:span "I would go again!"]]
-   [:div
-    [:input {:field :checkbox :type "checkbox" :id :recommended}]
-    [:label {:for :recommended}
-     [:span {:class "checkbox checkbox-lg"}]]]])
+  [:label {:for :recommended :class "block-label"}
+   [:div {:class "panel rating-panel-container bg-orange cl-light"}
+    [:span
+     [:i {:class "glyphicon glyphicon-star"}]
+     [:span "I would go again!"]]
+    [:div
+     [:input {:field :checkbox :type "checkbox" :id :recommended}]
+     [:label {:for :recommended}
+      [:span {:class "checkbox checkbox-lg"}]]]]]
+  )
 
 (defn rating-panel-radio-input [id key input-label value]
   [:div
-   [:p {:class "text-lg-center"} input-label]
    [:input {:field :radio :value value :type "radio" :id id :name key}]
    [:label {:for id}
+    [:p {:class "text-lg-center"} input-label]
     [:span {:class "radio"}]]])
 
 (defn rating-panel [icon data-key panel-label panel-classes]
@@ -48,62 +50,57 @@
     [:div {:class "col-lg-3 col-md-3 col-sm-3 col-xs-3"}
      (rating-panel-radio-input (str panel-label "-2") data-key "okay" 2)]
     [:div {:class "col-lg-3 col-md-3 col-sm-3 col-xs-3"}
-     (rating-panel-radio-input (str panel-label "-3") data-key"good" 3)]
+     (rating-panel-radio-input (str panel-label "-3") data-key "good" 3)]
     [:div {:class "col-lg-3 col-md-3 col-sm-3 col-xs-3"}
      (rating-panel-radio-input (str panel-label "-4") data-key "awesome" 4)]]])
 
-(defn role-checkbox [id input-label input-label-description]
-  [:div {:class "col-lg-4 col-md-6 col-sm-6 col-xs-12"}
-   [:div {:class "row role-checkbox-container"}
-    [:div {:class "col-lg-2 col-md-2 col-sm-2 col-xs-2"}
-     [:input {:field :checkbox :type "checkbox" :id id}]
-     [:label {:for id}
-      [:span {:class "checkbox"}]]]
+(defn checkbox-description-right [id input-label input-label-description]
+  [:div {:class "row role-checkbox-container"}
+   [:div {:class "col-lg-2 col-md-2 col-sm-2 col-xs-2"}
+    [:input {:field :checkbox :type "checkbox" :id id}]
+    [:label {:for id}
+     [:span {:class "checkbox"}]]]
+   [:label {:for id :class "block-label"}
     [:div {:class "col-lg-10 col-md-10 col-sm-10 col-xs-10"}
      [:p {:class "text-lg-left role-label"} input-label]
      [:p {:class "text-lg-left role-description"} input-label-description]]]])
 
+(defn role-checkbox [id input-label input-label-description]
+  [:div {:class "col-lg-4 col-md-6 col-sm-6 col-xs-12"}
+   (checkbox-description-right id input-label input-label-description)
+   ])
+
 (defn roles-panel []
   [:div {:class (str "panel rating-panel-container bg-light cl-dark")}
    [:span "This conference might be interesting for"]
    [:div {:class "row"}
-     (role-checkbox :roles.dev "Devs" "with a focus on technical topics")
-     (role-checkbox :roles.devops "Dev Ops" "which like to learn about the administration of systems")
-     (role-checkbox :roles.ux "UX" "that are all about user experience and visual designs")
-     (role-checkbox :roles.qa "QAs" "that are interested in getting input on testing")
-     (role-checkbox :roles.ba "BAs" "which lover to get more insight about stories")
-     (role-checkbox :roles.pm "PMs" "that want to know how to manage creative people")
-     (role-checkbox :roles.sales "Sales" "who want to support our clients even better")
-     (role-checkbox :roles.recruiting "Recruiters" "that are on the hunt to find us the brightest colleagues")
-     (role-checkbox :roles.other "Others" "that have other interests :)")]])
-
-(defn tag-checkbox [id input-label input-label-description]
-  [:div {:class "row role-checkbox-container"}
-   [:div {:class "col-lg-2 col-md-2 col-sm-2 col-xs-2"}
-    [:input {:field :checkbox :type "checkbox" :id id}]
-    [:label {:for id}
-     [:span {:class "checkbox"}]]]
-   [:div {:class "col-lg-10 col-md-10 col-sm-10 col-xs-10"}
-    [:p {:class "text-lg-left role-label"} input-label]
-    [:p {:class "text-lg-left role-description"} input-label-description]]])
+    (role-checkbox :roles.dev "Devs" "with a focus on technical topics")
+    (role-checkbox :roles.devops "Dev Ops" "which like to learn about the administration of systems")
+    (role-checkbox :roles.ux "UX" "that are all about user experience and visual designs")
+    (role-checkbox :roles.qa "QAs" "that are interested in getting input on testing")
+    (role-checkbox :roles.ba "BAs" "which lover to get more insight about stories")
+    (role-checkbox :roles.pm "PMs" "that want to know how to manage creative people")
+    (role-checkbox :roles.sales "Sales" "who want to support our clients even better")
+    (role-checkbox :roles.recruiting "Recruiters" "that are on the hunt to find us the brightest colleagues")
+    (role-checkbox :roles.other "Others" "that have other interests :)")]])
 
 (defn tags-panel []
   [:div {:class (str "panel rating-panel-container bg-light cl-dark")}
    [:span "I found this conference ..."]
    [:div {:class "row"}
     [:div {:class "col-lg-12 col-md-12 col-sm-12 col-xs-12"}
-     (tag-checkbox :tags.inspiring "inspriring" "This conference had an impact one me.")
-     (tag-checkbox :tags.informative "informative" "I learned a lot during the workshops, sessions and talks.")
-     (tag-checkbox :tags.entertaining "entertaining" "The speakers where showmasters and the after party was amazing.")
-     (tag-checkbox :tags.hires "good to meet potential hires" "I meet amazing people I would like to work with in the future.")
-     (tag-checkbox :tags.clients "good to meet potential clients" "The business sponsoring or being present at this conference coud be our next client.")]]])
+     (checkbox-description-right :tags.inspiring "inspriring" "This conference had an impact one me.")
+     (checkbox-description-right :tags.informative "informative" "I learned a lot during the workshops, sessions and talks.")
+     (checkbox-description-right :tags.entertaining "entertaining" "The speakers where showmasters and the after party was amazing.")
+     (checkbox-description-right :tags.hires "good to meet potential hires" "I meet amazing people I would like to work with in the future.")
+     (checkbox-description-right :tags.clients "good to meet potential clients" "The business sponsoring or being present at this conference coud be our next client.")]]])
 
 (defn experience-checkbox [id input-label]
- [:div {:class "col-lg-2 col-md-2 col-sm-3 col-xs-2"}
-  [:p {:class "text-lg-center"} input-label]
-  [:input {:field :checkbox :type "checkbox" :id id}]
-  [:label {:for id}
-   [:span {:class "checkbox"}]]])
+  [:div {:class "col-lg-2 col-md-2 col-sm-3 col-xs-2"}
+   [:input {:field :checkbox :type "checkbox" :id id}]
+   [:label {:for id}
+    [:p {:class "text-lg-center"} input-label]
+    [:span {:class "checkbox"}]]])
 
 (defn experience-panel []
   [:div {:class (str "panel rating-panel-container bg-light cl-dark")}
@@ -125,19 +122,19 @@
     [:textarea {:field :textarea :id :comment.comment :placeholder "comment" :class "form-control" :rows 13}]]])
 
 (def add-rating-template
-   [:div
-    [:div {:class "row"}
-     [:div {:class "col-lg-8 col-md-6 col-sm-6"}
-      (recommendation-panel)
-      (roles-panel)
-      (experience-panel)
-      (comment-panel)]
-     [:div {:class "col-lg-4 col-md-6 col-sm-6"}
-      (rating-panel "glyphicon-thumbs-up" :rating.overall "Overall" "bg-mint cl-light")
-      (rating-panel "glyphicon-user" :rating.talks "Talks" "bg-purple cl-light")
-      (rating-panel "glyphicon-home" :rating.venue "Venue" "bg-pink cl-light")
-      (rating-panel "glyphicon-glass" :rating.networking "Networking" "bg-green cl-light")
-      (tags-panel)]]])
+  [:div
+   [:div {:class "row"}
+    [:div {:class "col-lg-8 col-md-6 col-sm-6"}
+     (recommendation-panel)
+     (roles-panel)
+     (experience-panel)
+     (comment-panel)]
+    [:div {:class "col-lg-4 col-md-6 col-sm-6"}
+     (rating-panel "glyphicon-thumbs-up" :rating.overall "Overall" "bg-mint cl-light")
+     (rating-panel "glyphicon-user" :rating.talks "Talks" "bg-purple cl-light")
+     (rating-panel "glyphicon-home" :rating.venue "Venue" "bg-pink cl-light")
+     (rating-panel "glyphicon-glass" :rating.networking "Networking" "bg-green cl-light")
+     (tags-panel)]]])
 
 
 (defn add-rating []

src/cljs/conference_rating/conference_list_page/conference_list_page.cljs

@@ -67,7 +67,7 @@
    [:div {:class "container-fluid content-container pad-top"}
     [:div {:class "conference-search form-group"}]
     (add-conference-bar)
-    [:div {:class "row"}(map list-entry/display-conference-list-item (sort-by :from conference-list))]]])
+    [:div {:class "row"}(map list-entry/display-conference-list-item (reverse (sort-by :to conference-list)))]]])
 
 (defonce displayed-conferences (atom nil))
 

src/less/conferences.less

@@ -120,7 +120,7 @@
 
   .conference-dates {
     overflow: hidden;
-    height: 15px;
+    height: 17px;
   }
 
 

src/less/rating.less

@@ -6,6 +6,15 @@
     margin-bottom: 15px;
   }
 
+  .block-label{
+    display: block;
+    cursor: pointer;
+   }
+
+   label{
+    cursor: pointer;
+   }
+
   .rating-panel-container{
     padding: 15px;
     text-align: center;