Commit cbc4aae8 authored by guerler's avatar guerler
Browse files

Move word wrapping style, reuse for email in user preferences

parent 384d1a01

client/src/components/Common/Heading.vue

+2 −8
Original line number Diff line number Diff line
@@ -53,7 +53,7 @@ const element = computed(() => { 
</script>



<template>

    <div v-if="props.separator" class="separator heading">

    <div v-if="props.separator" class="separator heading word-wrap-break">

        <GButton v-if="collapsible" transparent size="small" icon-only inline @click="$emit('click')">

            <FontAwesomeIcon v-if="collapsed" fixed-width :icon="faAngleDoubleDown" />

            <FontAwesomeIcon v-else fixed-width :icon="faAngleDoubleUp" />
@@ -75,7 +75,7 @@ const element = computed(() => { 
    <component

        :is="element"

        v-else

        class="heading"

        class="heading word-wrap-break"

        :class="[

            sizeClass,

            props.bold ? 'font-weight-bold' : '',
@@ -96,12 +96,6 @@ const element = computed(() => { 
<style lang="scss" scoped>

@import "scss/theme/blue.scss";



.heading {

    overflow-wrap: break-word;

    white-space: normal;

    word-break: break-word;

}



// prettier-ignore

h1, h2, h3, h4, h5, h6 {

    &:not(.truncate) {

client/src/components/User/UserDetailsElement.vue

+1 −0
Original line number Diff line number Diff line
@@ -45,6 +45,7 @@ const getStoragePercentageClass = (percentage: number) => { 
                    <FontAwesomeIcon :icon="faAt" class="user-details-icon p-2" />

                    <span

                        id="user-preferences-current-email"

                        class="word-wrap-break"

                        v-b-tooltip.hover.noninteractive

                        title="Your email address">

                        {{ userEmail }}

client/src/style/scss/ui.scss

+6 −0
Original line number Diff line number Diff line
@@ -49,6 +49,12 @@ 
    word-wrap: normal;

}



.word-wrap-break {

    overflow-wrap: break-word;

    white-space: normal;

    word-break: break-word;

}



// utility class to set white space wrapping to normal

.white-space-normal {

    white-space: normal;