- Update scss-lint configuration

- Fix `ResultCard` word wrapping text
USStateDept · Mar 22, 2018 · 52d0d43 · 52d0d43
1 parent 06fae5e
commit 52d0d43
Show file tree

Hide file tree

Showing 17 changed files with 196 additions and 164 deletions.
diff --git a/.scss-lint.yml b/.scss-lint.yml
@@ -1 +1,18 @@
 scss_files: 'src/sass/**/*.scss'
+linters:
+  HexLength:
+    style: 'long'
+  HexNotation:
+    style: 'uppercase'
+  ImportantRule:
+    enabled: false
+  NestingDepth:
+    max_depth: 4
+    ignore_parent_selectors: true
+  SelectorDepth:
+    max_depth: 4
+  SelectorFormat:
+    convention: ^[a-zA-Z\-[0-9]]+$
+  # TODO: We should integrate autoprefixer to handle this in the future
+  VendorPrefix:
+    enabled: false
diff --git a/src/Components/ResultsCard/ResultsCard.jsx b/src/Components/ResultsCard/ResultsCard.jsx
@@ -7,6 +7,7 @@ import _ from 'lodash';
 import { Row, Column } from '../Layout';
 import DefinitionList, { Definition } from '../DefinitionList';
 import Favorite from '../Favorite/Favorite';
+import MediaQueryWrapper from '../MediaQuery';
 import BidCount from '../BidCount';
 import CompareCheck from '../CompareCheck/CompareCheck';
 
@@ -104,41 +105,48 @@ const ResultsCard = (props) => {
   };
 
   return (
-    <div id={result.id} className="results-card">
-      <Row className="header" fluid>
-        <Column columns="5">
-          <h3>{result.title}</h3>
-          <Link to={`/details/${result.position_number}`} title="View Details">View Details</Link>
-        </Column>
-        <Column columns="7">
-          <DefinitionList items={sections[0]} />
-        </Column>
-      </Row>
-      <Row id={result.id} fluid>
-        <Column columns="5">
-          <DefinitionList items={sections[1]} />
-        </Column>
-        <Column columns="7">
-          <DefinitionList items={sections[2]} />
-        </Column>
-      </Row>
-      <Row className="footer" fluid>
-        <Column>
-          <Column columns="5" as="section">
-            {
-              !!favorites &&
-                <Favorite {...options.favorite} />
-            }
-            <CompareCheck className="usa-button usa-button-secondary" {...options.compare} />
-          </Column>
-          <Column columns="7" as="section">
-            <div>
-              <DefinitionList items={sections[3]} />
-            </div>
-          </Column>
-        </Column>
-      </Row>
-    </div>
+    <MediaQueryWrapper breakpoint="screenMdMax" widthType="max">
+      {(matches) => {
+        const columns = matches ? [5, 6] : [5, 6];
+        return (
+          <div id={result.id} className="results-card">
+            <Row className="header" fluid>
+              <Column columns={columns[0]}>
+                <h3>{result.title}</h3>
+                <Link to={`/details/${result.position_number}`} title="View Details">View Details</Link>
+              </Column>
+              <Column columns={columns[1]}>
+                <DefinitionList items={sections[0]} />
+              </Column>
+            </Row>
+            <Row id={result.id} fluid>
+              <Column columns={columns[0]}>
+                <DefinitionList items={sections[1]} />
+              </Column>
+              <Column columns={columns[1]}>
+                <DefinitionList items={sections[2]} />
+              </Column>
+            </Row>
+            <Row className="footer" fluid>
+              <Column>
+                <Column className="divider" columns={columns[0]} as="section">
+                  {
+                    !!favorites &&
+                      <Favorite {...options.favorite} />
+                  }
+                  <CompareCheck className="usa-button usa-button-secondary" {...options.compare} />
+                </Column>
+                <Column columns={columns[1]} as="section">
+                  <div>
+                    <DefinitionList items={sections[3]} />
+                  </div>
+                </Column>
+              </Column>
+            </Row>
+          </div>
+        );
+      }}
+    </MediaQueryWrapper>
   );
 };
 

diff --git a/src/sass/_autosuggest.scss b/src/sass/_autosuggest.scss
@@ -3,7 +3,6 @@
 // Instead of modifying the source css, the SelectorFormat rule
 // has been disabled for this file in order to override styles on the
 // default classes.
-
 .react-autosuggest__container {
   position: relative;
 }
@@ -63,3 +62,4 @@
 .react-autosuggest__suggestion--highlighted {
   background-color: $color-primary-alt-light;
 }
