Client - [PR84/93] add new sports

This commit is contained in:
Sam 2021-11-03 19:20:38 +01:00
parent 1e397bbfc2
commit 0a21cec513
10 changed files with 286 additions and 1 deletions

View File

@ -0,0 +1,71 @@
<template>
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 503.162 503.162"
style="enable-background: new 0 0 503.162 503.162"
xml:space="preserve"
>
<desc id="electricMountainBikingDescription">
silhouette of a person riding an electric mountain bike
</desc>
<g id="g10">
<g id="g8">
<path
d="M149.951,67.997c15.711-7.143,22.739-25.675,15.596-41.416c-7.124-15.701-25.723-22.682-41.453-15.539 c-15.721,7.134-22.702,25.752-15.578,41.444C115.679,68.216,134.23,75.14,149.951,67.997z"
id="path2"
/>
<path
d="M87.517,89.072l-32.828,87.755c-1.979,5.967-1.683,12.594,1.1,18.733c4.055,8.922,12.604,14.525,21.755,15.271 l76.873,6.244l29.137,64.184c4.122,9.046,14.832,13.148,23.906,9.017c9.075-4.131,13.072-14.859,8.951-23.944l-36.424-80.201 c0,0-3.605-13.76-21.343-14.133l-43.873-2.572l21.009-55.166l31.671,20.588c5.584,3.663,10.997,3.682,15.1,1.722l55.051-24.997 c17.069-7.755,6.952-30.036-10.108-22.29l-47.506,21.707l-53.55-34.846c0,0-11.638-8.013-24.241-2.285 C102.205,73.858,91.112,77.243,87.517,89.072z"
id="path4"
/>
<path
d="M423.687,182.488l-2.61,15.042c-2.123,12.154-13.35,25.092-25.092,28.888l-3.711,1.195 c3.041-16.543,1.282-34.148-6.215-50.633c-19.498-42.974-70.094-61.87-112.943-42.419 c-42.878,19.479-61.936,70.017-42.438,112.981c17.069,37.562,57.881,56.744,96.534,47.966l-0.784,1.415 c-5.968,10.796-20.817,19.221-33.144,18.8l-17.892-0.622c-12.336-0.411-30.514,5.002-40.603,12.116l-22.376,15.759 c-10.107,7.104-28.276,12.632-40.612,12.354l-12.001-0.277c12.718-22.845,14.889-51.159,3.242-76.806 c-19.517-42.955-70.074-61.879-113.019-42.381c-42.792,19.44-61.87,70.007-42.372,112.933 c16.667,36.711,56.084,55.788,93.914,48.444l-1.32,2.056c-6.675,10.385-22.08,18.398-34.406,17.92l-32.79-1.291 c-12.326-0.497-24.021,8.97-26.096,21.143l-2.62,15.339c-0.564,3.271-0.354,6.11,0.401,8.501c-0.43,1.778-0.736,3.548-0.736,5.326 v9.562c0,10.557,8.568,19.125,19.125,19.125h460.932c10.557,0,19.115-8.568,19.106-19.125l-0.125-167.507 c0-2.782-0.593-5.221-1.616-7.286c1.396-3.806,2.057-7.841,1.598-11.839l-4.677-40.497c-1.415-12.249-9.763-29.146-18.637-37.724 l-36.127-34.951C434.712,167.418,425.79,170.325,423.687,182.488z"
id="path6"
/>
</g>
</g>
<g
id="g8-6"
transform="matrix(0.61784003,0,0,0.55860964,327.27544,1.4160784)"
>
<path
d="m 49.126,150.126 c 0,-42.346 26.212,-78.68 63.26,-93.643 L 131.29,18.512 C 66.847,27.667 17.126,83.194 17.126,150.126 c 0,60.895 41.157,112.355 97.113,128.035 l 3.636,-32.354 C 77.952,232.337 49.126,194.535 49.126,150.126 Z"
id="path2-1"
/>
<path
d="m 283.019,150.126 c 0,-60.883 -41.139,-112.333 -97.076,-128.025 l -3.718,32.33 c 39.946,13.457 68.794,51.27 68.794,95.695 0,42.099 -25.907,78.255 -62.613,93.379 l -19.428,38.217 c 64.383,-9.207 114.041,-64.707 114.041,-131.596 z"
id="path4-8"
/>
<path
d="m 226.169,134.015 c 1.26,-2.479 1.141,-5.202 -0.314,-7.572 -1.454,-2.371 -4.036,-3.316 -6.818,-3.316 H 158.216 L 171.309,9.3 C 171.755,5.441 169.363,1.443 165.637,0.337 164.868,0.109 164.089,0 163.32,0 c -2.954,0 -5.746,1.681 -7.121,4.442 L 73.946,169.718 c -1.234,2.479 -1.098,5.78 0.36,8.136 1.459,2.355 4.031,4.273 6.802,4.273 h 60.019 L 128.823,291.67 c -0.43,3.844 1.951,7.077 5.657,8.185 0.761,0.228 1.532,0.29 2.293,0.29 2.948,0 5.74,-1.637 7.133,-4.378 z"
id="path6-7"
/>
</g>
<g id="g10-9" transform="translate(226.08362,-24.282003)" />
<g id="g12-2" transform="translate(226.08362,-24.282003)" />
<g id="g14-0" transform="translate(226.08362,-24.282003)" />
<g id="g16-2" transform="translate(226.08362,-24.282003)" />
<g id="g18-3" transform="translate(226.08362,-24.282003)" />
<g id="g20-7" transform="translate(226.08362,-24.282003)" />
<g id="g22-5" transform="translate(226.08362,-24.282003)" />
<g id="g24-9" transform="translate(226.08362,-24.282003)" />
<g id="g26-2" transform="translate(226.08362,-24.282003)" />
<g id="g28-2" transform="translate(226.08362,-24.282003)" />
<g id="g30-8" transform="translate(226.08362,-24.282003)" />
<g id="g32-9" transform="translate(226.08362,-24.282003)" />
<g id="g34-7" transform="translate(226.08362,-24.282003)" />
<g id="g36-3" transform="translate(226.08362,-24.282003)" />
<g id="g38-6" transform="translate(226.08362,-24.282003)" />
</svg>
</template>
<script>
export default {
name: 'MountainBikingElectric',
}
</script>

