Intro texts and small UX improvements

example-theme/extra-translations/fi.edn

@@ -7,5 +7,6 @@
          :header "%1 kielivaraa korissa"}
   :catalogue {:catalogue "Kielivarat"
               :header "Kielivarat"
+              :intro "Tällä sivulla on listattuna kaikki kielivarat joita voit tästä järjestelmästä hakea."
               :apply-resources "Hae uusia kielivaroja"}
-  :navigation {:catalogue "Kielivarat"}}}
+  :navigation {:catalogue "Kielivarat"}}}

resources/translations/en.edn

@@ -124,6 +124,7 @@
                           :returned "Changes requested"
                           :submitted "Applied"
                           :unknown "Unknown"}
+                 :intro [:div.intro [:p "By filling and sending in this application, all the applicants may be granted the applied resources. All the applicable licenses must also be accepted before or after applying."]]
                  :my-applications "My Applications"
                  :state "State"
                  :states {:approved "Approved"
@@ -133,7 +134,7 @@
                           :returned "Returned"
                           :submitted "Applied"
                           :unknown "Unknown"}
-                 :latest-activity "Latest activity %1"
+                 :latest-activity "Latest activity: %1"
                  :view "View"}
   :autocomplete {:no-results "No results"
                  :placeholder "Choose or type"}
@@ -144,8 +145,10 @@
          :remove "Remove"}
   :catalogue {:catalogue "Catalogue"
               :header "Resource"
+              :intro [:p "The catalogue contains all the resources that you can apply for in this system."]
               :more-info "More info"
               :continue-existing-application "Continue existing application"
+              :continue-existing-application-intro "You have existing unfinished applications that you can continue from here."
               :apply-resources "Apply for resources"}
   :collapse {:show-less "Show less"
              :show-more "Show more"}
@@ -262,6 +265,8 @@
   :link {:download-file "Download file"
          :opens-in-new-window "Opens in new window"}
   :login {:alternative "Other sign in options"
+          :intro [:div [:h1 "Welcome to REMS"] [:p "This is a demo environment for testing the REMS software."]
+                  [:p "Please, login first to access REMS."]]
           :text "Login by using your Haka credentials"
           :title "Login"}
   :missing "Missing translation %1"

resources/translations/fi.edn

@@ -124,6 +124,7 @@
                           :returned "Palautettu muokattavaksi"
                           :submitted "Haettu"
                           :unknown "Tuntematon"}
+                 :intro [:div.intro [:p "Täyttämällä ja lähettämällä tämän hakemuksen, kaikki hakijat voivat saada oikeuden haettuihin resursseihin. Kaikkien on sen lisäksi hyväksyttävä kaikki käyttöehdot viimeistään hakemuksen käsittelyn jälkeen saadakseen käyttöoikeudet."]]
                  :my-applications "Omat hakemukset"
                  :state "Tila"
                  :states {:approved "Hyväksytty"
@@ -133,7 +134,7 @@
                           :returned "Palautettu"
                           :submitted "Haettu"
                           :unknown "Tuntematon"}
-                 :latest-activity "Viimeisin toimenpide %1"
+                 :latest-activity "Viimeisin toimenpide: %1"
                  :view "Näytä"}
   :autocomplete {:no-results "Ei tuloksia"
                  :placeholder "Valitse tai kirjoita"}
@@ -144,8 +145,10 @@
          :remove "Poista"}
   :catalogue {:catalogue "Aineistoluettelo"
               :header "Aineistoluettelo"
+              :intro [:p "Aineistoluettelossa on listattuna kaikki resurssit joita voit tästä järjestelmästä hakea."]
               :more-info "Lisätietoja"
               :continue-existing-application "Jatka hakemusta"
+              :continue-existing-application-intro "Sinulla on keskeneräisiä hakemuksia, joita voit jatkaa tästä."
               :apply-resources "Hae uusia resursseja"}
   :collapse {:show-less "Näytä vähemmän"
              :show-more "Näytä lisää"}
@@ -262,6 +265,8 @@
   :link {:download-file "Lataa tiedosto"
          :opens-in-new-window "Aukeaa uuteen ikkunaan"}
   :login {:alternative "Muut kirjautumisvaihtoehdot"
+          :intro [:div [:h1 "Tervetuloa REMSiin"] [:p "Tämä on demo-ympäristö, joka on tarkoitettu REMS-ohjelmiston kokeilemiseen."]
+                  [:p "Ole hyvä ja kirjaudu sisään ensin."]]
           :text "Kirjaudu sisään Haka-tunnuksillasi"
           :title "Kirjaudu sisään"}
   :missing "Käännös puuttuu %1"

src/clj/rems/css/styles.clj

@@ -281,6 +281,7 @@
    [:h1 :h2 {:font-weight 400}]
    [:h1 :h2 :h3 {:letter-spacing (u/rem 0.17)}]
    [:h4 :h5 :h6 {:letter-spacing (u/rem 0.12)}]
+   [:h1 {:margin-bottom (u/rem 2)}]
    [:#app {:min-height (u/percent 100)
            :flex 1
            :display :flex}]
@@ -463,16 +464,16 @@
    [:.jumbotron
     {:background-color "#fff"
      :text-align "center"
-     :max-width (u/px 420)
-     :margin "30px auto"
      :color "#000"
+     :margin-top (u/rem 2)
      :border-style "solid"
      :border-width (u/px 1)
      :box-shadow (util/get-theme-attribute :collapse-shadow :table-shadow)}
     [:h1 {:margin-bottom (u/px 20)}]]
    [:.login-btn {:max-height (u/px 70)
                  :margin-bottom (u/px 20)}
     [:&:hover {:filter "brightness(80%)"}]]