+// scss-lint:enable SelectorFormat
diff --git a/src/sass/_compare.scss b/src/sass/_compare.scss
@@ -3,7 +3,7 @@
 
   .post-data-button {
     color: $color-white;
-    font-size: 0.8em;
+    font-size: .8em;
     margin-bottom: 0;
     padding-left: .8em;
     padding-right: .8em;

diff --git a/src/sass/_dropdown.scss b/src/sass/_dropdown.scss
@@ -110,3 +110,4 @@
     font-weight: bold;
   }
 }
+// scss-lint:enable SelectorFormat
diff --git a/src/sass/_editor.scss b/src/sass/_editor.scss
@@ -1,4 +1,3 @@
-// scss-lint:disable SelectorFormat,VendorPrefix
 .editor {
   background: $editor-background;
   border: 1px solid $editor-border;
@@ -10,7 +9,7 @@
   padding: 16px;
 }
 
-.editor :global(.public-DraftEditor-content) {
+.editor :global(.public-DraftEditor-content) { // scss-lint:disable MergeableSelector, SelectorFormat
   min-height: 140px;
 }
 
@@ -34,7 +33,7 @@
   }
 }
 
-.draftJsToolbar__toolbar__dNtBH {
+.draftJsToolbar__toolbar__dNtBH { // scss-lint:disable SelectorFormat
   left: unset;
   position: unset;
   -webkit-transform: unset;

diff --git a/src/sass/_feedback.scss b/src/sass/_feedback.scss
@@ -1,6 +1,4 @@
 // scss-lint:disable QualifyingElement
-// scss-lint:disable ImportantRule
-
 .tm-feedback-button {
   background-color: $color-gold-dark;
   border-color: $color-gold-dark;

diff --git a/src/sass/_footer.scss b/src/sass/_footer.scss
@@ -1,6 +1,3 @@
-// Disable SelectorFormat so that we can edit USWDS classes
-// scss-lint:disable SelectorFormat
-
 // footer container
 .tm-footer {
   padding: 0;
@@ -12,10 +9,12 @@
     }
   }
 
+  // scss-lint:disable SelectorFormat
   .usa-footer-secondary_section a {
     color: $blue-primary;
     text-decoration: none;
   }
+  // scss-lint:enable SelectorFormat
 
   .usa-footer-logo {
     min-height: 100px;
@@ -53,7 +52,6 @@
 
 // footer nav
 .tm-footer-nav {
-
   background-color: $tm-dark-blue;
   font-size: 16px;
   padding-bottom: 1rem;

diff --git a/src/sass/_glossaryEditor.scss b/src/sass/_glossaryEditor.scss
@@ -1,6 +1,3 @@
-// scss-lint:disable SelectorFormat
-// We modify Drafjs classes which use uppercase letters, so we disable SelectorFormat.
-
 .glossary-editor-page {
   .hello-greeting {
     float: left;

diff --git a/src/sass/_lists.scss b/src/sass/_lists.scss
@@ -1,35 +1,43 @@
 dl {
   &.definitions {
     display: table;
-    min-width: 300px;
-    margin-top: 0rem;
-    margin-bottom: 0em;
+    margin-bottom: 0;
+    margin-top: 0;
+    min-width: 100px;
+    width: 100%;
 
     > div {
-  		display: table;
-  	}
+      display: table;
+    }
 
     dt,
     dd {
       display: table-cell;
-  		width: auto;
-  		overflow: visible;
       font-size: 1.6rem;
-
-      &.truncate {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-  	}
+      overflow: visible;
+      width: auto;
+    }
 
     dt {
       font-weight: 600;
-  		white-space: nowrap;
-  	}
+      white-space: nowrap;
+    }
+
+    dd {
+      padding: 0 0 0 .5rem;
+    }
+  }
+}
+
+dt,
+dd {
+  &.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
-  	dd {
-      padding: 0 0 0 0.5rem;
-  	}
+    @media screen and (max-width: $screen-md-max) {
+      white-space: normal;
+    }
   }
 }
diff --git a/src/sass/_profile.scss b/src/sass/_profile.scss
@@ -1,7 +1,4 @@
-// scss-lint:disable SelectorDepth
-// scss-lint:disable NestingDepth
 // Nesting depth was needed, otherwise styles broke if placed outside of parent class (.expandable-link)
-
 .profile-page {
   border: solid 0 1px 1px 1px $color-gray-light;
   display: flex;

diff --git a/src/sass/_responsive.scss b/src/sass/_responsive.scss
@@ -1,6 +1,4 @@
-// scss-lint:disable ImportantRule
 // use consistent padding for main content in condensed views
-
 .mobile-nav {
   .mobile-nav-only {
     @media screen and (min-width: $screen-md-min) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -110,3 +110,4 @@ @@
         font-weight: bold;
       }
     }
+    // scss-lint:enable SelectorFormat