From b3b9175135ff39c35fc3185e5c972baf72f2409e Mon Sep 17 00:00:00 2001 From: Philip Eichinski Date: Fri, 15 Dec 2017 13:04:56 +1000 Subject: [PATCH 1/3] feat(csLabels): added tick on thumb to show if selected. Refactored how selected status is bound --- .../citizenScience/bristlebird/bristlebird.js | 21 -------------- .../datasetProgress/datasetProgress.js | 5 ++-- .../dummyApi/citizenScienceSampleLabels.js | 23 +++++++++++++-- .../citizenScience/textLabels/labelCheck.js | 7 ++--- .../textLabels/labelCheck.tpl.html | 2 +- .../citizenScience/thumbLabels/_thumbs.scss | 14 ++++++--- .../citizenScience/thumbLabels/examples.js | 1 - src/app/citizenScience/thumbLabels/label.js | 29 +++++++++++-------- .../citizenScience/thumbLabels/label.tpl.html | 11 +++++-- src/app/citizenScience/thumbLabels/labels.js | 14 +-------- 10 files changed, 64 insertions(+), 63 deletions(-) diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js index 9fd466cf..3837f244 100644 --- a/src/app/citizenScience/bristlebird/bristlebird.js +++ b/src/app/citizenScience/bristlebird/bristlebird.js @@ -100,33 +100,12 @@ class BristlebirdController { this.showAudio = CitizenScienceCommon.bindShowAudio($scope); - - CsApi.getLabels($scope.csProject).then(function (labels) { $scope.labels = labels; }); SampleLabels.init($scope.csProject, $scope.samples, $scope.labels); - - $scope.$on("label-toggle", function (e, labelNumber, value) { - self.toggleLabel(labelNumber, value); - }); - - /** - * applies or removes the tag-sets of the given label number - * to the current sample - * @param labelNumber - * @param value boolean if omitted will flip the current value - */ - self.toggleLabel = function (labelId, value) { - console.log("toggling label ", labelId, value); - if (typeof value !== "boolean") { - value = !SampleLabels.getValue($scope.currentSample.id, labelId); - } - SampleLabels.setValue($scope.currentSample.id, labelId, value); - }; - /** * Retrieve settings about this citizen science project */ diff --git a/src/app/citizenScience/datasetProgress/datasetProgress.js b/src/app/citizenScience/datasetProgress/datasetProgress.js index 919c8419..346d1814 100644 --- a/src/app/citizenScience/datasetProgress/datasetProgress.js +++ b/src/app/citizenScience/datasetProgress/datasetProgress.js @@ -9,11 +9,12 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csApiMock"] console.log("selecting item", itemId); CsApi.getSample(itemId).then(function (apiResponse) { self.currentSample = apiResponse; + SampleLabels.registerCurrentSampleId(self.currentSample.id); + $scope.totalSamplesViewed = SampleLabels.getNumSamplesViewed(); + console.log("setting selected to ", itemId); }); - $scope.totalSamplesViewed = SampleLabels.getNumSamplesViewed(); - console.log("setting selected to ", itemId); }; $scope.selectItem($routeParams.sampleNum); diff --git a/src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js b/src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js index 2c81dca0..a89eec28 100644 --- a/src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js +++ b/src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js @@ -45,6 +45,8 @@ sampleLabels.factory("SampleLabels", [ }; + self.currentSampleId = 0; + /** * stringifies the object that acts as a join between samples and labels, * then stores that json string in local storage @@ -76,12 +78,16 @@ sampleLabels.factory("SampleLabels", [ /** * Looks up the data to see if there is a boolean value stored for a given sampleId and labelId * and if so, returns it. - * @param sampleId + * @param sampleId. If omitted, will use the current sample if available * @param labelId * @returns {boolean} */ getValue : function (sampleId, labelId) { + if (sampleId === null) { + sampleId = self.currentSampleId; + } + if (self.data[sampleId] !== undefined) { if (self.data[sampleId][labelId] !== undefined) { return self.data[sampleId][labelId].value; @@ -98,11 +104,20 @@ sampleLabels.factory("SampleLabels", [ */ setValue : function (sampleId, labelId, value) { + + if (sampleId === null) { + sampleId = self.currentSampleId; + } + + if (sampleId <= 0) { + console.warn("bad sampleId supplied"); + return; + } + if (self.data[sampleId] === undefined) { self.data[sampleId] = {}; } - if (labelId !== undefined) { if (self.data[sampleId][labelId] === undefined) { @@ -150,6 +165,10 @@ sampleLabels.factory("SampleLabels", [ }, + registerCurrentSampleId : function (currentSampleId) { + self.currentSampleId = currentSampleId; + }, + /** * Dev function to delete all applied labels */ diff --git a/src/app/citizenScience/textLabels/labelCheck.js b/src/app/citizenScience/textLabels/labelCheck.js index 012b4ebb..b8c1f037 100644 --- a/src/app/citizenScience/textLabels/labelCheck.js +++ b/src/app/citizenScience/textLabels/labelCheck.js @@ -13,14 +13,13 @@ angular.module("bawApp.components.citizenScienceLabelCheck", ["bawApp.citizenSci * @param label string */ $scope.toggleLabel = function () { - self.checked.value = !self.checked.value; - self.onToggleSelected(self.checked.value); + self.onToggleSelected(!self.isChecked()); }; }], bindings: { - checked: "=", + isChecked: "=", onToggleSelected: "=", - text:"<" + text:"<", } }); \ No newline at end of file diff --git a/src/app/citizenScience/textLabels/labelCheck.tpl.html b/src/app/citizenScience/textLabels/labelCheck.tpl.html index 98dcdf1c..e78a7ebc 100644 --- a/src/app/citizenScience/textLabels/labelCheck.tpl.html +++ b/src/app/citizenScience/textLabels/labelCheck.tpl.html @@ -2,7 +2,7 @@ {{$ctrl.text}} diff --git a/src/app/citizenScience/thumbLabels/_thumbs.scss b/src/app/citizenScience/thumbLabels/_thumbs.scss index 98859971..6e3ffa88 100644 --- a/src/app/citizenScience/thumbLabels/_thumbs.scss +++ b/src/app/citizenScience/thumbLabels/_thumbs.scss @@ -18,15 +18,13 @@ $triangle: ' +
+ + + + {{$ctrl.label.name}}
diff --git a/src/app/citizenScience/thumbLabels/labels.js b/src/app/citizenScience/thumbLabels/labels.js index b6e40f76..b931e4d7 100644 --- a/src/app/citizenScience/thumbLabels/labels.js +++ b/src/app/citizenScience/thumbLabels/labels.js @@ -16,23 +16,14 @@ angular.module("bawApp.components.citizenScienceThumbLabels", $http, CitizenScienceCommon, libraryCommon, - AudioEventService, - AudioEvent, - $q) { + AudioEventService) { var self = this; - $scope.currentDetailsLabelId = {value: -1}; $scope.examplesPosition = "0px"; - $scope.$on("update-selected-labels", function (e, sampleNum) { - - - }); - - $scope.$watch(function () { return self.labels; }, function (newVal, oldVal) { @@ -100,13 +91,10 @@ angular.module("bawApp.components.citizenScienceThumbLabels", console.log(self.labels); - }, function (httpResponse) { console.error("Failed to load citizen science example item response.", httpResponse); }); - }; - }], bindings: { labels: "=", From bb302f27fcba9282d7b24743aae9fec695144994 Mon Sep 17 00:00:00 2001 From: Philip Eichinski Date: Fri, 15 Dec 2017 13:08:38 +1000 Subject: [PATCH 2/3] chore(csLabels): tidy up code --- src/app/citizenScience/datasetProgress/datasetProgress.js | 2 -- src/app/citizenScience/thumbLabels/label.js | 8 +------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/app/citizenScience/datasetProgress/datasetProgress.js b/src/app/citizenScience/datasetProgress/datasetProgress.js index 346d1814..22e9c7c8 100644 --- a/src/app/citizenScience/datasetProgress/datasetProgress.js +++ b/src/app/citizenScience/datasetProgress/datasetProgress.js @@ -13,8 +13,6 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csApiMock"] $scope.totalSamplesViewed = SampleLabels.getNumSamplesViewed(); console.log("setting selected to ", itemId); }); - - }; $scope.selectItem($routeParams.sampleNum); diff --git a/src/app/citizenScience/thumbLabels/label.js b/src/app/citizenScience/thumbLabels/label.js index d44c8411..eefb6040 100644 --- a/src/app/citizenScience/thumbLabels/label.js +++ b/src/app/citizenScience/thumbLabels/label.js @@ -7,9 +7,8 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label", templateUrl: "citizenScience/thumbLabels/label.tpl.html", controller: [ "$scope", - "$element", "SampleLabels", - function ($scope, $element,SampleLabels) { + function ($scope,SampleLabels) { /** * A label is "selected" if it has been applied to the current sample @@ -18,8 +17,6 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label", var self = this; - //$scope.selected = { value: false }; - $scope.isSelected = function() { return SampleLabels.getValue(null,self.label.id); }; @@ -48,11 +45,8 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label", self.onToggleSelected = function (isSelected) { console.log("label ", self.label.name, "selected value for sample x set to", isSelected); SampleLabels.setValue(null,self.label.id,isSelected); - - }; - }], bindings: { From 9c8615e02242331e802b02ebdd2445b9f0fe3a61 Mon Sep 17 00:00:00 2001 From: Philip Eichinski Date: Mon, 18 Dec 2017 13:42:10 +1000 Subject: [PATCH 3/3] chore(citizenScience): space after commas --- src/app/annotationLibrary/common.js | 2 +- .../annotationLibrary/libraryItem.tpl.html | 2 +- .../annotationViewer/_annotationViewer.scss | 2 +- .../gridLines/_gridLines.scss | 2 +- src/app/app.js | 2 +- src/app/audio/ngAudio.js | 2 +- .../citizenScience/bristlebird/bristlebird.js | 4 +-- src/app/citizenScience/citizenScience.js | 2 +- .../datasetProgress/datasetProgress.js | 6 ++-- .../dummyApi/citizenScienceSampleLabels.js | 2 +- .../citizenScience/examples/_examples.scss | 8 +++--- .../textLabels/labelCheck.tpl.html | 2 +- .../citizenScience/thumbLabels/_thumbs.scss | 6 ++-- src/app/citizenScience/thumbLabels/label.js | 7 ++--- .../calendarView/_calendarView.scss | 20 ++++++------- src/app/home/home.js | 2 +- src/assets/img/provider/auth-buttons.css.scss | 28 +++++++++---------- src/common/jquery.drawabox.js | 2 +- src/components/services/url.js | 4 +-- src/sass/touch/_touch.scss | 2 +- 20 files changed, 53 insertions(+), 54 deletions(-) diff --git a/src/app/annotationLibrary/common.js b/src/app/annotationLibrary/common.js index 52fbf5d0..b8090150 100644 --- a/src/app/annotationLibrary/common.js +++ b/src/app/annotationLibrary/common.js @@ -47,7 +47,7 @@ angular var x = Media.get( getMediaParameters(annotation), - mediaGetSuccess.bind(null,annotation), + mediaGetSuccess.bind(null, annotation), mediaGetFailure ); diff --git a/src/app/annotationLibrary/libraryItem.tpl.html b/src/app/annotationLibrary/libraryItem.tpl.html index ccf4b58f..60763c4b 100644 --- a/src/app/annotationLibrary/libraryItem.tpl.html +++ b/src/app/annotationLibrary/libraryItem.tpl.html @@ -20,7 +20,7 @@

Details

ng-href="{{tagging.tag.similarPartial}}" title="Tag.">   - {{tagging.tag.typeOfTag.replace('_',' ')}} + {{tagging.tag.typeOfTag.replace('_', ' ')}} retired taxonomic {{tagging.tag.text}} (ID {{tagging.tag.id}}) diff --git a/src/app/annotationViewer/_annotationViewer.scss b/src/app/annotationViewer/_annotationViewer.scss index 9b3a2544..e9a882a2 100644 --- a/src/app/annotationViewer/_annotationViewer.scss +++ b/src/app/annotationViewer/_annotationViewer.scss @@ -126,7 +126,7 @@ baw-annotation-viewer { z-index: 2; // debug - // @if $DEBUG { background-color: rgba(255,0,0,0.15) ;} + // @if $DEBUG { background-color: rgba(255, 0, 0, 0.15) ;} // required for IE10 background-color: rgba(255, 255, 255, 0); diff --git a/src/app/annotationViewer/gridLines/_gridLines.scss b/src/app/annotationViewer/gridLines/_gridLines.scss index fc2f7838..5f7a1707 100644 --- a/src/app/annotationViewer/gridLines/_gridLines.scss +++ b/src/app/annotationViewer/gridLines/_gridLines.scss @@ -106,7 +106,7 @@ $scale-background: #f5f5f5; //#7eff5f & .yTitle { @include scale-title-base; - @include vendor-prefix(transform, translateX(-100%) rotate3d(0,0,1,-90deg) translateX(50%)); + @include vendor-prefix(transform, translateX(-100%) rotate3d(0, 0, 1, -90deg) translateX(50%)); @include vendor-prefix(transform-origin, 100% 0%); diff --git a/src/app/app.js b/src/app/app.js index ef9643ae..049ae36b 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -154,7 +154,7 @@ angular.module("baw", * to /something/:foo/:bar */ function convertRouteParams (route) { - return route.replace(/}/g,"").replace(/{/g,":"); + return route.replace(/}/g, "").replace(/{/g, ":"); } // routes diff --git a/src/app/audio/ngAudio.js b/src/app/audio/ngAudio.js index 24b29a82..82db6368 100644 --- a/src/app/audio/ngAudio.js +++ b/src/app/audio/ngAudio.js @@ -169,7 +169,7 @@ angular.module("bawApp.directives.ngAudio", [ target.currentState = event && event.type || "unknown"; - updateObject(element ,target); + updateObject(element, target); target.isPlaying = !element.paused; target.canPlay = element.readyState >= readyStates.haveFutureData; diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js index 3837f244..6c3f119a 100644 --- a/src/app/citizenScience/bristlebird/bristlebird.js +++ b/src/app/citizenScience/bristlebird/bristlebird.js @@ -71,9 +71,9 @@ class BristlebirdController { * "name": "Eastern Bristlebird", * "examples": [{ * "annotationId": 124730 - * },{ + * }, { * "annotationId": 124727 - * },{ + * }, { * "annotationId": 98378 * }] * }, diff --git a/src/app/citizenScience/citizenScience.js b/src/app/citizenScience/citizenScience.js index 54f3f3b9..9af32212 100644 --- a/src/app/citizenScience/citizenScience.js +++ b/src/app/citizenScience/citizenScience.js @@ -1,5 +1,5 @@ angular - .module("bawApp.citizenScience",[ + .module("bawApp.citizenScience", [ "bawApp.citizenScience.bristlebird", "bawApp.citizenScience.ipswich", ]) diff --git a/src/app/citizenScience/datasetProgress/datasetProgress.js b/src/app/citizenScience/datasetProgress/datasetProgress.js index 22e9c7c8..de9a8f70 100644 --- a/src/app/citizenScience/datasetProgress/datasetProgress.js +++ b/src/app/citizenScience/datasetProgress/datasetProgress.js @@ -1,8 +1,8 @@ angular.module("bawApp.components.progress", ["bawApp.citizenScience.csApiMock"]) - .component("datasetProgress",{ + .component("datasetProgress", { templateUrl: "citizenScience/datasetProgress/datasetProgress.tpl.html", - controller: ["$scope", "$routeParams","$url", "conf.paths","CsApi","SampleLabels", - function ($scope, $routeParams,$url,paths,CsApi,SampleLabels) { + controller: ["$scope", "$routeParams", "$url", "conf.paths", "CsApi", "SampleLabels", + function ($scope, $routeParams, $url, paths, CsApi, SampleLabels) { var self = this; $scope.selectItem = function (itemId) { diff --git a/src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js b/src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js index a89eec28..801c0c68 100644 --- a/src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js +++ b/src/app/citizenScience/dummyApi/citizenScienceSampleLabels.js @@ -98,7 +98,7 @@ sampleLabels.factory("SampleLabels", [ /** * updates the value of a labelId applied to a sampleId as either true or false - * @param sampleId int + * @param sampleId int; if null, will use the current sample id * @param labelId int; if omitted, we are not applying a label but noting that the sample has been viewed * @param value int [0,1] */ diff --git a/src/app/citizenScience/examples/_examples.scss b/src/app/citizenScience/examples/_examples.scss index 02814152..2fe43380 100644 --- a/src/app/citizenScience/examples/_examples.scss +++ b/src/app/citizenScience/examples/_examples.scss @@ -13,12 +13,12 @@ background: #fff; border-radius: 5px; - -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3); - -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.3); - box-shadow: 3px 3px 5px rgba(0,0,0,0.3); + -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); .dark { - background: rgba(0,0,0,0.7); + background: rgba(0, 0, 0, 0.7); } &.selected { diff --git a/src/app/citizenScience/textLabels/labelCheck.tpl.html b/src/app/citizenScience/textLabels/labelCheck.tpl.html index e78a7ebc..4c0eda82 100644 --- a/src/app/citizenScience/textLabels/labelCheck.tpl.html +++ b/src/app/citizenScience/textLabels/labelCheck.tpl.html @@ -2,7 +2,7 @@ {{$ctrl.text}} diff --git a/src/app/citizenScience/thumbLabels/_thumbs.scss b/src/app/citizenScience/thumbLabels/_thumbs.scss index 6e3ffa88..adfd2c7d 100644 --- a/src/app/citizenScience/thumbLabels/_thumbs.scss +++ b/src/app/citizenScience/thumbLabels/_thumbs.scss @@ -5,7 +5,7 @@ $triangle: ' i); + var numbers = (new Array(100)).map((x, i) => i); console.log(numbers); var evenNumbers = numbers.filter(x => !(x & 1) ); diff --git a/src/assets/img/provider/auth-buttons.css.scss b/src/assets/img/provider/auth-buttons.css.scss index 26012a32..d733913e 100644 --- a/src/assets/img/provider/auth-buttons.css.scss +++ b/src/assets/img/provider/auth-buttons.css.scss @@ -217,8 +217,8 @@ } .btn-google:active { - -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); - box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); } /* @@ -271,12 +271,12 @@ color: #327695; background: #cfe4f0; /* css3 */ - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f5f7), to(rgba(255,255,255,0))); - background-image: -webkit-linear-gradient(#f1f5f7, rgba(255,255,255,0)); - background-image: -moz-linear-gradient(#f1f5f7, rgba(255,255,255,0)); - background-image: -ms-linear-gradient(#f1f5f7, rgba(255,255,255,0)); - background-image: -o-linear-gradient(#f1f5f7, rgba(255,255,255,0)); - background-image: linear-gradient(#f1f5f7, rgba(255,255,255,0)); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f5f7), to(rgba(255, 255, 255, 0))); + background-image: -webkit-linear-gradient(#f1f5f7, rgba(255, 255, 255, 0)); + background-image: -moz-linear-gradient(#f1f5f7, rgba(255, 255, 255, 0)); + background-image: -ms-linear-gradient(#f1f5f7, rgba(255, 255, 255, 0)); + background-image: -o-linear-gradient(#f1f5f7, rgba(255, 255, 255, 0)); + background-image: linear-gradient(#f1f5f7, rgba(255, 255, 255, 0)); -webkit-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; } @@ -342,12 +342,12 @@ .btn-yahoo { border-color: #ffb305; background: #ffc426; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.5)), to(rgba(255,255,255,0))); - background-image: -webkit-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); - background-image: -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); - background-image: -ms-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); - background-image: -o-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); - background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0)); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); + background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); + background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); } .btn-yahoo:hover, diff --git a/src/common/jquery.drawabox.js b/src/common/jquery.drawabox.js index 9c900198..603bd46d 100644 --- a/src/common/jquery.drawabox.js +++ b/src/common/jquery.drawabox.js @@ -507,7 +507,7 @@ throw "An element with that id already exists, cannot insert"; } - var newBox = createBox($this, $this.data("drawboxes"),0, 0, 0, 0, id, true); + var newBox = createBox($this, $this.data("drawboxes"), 0, 0, 0, 0, id, true); result.push(newBox); }); return result; diff --git a/src/components/services/url.js b/src/components/services/url.js index 38f3682a..d9831ed0 100644 --- a/src/components/services/url.js +++ b/src/components/services/url.js @@ -98,7 +98,7 @@ angular angular.forEach((keyValue || "").split("&"), function(keyValue) { var splitPoint, key, val; if (keyValue) { - key = keyValue = keyValue.replace(/\+/g,"%20"); + key = keyValue = keyValue.replace(/\+/g, "%20"); splitPoint = keyValue.indexOf("="); if (splitPoint !== -1) { key = keyValue.substring(0, splitPoint); @@ -112,7 +112,7 @@ angular } else if (angular.isArray(obj[key])) { obj[key].push(val); } else { - obj[key] = [obj[key],val]; + obj[key] = [obj[key], val]; } } } diff --git a/src/sass/touch/_touch.scss b/src/sass/touch/_touch.scss index b8367afc..5f983cf9 100644 --- a/src/sass/touch/_touch.scss +++ b/src/sass/touch/_touch.scss @@ -5,7 +5,7 @@ $handle-border-color: #333; $handle-hover-bg: #ebebeb; $handle-hover-border-color: #adadad; -$handle-active-shadow: inset 0 3px 5px rgba(0,0,0, 0.125); +$handle-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); $shadow: #666; $smallest-size: 6px;