Merge pull request #332 from fedspendingtransparency/staging

Frontend: Staging -> Master

package.json

@@ -122,7 +122,6 @@
     "mousetrap": "^1.6.1",
     "node-uuid": "^1.4.7",
     "path-to-regexp": "^1.7.0",
-    "q": "^1.4.1",
     "query-string": "^4.3.4",
     "r-dom": "^2.3.2",
     "react": "15.4.2",

src/_scss/core/_variables.scss

@@ -127,3 +127,11 @@ $outer-gutter:        rem(40);
 
 // 44 x 44 pixels hit target following Apple iOS Human Interface Guidelines
 $hit-area:          4.4rem;
+
+// z-indices (to use, add a number 0-9 to the layer you want to use)
+// this keeps out z-indices in check without going to absurdly high numbers
+$z-base: 0;
+$z-header: 100;
+$z-guide: 200;
+$z-modal: 300;
+$z-mobile-filter: 400;

src/_scss/custom.scss

@@ -10,7 +10,7 @@
 @import './pages/account/accountPage';
 @import './pages/agency/agencyPage';
 @import './pages/dbInfo/dbInfoPage';
-@import './pages/guide/guidePage';
+@import './pages/glossary/glossaryPage';
 @import './layouts/article/aboutArticle';
 @import './pages/testStyle/testStyle';
 // ***** MODALS

src/_scss/elements/_titleSelector.scss

