From 43e7b39b957a56b22392f2c338c9c97e01f077be Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@dogenmedia.com>
Date: Mon, 18 Sep 2017 14:39:46 -0400
Subject: [PATCH] Refactor service output to include both name and description
 in Service portal (CO-1515); also update some font sizes.

---
 app/View/CoServices/portal.ctp    |  8 ++++----
 app/webroot/css/co-base.css       | 14 ++++++++++----
 app/webroot/css/co-responsive.css |  8 ++++----
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/View/CoServices/portal.ctp b/app/View/CoServices/portal.ctp
index c36d34b99..6793e2bb9 100644
--- a/app/View/CoServices/portal.ctp
+++ b/app/View/CoServices/portal.ctp
@@ -40,15 +40,15 @@
   
   <?php foreach ($co_services as $c): ?>
   <div class="co-card">
-    <h2><?php print filter_var($c['CoService']['description'],FILTER_SANITIZE_SPECIAL_CHARS); ?></h2>
+    <h2><?php print filter_var($c['CoService']['name'],FILTER_SANITIZE_SPECIAL_CHARS); ?></h2>
     <div class="co-card-content">
       <?php /* XXX keep the following for future RFE; these improve the portal layout:
       <div class="co-card-image">
         <img src="http://www.npr.org/about/images/press/Logos/npr_logo_rgb.JPG"/>
-      </div>
-      <div class="co-card-description">
-        How about a description?
       </div> */ ?>
+      <div class="co-card-description">
+        <?php print filter_var($c['CoService']['description'],FILTER_SANITIZE_SPECIAL_CHARS); ?>
+      </div>
       <div class="co-card-icons">
       <?php
 
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 27d5670b6..d82e3d8f2 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -35,13 +35,14 @@ html * {
 body {
   color: #222;
   -webkit-overflow-scrolling: touch; /* for dialog boxes */
+  font-size: 12px; /* MDL override from 14px; */
 }
 h1,h2,h3,h4,h5 {
   font-family: 'Noto Sans Bold','Noto Sans','Trebuchet MS',Arial,Helvetica,sans-serif;
   color: #555;
 }
 h1 {
-  font-size: 28px;
+  font-size: 2em;
   margin: 0;
 }
 h1.loginMsg {
@@ -234,7 +235,7 @@ body.logged-in #user-menu {
   background-color: rgb(238,238,238);
 }
 #notifications .notification-created {
-  font-size: 0.8em;
+  font-size: 0.9em;
 }
 #notifications .notification-created a {
   color: #444;
@@ -451,7 +452,7 @@ form#notificationStatus {
 /* CONTENT */
 #collaborationTitle {
   color: #222;
-  font-size: 1.6em;
+  font-size: 2em;
   min-height: 23px;
   padding: 0 40px 0 0;
   margin: 0;
@@ -460,7 +461,7 @@ form#notificationStatus {
   color: #222;
 }
 #breadcrumbs {
-  font-size: 0.8em;
+  font-size: 0.9em;
 }
 body.co_petitions.view #titleNavContainer,
 body.co_person_roles #titleNavContainer,
@@ -1550,6 +1551,10 @@ ul.form-list li.field-stack textarea {
 .invisible {
   display: none;
 }
+ul, ol { /* MDL override */
+  font-size: 12px;
+  line-height: 20px;
+}
 .fieldTitle {
   font-weight: bold;
 }
@@ -1674,6 +1679,7 @@ td.indented {
   text-align: right;
 }
 /* MDL OVERRIDES */
+/* See also font-size in body, and in GENERAL ul,li from 14px to 12px */
 #main.mdl-layout__content {
   overflow-x: auto; /* allow side scrolling on mobile */
 }
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 09c026c4b..ea4eea2b3 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -50,11 +50,11 @@
 /* Very small devices (tablets, 600px and up) */
 @media only screen and (min-width: 600px) {
   h1 {
-    font-size: 36px;
+    font-size: 2.6em;
   }
   h2 {
-    font-size: 32px;
-    line-height: 32px;
+    font-size: 2em;
+    line-height: 2em;
   }
   #logout {
     /*display: block; -- keep hidden for now */
@@ -320,7 +320,7 @@
   }
   #collaborationTitle {
     min-height: 46px;
-    font-size: 2em;
+    font-size: 2.4em;
     line-height: 1.6em;
     padding-right: 240px;
   }