Add option to view all brothers

deps.edn

@@ -1,9 +1,8 @@
 {:deps    {markdown-clj {:mvn/version "1.10.2"}}
  :aliases {:cljs
-           {:extra-deps {thheller/shadow-cljs        {:mvn/version "2.8.83"}
-                         reagent                     {:mvn/version "0.10.0"}
-                         re-frame                    {:mvn/version "RELEASE"}
-                         arttuka/reagent-material-ui {:mvn/version "4.11.0-3"}
+           {:extra-deps {thheller/shadow-cljs {:mvn/version "2.8.83"}
+                         reagent              {:mvn/version "0.10.0"}
+                         re-frame             {:mvn/version "RELEASE"}
                          reilysiegel/clojure-sheets
                          {:git/url "https://github.com/ReilySiegel/clojure-sheets"
                           :sha     "464fab2e85beb245ae2f73e95ce5ad48e2078e9c"}}}}

package.json

@@ -9,6 +9,7 @@
         "jss": "^10.4.0",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
+        "react-masonry-component": "^6.3.0",
         "react-responsive-carousel": "^3.2.10",
         "react-scroll": "^1.8.1",
         "react-transition-group": "^4.4.1",

src/axpdsp_site/brotherhood.cljs

@@ -1,7 +1,8 @@
 (ns axpdsp-site.brotherhood
   (:require [axpdsp-site.data :as data]
             [axpdsp-site.components :as components]
-            [reagent.core :as r]))
+            [reagent.core :as r]
+            ["react-masonry-component" :default Masonry]))
 
 (defn cycle-vector
   "Returns a new vector "
@@ -10,45 +11,81 @@
     (let [v (vec more)]
       (conj v head))))
 
+(defn cycle-brothers [brothers]
+  (prn (empty? (:portrait (first (cycle-vector brothers)))))
+  (if-not (empty? (:portrait (first (cycle-vector brothers))))
+    (cycle-vector brothers)
+    (cycle-brothers (cycle-vector brothers))))
+
 (defonce
   ^{:doc "A timer to update the brother shown every 7.5 seconds"}
   brother-cycle
   (js/setInterval (fn []
                     (swap! data/brothers cycle-brothers))
                   7500))
 
+
 (defn ui []
-  (let [brother (first @data/brothers)]
-    [:section.section.is-small.has-background-light.is-flex
-     {:id "brotherhood" :style {:min-height "100vh"
-                                :max-width  "100vw"}}
-     [:div.container.is-flex.is-vcentered
-      [:div.columns.is-vcentered
-       [:div.column.is-6
-        [:div.content
-         [:h1 "Brotherhood - Our Landmarks"]
-         [:p "Alpha Chi Rho’s basic principles are found in the Landmarks, formed
+  (let [all (r/atom false)]
+    (fn []
+      (let [brothers @data/brothers 
+            brother  (first brothers)]
+        [:section.section.is-small.has-background-light
+         {:id "brotherhood" :style {:min-height "100vh"
+                                    :max-width  "100vw"
+                                    :position   :relative}}
+         [:div.container
+          [:div.columns
+           [(if @all
+              :div.column.is-6.is-offset-3
+              :div.column.is-6)
+            [:div.content
+             [:h1 "Brotherhood - Our Landmarks"]
+             [:p "Alpha Chi Rho’s basic principles are found in the Landmarks, formed
        by the Founders of the Fraternity over a century ago. They culminate in
        the noble traditions of Alpha Chi Rho and represent what our Founders
        believed was the ideal Brotherhood."]
-         [:p]
-         [:ol
-          [:li "Membership from among those who are prepared to realize in word
+             [:p]
+             [:ol
+              [:li "Membership from among those who are prepared to realize in word
         and deed, the Brotherhood of all men."]
-          [:li "The insistence on a high and clean moral standard."]
-          [:li "The paramount duty of Brotherly love among members."]
-          [:li "Judgment not by externals, but by intrinsic worth; no one is
+              [:li "The insistence on a high and clean moral standard."]
+              [:li "The paramount duty of Brotherly love among members."]
+              [:li "Judgment not by externals, but by intrinsic worth; no one is
         denied membership in Alpha Chi Rho because of race, creed, or
         nationality."]]
-         [:p]
-         [:p "These are the Landmarks of Alpha Chi Rho; its foundation and its
+             [:p]
+             [:p "These are the Landmarks of Alpha Chi Rho; its foundation and its
        heritage. The ideals which they express are to be lived out by every
        Brother of Alpha Chi Rho, not only during his college days, but also
        throughout his life. They are summarized in the exoteric motto of the
        Fraternity:"]
-         [:blockquote.is-crow-quote
-          [:b "ΑΝΔΡΙΖΕΣΘΕ"]
-          " - \"Be Men\" - (Pronounced: An-DREE-zes-theh) "]]]
-       (when brother
-         [:div.column.is-4.is-offset-2
-          [components/brother-bio-card brother]])]]]))
+             [:blockquote.is-crow-quote
+              [:b "ΑΝΔΡΙΖΕΣΘΕ"]
+              " - \"Be Men\" - (Pronounced: An-DREE-zes-theh) "]]]
+           (when (and (not @all) brother)
+             [:div.column.is-3.is-offset-2.is-hidden-touch
+              [components/brother-bio-card brother]])]
+          (when (and brother @all)
+            [:> Masonry
+             {:className "columns"
+              :options   {:horizontalOrder true}}
+             (for [brother (sort-by :scroll brothers)]
+               [:<>
+                [:div.column.is-hidden-touch
+                 {:style {:width "25%"}
+                  :key   (:scroll brother)}
+                 [components/brother-bio-card brother]]
+                [:div.column.is-hidden-desktop
+                 {:style {:width "100%"}
+                  :key   (:scroll brother)}
+                 [components/brother-bio-card brother]]])])]
+         (when-not @all
+           [:div
+            {:style {:width    "100%"
+                     :position :absolute
+                     :bottom   32}}
+            [:div.has-text-centered
+             {:onClick #(swap! all not)}
+             [:p.button.is-small.is-dark.scroll-button
+              "View all Brothers"]]])]))))

src/axpdsp_site/components.cljs

@@ -19,7 +19,7 @@
                   :onError (fn [e]
                              (reset! error true))}]]])
        [:div.card-content
-        [:p.has-text-weight-semibold (str name " - " scroll)]
+        [:p.has-text-weight-semibold  name]
         [:p (str/join ", " positions)]
         (when school-email
           [:a {:href (str "mailto:" school-email)}