@@ -1,6 +1,6 @@
     .field-picker {
-        float: left;
-        clear: none;
+        float: none!important;
+        @include clearfix;
         .selected-button {
             @include button-unstyled;
             @extend h3;

src/_scss/layouts/default/footer/_floatingGuideButton.scss → src/_scss/layouts/default/footer/_floatingGlossaryButton.scss

@@ -1,8 +1,8 @@
-.floating-guide-button-wrapper {
+.floating-glossary-button-wrapper {
     position: fixed;
     bottom: 0;
     right: 0;
-    z-index: 4;
+    z-index: $z-base + 4;
     opacity: 1;
     @include transition(opacity 0.3s ease-in);
     &.hidden {
@@ -23,7 +23,7 @@
         // button's hit area
         @include animation(removeHeightWidth 0.1s ease-in 0.3s forwards);
     }
-    .floating-guide-button {
+    .floating-glossary-button {
         @include transition(all 0.25s $ease-in-out-sine);
         background-color: $color-secondary;
         box-shadow: $container-shadow;
@@ -36,7 +36,7 @@
             background-color: lighten( $color-secondary, 8% );
             @include transition(all 0.25s $ease-in-out-sine);
         }
-        .floating-guide-icon {
+        .floating-glossary-icon {
             position: relative;
             display: inline-block;
             height: 14px;

src/_scss/layouts/default/footer/footer.scss

@@ -34,4 +34,4 @@
     }
 }
 
-@import "./_floatingGuideButton";
+@import "./_floatingGlossaryButton";

src/_scss/layouts/default/header/nav/_upperMenu.scss

@@ -26,8 +26,8 @@
                     content: "";
                 }
             }
-            // style the guide button
-            button.header-guide-button {
+            // style the glossary button
+            button.header-glossary-button {
                 @include button-unstyled;
                 color: $color-gray;
                 font-size: $small-font-size;
@@ -36,9 +36,9 @@
                 &:active {
                     text-decoration: underline;
                 }
-                .guide-button-content {
+                .glossary-button-content {
                     margin: 0 0 0 rem(15);
-                    .guide-button-icon {
+                    .glossary-button-icon {
                         display: inline-block;
                         position: relative;
                         width: rem(12);

src/_scss/layouts/search/header/_options.scss

@@ -2,8 +2,10 @@
     ul.search-formats {
         @include unstyled-list;
         text-align: center;
+        display: none;
         @include media($tablet-screen) {
             text-align: right;
+            display: block;
         }
     }
     li {

src/_scss/layouts/search/header/_positioning.scss

@@ -13,12 +13,12 @@
 .search-title {
     flex: 1 100%;
     & h1 {
-        margin: rem(20) 0;
         text-align: center;
     }
     @include media($tablet-screen) {
         flex: 1;
         & h1 {
+            margin: rem(20) 0;
             text-align: left;
         }
     }

src/_scss/layouts/search/header/_title.scss

@@ -1,7 +1,11 @@
 .search-title {
     h1 {
-        font-size: rem(47);
-        line-height: rem(50);
+        font-size: rem(30);
+        line-height: rem(38);
         font-weight: 200;
+        @include media($tablet-screen) {
+            font-size: rem(47);
+            line-height: rem(50);
+        }
     }
 }

src/_scss/layouts/search/header/header.scss

@@ -7,12 +7,15 @@
     color: $color-white;
 
     &.sticky {
-        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
-        left: 0;
-        position: fixed;
-        top: 0;
-        width: 100%;
-        z-index: 10;
+        // don't be sticky on mobile
+        @include media($tablet-screen) {
+            box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
+            left: 0;
+            position: fixed;
+            top: 0;
+            width: 100%;
+            z-index: $z-header;
+        }
     }
 }
 

src/_scss/pages/account/results/table/awardTable.scss

@@ -4,6 +4,7 @@
 
     @import "pages/search/results/table/_tableTypes";
     @import "pages/search/results/table/_tableStyle";
+    @import "pages/search/results/table/_resultsTablePicker";
 
     .loading-table {
         opacity: 0.5;

src/_scss/pages/agency/visualizations/federalAccount/federalAccount.scss

@@ -0,0 +1,20 @@
+#agency-federal-accounts {
+
+    .chart-wrapper {
+        position: relative;
+        @import "pages/search/results/visualizations/rank/chart/rankChart";
+
+        .loading-visualization {
+            opacity: 0.5;
+        }
+
+        .results-visualization-message {
+            font-size: $small-font-size;
+            text-align: center;
+        }
+
+        .visualization-tooltip {
+            @import "components/visualizations/tooltip/_tooltip";
+        }
+    }
+}

src/_scss/pages/agency/visualizations/visualizations.scss

@@ -1,2 +1,3 @@
 @import "./recipient/recipient";
-@import "obligated";
+@import "obligated";
+@import "./federalAccount/federalAccount";

src/_scss/pages/award/table/detailsTable.scss

@@ -8,8 +8,6 @@
     padding: rem(3) rem(35);
     transition: opacity 0.25s ease;
 
-    @import "_tableTabs";
-
     .details-table-width-master {
         width: 100%;
     }
@@ -25,4 +23,6 @@
     @import "./_financialSystem";
     @import "./_additionalDetails";
     @import "./_subawards";
+    @import "pages/search/results/table/_tableTypes";
+    @import "pages/search/results/table/_resultsTablePicker";
 }

src/_scss/pages/guide/_animations.scss → src/_scss/pages/glossary/_animations.scss

@@ -17,10 +17,10 @@
     }
 }  
 
-.guide-slide-enter, .guide-slide-enter-active {
+.glossary-slide-enter, .glossary-slide-enter-active {
     @include animation(slidein 0.5s ease-in forwards);
 }
 
-.guide-slide-leave, .guide-slide-leave-active {
+.glossary-slide-leave, .glossary-slide-leave-active {
     @include animation(slideout 0.5s ease-in forwards);
 }

src/_scss/pages/guide/_definition.scss → src/_scss/pages/glossary/_definition.scss

@@ -1,4 +1,4 @@
-.guide-definition {
+.glossary-definition {
     padding: 20px;
 
     @import "./_definitionTabs";
@@ -23,7 +23,7 @@
         }
     }
 
-    .guide-back {
+    .glossary-back {
         @include button-unstyled;
 
         padding: 5px;

src/_scss/pages/guide/_definitionResources.scss → src/_scss/pages/glossary/_definitionResources.scss

@@ -1,4 +1,4 @@
-.guide-resources {
+.glossary-resources {
     margin-top: 30px;
     margin-bottom: 30px;
 

src/_scss/pages/guide/_header.scss → src/_scss/pages/glossary/_header.scss

@@ -1,4 +1,4 @@
-.guide-header {
+.glossary-header {
     width: 100%;
     min-height: 200px;
 
@@ -34,7 +34,7 @@
         }
     }
 
-    h1.guide-title {
+    h1.glossary-title {
         font-weight: 300;
         font-size: rem(38);
         line-height: rem(47);
@@ -43,7 +43,7 @@
         padding: 0;
     }
 
-    .guide-example {
+    .glossary-example {
         font-style: italic;
     }
 

src/_scss/pages/guide/_noResults.scss → src/_scss/pages/glossary/_noResults.scss

@@ -1,4 +1,4 @@
-.guide-no-results {
+.glossary-no-results {
     padding: 20px;
 
     h2.title {

src/_scss/pages/guide/_scrollbar.scss → src/_scss/pages/glossary/_scrollbar.scss

@@ -1,4 +1,4 @@
-.guide-scrollbar-track {
+.glossary-scrollbar-track {
     // this is the "track" that the thumb moves within - it's essentially a wrapper around the
     // scroll position indicator
     position: absolute;
@@ -9,7 +9,7 @@
     width: 10px;
 }
 
-.guide-scrollbar-thumb {
+.glossary-scrollbar-thumb {
     // this is the element that actually moves up and down with the scroll position
     width: 10px;
     opacity: 0.3;

src/_scss/pages/guide/_searchBar.scss → src/_scss/pages/glossary/_searchBar.scss

@@ -1,4 +1,4 @@
-.guide-search-bar {
+.glossary-search-bar {
     position: relative;
     width: 250px;
     height: 34px;

src/_scss/pages/guide/_searchList.scss → src/_scss/pages/glossary/_searchList.scss

@@ -1,4 +1,4 @@
-.guide-search-results {
+.glossary-search-results {
     padding: 20px;
     padding-bottom: 40px;
 
@@ -10,7 +10,7 @@
         margin: 0;
     }
 
-    .guide-result-group {
+    .glossary-result-group {
         margin-top: 20px;
 
         h3.group-title {
@@ -33,7 +33,7 @@
             li {
                 margin-top: 10px;
 
-                button.guide-link {
+                button.glossary-link {
                     @include button-unstyled;
                     font-size: 14px;
                     line-height: 18px;

src/_scss/pages/guide/guidePage.scss → src/_scss/pages/glossary/glossaryPage.scss

@@ -1,20 +1,20 @@
-.usa-da-guide-animations {
+.usa-da-glossary-animations {
     @import "./_animations";
 }
 
-.usa-da-guide-wrapper {
+.usa-da-glossary-wrapper {
     position: fixed;
     right: 0;
     top: 0;
 
     width: 310px;
     height: 100%;
 
-    z-index: 20;
+    z-index: $z-guide;
 
     box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.2);
 
-    .guide-sidebar {
+    .glossary-sidebar {
         background-color: $color-primary-darker;
         color: $color-white;
         font-size: 14px;
@@ -29,7 +29,7 @@
         @import "./_definition";
         @import "./_noResults";
 
-        .guide-loading-content {
+        .glossary-loading-content {
             padding: 20px;
         }
 

src/_scss/pages/modals/extraModal/extraModal.scss

@@ -1,5 +1,5 @@
 .search-section-extra-modal {
-    z-index: 20;
+    z-index: $z-modal;
     box-shadow: $box-shadow;
 
     width: 75%;