Unverified Commit 5c663896 authored by Aysam Guerler's avatar Aysam Guerler Committed by GitHub
Browse files

Merge pull request #21009 from guerler/fix_user_preferences_styles 

Fix content wrapping in cards and preference title
parents f77f6e21 044c1231

client/src/components/Common/Heading.vue

+2 −6
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,10 +96,6 @@ const element = computed(() => { 
<style lang="scss" scoped>

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



.heading {

    word-break: break-all;

}



// prettier-ignore

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

    &:not(.truncate) {

client/src/components/User/UserDetailsElement.vue

+7 −6
Original line number Diff line number Diff line
@@ -35,17 +35,18 @@ const getStoragePercentageClass = (percentage: number) => { 
        <div class="user-details d-flex flex-gapx-1 flex-gapy-1 w-100 justify-content-between">

            <div class="d-flex align-items-center flex-gapx-1">

                <div class="d-flex align-items-center flex-gapx-1 mr-5">

                    <FontAwesomeIcon :icon="faUser" class="user-details-icon" />

                    <FontAwesomeIcon :icon="faUser" class="user-details-icon p-2" />

                    <span v-b-tooltip.hover.noninteractive title="Your username (public name)">

                        {{ userUsername }}

                    </span>

                </div>



                <div class="d-flex align-items-center flex-gapx-1">

                    <FontAwesomeIcon :icon="faAt" class="user-details-icon" />

                    <FontAwesomeIcon :icon="faAt" class="user-details-icon p-2" />

                    <span

                        id="user-preferences-current-email"

                        v-b-tooltip.hover.noninteractive

                        class="word-wrap-break"

                        title="Your email address">

                        {{ userEmail }}

                    </span>
@@ -95,10 +96,10 @@ const getStoragePercentageClass = (percentage: number) => { 


        .user-details-icon {

            color: $brand-primary;

            font-size: 1rem;

            border: 1px solid $brand-primary;

            border-radius: 0.75rem;

            padding: 0.5rem;

            font-size: $h5-font-size;

            border: $border-default;

            border-color: $brand-primary;

            border-radius: $border-radius-extralarge;

        }

    }

}

client/src/components/User/UserPreferences.vue

+2 −3
Original line number Diff line number Diff line
@@ -154,9 +154,8 @@ onMounted(async () => { 
    <div class="d-flex flex-column">

        <BreadcrumbHeading :items="breadcrumbItems" />



        <Heading h2 size="md">

            This page allows you to manage your user preferences. You can change your email address, password, and other

            settings here.

        <Heading h2 size="sm">

            Manage your user preferences on this page, including email address, password, and other settings.

        </Heading>



        <BAlert :variant="messageVariant" :show="!!message">

client/src/style/scss/ui.scss

+7 −0
Original line number Diff line number Diff line
@@ -44,6 +44,13 @@ 
    overflow-y: auto !important;

}



// utility class to wrap words or break if necessary

.word-wrap-break {

    overflow-wrap: break-word;

    white-space: normal;

    word-break: break-word;

}



// utility class to set word wrap to normal

.word-wrap-normal {

    word-wrap: normal;