View File

@ -0,0 +1,38 @@
<template>
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 534.51 534.51"
style="enable-background: new 0 0 534.51 534.51"
xml:space="preserve"
>
<desc id="rowingDescription">silhouette of a person rowing</desc>
<g>
<g>
<path
d="M70.517,393.857h132.622l-67.205,68.631c-3.28,3.385-3.204,8.797,0.172,12.076c1.597,1.568,3.72,2.43,5.958,2.43
c2.305,0,4.533-0.947,6.12-2.572l78.881-80.555h221.315c12.45,0,30.676-6.006,40.296-13.914
c8.788-7.229,19.049-16.217,26.345-24.299c10.375-9.811,22.214-23.639-4.255-22.834c-6.98,0.248-206.789,0.02-223.926,0
l47.144-48.139l22.176-22.032l28.209,9.17c10.414,3.385,22.472-0.803,26.919-9.362c4.446-8.558,0.268-18.407-9.343-21.993
l-17.404-6.512l54.698-54.774c12.507,6.617,28.362,4.867,38.899-5.671l46.541-46.607c13.11-13.015,13.11-33.957,0-46.923
c-12.909-13.034-34.042-13.034-46.942,0l-46.512,46.598c-10.892,10.815-12.508,27.139-5.26,39.742l-57.853,59.077L253.744,183.09
c-1.482-0.851-14.153-5.786-26.833-10.643c-14.898-5.719-30.371,0.583-34.53,13.971l-7.525,24.241l-35.324,118.451
c-0.468,1.34-0.603,2.562-0.746,3.711H14.136c-12.45,0-17.662,8.836-11.618,19.727l23.237,21.592
C39.123,385.068,58.066,393.857,70.517,393.857z M272.63,248.727c1.797-5.967,8.099-9.39,14.075-7.64l51.37,14.975l-33.038,33.737
l-43.453,43.012h-14.2L272.63,248.727z"
/>
<circle cx="248.953" cy="109.842" r="52.326" />
</g>
</g>
</svg>
</template>
<script>
export default {
name: 'Rowing',
}
</script>

View File

