Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 25x 25x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <!--
WikiLambda Vue component for Localized Label
@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
@license MIT
-->
<template>
<label class="ext-wikilambda-app-localized-label" data-testid="localized-label">
<span
v-if="labelData.langCode && !isUserLang"
class="ext-wikilambda-app-localized-label__chip"
>{{ labelData.langCode }}</span><span
:lang="labelData.langCode"
:dir="labelData.langDir"
>{{ labelData.label }}</span>
</label>
</template>
<script>
const { defineComponent } = require( 'vue' );
const LabelData = require( '../../store/classes/LabelData.js' ),
{ mapGetters } = require( 'vuex' );
module.exports = exports = defineComponent( {
name: 'wl-localized-label',
props: {
labelData: {
type: LabelData,
required: true
}
},
computed: Object.assign( mapGetters( [
'getUserLangZid'
] ), {
/**
* Returns whether the label is in the user preferred language
*
* @return {boolean}
*/
isUserLang: function () {
return this.getUserLangZid === this.labelData.lang;
}
} )
} );
</script>
<style lang="less">
@import '../../ext.wikilambda.app.variables.less';
.ext-wikilambda-app-localized-label {
.ext-wikilambda-app-localized-label__chip {
font-size: 1em;
font-weight: @font-weight-normal;
line-height: 1.4;
color: @color-base;
border: 1px solid @border-color-base;
border-radius: @border-radius-pill;
min-width: 36px;
padding: 0 5px;
text-align: center;
display: inline-block;
box-sizing: border-box;
height: 22px;
min-height: 22px;
margin-right: @spacing-25;
&:empty {
width: 36px;
height: 22px;
min-width: 36px;
border: 1px dashed @border-color-base;
}
@media screen and ( max-width: @max-width-breakpoint-mobile ) {
font-size: 0.875em;
}
}
}
</style>
|