+   [:.login-component {:max-width (u/px 420)}]
    (generate-rems-table-styles)
    [:.btn.disabled {:opacity 0.25}]
    [:.catalogue-item-link {:color "#fff"
@@ -577,6 +578,7 @@
    [:.new-form-field-option {:text-align "center"}]
 
    [:.full {:width "100%"}]
+   [:.intro {:margin-bottom (u/rem 2)}]
    [:.rectangle {:width (u/px 50)
                  :height (u/px 50)}]
    [:.color-1 {:background-color (util/get-theme-attribute :color1)}]
@@ -634,7 +636,7 @@
                              (-> (util/get-theme-attribute :color1)
                                  (c/saturate -50)
                                  (c/lighten 33)))}]
-   [:h2 {:margin [[(u/rem 1) 0]]}]
+   [:h2 {:margin [[(u/rem 3) 0 (u/rem 1) 0]]}]
 
    ;; application list
    [:.rems-table

src/cljs/rems/application.cljs

@@ -389,7 +389,7 @@
          {:phase :approve :text :t.phases/approve}
          {:phase :result :text :t.phases/approved}]))
 
-(defn- application-header [application]
+(defn- application-state [application]
   (let [state (:application/state application)
         last-activity (:application/last-activity application)
         event-groups (->> (:application/events application)
@@ -402,13 +402,13 @@
                           (map #(map format-event %)))]
     [collapsible/component
      {:id "header"
-      :title [:span#application-state
-              (str
-               (text :t.applications/state)
-               (str ": " (localize-state state)))]
+      :title (text :t.applications/state)
       :always (into [:div
                      [:div.mb-3 {:class (str "state-" (name state))}
                       (phases (get-application-phases state))]
+                     [:h3#application-state
+                      (str (text :t.applications/state) ": ")
+                      (localize-state state)]
                      [:h3 (text-format :t.applications/latest-activity (localize-time last-activity))]]
                     (when-let [g (first event-groups)]
                       (into [[:h3 (text :t.form/events)]]
@@ -581,8 +581,9 @@
     [:div
      [:div {:class "float-right"} [pdf-button (:application/id application)]]
      [document-title (text :t.applications/application)]
+     (text :t.applications/intro)
      (into [:div] messages)
-     [application-header application]
+     [application-state application]
      [:div.mt-3 [applicants-info application]]
      [:div.mt-3 [applied-resources application userid]]
      [:div.my-3 [application-fields application edit-application]]

src/cljs/rems/auth/auth.cljs

@@ -6,12 +6,15 @@
 
 (defn login-component []
   (let [config @(rf/subscribe [:rems.config/config])
-        alternative-endpoint (:alternative-login-url config)]
-    (case (:authentication config)
-      :shibboleth (shibboleth/login-component alternative-endpoint)
-      :fake-shibboleth (shibboleth/login-component alternative-endpoint)
-      :ldap (ldap/login-component)
-      nil)))
+        alternative-endpoint (:alternative-login-url config)
+        login-component (case (:authentication config)
+                          :shibboleth (shibboleth/login-component alternative-endpoint)
+                          :fake-shibboleth (shibboleth/login-component alternative-endpoint)
+                          :ldap (ldap/login-component)
+                          nil)]
+    (when login-component
+      [:div.jumbotron.login-component
+       login-component])))
 
 (defn guide []
   [:div

src/cljs/rems/auth/ldap.cljs

@@ -3,7 +3,7 @@
             [rems.text :refer [text]]))
 
 (defn login-component []
-  [:div.jumbotron
+  [:div
    [document-title (text :t.ldap/title)]
    [:form
     {:action "/ldap/login" :method "post"}

src/cljs/rems/auth/shibboleth.cljs

@@ -5,7 +5,7 @@
             [rems.text :refer [text]]))
 
 (defn login-component [alternative-endpoint]
-  [:div.jumbotron
+  [:div
    [document-title (text :t.login/title)]
    [:p (text :t.login/text)]
    [:div.col-md6

src/cljs/rems/catalogue.cljs

@@ -100,6 +100,7 @@
     (when (seq @(rf/subscribe [applications]))
       [:div
        [:h2 (text :t.catalogue/continue-existing-application)]
+       (text :t.catalogue/continue-existing-application-intro)
        [application-list/component
         {:id applications
          :applications applications
@@ -126,6 +127,7 @@
         loading-drafts? @(rf/subscribe [::loading-drafts?])]
     [:div
      [document-title (text :t.catalogue/catalogue)]
+     (text :t.catalogue/intro)
      (if (or loading-catalogue? loading-drafts?)
        [spinner/big]
        [:div

src/cljs/rems/spa.cljs

@@ -191,7 +191,13 @@
     (do
       (rf/dispatch [:rems.catalogue/enter-page])
       [catalogue-page])
-    [auth/login-component]))
+    [:div
+     [:div.row.justify-content-center
+      [:div.col-md-6.row.justify-content-center
+       (text :t.login/intro)]]
+     [:div.row.justify-content-center
+      [:div.col-md-6.row.justify-content-center
+       [auth/login-component]]]]))
 
 (defn unauthorized-page []
   [:div