@ -0,0 +1,42 @@
<template>
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 522.362 522.362"
style="enable-background: new 0 0 522.362 522.362"
xml:space="preserve"
>
<desc id="alpineSkiingDescription">silhouette of a person skiing</desc>
<g>
<g>
<path
d="M14.314,351.859L408.088,461.78c4.484,1.311,9.104,1.97,13.731,1.97l0,0c17.471,0,33.746-9.429,42.467-24.604
c2.716-4.724,3.137-10.27,1.157-15.214c-1.912-4.762-5.767-8.31-10.576-9.744c-7.373-2.237-15.481,1.109-22.146,9.229
c-3.548,4.303-9.496,6.244-15.07,4.714l-136.467-38.078c1.396-0.555,2.812-1.195,4.236-2.065l103.266-63.15
c15.443-9.362,18.493-33.957,7.812-43.883l-64.758-60.233l39.972-21.688l69.682,9.744c5.23,0.736,9.744-2.037,10.079-6.187
c0.344-4.141-3.624-8.1-8.855-8.826l-48.605-6.828l22.472-12.192c39.895-23.275,5.823-85.192-35.334-63.112l-87.554,61.19
l-117.503-16.515l2.543-12.087c0.545-2.582-1.109-5.116-3.691-5.661c-2.572-0.593-5.116,1.1-5.661,3.701l-2.678,12.709
l-18.331-2.582c-5.231-0.727-9.467,2.123-9.467,6.369s4.236,8.281,9.467,9.017l15.176,2.123l-2.544,12.087
c-0.545,2.582,1.109,5.125,3.691,5.671c0.334,0.076,0.66,0.105,0.994,0.105c2.209,0,4.198-1.54,4.676-3.787l2.678-12.737
l102.414,14.315l-5.308,3.72c-4.332,3.022-10.155,9.151-11.723,14.201c-3.844,12.45-1.473,26.717,10.452,37.705l68.802,62.175
c0,0-50.978,31.776-74.998,46.397c-14.219,8.606-13.674,23.858-6.129,33.393L23.705,318.199
c-10.012-2.792-20.569,2.554-23.113,11.695C-2,339.169,4.159,349.029,14.314,351.859z"
/>
<path
d="M450.842,72.003c-15.291,16.715-14.201,42.667,2.639,58.121c16.706,15.31,42.716,14.086,58.073-2.668
c15.386-16.677,14.172-42.734-2.544-58.016C492.305,54.064,466.17,55.192,450.842,72.003z"
/>
</g>
</g>
</svg>
</template>
<script>
export default {
name: 'SkiingAlpine',
}
</script>

View File

@ -0,0 +1,38 @@
<template>
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 296 296"
style="enable-background: new 0 0 296 296"
xml:space="preserve"
>
<desc id="crossCountrySkiingDescription">
silhouette of a person skiing (cross country)
</desc>
<g>
<path
d="M241.313,246.906h-39.564l0.456-1.273c5.62-18.374,3.479-37.58-6.027-54.278c-5.653-9.929-13.443-18.018-22.745-23.959
l12.886-51.126c3.035-12.05-4.272-24.266-16.322-27.301c-2.634-0.664-5.278-0.826-7.833-0.559
c-0.151-0.011-0.299-0.032-0.452-0.038c-26.03-1.077-51.443,8.485-70.33,25.993L41.586,82.855
c-4.332-2.741-10.065-1.451-12.806,2.881s-1.451,10.065,2.88,12.806l47.625,30.136c-2.557,6.013-0.962,13.224,4.375,17.531
c2.774,2.24,6.104,3.33,9.413,3.33c4.377-0.001,8.717-1.907,11.68-5.579l0.478-0.591c8.686-10.766,20.465-18.479,33.484-22.317
l-11.095,44.046c-1.061,4.214-0.854,8.448,0.374,12.305c-12.908,17.917-28.398,33.68-46.198,46.979l-14.649,10.727
c-3.938,2.943-6.001,7.798-6.005,11.798H8.25c-4.556,0-8.083,4.131-8.083,8.688v2.063c0,4.556,3.527,8.25,8.083,8.25h55.188
h161.375H280c9.113,0,16.167-7.387,16.167-16.5v-2.5H241.313z M153.974,192.398c0.741-0.153,1.471-0.231,2.188-0.457
c5.742,3.406,10.53,8.313,13.945,14.311c5.378,9.447,6.59,20.402,3.41,30.797l-1.799,5.674c-0.447,1.461-0.656,3.184-0.657,4.184
h-69.909C121.581,231.906,139.297,213.274,153.974,192.398z M167,57.938c0-15.378,12.466-27.844,27.844-27.844
s27.844,12.466,27.844,27.844s-12.466,27.844-27.844,27.844S167,73.315,167,57.938z"
/>
</g>
</svg>
</template>
<script>
export default {
name: 'SkiingCrossCountry',
}
</script>

