Fix linting errors, improve lint scripts
This commit is contained in:
@@ -1,3 +1,7 @@
|
|||||||
export default {
|
export default {
|
||||||
extends: ['stylelint-config-standard'],
|
extends: ['stylelint-config-standard'],
|
||||||
|
rules: {
|
||||||
|
'no-descending-specificity': null,
|
||||||
|
'property-no-vendor-prefix': null,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -508,7 +508,7 @@ export default class MapComponent extends Component {
|
|||||||
// Top padding: 15% of the VISIBLE height (size[1] * 0.5)
|
// Top padding: 15% of the VISIBLE height (size[1] * 0.5)
|
||||||
const visibleHeight = size[1] * 0.5;
|
const visibleHeight = size[1] * 0.5;
|
||||||
const topPadding = visibleHeight * 0.15;
|
const topPadding = visibleHeight * 0.15;
|
||||||
const bottomPadding = (size[1] * 0.5) + (visibleHeight * 0.15); // Sheet + padding
|
const bottomPadding = size[1] * 0.5 + visibleHeight * 0.15; // Sheet + padding
|
||||||
|
|
||||||
padding[0] = topPadding;
|
padding[0] = topPadding;
|
||||||
padding[2] = bottomPadding;
|
padding[2] = bottomPadding;
|
||||||
@@ -519,7 +519,7 @@ export default class MapComponent extends Component {
|
|||||||
const visibleWidth = size[0] - sidebarWidth;
|
const visibleWidth = size[0] - sidebarWidth;
|
||||||
|
|
||||||
// Left padding: Sidebar + 15% of visible width
|
// Left padding: Sidebar + 15% of visible width
|
||||||
padding[3] = sidebarWidth + (visibleWidth * 0.15);
|
padding[3] = sidebarWidth + visibleWidth * 0.15;
|
||||||
// Right padding: 15% of visible width
|
// Right padding: 15% of visible width
|
||||||
padding[1] = visibleWidth * 0.15;
|
padding[1] = visibleWidth * 0.15;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -98,7 +98,10 @@ export default class PlaceDetails extends Component {
|
|||||||
|
|
||||||
formatMultiLine(val, type) {
|
formatMultiLine(val, type) {
|
||||||
if (!val) return null;
|
if (!val) return null;
|
||||||
const parts = val.split(';').map((s) => s.trim()).filter(Boolean);
|
const parts = val
|
||||||
|
.split(';')
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean);
|
||||||
if (parts.length === 0) return null;
|
if (parts.length === 0) return null;
|
||||||
|
|
||||||
if (type === 'phone') {
|
if (type === 'phone') {
|
||||||
@@ -129,7 +132,8 @@ export default class PlaceDetails extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
get website() {
|
get website() {
|
||||||
const val = this.place.url || this.tags.website || this.tags['contact:website'];
|
const val =
|
||||||
|
this.place.url || this.tags.website || this.tags['contact:website'];
|
||||||
return this.formatMultiLine(val, 'url');
|
return this.formatMultiLine(val, 'url');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -158,7 +162,10 @@ export default class PlaceDetails extends Component {
|
|||||||
get wikipedia() {
|
get wikipedia() {
|
||||||
const val = this.tags.wikipedia;
|
const val = this.tags.wikipedia;
|
||||||
if (!val) return null;
|
if (!val) return null;
|
||||||
return val.split(';').map((s) => s.trim()).filter(Boolean)[0];
|
return val
|
||||||
|
.split(';')
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean)[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
get geoLink() {
|
get geoLink() {
|
||||||
|
|||||||
@@ -45,6 +45,7 @@ export default class PlaceEditForm extends Component {
|
|||||||
<form class="edit-form" {{on "submit" this.handleSubmit}}>
|
<form class="edit-form" {{on "submit" this.handleSubmit}}>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="edit-title">Title</label>
|
<label for="edit-title">Title</label>
|
||||||
|
{{! template-lint-disable no-autofocus-attribute }}
|
||||||
<input
|
<input
|
||||||
id="edit-title"
|
id="edit-title"
|
||||||
type="text"
|
type="text"
|
||||||
|
|||||||
@@ -161,7 +161,8 @@ export default class PlacesSidebar extends Component {
|
|||||||
><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
|
><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
|
||||||
{{else}}
|
{{else}}
|
||||||
{{#if this.isNearbySearch}}
|
{{#if this.isNearbySearch}}
|
||||||
<h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
|
<h2><Icon @name="target" @size={{20}} @color="#ea4335" />
|
||||||
|
Nearby</h2>
|
||||||
{{else}}
|
{{else}}
|
||||||
<h2><Icon @name="search" @size={{20}} @color="#333" /> Results</h2>
|
<h2><Icon @name="search" @size={{20}} @color="#333" /> Results</h2>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|||||||
@@ -181,9 +181,11 @@ export default class SearchBoxComponent extends Component {
|
|||||||
<div class="result-info">
|
<div class="result-info">
|
||||||
<span class="result-title">{{result.title}}</span>
|
<span class="result-title">{{result.title}}</span>
|
||||||
{{#if (eq result.source "osm")}}
|
{{#if (eq result.source "osm")}}
|
||||||
<span class="result-desc">{{humanizeOsmTag result.type}}</span>
|
<span class="result-desc">{{humanizeOsmTag
|
||||||
|
result.type
|
||||||
|
}}</span>
|
||||||
{{else}}
|
{{else}}
|
||||||
{{#if result.description}}
|
{{#if result.description}}
|
||||||
<span class="result-desc">{{result.description}}</span>
|
<span class="result-desc">{{result.description}}</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { service } from '@ember/service';
|
|||||||
import { action } from '@ember/object';
|
import { action } from '@ember/object';
|
||||||
import Icon from '#components/icon';
|
import Icon from '#components/icon';
|
||||||
import eq from 'ember-truth-helpers/helpers/eq';
|
import eq from 'ember-truth-helpers/helpers/eq';
|
||||||
import not from 'ember-truth-helpers/helpers/not';
|
|
||||||
|
|
||||||
export default class SettingsPane extends Component {
|
export default class SettingsPane extends Component {
|
||||||
@service settings;
|
@service settings;
|
||||||
|
|||||||
@@ -374,10 +374,7 @@ body {
|
|||||||
.places-list {
|
.places-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: -1rem -1rem 0 -1rem;
|
margin: -1rem -1rem 0;
|
||||||
}
|
|
||||||
|
|
||||||
.places-list li {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.place-item {
|
.place-item {
|
||||||
@@ -511,6 +508,7 @@ body {
|
|||||||
border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
|
border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
|
||||||
background: rgb(255 204 51 / 20%);
|
background: rgb(255 204 51 / 20%);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
/* Use translate3d for GPU acceleration on iOS */
|
/* Use translate3d for GPU acceleration on iOS */
|
||||||
transform: translate3d(-50%, -50%, 0);
|
transform: translate3d(-50%, -50%, 0);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@@ -548,6 +546,7 @@ body {
|
|||||||
.ol-control.ol-attribution {
|
.ol-control.ol-attribution {
|
||||||
bottom: 1rem;
|
bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ol-touch .ol-control.ol-attribution {
|
.ol-touch .ol-control.ol-attribution {
|
||||||
bottom: 0.5rem;
|
bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
@@ -555,6 +554,7 @@ body {
|
|||||||
.ol-control.ol-zoom {
|
.ol-control.ol-zoom {
|
||||||
bottom: 3rem;
|
bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ol-touch .ol-control.ol-zoom {
|
.ol-touch .ol-control.ol-zoom {
|
||||||
bottom: 3.5rem;
|
bottom: 3.5rem;
|
||||||
}
|
}
|
||||||
@@ -562,6 +562,7 @@ body {
|
|||||||
.ol-control.ol-locate {
|
.ol-control.ol-locate {
|
||||||
bottom: 6.5rem;
|
bottom: 6.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ol-touch .ol-control.ol-locate {
|
.ol-touch .ol-control.ol-locate {
|
||||||
bottom: 8.5rem;
|
bottom: 8.5rem;
|
||||||
}
|
}
|
||||||
@@ -569,6 +570,7 @@ body {
|
|||||||
.ol-control.ol-rotate {
|
.ol-control.ol-rotate {
|
||||||
bottom: 9rem;
|
bottom: 9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ol-touch .ol-control.ol-rotate {
|
.ol-touch .ol-control.ol-rotate {
|
||||||
bottom: 11.5rem;
|
bottom: 11.5rem;
|
||||||
}
|
}
|
||||||
@@ -695,6 +697,7 @@ span.icon {
|
|||||||
/* Map Crosshair for "Create Place" mode */
|
/* Map Crosshair for "Create Place" mode */
|
||||||
.map-crosshair {
|
.map-crosshair {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
/* Default Center */
|
/* Default Center */
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -715,8 +718,11 @@ span.icon {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar is open (Desktop: Left 300px) */
|
/* Sidebar is open (Desktop: Left 300px) */
|
||||||
|
|
||||||
/* We want to center in the remaining space (width - 300px) */
|
/* We want to center in the remaining space (width - 300px) */
|
||||||
|
|
||||||
/* Center X = 300 + (width - 300) / 2 = 300 + width/2 - 150 = width/2 + 150 */
|
/* Center X = 300 + (width - 300) / 2 = 300 + width/2 - 150 = width/2 + 150 */
|
||||||
|
|
||||||
/* So shift left by 150px from center */
|
/* So shift left by 150px from center */
|
||||||
.map-container.sidebar-open .map-crosshair {
|
.map-container.sidebar-open .map-crosshair {
|
||||||
left: calc(50% + 150px);
|
left: calc(50% + 150px);
|
||||||
@@ -724,6 +730,7 @@ span.icon {
|
|||||||
|
|
||||||
@media (width <= 768px) {
|
@media (width <= 768px) {
|
||||||
/* Sidebar/Bottom Sheet is open (Mobile: Bottom 50%) */
|
/* Sidebar/Bottom Sheet is open (Mobile: Bottom 50%) */
|
||||||
|
|
||||||
/* Center Y = (height/2) / 2 = height/4 = 25% */
|
/* Center Y = (height/2) / 2 = height/4 = 25% */
|
||||||
.map-container.sidebar-open .map-crosshair {
|
.map-container.sidebar-open .map-crosshair {
|
||||||
left: 50%; /* Reset desktop shift */
|
left: 50%; /* Reset desktop shift */
|
||||||
@@ -788,14 +795,14 @@ button.create-place {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 24px; /* Pill shape */
|
border-radius: 24px; /* Pill shape */
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 2px 5px rgb(0 0 0 / 15%);
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
height: 48px; /* Slightly taller for touch targets */
|
height: 48px; /* Slightly taller for touch targets */
|
||||||
transition: box-shadow 0.2s;
|
transition: box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-form:focus-within {
|
.search-form:focus-within {
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Integrated Menu Button */
|
/* Integrated Menu Button */
|
||||||
@@ -813,7 +820,7 @@ button.create-place {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu-btn-integrated:hover {
|
.menu-btn-integrated:hover {
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: rgb(0 0 0 / 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fallback Search Icon (Left) */
|
/* Fallback Search Icon (Left) */
|
||||||
@@ -837,6 +844,7 @@ button.create-place {
|
|||||||
outline: none;
|
outline: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
|
|
||||||
/* Remove native search cancel button in WebKit */
|
/* Remove native search cancel button in WebKit */
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
@@ -858,25 +866,11 @@ button.create-place {
|
|||||||
color: #5f6368;
|
color: #5f6368;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
border-left: 1px solid #ddd; /* Separator like Google Maps */
|
|
||||||
padding-left: 12px;
|
|
||||||
border-radius: 0; /* Reset for separator look */
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-submit-btn:hover {
|
|
||||||
/* No background on hover if we use separator style, or maybe just change icon color */
|
|
||||||
color: #1a73e8; /* Blue on hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* If we want the separator style, we need to adjust border-radius carefully or use a pseudo element */
|
|
||||||
/* Let's stick to a simple button for now, maybe without the separator if it looks cleaner */
|
|
||||||
.search-submit-btn {
|
|
||||||
border-left: none; /* Remove separator for cleaner look */
|
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-submit-btn:hover {
|
.search-submit-btn:hover {
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: rgb(0 0 0 / 5%);
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -894,7 +888,7 @@ button.create-place {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-clear-btn:hover {
|
.search-clear-btn:hover {
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: rgb(0 0 0 / 5%);
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -907,7 +901,7 @@ button.create-place {
|
|||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
@@ -25,9 +25,10 @@
|
|||||||
"format": "prettier . --cache --write",
|
"format": "prettier . --cache --write",
|
||||||
"lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
|
"lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
|
||||||
"lint:css": "stylelint \"**/*.css\"",
|
"lint:css": "stylelint \"**/*.css\"",
|
||||||
"lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
|
"lint:css:fix": "stylelint \"**/*.css\" --fix",
|
||||||
"lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm format",
|
"lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm format",
|
||||||
"lint:format": "prettier . --cache --check",
|
"lint:format": "prettier . --cache --check",
|
||||||
|
"lint:format:fix": "prettier . --cache --write",
|
||||||
"lint:hbs": "ember-template-lint .",
|
"lint:hbs": "ember-template-lint .",
|
||||||
"lint:hbs:fix": "ember-template-lint . --fix",
|
"lint:hbs:fix": "ember-template-lint . --fix",
|
||||||
"lint:js": "eslint . --cache",
|
"lint:js": "eslint . --cache",
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { module, test } from 'qunit';
|
import { module, test } from 'qunit';
|
||||||
import { visit, currentURL, click, settled } from '@ember/test-helpers';
|
import { visit, currentURL, click } from '@ember/test-helpers';
|
||||||
import { setupApplicationTest } from 'marco/tests/helpers';
|
import { setupApplicationTest } from 'marco/tests/helpers';
|
||||||
import Service from '@ember/service';
|
import Service from '@ember/service';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
|
|||||||
@@ -37,7 +37,9 @@ module('Integration | Component | search-box', function (hooks) {
|
|||||||
this.owner.register('service:router', MockRouterService);
|
this.owner.register('service:router', MockRouterService);
|
||||||
|
|
||||||
this.noop = () => {};
|
this.noop = () => {};
|
||||||
await render(<template><SearchBox @onToggleMenu={{this.noop}} /></template>);
|
await render(
|
||||||
|
<template><SearchBox @onToggleMenu={{this.noop}} /></template>
|
||||||
|
);
|
||||||
|
|
||||||
assert.dom('.search-input').exists();
|
assert.dom('.search-input').exists();
|
||||||
assert.dom('.search-results-popover').doesNotExist();
|
assert.dom('.search-results-popover').doesNotExist();
|
||||||
@@ -86,7 +88,9 @@ module('Integration | Component | search-box', function (hooks) {
|
|||||||
this.owner.register('service:router', MockRouterService);
|
this.owner.register('service:router', MockRouterService);
|
||||||
|
|
||||||
this.noop = () => {};
|
this.noop = () => {};
|
||||||
await render(<template><SearchBox @onToggleMenu={{this.noop}} /></template>);
|
await render(
|
||||||
|
<template><SearchBox @onToggleMenu={{this.noop}} /></template>
|
||||||
|
);
|
||||||
|
|
||||||
await fillIn('.search-input', 'berlin');
|
await fillIn('.search-input', 'berlin');
|
||||||
await click('.search-input'); // Focus
|
await click('.search-input'); // Focus
|
||||||
@@ -118,7 +122,9 @@ module('Integration | Component | search-box', function (hooks) {
|
|||||||
this.owner.register('service:photon', MockPhotonService);
|
this.owner.register('service:photon', MockPhotonService);
|
||||||
|
|
||||||
this.noop = () => {};
|
this.noop = () => {};
|
||||||
await render(<template><SearchBox @onToggleMenu={{this.noop}} /></template>);
|
await render(
|
||||||
|
<template><SearchBox @onToggleMenu={{this.noop}} /></template>
|
||||||
|
);
|
||||||
|
|
||||||
await fillIn('.search-input', 'cafe');
|
await fillIn('.search-input', 'cafe');
|
||||||
|
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ module('Unit | Route | place', function (hooks) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class MapUiStub extends Service {
|
class MapUiStub extends Service {
|
||||||
selectPlace(place) {
|
selectPlace() {
|
||||||
selectPlaceCalled = true;
|
selectPlaceCalled = true;
|
||||||
}
|
}
|
||||||
stopSearch() {}
|
stopSearch() {}
|
||||||
|
|||||||
Reference in New Issue
Block a user