Updates from coworking session with ux (#19)

* Updates from coworking session with ux * Add innerHTML to descriptions and some basic mobile styles * Update version to 0.7.0
GetDKAN · Apr 30, 2021 · 55b3685 · 55b3685
1 parent a0019f6
commit 55b3685
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/components/DatasetAdditionalInformation/index.jsx b/src/components/DatasetAdditionalInformation/index.jsx
@@ -33,7 +33,7 @@ const DatasetAdditionalInformation = ({ datasetInfo }) => {
 
 
   return(
-    <div className="dc-c-additional-info-table ds-u-margin-bottom--3">
+    <div className="dc-c-additional-info-table ds-u-margin-bottom--6">
       <h2>Additional Information</h2>
       <Table compact striped>
         <TableHead>

diff --git a/src/components/DatasetDownloads/index.jsx b/src/components/DatasetDownloads/index.jsx
@@ -6,7 +6,7 @@ const DatasetDownloads = ({ downloadURL }) => {
     <div className="ds-u-margin-bottom--3 ds-u-padding--2 ds-u-border ds-u-border--1">
       <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-top--0 ds-u-margin-bottom--2 ds-u-padding-bottom--2 ds-u-border ds-u-border-bottom--1">Downloads</h2>
       <p className="ds-u-margin-bottom--1 ds-u-color--gray">Resource</p>
-      <a href={downloadURL}>Download this dataset (CSV)</a>
+      <a href={downloadURL}>Download this resource (CSV)</a>
     </div>
   );
 }

diff --git a/src/components/DatasetSearchListItem/index.jsx b/src/components/DatasetSearchListItem/index.jsx
@@ -25,7 +25,7 @@ const DatasetSearchListItem = ({item, updateFacets}) => {
           Updated <TransformedDate date={modified} />
         </span>
       </div>
-      <h3>
+      <h3 className="ds-u-margin-y--1">
         <Link
           className="ds-u-color--base"
           to={`/dataset/${identifier}`}
@@ -34,7 +34,7 @@ const DatasetSearchListItem = ({item, updateFacets}) => {
         </Link>
       </h3>
       {/* 215 average character limit */}
-      <p className="ds-u-margin-top--0">{description}</p>
+      <p className="ds-u-margin-top--0" dangerouslySetInnerHTML={{__html: description}} />
       <div>
         {keyword &&
           <ul className="ds-u-padding--0 ds-u-display--flex ds-u-flex-wrap--wrap">

diff --git a/src/styles/scss/components/dataset-search-list-item.scss b/src/styles/scss/components/dataset-search-list-item.scss
@@ -2,6 +2,13 @@
 
 .dc-dataset-searchlist-item {
 
+  h3 a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   ul {
     list-style: none;
   }

diff --git a/src/styles/scss/templates/dataset-search.scss b/src/styles/scss/templates/dataset-search.scss
@@ -4,6 +4,10 @@
   list-style: none;
 }
 
+.dc-c-clear-filters {
+  font-weight: 300;
+}
+
 .dc-fulltext--input-container {
   width: 100%;
   input {
@@ -18,7 +22,7 @@
     display: block;
     width: 48px;
     height: 4px;
-    margin: 8px 0;
+    margin: 16px 0;
     background-color: $color-primary-alt-light;
   }
 }

diff --git a/src/templates/Dataset/index.jsx b/src/templates/Dataset/index.jsx
@@ -14,7 +14,7 @@ import ResourceFooter from '../../components/ResourceFooter';
 const Dataset = ({ id, rootUrl }) => {
   let apiDocs = useRef()
   const resourceOptions = {
-    limit: 25
+    limit: 10
   }
   const [tablePadding, setTablePadding] = useState('ds-u-padding-y--1')
   const { dataset, } = useMetastoreDataset(id, rootUrl);
@@ -27,15 +27,15 @@ const Dataset = ({ id, rootUrl }) => {
   return (
     <section className="ds-l-container">
       <div className="ds-l-row ds-u-padding-top--3">
-        <div className="ds-l-col--9">
+        <div className="ds-l-md-col--9 ds-l-sm-col--12">
           <h1 className="ds-title">{dataset.title}</h1>
           <div className="ds-l-row">
-            <p className="ds-l-col--8">
+            <p className="ds-l-col--6">
               {dataset.theme ? <Badge variation="info">{dataset.theme[0].data}</Badge> : null}
             </p>
-            <p className="ds-l-col--4 ds-u-color--gray ds-u-text-align--right">Updated <TransformedDate date={modifiedDate} /></p>
+            <p className="ds-l-col--6 ds-u-color--gray ds-u-text-align--right">Updated <TransformedDate date={modifiedDate} /></p>
           </div>
-          <p>{dataset.description}</p>
+          <p dangerouslySetInnerHTML={{__html: dataset.description}} />
           <h2 className="dc-resource-header">Resource Preview</h2>
           {dataset.distribution
             && (
@@ -60,7 +60,7 @@ const Dataset = ({ id, rootUrl }) => {
           }
           {dataset.identifier &&
             <div ref={apiDocs}>
-              <h2>Try out the API</h2>
+              <h2>Try the API</h2>
               <ApiDocs 
                 endpoint={`${process.env.REACT_APP_ROOT_URL}`}
                 datasetID={dataset.identifier}
@@ -69,7 +69,7 @@ const Dataset = ({ id, rootUrl }) => {
           }
 
         </div>
-        <div className="ds-l-col--3">
+        <div className="ds-l-md-col--3 ds-l-sm-col--12">
         {dataset.distribution
           && (
             <DatasetDownloads downloadURL={dataset.distribution[0].data.downloadURL} />

diff --git a/src/templates/DatasetSearch/index.jsx b/src/templates/DatasetSearch/index.jsx
@@ -77,11 +77,11 @@ const DatasetSearch = ({rootUrl, location}) => {
 
   return(
     <section className="ds-l-container">
-      <h1 className="dc-search-header">
+      <h1 className="dc-search-header ds-title ds-u-margin-y--3">
         Datasets
       </h1>
       <div className="ds-l-row">
-        <div className="ds-l-col--8">
+        <div className="ds-l-md-col--8 ds-l-sm-col--12ds-u-margin-bottom--3">
           <form
             onSubmit={(e) => {e.preventDefault(); () => setFulltext(filterText);}}
             className="ds-u-display--flex ds-u-justify-content--between ds-u-margin-bottom--2 "
@@ -105,28 +105,32 @@ const DatasetSearch = ({rootUrl, location}) => {
               Search
             </Button>
           </form>
-
+          <div className="ds-u-display--flex ds-u-justify-content--between">
+            <p className="ds-u-margin-y--0">
+              {selectedFacetsMessage(selectedFacets, {theme: 'Categories', keyword: 'Tags'})}
+            </p>
+            <Button
+              className="ds-u-padding--0 dc-c-clear-filters"
+              variation="transparent"
+              onClick={() => resetFilters()}
+            >
+              Clear all filters
+            </Button>
+          </div>
+          {/* <p className="ds-u-text-align--center ds-u-color--gray">{`[${items.length} ${items.length === 1 ? 'entry' : 'entries'} total on page]`}</p> */}
           {/* <SearchPaginationResults
             total={Number(totalItems)}
             pageSize={Number(pageSize)}
             currentPage={Number(page + 1)}
           /> */}
-          <p className="ds-u-margin-top--0">
-            {selectedFacetsMessage(selectedFacets, {theme: 'Categories', keyword: 'Tags'})}
-          </p>
-          <Button
-            onClick={() => resetFilters()}
-          >
-            Clear all filters
-          </Button>
+
           <ol className="dc-dataset-search-list ds-u-padding--0">
             {items.map((item) => (
               <li className="ds-u-padding--0">
                 <DatasetSearchListItem item={item} updateFacets={updateSelectedFacets}/>
               </li>
             ))}
           </ol>
-          <p className="ds-u-text-align--center ds-u-color--gray">{`[${items.length} ${items.length === 1 ? 'entry' : 'entries'} total on page]`}</p>
           {totalItems &&
             (<Pagination
               currentPage={page}
@@ -136,7 +140,7 @@ const DatasetSearch = ({rootUrl, location}) => {
             />)
           }
         </div>
-        <div className="ds-l-col--4">
+        <div className="ds-l-md-col--4 ds-l-sm-col--12">
           <div className="ds-u-padding--2 ds-u-margin-bottom--4 ds-u-border--1">
             <Dropdown
               options={[{ label: 'Recently Updated', value: 'modified' },{ label: 'Alphabetical', value: 'title' }]}

diff --git a/src/templates/FilteredResource/index.jsx b/src/templates/FilteredResource/index.jsx
@@ -22,7 +22,7 @@ const FilteredResource = ({id, dist_id, location}) => {
   let buttonRef = null;
   const options = location.search ? {...qs.parse(location.search)} : {conditions: []}
   return (
-    <section className="ds-l-container ds-u-padding-bottom--3">
+    <section className="ds-l-container ds-u-padding-bottom--3 ds-u-margin-bottom--2">
       {Object.keys(resource).length
         && (
           <>
@@ -33,9 +33,9 @@ const FilteredResource = ({id, dist_id, location}) => {
               Back to {dataset.title}
             </Link>
             <h1 className="ds-title">{resource.data.title}</h1>
-            <p>{resource.data.description}</p>
-            <div className="ds-l-row ds-u-align-items--stretch ds-u-margin-bottom--3">
-              <div className="ds-l-col--4">
+            <p className="ds-u-margin-top--0" dangerouslySetInnerHTML={{__html: resource.data.description}} />
+            <div className="ds-l-row ds-u-align-items--stretch">
+              <div className="ds-l-md-col--4 ds-l-sm-col--12 ds-u-margin-bottom--3">
                 <div class="dc-c-resource-action ds-u-border--1 ds-u-radius ds-u-display--flex ds-u-flex-direction--column ds-u-text-align--center">
                   <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-bottom--2 ds-u-padding-bottom--0 ds-u-padding-left--3 ds-u-padding-left--3  ds-u-text-align--left">Create</h2>
                   <div className="dc-filtered-resource-toggle">
@@ -51,7 +51,7 @@ const FilteredResource = ({id, dist_id, location}) => {
 
                 </div>
               </div>
-              <div className="ds-l-col--4">
+              <div className="ds-l-md-col--4 ds-l-sm-col--12 ds-u-margin-bottom--3">
                 <div class="ds-u-border--1 ds-u-radius">
                   <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-bottom--0 ds-u-padding-bottom--0 ds-u-padding-left--3">Access</h2>
                   <Button variation="transparent" className="ds-u-text-align--left ds-u-font-weight--normal">
@@ -72,9 +72,9 @@ const FilteredResource = ({id, dist_id, location}) => {
                   </Tooltip>
                 </div>
               </div>
-              <div className="ds-l-col--4">
+              <div className="ds-l-md-col--4 ds-l-sm-col--12 ds-u-margin-bottom--3">
                 <div class=" ds-u-border--1 ds-u-radius">
-                  <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-bottom--0 ds-u-padding-bottom--0 ds-u-padding-left--3 ds-u-padding-left--3">Try API</h2>
+                  <h2 className="ds-u-color--primary ds-u-font-size--h3 ds-u-margin-y--0 ds-u-padding-bottom--0 ds-u-padding-left--3 ds-u-padding-left--3">Try API</h2>
                   <Button
                     variation="transparent"
                     className="ds-u-text-align--left ds-u-font-weight--normal"