View File

@ -0,0 +1,44 @@
<template>
<svg
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 535.876 535.876"
style="enable-background: new 0 0 535.876 535.876"
xml:space="preserve"
>
<desc id="trailDescription">silhouette of a person running (trail)</desc>
<g>
<g>
<path
d="M505.204,326.949c-5.805-10.892-15.176-10.862-20.923,0.067l-7.114,13.512c-5.757,10.92-20.416,19.775-32.752,19.775
h-16.753c-12.346,0-29.645,6.847-38.643,15.29l-32.35,30.342l-1.233-105.388c0.822-18.446-10.596-24.634-10.596-24.634
l-56.543-25.972l33.67-67.645l38.527,22.912c0,0,15.472,9.715,26.727-9.324l37.026-63.093c1.625-3.519,2.094-7.564,1.052-11.609
c-2.381-9.256-11.81-14.86-21.095-12.479c-4.083,1.042-7.459,3.49-9.754,6.713l-30.772,51.962l-62.777-37.102
c-4.733-2.716-10.519-3.691-16.257-2.209l-78.345,20.12c-5.03,1.291-8.96,4.762-11.017,9.142l-38.097,76.165
c-2.591,3.854-3.624,8.73-2.371,13.607c2.285,8.941,11.456,14.363,20.435,12.059c5.04-1.291,8.951-4.743,10.997-9.161
l35.314-70.858l28.936-7.296l-76.203,149.921l-65.981,16.734c-1.759,0.393-3.48,1.023-5.163,1.836
c-10.596,5.412-14.679,18.179-9.267,28.803c4.733,9.266,15.252,13.636,24.901,10.978l78.067-20.187
c18.6-4.093,23.313-14.449,23.313-14.449l30.581-58.79l62.28,35.678l0.593,86.216c0.01,1.08,0.259,2.161,0.421,3.241l-11.6-4.188
c-11.608-4.188-30.57-4.608-42.361-0.956l-26.135,8.128c-11.79,3.663-30.791,3.338-42.447-0.717l-19.221-6.694
c-11.657-4.054-28.831-0.984-38.374,6.838L109.9,433.954c-9.544,7.822-26.67,10.72-38.25,6.483L40.84,429.135
c-11.58-4.256-25.608,1.157-31.336,12.097l-7.21,13.789c-5.728,10.93-0.354,19.794,11.982,19.794H500.27
c12.336,0,24.309-9.802,26.728-21.907l8.004-39.981c2.409-12.097-0.325-30.733-6.14-41.616L505.204,326.949z"
/>
<path
d="M326.395,126.625c17.806-4.562,28.563-22.721,23.983-40.526c-4.581-17.844-22.74-28.554-40.555-23.983
c-17.796,4.581-28.535,22.711-23.964,40.535C290.439,120.476,308.599,131.205,326.395,126.625z"
/>
</g>
</g>
</svg>
</template>
<script>
export default {
name: 'Trail',
}
</script>

View File

