Skip to content

Commit 2ce192e

Browse files
javierarcejavierarce
committed
Fixes
1 parent d133288 commit 2ce192e

20 files changed

+520
-447
lines changed

‎css/Locations.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
.Locations {
2+
margin: 0;
3+
height: 100%;
4+
overflow: hidden;
5+
overflow-y: scroll; }
6+
7+
.Locations__none {
8+
display: flex;
9+
width: 100%;
10+
border: none;
11+
padding: 16px 32px;
12+
align-items: center;
13+
justify-content: center;
14+
border-radius: 4px;
15+
color: rgba(255, 255, 255, 0.5);
16+
border: 1px solid rgba(255, 255, 255, 0.2);
17+
transition: background 150ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
18+
text-align: center;
19+
height: 100%; }
20+
21+
.Locations__item:hover {
22+
box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.1); }
23+
24+
.Locations__item.is-active {
25+
background: rgba(255, 255, 255, 0.2);
26+
box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.1); }
27+
28+
.Locations__item.is-rejected .Locations__itemName,
29+
.Locations__item.is-rejected .Locations__itemDescription,
30+
.Locations__item.is-rejected .Locations__itemAddress {
31+
opacity: 0.4; }
32+
33+
.Locations__item:hover {
34+
cursor: pointer; }
35+
36+
.Locations__item {
37+
width: 100%;
38+
border: none;
39+
padding: 16px;
40+
margin: 0 0 16px 0;
41+
border-radius: 4px;
42+
border: 1px solid rgba(255, 255, 255, 0.2);
43+
transition: box-shadow 150ms ease-in-out, background 150ms ease-in-out, visibility 250ms ease-in-out, opacity 250ms ease-in-out;
44+
text-align: left;
45+
font-size: 1em;
46+
outline: none;
47+
background: transparent;
48+
color: #fff;
49+
text-decoration: none;
50+
box-shadow: none;
51+
-webkit-appearance: none; }
52+
53+
.Locations__item.is-hidden {
54+
opacity: 0;
55+
visibility: hidden; }
56+
57+
.Locations__itemName {
58+
margin: 0 0 8px 0;
59+
font-weight: bold; }
60+
61+
.Locations__itemDescription {
62+
margin: 0 0 8px 0; }
63+
64+
.Locations__itemAddress {
65+
font-size: 0.7em;
66+
color: rgba(0, 0, 0, 0.3); }
67+
68+
.Locations__itemFooterOptions > * {
69+
margin: 0 0 0 8px; }
70+
71+
.Locations__itemFooterOptions {
72+
display: flex;
73+
align-items: center;
74+
justify-content: space-between; }
75+
76+
.Locations__itemFooter {
77+
display: flex;
78+
width: 100%;
79+
align-items: center;
80+
justify-content: space-between;
81+
font-size: .8em;
82+
opacity: 0.8;
83+
border-top: 1px solid rgba(255, 255, 255, 0.2);
84+
margin: 8px 0 0 0;
85+
padding: 8px 0 0 0; }
86+
87+
@media only screen and (max-width: 800px) {
88+
.Locations {
89+
display: none; } }

‎css/Map.css

Lines changed: 0 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,6 @@
1313
border-radius: 4px;
1414
box-shadow: 0 2px 4px rgba(var(--shadow), 0.2); }
1515

16-
.Map .leaflet-control-zoom-in,
17-
.Map .leaflet-control-zoom-out {
18-
box-shadow: 0 2px 4px rgba(var(--shadow), 0.2);
19-
background: var(--white);
20-
width: 32px;
21-
height: 32px;
22-
color: var(--blue);
23-
cursor: pointer;
24-
user-select: none;
25-
font-size: 1.4em;
26-
transition: opacity 500ms ease-in-out, background 200ms ease-in-out; }
27-
28-
.Map .leaflet-control-zoom-in:hover,
29-
.Map .leaflet-control-zoom-out:hover {
30-
color: var(--blue);
31-
background: var(--gray); }
32-
3316
.Map .leaflet-container a {
3417
background: var(--blue); }
3518

@@ -45,101 +28,6 @@
4528
.leaflet-container a {
4629
color: var(--blue); }
4730

