<commit_before><template>
    <div class="expand-text-container">
        <p :class="{'expand': expandDescription}" ref="expandElement">{{expandText}}</p>
        <div v-show="showTextExpanse && !expandDescription" class="expanse-button"
             @click="expandDescription = true">{{$t('common:button.readMore')}}
        </div>
    </div>
</template>

<script>
    export default {
        props: ['expandText'],
        data() {
            return {expandDescription: false, isMounted: false}
        },
        computed: {
            showTextExpanse() {
                if (this.isMounted) {
                    return this.$refs.expandElement.scrollHeight > this.$refs.expandElement.clientHeight;
                }
                return false;
            }
        },
        mounted(){
            this.isMounted = true;
        }
    }
</script>

<style lang="scss">
    .expand-text-container {
        p {
            font-weight: 300;
            font-size: 16px;
            line-height: 1.6em;
            max-height: 8em;
            overflow-y: hidden;
            overflow-x: hidden;
            margin-bottom: 0;
        }
        p.expand {
            max-height: none;
            white-space: pre-wrap;
        }
        .expanse-button {
            display: inline-block;
            font-size: 12px;
            color: $secondary-text;
            cursor: pointer;
        }
        :hover.expanse-button {
            text-decoration: underline;
        }
    }
</style><commit_msg>Moved read more to the top.<commit_after><template>
    <div class="expand-text-container">
        <p :class="{'expand': expandDescription}" ref="expandElement">{{expandText}}</p>
        <div v-show="showTextExpanse && !expandDescription" class="expanse-button"
             @click="expandDescription = true">{{$t('common:button.readMore')}}
        </div>
    </div>
</template>

<script>
    export default {
        props: ['expandText'],
        data() {
            return {expandDescription: false, isMounted: false}
        },
        computed: {
            showTextExpanse() {
                if (this.isMounted) {
                    return this.$refs.expandElement.scrollHeight > this.$refs.expandElement.clientHeight;
                }
                return false;
            }
        },
        mounted(){
            this.isMounted = true;
        }
    }
</script>

<style lang="scss">
    .expand-text-container {
        p {
            font-weight: 300;
            font-size: 16px;
            line-height: 1.6em;
            max-height: 8em;
            overflow-y: hidden;
            overflow-x: hidden;
            margin-bottom: 0;
        }
        p.expand {
            max-height: none;
            white-space: pre-wrap;
        }
        .expanse-button {
            display: inline-block;
            vertical-align: top;
            font-size: 12px;
            line-height: 16px;
            color: $secondary-text;
            cursor: pointer;
        }
        :hover.expanse-button {
            text-decoration: underline;
        }
    }
</style>
{'fraction_non_alphanumeric': 0.1286266924564797, 'fraction_numerical': 0.007736943907156673, 'mean_word_length': 1.4725099601593625, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2752467', 'n_tokens_mistral': 905, 'n_tokens_neox': 868, 'n_words': 160}