@ -8,7 +8,14 @@
<CyclingTransport v-if="sportLabel === 'Cycling (Transport)'" /> <CyclingTransport v-if="sportLabel === 'Cycling (Transport)'" />
<Hiking v-if="sportLabel === 'Hiking'" /> <Hiking v-if="sportLabel === 'Hiking'" />
<MountainBiking v-if="sportLabel === 'Mountain Biking'" /> <MountainBiking v-if="sportLabel === 'Mountain Biking'" />
<MountainBikingElectric
v-if="sportLabel === 'Mountain Biking (Electric)'"
/>
<Rowing v-if="sportLabel === 'Rowing'" />
<Running v-if="sportLabel === 'Running'" /> <Running v-if="sportLabel === 'Running'" />
<SkiingAlpine v-if="sportLabel === 'Skiing (Alpine)'" />
<SkiingCrossCountry v-if="sportLabel === 'Skiing (Cross Country)'" />
<Trail v-if="sportLabel === 'Trail'" />
<Walking v-if="sportLabel === 'Walking'" /> <Walking v-if="sportLabel === 'Walking'" />
</div> </div>
</template> </template>
@ -20,7 +27,12 @@
import CyclingTransport from '@/components/Common/Images/SportImage/CyclingTransport.vue' import CyclingTransport from '@/components/Common/Images/SportImage/CyclingTransport.vue'
import Hiking from '@/components/Common/Images/SportImage/Hiking.vue' import Hiking from '@/components/Common/Images/SportImage/Hiking.vue'
import MountainBiking from '@/components/Common/Images/SportImage/MountainBiking.vue' import MountainBiking from '@/components/Common/Images/SportImage/MountainBiking.vue'
import MountainBikingElectric from '@/components/Common/Images/SportImage/MountainBikingElectric.vue'
import Rowing from '@/components/Common/Images/SportImage/Rowing.vue'
import Running from '@/components/Common/Images/SportImage/Running.vue' import Running from '@/components/Common/Images/SportImage/Running.vue'
import SkiingAlpine from '@/components/Common/Images/SportImage/SkiingAlpine.vue'
import SkiingCrossCountry from '@/components/Common/Images/SportImage/SkiingCrossCountry.vue'
import Trail from '@/components/Common/Images/SportImage/Trail.vue'
import Walking from '@/components/Common/Images/SportImage/Walking.vue' import Walking from '@/components/Common/Images/SportImage/Walking.vue'
export default defineComponent({ export default defineComponent({
@ -30,7 +42,12 @@
CyclingTransport, CyclingTransport,
Hiking, Hiking,
MountainBiking, MountainBiking,
MountainBikingElectric,
Rowing,
Running, Running,
SkiingAlpine,
SkiingCrossCountry,
Trail,
Walking, Walking,
}, },
props: { props: {

View File

@ -63,10 +63,10 @@
.sports-menu { .sports-menu {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
padding: $default-padding; padding: $default-padding;
@media screen and (max-width: $medium-limit) { @media screen and (max-width: $medium-limit) {
justify-content: normal; justify-content: normal;
flex-wrap: wrap;
} }
label { label {

View File

@ -11,9 +11,24 @@
"Mountain Biking": { "Mountain Biking": {
"LABEL": "Mountain Biking" "LABEL": "Mountain Biking"
}, },
"Mountain Biking (Electric)": {
"LABEL": "Mountain Biking (Electric)"
},
"Rowing": {
"LABEL": "Rowing"
},
"Running": { "Running": {
"LABEL": "Running" "LABEL": "Running"
}, },
"Skiing (Alpine)": {
"LABEL": "Skiing (Alpine)"
},
"Skiing (Cross Country)": {
"LABEL": "Skiing (Cross Country)"
},
"Trail": {
"LABEL": "Trail"
},
"Walking": { "Walking": {
"LABEL": "Walking" "LABEL": "Walking"
} }

View File

@ -11,9 +11,24 @@
"Mountain Biking": { "Mountain Biking": {
"LABEL": "VTT" "LABEL": "VTT"
}, },
"Mountain Biking (Electric)": {
"LABEL": "VTT (Electrique)"
},
"Rowing": {
"LABEL": "Aviron"
},
"Running": { "Running": {
"LABEL": "Course" "LABEL": "Course"
}, },
"Skiing (Alpine)": {
"LABEL": "Ski (Alpin)"
},
"Skiing (Cross Country)": {
"LABEL": "Ski (Randonnée)"
},
"Trail": {
"LABEL": "Trail"
},
"Walking": { "Walking": {
"LABEL": "Marche" "LABEL": "Marche"
} }

View File

@ -7,7 +7,12 @@ export const sportColors: Record<string, string> = {
'Cycling (Transport)': '#88af98', 'Cycling (Transport)': '#88af98',
Hiking: '#bb757c', Hiking: '#bb757c',
'Mountain Biking': '#d4b371', 'Mountain Biking': '#d4b371',
'Mountain Biking (Electric)': '#fc9d6f',
Rowing: '#fcce72',
Running: '#835b83', Running: '#835b83',
'Skiing (Alpine)': '#67a4bd',
'Skiing (Cross Country)': '#9498d0',
Trail: '#09a98a',
Walking: '#838383', Walking: '#838383',
} }