.
9 |
10 | .list-group {
11 | // No need to set list-style: none; since .list-group-item is block level
12 | margin-bottom: 20px;
13 | padding-left: 0; // reset padding because ul and ol
14 | }
15 |
16 |
17 | // Individual list items
18 | //
19 | // Use on `li`s or `div`s within the `.list-group` parent.
20 |
21 | .list-group-item {
22 | position: relative;
23 | display: block;
24 | padding: 10px 15px;
25 | // Place the border on the list items and negative margin up for better styling
26 | margin-bottom: -1px;
27 | background-color: $list-group-bg;
28 | border: 1px solid $list-group-border;
29 |
30 | // Round the first and last items
31 | &:first-child {
32 | @include border-top-radius($list-group-border-radius);
33 | }
34 | &:last-child {
35 | margin-bottom: 0;
36 | @include border-bottom-radius($list-group-border-radius);
37 | }
38 |
39 | // Align badges within list items
40 | > .badge {
41 | float: right;
42 | }
43 | > .badge + .badge {
44 | margin-right: 5px;
45 | }
46 | }
47 |
48 |
49 | // Linked list items
50 | //
51 | // Use anchor elements instead of `li`s or `div`s to create linked list items.
52 | // Includes an extra `.active` modifier class for showing selected items.
53 |
54 | a.list-group-item {
55 | color: $list-group-link-color;
56 |
57 | .list-group-item-heading {
58 | color: $list-group-link-heading-color;
59 | }
60 |
61 | // Hover state
62 | &:hover,
63 | &:focus {
64 | text-decoration: none;
65 | color: $list-group-link-hover-color;
66 | background-color: $list-group-hover-bg;
67 | }
68 | }
69 |
70 | .list-group-item {
71 | // Disabled state
72 | &.disabled,
73 | &.disabled:hover,
74 | &.disabled:focus {
75 | background-color: $list-group-disabled-bg;
76 | color: $list-group-disabled-color;
77 |
78 | // Force color to inherit for custom content
79 | .list-group-item-heading {
80 | color: inherit;
81 | }
82 | .list-group-item-text {
83 | color: $list-group-disabled-text-color;
84 | }
85 | }
86 |
87 | // Active class on item itself, not parent
88 | &.active,
89 | &.active:hover,
90 | &.active:focus {
91 | z-index: 2; // Place active items above their siblings for proper border styling
92 | color: $list-group-active-color;
93 | background-color: $list-group-active-bg;
94 | border-color: $list-group-active-border;
95 |
96 | // Force color to inherit for custom content
97 | .list-group-item-heading,
98 | .list-group-item-heading > small,
99 | .list-group-item-heading > .small {
100 | color: inherit;
101 | }
102 | .list-group-item-text {
103 | color: $list-group-active-text-color;
104 | }
105 | }
106 | }
107 |
108 |
109 | // Contextual variants
110 | //
111 | // Add modifier classes to change text and background color on individual items.
112 | // Organizationally, this must come after the `:hover` states.
113 |
114 | @include list-group-item-variant(success, $state-success-bg, $state-success-text);
115 | @include list-group-item-variant(info, $state-info-bg, $state-info-text);
116 | @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
117 | @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
118 |
119 |
120 | // Custom content options
121 | //
122 | // Extra classes for creating well-formatted content within `.list-group-item`s.
123 |
124 | .list-group-item-heading {
125 | margin-top: 0;
126 | margin-bottom: 5px;
127 | }
128 | .list-group-item-text {
129 | margin-bottom: 0;
130 | line-height: 1.3;
131 | }
132 |
--------------------------------------------------------------------------------
/app/components/topics/topic-components/recycling-collection/recycling.factory.js:
--------------------------------------------------------------------------------
1 | simplicity.factory('Recycling', ['$q', '$stateParams', 'AddressCache',
2 | function($q, $stateParams, AddressCache){
3 |
4 | var Recycling = {};
5 |
6 | var topicProperties = {
7 | 'name' : 'recycling',
8 | 'title' : 'Recycling Collection',
9 | 'plural' : 'recycling collection',
10 | 'searchForText' : 'an address',
11 | 'position' : 5,
12 | 'downloadable' : false,
13 | 'inTheCityOnly' : true,
14 | 'searchby' : {
15 | 'address' : {
16 | 'params' : {
17 | 'type' : null,
18 | 'timeframe' : null,
19 | 'extent' : null,
20 | 'view' : 'simple',
21 | 'validViews' : ['simple']
22 | },
23 | 'prepositions' : {
24 | 'searchby' : 'at',
25 | },
26 | 'requiredParams' : [],
27 | 'headerTemplate' : 'topics/topic-headers/topic.header.at.html',
28 | },
29 | 'google_places' : {
30 | 'params' : {
31 | 'type' : null,
32 | 'timeframe' : null,
33 | 'extent' : null,
34 | 'view' : 'simple',
35 | 'validViews' : ['simple']
36 | },
37 | 'prepositions' : {
38 | 'searchby' : 'at',
39 | },
40 | 'requiredParams' : [],
41 | 'headerTemplate' : 'topics/topic-headers/topic.header.at.html',
42 | }
43 | },
44 | 'views' : {
45 | 'simple' : {'label' : 'Simple View', 'template' : 'topics/topic-components/recycling-collection/recycling.collection.simple.view.html'}
46 | },
47 | 'iconClass' : 'flaticon-trash42',
48 | 'linkTopics' : ['trash', 'property'],
49 | 'questions' : {
50 | 'topic' : 'Do you want to know when recycling is collected?',
51 | 'address' : 'Do you want to know when recycling is collected at this address?'
52 | }
53 | };
54 |
55 | var getCurrentRecyclingWeek = function(){
56 | var d = new Date(); // current time
57 | var t = d.getTime() - (1000*60*60*24*3); // milliseconds since Jan 4 1970 Sunday
58 | var w = Math.floor(t / (1000*60*60*24*7)); // weeks since Jan 4 1970
59 | var o = w % 2; // equals 0 for even (B weeks) numbered weeks, 1 for odd numbered weeks
60 | if(o === 0){
61 | return 'B';
62 | }else{ // do your odd numbered week stuff
63 | return 'A';
64 | }
65 | };
66 |
67 | Recycling.build = function(){
68 | var q = $q.defer();
69 | var addressCache = AddressCache.get();
70 | var recyclingArray = addressCache.recycling.split(' ');
71 | var currentRecyclingWeek = getCurrentRecyclingWeek();
72 | var recycling = {
73 | 'recyclingDay' : addressCache.recycling,
74 | 'searchGeojson' : addressCache.searchGeojson
75 | };
76 | if(recyclingArray[3] === 'A)'){
77 | if(getCurrentRecyclingWeek() === 'A'){
78 | recycling.recyclingSchedule = {'week' : 'A', 'when' : 'this week'};
79 | }else{
80 | recycling.recyclingSchedule = {'week' : 'A', 'when' : 'next week'};
81 | }
82 | }else{
83 | if(getCurrentRecyclingWeek() === 'B'){
84 | recycling.recyclingSchedule = {'week' : 'B', 'when' : 'this week'};
85 | }else{
86 | recycling.recyclingSchedule = {'week' : 'B', 'when' : 'next week'};
87 | }
88 | }
89 | q.resolve(recycling);
90 | return q.promise;
91 | };
92 |
93 | Recycling.getTopicProperties = function(){
94 | return topicProperties;
95 | };
96 |
97 | //****Return the factory object****//
98 | return Recycling;
99 |
100 |
101 | }]); //END Recycling factory function
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/app/assets/styles/_bootswatch.scss:
--------------------------------------------------------------------------------
1 | // Cosmo 3.2.0
2 | // Bootswatch
3 | // -----------------------------------------------------
4 |
5 | @import url($web-font);
6 |
7 | // Navbar =====================================================================
8 |
9 | .navbar-inverse {
10 |
11 | .badge {
12 | background-color: #fff;
13 | color: $brand-primary;
14 | }
15 | }
16 |
17 | // Buttons ====================================================================
18 |
19 |
20 | // Typography =================================================================
21 |
22 | body {
23 | -webkit-font-smoothing: antialiased;
24 | }
25 |
26 | .text-primary,
27 | .text-primary:hover {
28 | color: $brand-primary;
29 | }
30 |
31 | .text-success,
32 | .text-success:hover {
33 | color: $brand-success;
34 | }
35 |
36 | .text-danger,
37 | .text-danger:hover {
38 | color: $brand-danger;
39 | }
40 |
41 | .text-warning,
42 | .text-warning:hover {
43 | color: $brand-warning;
44 | }
45 |
46 | .text-info,
47 | .text-info:hover {
48 | color: $brand-info;
49 | }
50 |
51 | // Tables =====================================================================
52 |
53 | table,
54 | .table {
55 |
56 | a:not(.btn) {
57 | text-decoration: underline;
58 | }
59 |
60 | .success,
61 | .warning,
62 | .danger,
63 | .info {
64 | color: #fff;
65 |
66 | a {
67 | color: #fff;
68 | }
69 | }
70 | }
71 |
72 | // Forms ======================================================================
73 |
74 |
75 | .has-warning {
76 | .help-block,
77 | .control-label,
78 | .form-control-feedback {
79 | color: $brand-warning;
80 | }
81 |
82 | .form-control,
83 | .form-control:focus,
84 | .input-group-addon {
85 | border: 1px solid $brand-warning;
86 | }
87 | }
88 |
89 | .has-error {
90 | .help-block,
91 | .control-label,
92 | .form-control-feedback {
93 | color: $brand-danger;
94 | }
95 |
96 | .form-control,
97 | .form-control:focus,
98 | .input-group-addon {
99 | border: 1px solid $brand-danger;
100 | }
101 | }
102 |
103 | .has-success {
104 | .help-block,
105 | .control-label,
106 | .form-control-feedback {
107 | color: $brand-success;
108 | }
109 |
110 | .form-control,
111 | .form-control:focus,
112 | .input-group-addon {
113 | border: 1px solid $brand-success;
114 | }
115 | }
116 |
117 | // Navs =======================================================================
118 |
119 | .nav-pills {
120 |
121 | & > li > a {
122 | border-radius: 0;
123 | }
124 | }
125 |
126 | .dropdown-menu {
127 |
128 | & > li > a:hover,
129 | & > li > a:focus {
130 | background-image: none;
131 | }
132 | }
133 |
134 | // Indicators =================================================================
135 |
136 | .close {
137 | text-decoration: none;
138 | text-shadow: none;
139 | opacity: 0.4;
140 |
141 | &:hover,
142 | &:focus {
143 | opacity: 1;
144 | }
145 | }
146 |
147 | .alert {
148 | border: none;
149 |
150 | .alert-link {
151 | text-decoration: underline;
152 | color: #fff;
153 | }
154 | }
155 |
156 | .label {
157 | border-radius: 0;
158 | }
159 |
160 | // Progress bars ==============================================================
161 |
162 | .progress {
163 | height: 8px;
164 | @include box-shadow(none);
165 | .progress-bar {
166 | font-size: 8px;
167 | line-height: 8px;
168 | }
169 | }
170 |
171 | // Containers =================================================================
172 |
173 | .panel-heading,
174 | .panel-footer {
175 | border-top-right-radius: 0;
176 | border-top-left-radius: 0;
177 | }
178 |
179 | .panel-default {
180 | .close {
181 | color: $text-color;
182 | }
183 | }
184 |
185 | .modal {
186 | .close {
187 | color: $text-color;
188 | }
189 | }
190 |
191 | .popover {
192 | color: $text-color;
193 | }
--------------------------------------------------------------------------------
/app/components/citizen-service-request/request-form.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/simplicity.http.js:
--------------------------------------------------------------------------------
1 | //All HTTP requests are routed this this module
2 | angular.module('simplicity.http', [])
3 | .factory('simplicityHttp', ['$http', '$q',
4 | function($http, $q){
5 |
6 | var simplicityHttp = {};
7 |
8 | //Makes a GET request to a url query params defined as key-value pairs in the options object
9 | simplicityHttp.get = function(url, options){
10 | //use $q promises to handle the http request asynchronously
11 | var q = $q.defer();
12 |
13 | //options.callback = 'JSON_CALLBACK';
14 | //make http request
15 | $http({method : 'GET', url : url, params : options, cache : true})
16 | //callbacks
17 | .success(function(data, status, headers, config){
18 | if(data.error){
19 | console.log(data.error.code + ' queryBackend on url ' + url + '. ' + data.error.message);
20 | }else{
21 | q.resolve(data);
22 | }
23 | })
24 | .error(function(error){
25 | console.log('Error querying feature service.');
26 | console.log(error);
27 | });
28 |
29 | //return the promise using q
30 | return q.promise;
31 | };//END queryBackend function
32 |
33 |
34 | //builds query params from a queryTemplate defined in a adapter file (eg. simplicity.arcgis.rest.api.adapter.js)
35 | //and an object of queryValues to inject into the queryTemplate
36 | simplicityHttp.buildQueryParams = function(queryTemplate, queryValues){
37 | var q = $q.defer();
38 | var sqlArray = [];
39 |
40 | for (var i = 0; i < queryTemplate.sqlArray.length; i++) {
41 |
42 | if(queryValues[queryTemplate.sqlArray[i]] !== undefined){
43 | sqlArray.push(queryValues[queryTemplate.sqlArray[i]]);
44 | }else{
45 | sqlArray.push(queryTemplate.sqlArray[i]);
46 | }
47 | }
48 |
49 | var sqlExpression = sqlArray.join('');
50 |
51 | var queryParams = queryTemplate.queryParams;
52 |
53 | queryParams[queryTemplate.sqlParamName] = sqlExpression;
54 |
55 | q.resolve(queryParams);
56 | return q.promise;
57 | };
58 |
59 | simplicityHttp.buildQueryParamsAndMakeGetRequest = function(queryTemplate, queryValues){
60 | var q = $q.defer();
61 | var sqlArray = [];
62 |
63 | for (var i = 0; i < queryTemplate.sqlArray.length; i++) {
64 |
65 | if(queryValues[queryTemplate.sqlArray[i]] !== undefined){
66 | sqlArray.push(queryValues[queryTemplate.sqlArray[i]]);
67 | }else{
68 | sqlArray.push(queryTemplate.sqlArray[i]);
69 | }
70 | }
71 |
72 | var sqlExpression = sqlArray.join('');
73 |
74 | var queryParams = queryTemplate.queryParams;
75 |
76 | queryParams[queryTemplate.sqlParamName] = sqlExpression;
77 |
78 | var url = 'http://arcgis-arcgisserver1-1222684815.us-east-1.elb.amazonaws.com/arcgis/rest/services/opendata/FeatureServer/0/query';
79 | $http({method : 'GET', url : url, params : queryParams, cache : true})
80 | //callbacks
81 | .success(function(data, status, headers, config){
82 | if(data.error){
83 | console.log(data.error.code + ' queryBackend on url ' + url + '. ' + data.error.message);
84 | }else{
85 |
86 | q.resolve(data);
87 | }
88 | })
89 | .error(function(error){
90 | console.log('Error querying feature service.');
91 | console.log(error);
92 | });
93 | return q.promise;
94 | };
95 |
96 |
97 | //****Return the factory object****//
98 | return simplicityHttp;
99 |
100 |
101 | }]); //END simplicityHttp factory function
--------------------------------------------------------------------------------
/app/components/topics/topic-components/zoning/zoning.factory.js:
--------------------------------------------------------------------------------
1 | simplicity.factory('Zoning', ['$q', '$stateParams', 'AddressCache', 'simplicityBackend', 'CODELINKS',
2 | function($q, $stateParams, AddressCache, simplicityBackend, CODELINKS){
3 |
4 | var Zoning = {};
5 |
6 | var topicProperties = {
7 | 'name' : 'zoning',
8 | 'title' : 'Zoning',
9 | 'plural' : 'zoning',
10 | 'searchForText' : 'an address',
11 | 'position' : 6,
12 | 'downloadable' : false,
13 | 'inTheCityOnly' : true,
14 | 'searchby' : {
15 | 'address' : {
16 | 'params' : {
17 | 'type' : null,
18 | 'timeframe' : null,
19 | 'extent' : null,
20 | 'view' : 'simple',
21 | 'validViews' : ['simple']
22 | },
23 | 'requiredParams' : [],
24 | 'headerTemplate' : 'topics/topic-headers/topic.header.at.html',
25 | }
26 | },
27 | 'views' : {
28 | 'simple' : {'label' : 'Simple View', 'template' : 'topics/topic-components/zoning/zoning.view.html'}
29 | },
30 | 'iconClass' : 'flaticon-map104',
31 | 'linkTopics' : ['property', 'crime', 'development'],
32 | 'questions' : {
33 | 'topic' : 'Do you want to know about a zoning?',
34 | 'address' : 'Do you want to know about the zoning at this address?'
35 | }
36 | };
37 |
38 | var formatZoningPropertyForAnAddress = function(){
39 | var addressCache = AddressCache.get();
40 | var pinnum2civicaddressid = AddressCache.pinnum2civicaddressid();
41 | var formattedZoningArray = [];
42 | if(addressCache.zoning){
43 | for (var z = 0; z < addressCache.zoning.length; z++) {
44 | var zoningDistrict = addressCache.zoning[z];
45 | if(CODELINKS[zoningDistrict] === undefined){
46 | formattedZoningArray.push({'zoningDistrict' : zoningDistrict, 'codelink' : 'disable'});
47 | }else{
48 | formattedZoningArray.push({'zoningDistrict' : zoningDistrict, 'codelink' : CODELINKS[zoningDistrict]});
49 | }
50 | }
51 | }
52 | return formattedZoningArray;
53 | };
54 |
55 | Zoning.build = function(){
56 | var q = $q.defer();
57 | var addressCache = AddressCache.get();
58 | var codelink;
59 | if(CODELINKS[addressCache.zoning] === undefined){
60 | codelink = 'disable';
61 | }else{
62 | codelink = CODELINKS[addressCache.zoning];
63 | }
64 | var geojson = {
65 | 'type' : 'FeatureCollection',
66 | 'summary' : {},
67 | 'searchGeojson' : addressCache.searchGeojson,
68 | 'features' : [{
69 | 'type' : 'Feature',
70 | 'properties' : {
71 | 'zoning' : formatZoningPropertyForAnAddress(),
72 | 'zoningOverlays' : addressCache.zoningOverlays,
73 | },
74 | 'geometry' : {
75 | 'type' : 'Point',
76 | 'coordinates' : [addressCache.searchGeojson.features[0].geometry.coordinates[0], addressCache.searchGeojson.features[0].geometry.coordinates[1]]
77 | }
78 | }]
79 | };
80 | if(addressCache.zoningOverlays){
81 | var zoningOverlaysSplit = addressCache.zoningOverlays.split('-');
82 | simplicityBackend.simplicityQuery('zoningOverlays', {'zoningOverlayName' : zoningOverlaysSplit[0]})
83 | .then(function(zoningOverlayLayer){
84 | geojson.overlays = zoningOverlayLayer;
85 | q.resolve(geojson);
86 | });
87 | }else{
88 | q.resolve(geojson);
89 | }
90 |
91 | return q.promise;
92 | };
93 |
94 | Zoning.getTopicProperties = function(){
95 | return topicProperties;
96 | };
97 |
98 | //****Return the factory object****//
99 | return Zoning;
100 |
101 |
102 | }]); //END Zoning factory function
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
--------------------------------------------------------------------------------
/app/assets/styles/_popovers.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Popovers
3 | // --------------------------------------------------
4 |
5 |
6 | .popover {
7 | position: absolute;
8 | top: 0;
9 | left: 0;
10 | z-index: $zindex-popover;
11 | display: none;
12 | max-width: $popover-max-width;
13 | padding: 1px;
14 | text-align: left; // Reset given new insertion method
15 | background-color: $popover-bg;
16 | background-clip: padding-box;
17 | border: 1px solid $popover-fallback-border-color;
18 | border: 1px solid $popover-border-color;
19 | border-radius: $border-radius-large;
20 | @include box-shadow(0 5px 10px rgba(0,0,0,.2));
21 |
22 | // Overrides for proper insertion
23 | white-space: normal;
24 |
25 | // Offset the popover to account for the popover arrow
26 | &.top { margin-top: -$popover-arrow-width; }
27 | &.right { margin-left: $popover-arrow-width; }
28 | &.bottom { margin-top: $popover-arrow-width; }
29 | &.left { margin-left: -$popover-arrow-width; }
30 | }
31 |
32 | .popover-title {
33 | margin: 0; // reset heading margin
34 | padding: 8px 14px;
35 | font-size: $font-size-base;
36 | font-weight: normal;
37 | line-height: 18px;
38 | background-color: $popover-title-bg;
39 | border-bottom: 1px solid darken($popover-title-bg, 5%);
40 | border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
41 | }
42 |
43 | .popover-content {
44 | padding: 9px 14px;
45 | }
46 |
47 | // Arrows
48 | //
49 | // .arrow is outer, .arrow:after is inner
50 |
51 | .popover > .arrow {
52 | &,
53 | &:after {
54 | position: absolute;
55 | display: block;
56 | width: 0;
57 | height: 0;
58 | border-color: transparent;
59 | border-style: solid;
60 | }
61 | }
62 | .popover > .arrow {
63 | border-width: $popover-arrow-outer-width;
64 | }
65 | .popover > .arrow:after {
66 | border-width: $popover-arrow-width;
67 | content: "";
68 | }
69 |
70 | .popover {
71 | &.top > .arrow {
72 | left: 50%;
73 | margin-left: -$popover-arrow-outer-width;
74 | border-bottom-width: 0;
75 | border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
76 | border-top-color: $popover-arrow-outer-color;
77 | bottom: -$popover-arrow-outer-width;
78 | &:after {
79 | content: " ";
80 | bottom: 1px;
81 | margin-left: -$popover-arrow-width;
82 | border-bottom-width: 0;
83 | border-top-color: $popover-arrow-color;
84 | }
85 | }
86 | &.right > .arrow {
87 | top: 50%;
88 | left: -$popover-arrow-outer-width;
89 | margin-top: -$popover-arrow-outer-width;
90 | border-left-width: 0;
91 | border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
92 | border-right-color: $popover-arrow-outer-color;
93 | &:after {
94 | content: " ";
95 | left: 1px;
96 | bottom: -$popover-arrow-width;
97 | border-left-width: 0;
98 | border-right-color: $popover-arrow-color;
99 | }
100 | }
101 | &.bottom > .arrow {
102 | left: 50%;
103 | margin-left: -$popover-arrow-outer-width;
104 | border-top-width: 0;
105 | border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
106 | border-bottom-color: $popover-arrow-outer-color;
107 | top: -$popover-arrow-outer-width;
108 | &:after {
109 | content: " ";
110 | top: 1px;
111 | margin-left: -$popover-arrow-width;
112 | border-top-width: 0;
113 | border-bottom-color: $popover-arrow-color;
114 | }
115 | }
116 |
117 | &.left > .arrow {
118 | top: 50%;
119 | right: -$popover-arrow-outer-width;
120 | margin-top: -$popover-arrow-outer-width;
121 | border-right-width: 0;
122 | border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
123 | border-left-color: $popover-arrow-outer-color;
124 | &:after {
125 | content: " ";
126 | right: 1px;
127 | border-right-width: 0;
128 | border-left-color: $popover-arrow-color;
129 | bottom: -$popover-arrow-width;
130 | }
131 | }
132 |
133 | }
134 |
--------------------------------------------------------------------------------
/app/assets/styles/_modals.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Modals
3 | // --------------------------------------------------
4 |
5 | // .modal-open - body class for killing the scroll
6 | // .modal - container to scroll within
7 | // .modal-dialog - positioning shell for the actual modal
8 | // .modal-content - actual modal w/ bg and corners and shit
9 |
10 | // Kill the scroll on the body
11 | .modal-open {
12 | overflow: hidden;
13 | }
14 |
15 | // Container that the modal scrolls within
16 | .modal {
17 | display: none;
18 | overflow: hidden;
19 | position: fixed;
20 | top: 0;
21 | right: 0;
22 | bottom: 0;
23 | left: 0;
24 | z-index: $zindex-modal;
25 | -webkit-overflow-scrolling: touch;
26 |
27 | // Prevent Chrome on Windows from adding a focus outline. For details, see
28 | // https://github.com/twbs/bootstrap/pull/10951.
29 | outline: 0;
30 |
31 | // When fading in the modal, animate it to slide down
32 | &.fade .modal-dialog {
33 | @include translate3d(0, -25%, 0);
34 | @include transition-transform(0.3s ease-out);
35 | }
36 | &.in .modal-dialog { @include translate3d(0, 0, 0) }
37 | }
38 | .modal-open .modal {
39 | overflow-x: hidden;
40 | overflow-y: auto;
41 | }
42 |
43 | // Shell div to position the modal with bottom padding
44 | .modal-dialog {
45 | position: relative;
46 | width: auto;
47 | margin: 10px;
48 | }
49 |
50 | // Actual modal
51 | .modal-content {
52 | position: relative;
53 | background-color: $modal-content-bg;
54 | border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
55 | border: 1px solid $modal-content-border-color;
56 | border-radius: $border-radius-large;
57 | @include box-shadow(0 3px 9px rgba(0,0,0,.5));
58 | background-clip: padding-box;
59 | // Remove focus outline from opened modal
60 | outline: 0;
61 | }
62 |
63 | // Modal background
64 | .modal-backdrop {
65 | position: fixed;
66 | top: 0;
67 | right: 0;
68 | bottom: 0;
69 | left: 0;
70 | z-index: $zindex-modal-background;
71 | background-color: $modal-backdrop-bg;
72 | // Fade for backdrop
73 | &.fade { @include opacity(0); }
74 | &.in { @include opacity($modal-backdrop-opacity); }
75 | }
76 |
77 | // Modal header
78 | // Top section of the modal w/ title and dismiss
79 | .modal-header {
80 | padding: $modal-title-padding;
81 | border-bottom: 1px solid $modal-header-border-color;
82 | min-height: ($modal-title-padding + $modal-title-line-height);
83 | }
84 | // Close icon
85 | .modal-header .close {
86 | margin-top: -2px;
87 | }
88 |
89 | // Title text within header
90 | .modal-title {
91 | margin: 0;
92 | line-height: $modal-title-line-height;
93 | }
94 |
95 | // Modal body
96 | // Where all modal content resides (sibling of .modal-header and .modal-footer)
97 | .modal-body {
98 | position: relative;
99 | padding: $modal-inner-padding;
100 | }
101 |
102 | // Footer (for actions)
103 | .modal-footer {
104 | padding: $modal-inner-padding;
105 | text-align: right; // right align buttons
106 | border-top: 1px solid $modal-footer-border-color;
107 | @include clearfix(); // clear it in case folks use .pull-* classes on buttons
108 |
109 | // Properly space out buttons
110 | .btn + .btn {
111 | margin-left: 5px;
112 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
113 | }
114 | // but override that for button groups
115 | .btn-group .btn + .btn {
116 | margin-left: -1px;
117 | }
118 | // and override it for block buttons as well
119 | .btn-block + .btn-block {
120 | margin-left: 0;
121 | }
122 | }
123 |
124 | // Measure scrollbar width for padding body during modal show/hide
125 | .modal-scrollbar-measure {
126 | position: absolute;
127 | top: -9999px;
128 | width: 50px;
129 | height: 50px;
130 | overflow: scroll;
131 | }
132 |
133 | // Scale up the modal
134 | @media (min-width: $screen-sm-min) {
135 | // Automatically set modal's width for larger viewports
136 | .modal-dialog {
137 | width: $modal-md;
138 | margin: 30px auto;
139 | }
140 | .modal-content {
141 | @include box-shadow(0 5px 15px rgba(0,0,0,.5));
142 | }
143 |
144 | // Modal sizes
145 | .modal-sm { width: $modal-sm; }
146 | }
147 |
148 | @media (min-width: $screen-md-min) {
149 | .modal-lg { width: $modal-lg; }
150 | }
151 |
--------------------------------------------------------------------------------
/app/assets/styles/_buttons.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Buttons
3 | // --------------------------------------------------
4 |
5 |
6 | // Base styles
7 | // --------------------------------------------------
8 |
9 | .btn {
10 | display: inline-block;
11 | margin-bottom: 0; // For input.btn
12 | font-weight: $btn-font-weight;
13 | text-align: center;
14 | vertical-align: middle;
15 | cursor: pointer;
16 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
17 | border: 1px solid transparent;
18 | white-space: nowrap;
19 | @include box-shadow(2px 2px 2px rgba(0,0,0,.3));
20 | @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base);
21 | @include user-select(none);
22 |
23 | &,
24 | &:active,
25 | &.active {
26 | &:focus {
27 | @include tab-focus();
28 | }
29 | }
30 |
31 | &:hover,
32 | &:focus {
33 | color: $btn-default-color;
34 | text-decoration: none;
35 | }
36 |
37 | &:active,
38 | &.active {
39 | outline: 0;
40 | background-image: none;
41 | @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
42 | }
43 |
44 | &.disabled,
45 | &[disabled],
46 | fieldset[disabled] & {
47 | cursor: not-allowed;
48 | pointer-events: none; // Future-proof disabling of clicks
49 | @include opacity(.65);
50 | @include box-shadow(none);
51 | }
52 | }
53 |
54 | // Alternate buttons
55 | // --------------------------------------------------
56 |
57 | .btn-default {
58 | @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
59 | }
60 | .btn-primary {
61 | @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
62 | }
63 | // Success appears as green
64 | .btn-success {
65 | @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
66 | }
67 | // Info appears as blue-green
68 | .btn-info {
69 | @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
70 | }
71 | // Warning appears as orange
72 | .btn-warning {
73 | @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
74 | }
75 | // Danger and error appear as red
76 | .btn-danger {
77 | @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
78 | }
79 |
80 |
81 | // Link buttons
82 | // -------------------------
83 |
84 | // Make a button look and behave like a link
85 | .btn-link {
86 | color: $link-color;
87 | font-weight: normal;
88 | cursor: pointer;
89 | border-radius: 0;
90 |
91 | &,
92 | &:active,
93 | &[disabled],
94 | fieldset[disabled] & {
95 | background-color: transparent;
96 | @include box-shadow(none);
97 | }
98 | &,
99 | &:hover,
100 | &:focus,
101 | &:active {
102 | border-color: transparent;
103 | }
104 | &:hover,
105 | &:focus {
106 | color: $link-hover-color;
107 | text-decoration: underline;
108 | background-color: transparent;
109 | }
110 | &[disabled],
111 | fieldset[disabled] & {
112 | &:hover,
113 | &:focus {
114 | color: $btn-link-disabled-color;
115 | text-decoration: none;
116 | }
117 | }
118 | }
119 |
120 |
121 | // Button Sizes
122 | // --------------------------------------------------
123 |
124 | .btn-lg {
125 | // line-height: ensure even-numbered height of button next to large input
126 | @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
127 | }
128 | .btn-sm {
129 | // line-height: ensure proper height of button next to small input
130 | @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
131 | }
132 | .btn-xs {
133 | @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $border-radius-small);
134 | }
135 |
136 |
137 | // Block button
138 | // --------------------------------------------------
139 |
140 | .btn-block {
141 | display: block;
142 | width: 100%;
143 | }
144 |
145 | // Vertically space out multiple block buttons
146 | .btn-block + .btn-block {
147 | margin-top: 5px;
148 | }
149 |
150 | // Specificity overrides
151 | input[type="submit"],
152 | input[type="reset"],
153 | input[type="button"] {
154 | &.btn-block {
155 | width: 100%;
156 | }
157 | }
158 |
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
SimpliCity
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/app/assets/styles/_flipping.scss:
--------------------------------------------------------------------------------
1 | #folder {
2 | padding: 10px;
3 |
4 | height: inherit;
5 | }
6 | .shadow{
7 | border-color: #dddddd;
8 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
9 | }
10 |
11 |
12 | .fold {
13 | padding: 10px;
14 | height: 80px;
15 | cursor: pointer;
16 | -webkit-transition: all .3s linear;
17 | -moz-transition: all .3s linear;
18 | -ms-transition: all .3s linear;
19 | transition: all .3s linear;
20 | }
21 |
22 | #toggle { display: none; }
23 |
24 |
25 | #toggle:checked ~ .fold:nth-child(odd) {
26 | margin-top: -85px;
27 | -webkit-transform: perspective(1000px) rotateX(-90deg);
28 | -moz-transform: perspective(1000px) rotateX(-90deg);
29 | -ms-transform: perspective(1000px) rotateX(-90deg);
30 | transform: perspective(1000px) rotateX(-90deg);
31 | }
32 |
33 | #toggle:checked ~ .fold:nth-child(even) {
34 | margin-top: -85px;
35 | -webkit-transform: perspective(1000px) rotateX(90deg);
36 | -moz-transform: perspective(1000px) rotateX(90deg);
37 | -ms-transform: perspective(1000px) rotateX(90deg);
38 | transform: perspective(1000px) rotateX(90deg);
39 | }
40 | .panel{
41 | margin-bottom: 0px
42 | }
43 |
44 | /*.card-container {
45 | height : 400px;
46 | position: relative;
47 | -webkit-perspective: 1000px;
48 | -moz-perspective: 1000px;
49 | -o-perspective: 1000px;
50 | perspective: 1000px;
51 | }
52 |
53 | #card {
54 | width: 100%;
55 | height: 100%;
56 | position: absolute;
57 | -webkit-transition: -webkit-transform 1s;
58 | -moz-transition: -moz-transform 1s;
59 | -o-transition: -o-transform 1s;
60 | transition: transform 1s;
61 | -webkit-transform-style: preserve-3d;
62 | -moz-transform-style: preserve-3d;
63 | -o-transform-style: preserve-3d;
64 | transform-style: preserve-3d;
65 | }
66 |
67 | .face {
68 | background: white;
69 | display: block;
70 | height: 100%;
71 | width: 100%;
72 | position: absolute;
73 | -webkit-backface-visibility: visible;
74 | -webkit-backface-visibility: hidden;
75 | -moz-backface-visibility: hidden;
76 | -o-backface-visibility: hidden;
77 | backface-visibility: hidden;
78 | }
79 |
80 | #card .back {
81 | height: 400px;
82 | background: white;
83 | -webkit-transform: rotateY( 180deg );
84 | -moz-transform: rotateY( 180deg );
85 | -o-transform: rotateY( 180deg );
86 | transform: rotateY( 180deg );
87 | }
88 |
89 | #card.flipped {
90 | -webkit-transform: rotateY( 180deg );
91 | -moz-transform: rotateY( 180deg );
92 | -o-transform: rotateY( 180deg );
93 | transform: rotateY( 180deg );
94 | }*/
95 |
96 | .flip {
97 | -webkit-perspective: 1000;
98 | -ms-perspective: 1000;
99 | -moz-perspective: 1000;
100 | -o-perspective: 1000;
101 | width: 100%;
102 |
103 | position: relative;
104 | }
105 | .flip .card.flipped {
106 | transform:rotatey(180deg);
107 | -ms-transform:rotatey(180deg); /* IE 9 */
108 | -moz-transform:rotatey(180deg); /* Firefox */
109 | -webkit-transform:rotatey(180deg); /* Safari and Chrome */
110 | -o-transform:rotatey(180deg); /* Opera */
111 | }
112 | .flip .card {
113 | width: 100%;
114 | height: 100%;
115 | -webkit-transform-style: preserve-3d;
116 | -webkit-transition: 0.5s;
117 | -moz-transform-style: preserve-3d;
118 | -moz-transition: 0.5s;
119 | -ms-transform-style: preserve-3d;
120 | -ms-transition: 0.5s;
121 | -o-transform-style: preserve-3d;
122 | -o-transition: 0.5s;
123 | transform-style: preserve-3d;
124 | transition: 0.5s;
125 | }
126 | .flip .card .face {
127 | width: 100%;
128 | height: 100%;
129 | backface-visibility: hidden; /* W3C */
130 | -webkit-backface-visibility: hidden; /* Safari & Chrome */
131 | -moz-backface-visibility: hidden; /* Firefox */
132 | -ms-backface-visibility: hidden; /* Internet Explorer */
133 | -o-backface-visibility: hidden; /* Opera */
134 |
135 | }
136 | .flip .card .front {
137 | position: absolute;
138 | z-index: 1;
139 | background: white;
140 | }
141 | .flip .card .back {
142 |
143 | z-index: 1;
144 | background: white;
145 | position: absolute;
146 |
147 | transform:rotatey(180deg);
148 | -ms-transform:rotatey(180deg); /* IE 9 */
149 | -moz-transform:rotatey(180deg); /* Firefox */
150 | -webkit-transform:rotatey(180deg); /* Safari and Chrome */
151 | -o-transform:rotatey(180deg); /* Opera */
152 |
153 | }
--------------------------------------------------------------------------------
/app/assets/styles/mixins/_gradients.scss:
--------------------------------------------------------------------------------
1 | // Gradients
2 |
3 |
4 |
5 | // Horizontal gradient, from left to right
6 | //
7 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
8 | // Color stops are not available in IE9 and below.
9 | @mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
10 | background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
11 | background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
12 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
13 | background-repeat: repeat-x;
14 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
15 | }
16 |
17 | // Vertical gradient, from top to bottom
18 | //
19 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
20 | // Color stops are not available in IE9 and below.
21 | @mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
22 | background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
23 | background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12
24 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
25 | background-repeat: repeat-x;
26 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
27 | }
28 |
29 | @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
30 | background-repeat: repeat-x;
31 | background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
32 | background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
33 | background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
34 | }
35 | @mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
36 | background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
37 | background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
38 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
39 | background-repeat: no-repeat;
40 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
41 | }
42 | @mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
43 | background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
44 | background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
45 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
46 | background-repeat: no-repeat;
47 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
48 | }
49 | @mixin gradient-radial($inner-color: #555, $outer-color: #333) {
50 | background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
51 | background-image: radial-gradient(circle, $inner-color, $outer-color);
52 | background-repeat: no-repeat;
53 | }
54 | @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
55 | background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
56 | background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
57 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
58 | }
59 |
--------------------------------------------------------------------------------
/test/unit/app.factory.mocha.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('app.factory.js', function(){
4 | var $scope;
5 | var AppFact;
6 |
7 | beforeEach(function(){
8 | module('simplicity');
9 |
10 | inject(function($rootScope, $injector) {
11 | $scope = $rootScope.$new();
12 | AppFact = $injector.get('AppFact');
13 | });
14 |
15 | });
16 |
17 | var locationProperties = {
18 | locationName : '123456',
19 | locationType : 'cai',
20 | inTheCity : true,
21 | address : '25 Howland Rd',
22 | city : 'Asheville',
23 | state : 'NC',
24 | zip : 28804
25 | };
26 | var caiQuestions = [
27 | {'question' : 'Do you want to know about crime?', 'category' : 'crime', 'detail' : 'within-quarter-mile'},
28 | {'question' : 'Do you want to know about this property?', 'category' : 'property', 'detail' : 'summary'},
29 | {'question' : 'Do you want to know about development?', 'category' : 'development', 'detail' : 'summary'},
30 | {'question' : 'Do you want to know about the owner?', 'category' : 'property', 'detail' : 'owner'},
31 | {'question' : 'Do you want to know about the zoning?', 'category' : 'property', 'detail' : 'zoning'},
32 | {'question' : 'Do you want to know about the trash collection?', 'category' : 'property', 'detail' : 'trash'}
33 | ];
34 |
35 | var timeOptions = [
36 | {'value' : 'last-6-months', 'label' : 'During the last 6 months'},
37 | {'value' : 'last-year', 'label' : 'During the last year'},
38 | {'value' : '2014', 'label' : 'During the year 2014'},
39 | {'value' : '2013', 'label' : 'During the year 2013'},
40 | {'value' : '2012', 'label' : 'During the year 2012'}
41 | ];
42 |
43 | var extentOptions = [
44 | {'value' : 'within-a-quarter-mile', 'label' : 'Within a quarter mile'},
45 | {'value' : 'within-a-half-mile', 'label' : 'Within a half mile'},
46 | {'value' : 'within-a-mile', 'label' : 'Within a mile'},
47 | {'value' : 'within-5-miles', 'label' : 'Within 5 miles'}
48 | ];
49 |
50 | var propertyFilterOptions = [
51 | {'value' : 'summary', 'label' : 'Property Summary'},
52 | {'value' : 'zoning', 'label' : 'Zoning'},
53 | {'value' : 'owner', 'label' : 'Owner'},
54 | {'value' : 'deed', 'label' : 'Deed'},
55 | {'value' : 'garbage', 'label' : 'Garbage Collection'},
56 | {'value' : 'recycling', 'label' : 'Recycling'},
57 | {'value' : 'leaf', 'label' : 'Leaf & Brush Collection'}
58 | ];
59 |
60 | var crimeFilterOptions = [
61 | {'value' : 'summary', 'label' : 'Crime Summary'},
62 | {'value' : 'aggravated-assault', 'label' : 'Aggravated Assaults'},
63 | {'value' : 'rape', 'label' : 'Rapes'},
64 | {'value' : 'vandalism', 'label' : 'Vandalism'},
65 | {'value' : 'larceny', 'label' : 'Larcenies'},
66 | {'value' : 'larceny-auto', 'label' : 'Larcenies (Auto)'},
67 | ];
68 |
69 | it('should set location properties', function(){
70 | AppFact.locationProperties(locationProperties);
71 | var theLocationPropertiesThatWereSet = AppFact.locationProperties();
72 | expect(theLocationPropertiesThatWereSet).to.eventually.equal(locationProperties);
73 | expect(theLocationPropertiesThatWereSet).to.eventually.have.property('locationName');
74 | });
75 |
76 |
77 | it('should get location properties', function() {
78 | var theLocationPropertiesFromAppFact= AppFact.locationProperties();
79 | expect(theLocationPropertiesFromAppFact).to.eventually.equal(locationProperties);
80 | expect(theLocationPropertiesFromAppFact).to.eventually.have.property('locationName');
81 | });
82 |
83 | it('should get questions for a civic address ID', function(){
84 | AppFact.locationProperties(locationProperties);
85 | var ciaQuestionsFromAppFact = AppFact.questions();
86 | expect(ciaQuestionsFromAppFact[0].question).to.equal(caiQuestions[0].question);
87 | });
88 |
89 | it('should set and get time options', function(){
90 | AppFact.timeOptions(timeOptions);
91 | var timeOptionsFromAppFact = AppFact.timeOptions();
92 | expect(timeOptionsFromAppFact[0].value).to.equal(timeOptions[0].value);
93 | });
94 |
95 | it('should set and get extent options', function(){
96 | AppFact.extentOptions(extentOptions);
97 | var extentOptionsFromAppFact = AppFact.extentOptions();
98 | expect(extentOptionsFromAppFact[0].value).to.equal(extentOptions[0].value);
99 | });
100 |
101 | it('should set and get propertyFilter options', function(){
102 | AppFact.propertyFilterOptions(propertyFilterOptions);
103 | var propertyFilterOptionsFromAppFact = AppFact.propertyFilterOptions();
104 | expect(propertyFilterOptionsFromAppFact[0].value).to.equal(propertyFilterOptions[0].value);
105 | });
106 |
107 | it('should set and get crimeFilter options', function(){
108 | AppFact.filterOptions(crimeFilterOptions);
109 | var crimeFilterOptionsFromAppFact = AppFact.filterOptions();
110 | expect(crimeFilterOptionsFromAppFact[0].value).to.equal(crimeFilterOptions[0].value);
111 | });
112 |
113 |
114 |
115 | });
--------------------------------------------------------------------------------
/app/assets/styles/_input-groups.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Input groups
3 | // --------------------------------------------------
4 |
5 | // Base styles
6 | // -------------------------
7 | .input-group {
8 | position: relative; // For dropdowns
9 | display: table;
10 | border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
11 |
12 | // Undo padding and float of grid classes
13 | &[class*="col-"] {
14 | float: none;
15 | padding-left: 0;
16 | padding-right: 0;
17 | }
18 |
19 | .form-control {
20 | // Ensure that the input is always above the *appended* addon button for
21 | // proper border colors.
22 | position: relative;
23 | z-index: 2;
24 |
25 | // IE9 fubars the placeholder attribute in text inputs and the arrows on
26 | // select elements in input groups. To fix it, we float the input. Details:
27 | // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
28 | float: left;
29 |
30 | width: 100%;
31 | margin-bottom: 0;
32 | }
33 | }
34 |
35 | // Sizing options
36 | //
37 | // Remix the default form control sizing classes into new ones for easier
38 | // manipulation.
39 |
40 | .input-group-lg > .form-control,
41 | .input-group-lg > .input-group-addon,
42 | .input-group-lg > .input-group-btn > .btn {
43 | @extend .input-lg;
44 | }
45 | .input-group-sm > .form-control,
46 | .input-group-sm > .input-group-addon,
47 | .input-group-sm > .input-group-btn > .btn {
48 | @extend .input-sm;
49 | }
50 |
51 |
52 | // Display as table-cell
53 | // -------------------------
54 | .input-group-addon,
55 | .input-group-btn,
56 | .input-group .form-control {
57 | display: table-cell;
58 |
59 | &:not(:first-child):not(:last-child) {
60 | border-radius: 0;
61 | }
62 | }
63 | // Addon and addon wrapper for buttons
64 | .input-group-addon,
65 | .input-group-btn {
66 | width: 1%;
67 | white-space: nowrap;
68 | vertical-align: middle; // Match the inputs
69 | }
70 |
71 | // Text input groups
72 | // -------------------------
73 | .input-group-addon {
74 | padding: $padding-base-vertical $padding-base-horizontal;
75 | font-size: $font-size-base;
76 | font-weight: normal;
77 | line-height: 1;
78 | color: $input-color;
79 | text-align: center;
80 | background-color: $input-group-addon-bg;
81 | border: 1px solid $input-group-addon-border-color;
82 | border-radius: $border-radius-base;
83 |
84 | // Sizing
85 | &.input-sm {
86 | padding: $padding-small-vertical $padding-small-horizontal;
87 | font-size: $font-size-small;
88 | border-radius: $border-radius-small;
89 | }
90 | &.input-lg {
91 | padding: $padding-large-vertical $padding-large-horizontal;
92 | font-size: $font-size-large;
93 | border-radius: $border-radius-large;
94 | }
95 |
96 | // Nuke default margins from checkboxes and radios to vertically center within.
97 | input[type="radio"],
98 | input[type="checkbox"] {
99 | margin-top: 0;
100 | }
101 | }
102 |
103 | // Reset rounded corners
104 | .input-group .form-control:first-child,
105 | .input-group-addon:first-child,
106 | .input-group-btn:first-child > .btn,
107 | .input-group-btn:first-child > .btn-group > .btn,
108 | .input-group-btn:first-child > .dropdown-toggle,
109 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
110 | .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
111 | @include border-right-radius(0);
112 | }
113 | .input-group-addon:first-child {
114 | border-right: 0;
115 | }
116 | .input-group .form-control:last-child,
117 | .input-group-addon:last-child,
118 | .input-group-btn:last-child > .btn,
119 | .input-group-btn:last-child > .btn-group > .btn,
120 | .input-group-btn:last-child > .dropdown-toggle,
121 | .input-group-btn:first-child > .btn:not(:first-child),
122 | .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
123 | @include border-left-radius(0);
124 | }
125 | .input-group-addon:last-child {
126 | border-left: 0;
127 | }
128 |
129 | // Button input groups
130 | // -------------------------
131 | .input-group-btn {
132 | position: relative;
133 | // Jankily prevent input button groups from wrapping with `white-space` and
134 | // `font-size` in combination with `inline-block` on buttons.
135 | font-size: 0;
136 | white-space: nowrap;
137 |
138 | // Negative margin for spacing, position for bringing hovered/focused/actived
139 | // element above the siblings.
140 | > .btn {
141 | position: relative;
142 | + .btn {
143 | margin-left: -1px;
144 | }
145 | // Bring the "active" button to the front
146 | &:hover,
147 | &:focus,
148 | &:active {
149 | z-index: 2;
150 | }
151 | }
152 |
153 | // Negative margin to only have a 1px border between the two
154 | &:first-child {
155 | > .btn,
156 | > .btn-group {
157 | margin-right: -1px;
158 | }
159 | }
160 | &:last-child {
161 | > .btn,
162 | > .btn-group {
163 | margin-left: -1px;
164 | }
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/app/components/search/search.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Discover city data about {{discoverText}} in your community.
5 |
Search for {{searchFor}} to get started!
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
{{errorMessage.message}}
21 |
{{helperMessage.message}}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | {{group.label}}
33 | {{group.results.length}}
34 | 
35 |
36 |
50 |
60 |
61 |
62 |
{{errorMessage.message}}
63 |
64 |
65 |
Check out SimpliCity in action below...
66 |
67 |
68 |
69 |
70 |
71 |
72 |
75 |
84 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/app/components/topics/topic-components/address-list/address.list.factory.js:
--------------------------------------------------------------------------------
1 | simplicity.factory('AddressList', ['$q', '$stateParams', 'AddressCache', 'simplicityBackend', 'COLORS',
2 | function($q, $stateParams, AddressCache, simplicityBackend, COLORS){
3 |
4 | var AddressList = {};
5 |
6 | var topicProperties = {
7 | 'name' : 'addresslist',
8 | 'title' : 'Address List',
9 | 'plural' : 'address lists',
10 | 'searchForText' : 'a street or a neighborhood',
11 | 'position' : 8,
12 | 'downloadable' : true,
13 | 'inTheCityOnly' : false,
14 | 'searchby' : {
15 | 'street_name' : {
16 | 'params' : {
17 | 'type' : null,
18 | 'timeframe' : null,
19 | 'extent' : 82.5,
20 | 'view' : 'list',
21 | 'validViews' : ['list', 'map']
22 | },
23 | 'prepositions' : {
24 | 'searchby' : 'along',
25 | },
26 | 'requiredParams' : [],
27 | 'headerTemplate' : 'topics/topic-headers/topic.header.along.html',
28 | },
29 | 'neighborhood' : {
30 | 'params' : {
31 | 'type' : null,
32 | 'timeframe' : null,
33 | 'extent' : null,
34 | 'view' : 'list',
35 | 'validViews' : ['list', 'map']
36 | },
37 | 'prepositions' : {
38 | 'searchby' : 'in',
39 | },
40 | 'requiredParams' : [],
41 | 'headerTemplate' : 'topics/topic-headers/topic.header.in.html',
42 | }
43 | },
44 | 'views' : {
45 | 'map' : {'label' : 'Map View', 'template' : null},
46 | 'list' : {'label' : 'List View', 'template' : 'topics/topic-components/address-list/address-list.view.html'},
47 | },
48 | 'simpleViewTemplate' : null,
49 | 'detailsViewTemplate' : null,
50 | 'tableViewTemplate' : 'topics/topic-components/address-list/address-list.table.view.html',
51 | 'listViewTemplate' : 'topics/topic-components/address-list/address-list.view.html',
52 | 'defaultView' : 'simple',
53 | 'iconClass' : 'flaticon-purchase1',
54 | 'linkTopics' : ['property'],
55 | 'questions' : {
56 | 'topic' : 'Do you want a list of addresses?',
57 | 'street_name' : 'Do you want a list of addresses along this street?',
58 | 'neighborhood' : 'Do you want a list of addresses in this neighborhood?'
59 | }
60 | };
61 |
62 | AddressList.build = function(){
63 | var q = $q.defer();
64 |
65 | var addressCache = AddressCache.get();
66 | var civicaddressIdArray = AddressCache.civicaddressIdArray();
67 |
68 | if($stateParams.searchby === "street_name"){
69 | simplicityBackend.simplicityQuery('addresses', {'civicaddressIds' : civicaddressIdArray.join(',')})
70 | .then(function(addressResults){
71 | var addressFeaturesArray = [];
72 | for (var i = 0; i < addressResults.features.length; i++) {
73 | if(addressCache.inTheCity[addressResults.features[i].properties.civicaddress_id]){
74 | addressResults.features[i].properties.isincity = addressCache.inTheCity[addressResults.features[i].properties.civicaddress_id];
75 | }else{
76 | addressResults.features[i].properties.isincity = false;
77 | }
78 |
79 | addressResults.features[i].properties.color = '035096';
80 |
81 | addressFeaturesArray.push(addressResults.features[i]);
82 | }
83 | var geojson = {
84 | 'type' : 'FeatureCollection',
85 | 'summary' : {},
86 | 'searchGeojson' : addressCache.searchGeojson,
87 | 'features' : addressFeaturesArray
88 | };
89 | q.resolve(geojson);
90 | });
91 | }else if($stateParams.searchby === "neighborhood"){
92 | simplicityBackend.simplicityQuery('addresses', {'neighborhoodName' : $stateParams.id })
93 | .then(function(addressResults){
94 | var addressFeaturesArray = [];
95 | for (var i = 0; i < addressResults.features.length; i++) {
96 | addressResults.features[i].properties.color = '035096';
97 | addressFeaturesArray.push(addressResults.features[i]);
98 | }
99 | var geojson = {
100 | 'type' : 'FeatureCollection',
101 | 'summary' : {},
102 | 'searchGeojson' : addressCache.searchGeojson,
103 | 'features' : addressFeaturesArray
104 | };
105 | q.resolve(geojson);
106 | });
107 | }
108 |
109 | return q.promise;
110 | };
111 |
112 | AddressList.getTopicProperties = function(){
113 | return topicProperties;
114 | };
115 |
116 | //****Return the factory object****//
117 | return AddressList;
118 |
119 |
120 | }]); //END AddressList factory function
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
--------------------------------------------------------------------------------
/app/assets/styles/_responsive-utilities.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Responsive: Utility classes
3 | // --------------------------------------------------
4 |
5 |
6 | // IE10 in Windows (Phone) 8
7 | //
8 | // Support for responsive views via media queries is kind of borked in IE10, for
9 | // Surface/desktop in split view and for Windows Phone 8. This particular fix
10 | // must be accompanied by a snippet of JavaScript to sniff the user agent and
11 | // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
12 | // our Getting Started page for more information on this bug.
13 | //
14 | // For more information, see the following:
15 | //
16 | // Issue: https://github.com/twbs/bootstrap/issues/10497
17 | // Docs: http://getbootstrap.com/getting-started/#support-ie10-width
18 | // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
19 | // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
20 |
21 | @-ms-viewport {
22 | width: device-width;
23 | }
24 |
25 |
26 | // Visibility utilities
27 | // Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
28 |
29 | @include responsive-invisibility('.visible-xs, .visible-sm, .visible-md, .visible-lg');
30 |
31 | .visible-xs-block,
32 | .visible-xs-inline,
33 | .visible-xs-inline-block,
34 | .visible-sm-block,
35 | .visible-sm-inline,
36 | .visible-sm-inline-block,
37 | .visible-md-block,
38 | .visible-md-inline,
39 | .visible-md-inline-block,
40 | .visible-lg-block,
41 | .visible-lg-inline,
42 | .visible-lg-inline-block {
43 | display: none !important;
44 | }
45 |
46 | @media (max-width: $screen-xs-max) {
47 | @include responsive-visibility('.visible-xs');
48 | }
49 | .visible-xs-block {
50 | @media (max-width: $screen-xs-max) {
51 | display: block !important;
52 | }
53 | }
54 | .visible-xs-inline {
55 | @media (max-width: $screen-xs-max) {
56 | display: inline !important;
57 | }
58 | }
59 | .visible-xs-inline-block {
60 | @media (max-width: $screen-xs-max) {
61 | display: inline-block !important;
62 | }
63 | }
64 |
65 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
66 | @include responsive-visibility('.visible-sm');
67 | }
68 | .visible-sm-block {
69 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
70 | display: block !important;
71 | }
72 | }
73 | .visible-sm-inline {
74 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
75 | display: inline !important;
76 | }
77 | }
78 | .visible-sm-inline-block {
79 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
80 | display: inline-block !important;
81 | }
82 | }
83 |
84 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
85 | @include responsive-visibility('.visible-md');
86 | }
87 | .visible-md-block {
88 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
89 | display: block !important;
90 | }
91 | }
92 | .visible-md-inline {
93 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
94 | display: inline !important;
95 | }
96 | }
97 | .visible-md-inline-block {
98 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
99 | display: inline-block !important;
100 | }
101 | }
102 |
103 | @media (min-width: $screen-lg-min) {
104 | @include responsive-visibility('.visible-lg');
105 | }
106 | .visible-lg-block {
107 | @media (min-width: $screen-lg-min) {
108 | display: block !important;
109 | }
110 | }
111 | .visible-lg-inline {
112 | @media (min-width: $screen-lg-min) {
113 | display: inline !important;
114 | }
115 | }
116 | .visible-lg-inline-block {
117 | @media (min-width: $screen-lg-min) {
118 | display: inline-block !important;
119 | }
120 | }
121 |
122 | @media (max-width: $screen-xs-max) {
123 | @include responsive-invisibility('.hidden-xs');
124 | }
125 |
126 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
127 | @include responsive-invisibility('.hidden-sm');
128 | }
129 |
130 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
131 | @include responsive-invisibility('.hidden-md');
132 | }
133 |
134 | @media (min-width: $screen-lg-min) {
135 | @include responsive-invisibility('.hidden-lg');
136 | }
137 |
138 |
139 | // Print utilities
140 | //
141 | // Media queries are placed on the inside to be mixin-friendly.
142 |
143 | // Note: Deprecated .visible-print as of v3.2.0
144 |
145 | @include responsive-invisibility('.visible-print');
146 |
147 | @media print {
148 | @include responsive-visibility('.visible-print');
149 | }
150 | .visible-print-block {
151 | display: none !important;
152 |
153 | @media print {
154 | display: block !important;
155 | }
156 | }
157 | .visible-print-inline {
158 | display: none !important;
159 |
160 | @media print {
161 | display: inline !important;
162 | }
163 | }
164 | .visible-print-inline-block {
165 | display: none !important;
166 |
167 | @media print {
168 | display: inline-block !important;
169 | }
170 | }
171 |
172 | @media print {
173 | @include responsive-invisibility('.hidden-print');
174 | }
175 |
--------------------------------------------------------------------------------
/app/components/search/search.controller.js:
--------------------------------------------------------------------------------
1 | simplicity.controller('SearchCtrl', ['$scope', '$stateParams', '$state', '$timeout', 'simplicityBackend', 'Topics',
2 | function ($scope, $stateParams, $state, $timeout, simplicityBackend, Topics) {
3 | var getType = function(unformattedType){
4 | var nameKey = {
5 | 'street_name' : 'street',
6 | 'address' : 'address',
7 | 'neighborhood' : 'neighborhood',
8 | 'owner_name' : 'owner',
9 | 'civicaddressid' : 'address',
10 | 'pinnum' : 'pin'
11 | };
12 | return nameKey[unformattedType];
13 | };
14 |
15 | $('#searchContent').css({'minHeight' : $(window).height()});
16 |
17 | $("#addressSearch").focus();
18 | $scope.searchText = '';
19 |
20 | $scope.errorMessage = {
21 | show : false,
22 | message : 'We had trouble locating that location. Please try to enter a location again.'
23 | };
24 | $scope.helperMessage = {
25 | show : false,
26 | message : 'Please choose one of the options below.'
27 | };
28 |
29 | $scope.discoverText = "places";
30 | $scope.searchFor = "an address, street, neighborhood, or property";
31 |
32 | var topicProperties = {};
33 |
34 | $scope.showTopicsLink = true;
35 |
36 | //if a topic is defined we want to show topic specific text
37 | if($stateParams.topic !== null){
38 | topicProperties = Topics.topicProperties();
39 | $scope.showTopicsLink = false;
40 | $scope.discoverText = topicProperties.plural;
41 | $scope.searchFor = topicProperties.searchForText;
42 | }
43 |
44 |
45 |
46 | //Geocodes the search results
47 | $scope.doSearch = function(searchText, event){
48 | var offset = $('#inputSearch').offset().top - 20;
49 | $("html, body").animate({'scrollTop' : offset + "px"});
50 | //we don't want to start search until the user has input 3 characters
51 | if(searchText.length < 3){
52 | $scope.searchGroups = [];
53 | return;
54 | }
55 |
56 | //if the user hits enter while after text search text
57 | //show a message that tells them to click on one of the results below
58 | if(event.keyCode === 13 && searchText !== ''){
59 | $scope.helperMessage.show = true;
60 | $timeout(function() {
61 | $scope.helperMessage.show = false;
62 | }, 2000);
63 | }
64 |
65 |
66 |
67 | //Search usign searchText
68 | simplicityBackend.simplicitySearch(searchText)
69 | .then(function(searchResults){
70 | if(searchText === ""){
71 | $scope.searchGroups = [];
72 | }else{
73 | if(searchResults.length !== 0){
74 | if($stateParams.topic !== null){
75 | for (var i = searchResults.length - 1; i >= 0; i--) {
76 |
77 | if(topicProperties.searchby[searchResults[i].name] === undefined){
78 | searchResults.splice(i, 1);
79 | }
80 | }
81 | $scope.searchGroups = searchResults;
82 | }else{
83 | $scope.searchGroups = searchResults;
84 | }
85 |
86 | }
87 | }
88 | });
89 | };
90 |
91 | $scope.unFocus = function(){
92 | $timeout(function() {
93 | $scope.searchGroups = [];
94 | }, 100);
95 | };
96 |
97 |
98 |
99 |
100 |
101 | $scope.detailedSelection = [];
102 |
103 | //groupOrderArray.splice(groupOrderPosition, 0, data.candidates[i].attributes.Loc_name);
104 |
105 | $scope.goToTopics = function(candidate, event){
106 | var label = "";
107 | for (var i = 0; i < candidate.label.length; i++) {
108 | if(candidate.label.charAt(i) === '&'){
109 | label = label + 'AND';
110 | }else{
111 | label = label + candidate.label.charAt(i);
112 | }
113 | }
114 | if(candidate.type === 'civicaddressid'){
115 | candidate.type = "address";
116 | }
117 | if($stateParams.topic !== null){
118 | if(candidate.googleResult === true){
119 | simplicityBackend.simplicityFindGoogleAddress(candidate)
120 | .then(function(addressResults){
121 | $state.go('main.topics.topic', {'topic' : $stateParams.topic, 'searchtext' : addressResults.label, 'searchby' : addressResults.type, 'id' : addressResults.id});
122 | });
123 | }else{
124 | $state.go('main.topics.topic', {'topic' : $stateParams.topic, 'searchtext' : label, 'searchby' : candidate.type, 'id' : candidate.id});
125 | }
126 | }else{
127 | if(candidate.googleResult === true){
128 | simplicityBackend.simplicityFindGoogleAddress(candidate)
129 | .then(function(addressResults){
130 | $state.go('main.topics.list', {'searchtext' : addressResults.label, 'searchby' : addressResults.type, 'id' : addressResults.id});
131 | });
132 |
133 | }else{
134 | $state.go('main.topics.list', {'searchtext' : label, 'searchby' : candidate.type, 'id' : candidate.id});
135 | }
136 | }
137 |
138 | };
139 |
140 |
141 |
142 |
143 | }]);
--------------------------------------------------------------------------------
13 |
14 |
15 |