diff --git a/css/_mixins.scss b/css/_mixins.scss index c0ea9b2d..588287de 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -92,7 +92,14 @@ } } - +@mixin button () { + .button { + background:none; + border:none; + margin:0; + padding:0; + } +} /* Images & icons */ @mixin icon_display () { background-repeat: no-repeat; diff --git a/css/_vars.scss b/css/_vars.scss index dd99a792..7f6604b0 100644 --- a/css/_vars.scss +++ b/css/_vars.scss @@ -8,8 +8,8 @@ $color--neutral-bg: #f5f5f5; /* Popup */ $popup__width: 270px; -$popup__height: 505px; -$popup__height--moz: 520px; +$popup__height: 540px; +$popup__height--moz: 540px; /* Cards */ $card__bg-color: $white; diff --git a/css/trackers.scss b/css/trackers.scss index 2bee6fee..9c81ed50 100644 --- a/css/trackers.scss +++ b/css/trackers.scss @@ -255,6 +255,20 @@ body { margin-top: 5px; } } + + .site-info__li--report { + height: 24.5px; + + .site-info__report-text { + font-weight: bold; + margin-top: 3.5px; + display: inline-block; + } + + .pull-right { + margin-top: 5px; + } + } } .linkable { @@ -372,7 +386,7 @@ body { /* Generic toggle button styling */ @include toggle_button(); - +@include button(); /* Sliding subviews */ @include sliding_subview(); diff --git a/js/ui/templates/shared/button.js b/js/ui/templates/shared/button.js new file mode 100644 index 00000000..93c1bb67 --- /dev/null +++ b/js/ui/templates/shared/button.js @@ -0,0 +1,11 @@ +const bel = require('bel'); + +module.exports = function (site, text, klass) { + + return bel` + `; +} + diff --git a/js/ui/templates/site.es6.js b/js/ui/templates/site.es6.js index 253d9980..c680e98b 100644 --- a/js/ui/templates/site.es6.js +++ b/js/ui/templates/site.es6.js @@ -1,5 +1,6 @@ const bel = require('bel'); const toggleButton = require('./shared/toggle-button'); +const Button = require('./shared/button'); module.exports = function () { @@ -32,6 +33,10 @@ module.exports = function () { ${this.model.whitelistStatusText} ${toggleButton(!this.model.isWhitelisted, 'js-site-toggle pull-right')} +
  • + ${Button(this.model.domain, 'Report Broken Site', 'button site-info__report-text js-site-report')} + +
  • `; diff --git a/js/ui/views/site.es6.js b/js/ui/views/site.es6.js index aeb38604..602885a7 100644 --- a/js/ui/views/site.es6.js +++ b/js/ui/views/site.es6.js @@ -43,12 +43,14 @@ Site.prototype = $.extend({}, this._cacheElems('.js-site', [ 'toggle', - 'show-all-trackers' + 'show-all-trackers', + 'report' ]); this.bindEvents([ [this.$toggle, 'click', this._whitelistClick], - [this.$showalltrackers, 'click', this._showAllTrackers] + [this.$showalltrackers, 'click', this._showAllTrackers], + [this.$report, 'click', this._reportSiteClick] ]); }, @@ -76,6 +78,11 @@ Site.prototype = $.extend({}, }); }, + _reportSiteClick: function() { + let reportURL = "https://www.surveymonkey.com/r/V6L5ZY2?url=" + chrome.tabs.create({url: reportURL + this.model.domain}) + }, + _whitelistClick: function (e) { this.model.toggleWhitelist(); console.log('isWhitelisted: ', this.model.isWhitelisted);