48-
/* Map controls */
49-
.Control {
50-
box-shadow: 0 2px 4px rgba(var(--shadow), 0.2);
51-
background: var(--white);
52-
width: 32px;
53-
height: 32px;
54-
border-radius: 4px;
55-
cursor: pointer;
56-
user-select: none;
57-
transition: opacity 500ms ease-in-out, background 200ms ease-in-out; }
58-
59-
.Control.is-hidden {
60-
visibility: hidden;
61-
opacity: 0; }
62-
63-
.Control:hover {
64-
background-color: var(--gray); }
65-
66-
.Control__locate:before {
67-
content: '';
68-
position: absolute;
69-
top: 8px;
70-
left: 8px;
71-
width: 12px;
72-
height: 12px;
73-
border: 2px solid var(--blue);
74-
border-radius: 100%; }
75-
76-
.Control .Spinner {
77-
display: none; }
78-
79-
.Control.is-loading {
80-
background-image: none; }
81-
82-
.Control.is-loading:before {
83-
display: none; }
84-
85-
.Control.is-loading .Spinner {
86-
display: block; }
87-
88-
.Control__lanes {
89-
background-color: var(--white);
90-
background-image: url(/img/lanes.svg);
91-
background-repeat: no-repeat;
92-
background-size: cover; }
93-
94-
.Control__lanes.is-selected {
95-
background-image: url(/img/lanes_white.svg);
96-
background-color: var(--blue); }
97-
98-
.Control__help {
99-
background-image: url(/img/help.svg);
100-
background-repeat: no-repeat;
101-
background-size: cover; }
102-
103-
.Control__mode {
104-
display: flex;
105-
justify-content: center;
106-
flex-direction: column;
107-
height: 64px; }
108-
109-
.Control__mode .Control__modeBikes {
110-
background-color: var(--blue);
111-
border-radius: 4px 4px 0 0;
112-
background-image: url(/img/bike_white.svg);
113-
background-repeat: no-repeat;
114-
background-size: cover; }
115-
116-
.Control__mode .Control__modeDocks {
117-
border-radius: 0 0 4px 4px;
118-
background-image: url(/img/dock.svg);
119-
background-size: cover;
120-
background-repeat: no-repeat; }
121-
122-
.Control__mode.is-dock .Control__modeBikes {
123-
background-color: var(--white);
124-
background-image: url(/img/bike.svg); }
125-
126-
.Control__mode.is-dock .Control__modeDocks {
127-
background-color: var(--blue);
128-
background-image: url(/img/dock_white.svg); }
129-
130-
.Control__modeBikes,
131-
.Control__modeDocks {
132-
width: 32px;
133-
height: 32px; }
134-
135-
.Control__divider {
136-
border: 1px solid #ddd;
137-
width: 1px;
138-
height: 100%; }
139-
140-
.Map .leaflet-top .leaflet-control {
141-
margin-top: 8px; }
142-
14331
@media only screen and (max-width: 800px) {
14432
.Map__container {
14533
width: 100%;

‎css/Popup.css

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
line-height: 135%;
157157
font-weight: bold;
158158
text-transform: uppercase;
159-
font-size: 1.2em;
159+
font-size: 1em;
160160
outline: none; }
161161

162162
.Popup__user {
@@ -210,41 +210,44 @@
210210
.leaflet-container a.leaflet-popup-close-button {
211211
display: none; }
212212

213-
@media only screen and (max-width: 800px) {
214-
.Popup__header {
215-
font-size: 1em; }
216-
.Popup__description {
217-
font-size: 1.1em; }
218-
.Popup__body {
219-
min-width: 200px; }
220-
.Popup__button {
221-
font-size: 1em; } }
222-
223213
.Items {
224214
display: flex;
225215
justify-content: center; }
226216

227217
.Item:first-child {
228-
margin: 0 0.2em 0 0;
229-
border-radius: 100%; }
218+
margin: 0 0.4em 0 0; }
230219

231220
.Item:last-child {
232-
margin: 0 0 0 0.2em; }
221+
margin: 0 0 0 0.4em; }
233222

234223
.Item {
235224
display: flex;
236-
width: 100px;
237-
height: 100px;
225+
width: 64px;
226+
height: 64px;
238227
flex-direction: column;
239228
justify-content: center;
240-
align-items: center;
241-
background: #f6f8fa;
242-
border-radius: 8px; }
229+
align-items: center; }
230+
231+
.Item__icon {
232+
width: 50px;
233+
height: 50px;
234+
background-repeat: no-repeat;
235+
background-size: 100%;
236+
background-position: center; }
237+
238+
.Item__icon.is-bike {
239+
background-image: url(/img/bike.svg); }
240+
241+
.Item__icon.is-ebike {
242+
background-image: url(/img/ebike.svg); }
243+
244+
.Item__icon.is-base {
245+
background-image: url(/img/dock.svg); }
243246

244247
.Item__amount {
245-
font-weight: bold;
246-
font-size: 1.4em;
247-
margin: 0 0 0.2em; }
248+
font-weight: 500;
249+
margin: 0 0 0.2em;
250+
color: var(--blue); }
248251

249252
.Station__id {
250253
margin: 0 .4em 0 0; }
@@ -257,3 +260,13 @@
257260
border-right: 1px solid rgba(255, 255, 255, 0.5);
258261
left: 0.4em;
259262
margin: 0 0.4em 0 0; }
263+
264+
@media only screen and (max-width: 800px) {
265+
.Popup__header {
266+
font-size: 1em; }
267+
.Popup__description {
268+
font-size: 1.1em; }
269+
.Popup__body {
270+
min-width: 200px; }
271+
.Popup__button {
272+
font-size: 1em; } }

‎css/helpers/vars.css

Whitespace-only changes.

0 commit comments

Comments
 (0)