From db2c961ff084ed8bc1d005a00b64167cc30e9314 Mon Sep 17 00:00:00 2001 From: Jamie Taylor Date: Wed, 28 Mar 2018 18:31:46 +0900 Subject: [PATCH 1/6] Limit user page height. --- .../assets/coffee/react/profile-page/user-page.coffee | 4 ++-- resources/assets/less/bem/page-extra.less | 11 +++++++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/resources/assets/coffee/react/profile-page/user-page.coffee b/resources/assets/coffee/react/profile-page/user-page.coffee index cd077db3759..1e41eca34f6 100644 --- a/resources/assets/coffee/react/profile-page/user-page.coffee +++ b/resources/assets/coffee/react/profile-page/user-page.coffee @@ -22,7 +22,7 @@ el = React.createElement class ProfilePage.UserPage extends React.Component render: => isBlank = @props.userPage.initialRaw.trim() == '' - div className: 'page-extra', + div className: 'page-extra page-extra--me-section', el ProfilePage.ExtraHeader, name: @props.name, withEdit: @props.withEdit if !@props.userPage.editing && @props.withEdit && !isBlank @@ -39,7 +39,7 @@ class ProfilePage.UserPage extends React.Component else if @props.withEdit && isBlank @pageNew() else - @pageShow() + div className: 'page-extra__content-overflow-wrapper', @pageShow() editStart: -> diff --git a/resources/assets/less/bem/page-extra.less b/resources/assets/less/bem/page-extra.less index 0386b287fa1..422c6ad321b 100644 --- a/resources/assets/less/bem/page-extra.less +++ b/resources/assets/less/bem/page-extra.less @@ -35,6 +35,11 @@ padding: 0; } + &--me-section { + padding-right: 0px; + padding-bottom: 0px; + } + &__actions { display: flex; flex-direction: column; @@ -80,6 +85,12 @@ width: 100%; } + &__content-overflow-wrapper { + max-height: 400px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } + &__title { font-size: 18px; font-weight: 500; From c173e201085a913b3e6e1f544c02a658b82bebfe Mon Sep 17 00:00:00 2001 From: Jamie Taylor Date: Thu, 29 Mar 2018 16:34:16 +0900 Subject: [PATCH 2/6] Update layout of user-page editor to match new height --- .../coffee/react/profile-page/user-page.coffee | 9 ++++++--- resources/assets/less/bem/page-extra.less | 16 +++++++++++++++- resources/assets/less/bem/post-editor.less | 2 -- .../less/bem/profile-extra-user-page-editor.less | 2 +- 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/resources/assets/coffee/react/profile-page/user-page.coffee b/resources/assets/coffee/react/profile-page/user-page.coffee index 1e41eca34f6..c10ddb7a01c 100644 --- a/resources/assets/coffee/react/profile-page/user-page.coffee +++ b/resources/assets/coffee/react/profile-page/user-page.coffee @@ -36,10 +36,13 @@ class ProfilePage.UserPage extends React.Component if @props.userPage.editing el ProfilePage.UserPageEditor, userPage: @props.userPage - else if @props.withEdit && isBlank - @pageNew() else - div className: 'page-extra__content-overflow-wrapper', @pageShow() + div className: 'page-extra__content-overflow-wrapper-outer', + if @props.withEdit && isBlank + @pageNew() + else + div className: 'page-extra__content-overflow-wrapper-inner', + @pageShow() editStart: -> diff --git a/resources/assets/less/bem/page-extra.less b/resources/assets/less/bem/page-extra.less index 422c6ad321b..c1f3e069720 100644 --- a/resources/assets/less/bem/page-extra.less +++ b/resources/assets/less/bem/page-extra.less @@ -57,6 +57,12 @@ opacity: 0; } + .@{top}--me-section & { + @media @mobile { + margin-right: 30px; + } + } + .@{top}:hover & { opacity: 1; } @@ -85,7 +91,11 @@ width: 100%; } - &__content-overflow-wrapper { + &__content-overflow-wrapper-inner { + padding-bottom: 20px; + } + + &__content-overflow-wrapper-outer { max-height: 400px; overflow-y: auto; -webkit-overflow-scrolling: touch; @@ -108,5 +118,9 @@ right: 0; top: 0; cursor: move; + + .@{top}--me-section & { + margin-right: 30px; + } } } diff --git a/resources/assets/less/bem/post-editor.less b/resources/assets/less/bem/post-editor.less index 8f1d16d5aeb..86d852144ec 100644 --- a/resources/assets/less/bem/post-editor.less +++ b/resources/assets/less/bem/post-editor.less @@ -53,7 +53,6 @@ // not part of bbcode-editor &--profile-page { padding: @page-extra-side-padding--small; - margin: 0 -@page-extra-side-padding--small -(2 * @page-extra-side-padding--small); .beatmapset-description-editor__container & { padding: @padding--small @padding--large @padding--large; @@ -61,7 +60,6 @@ @media @desktop { margin-left: -@page-extra-side-padding--large; - margin-right: -@page-extra-side-padding--large; padding-left: @page-extra-side-padding--large; padding-right: @page-extra-side-padding--large; } diff --git a/resources/assets/less/bem/profile-extra-user-page-editor.less b/resources/assets/less/bem/profile-extra-user-page-editor.less index 9854213427d..53e22c528c5 100644 --- a/resources/assets/less/bem/profile-extra-user-page-editor.less +++ b/resources/assets/less/bem/profile-extra-user-page-editor.less @@ -23,6 +23,6 @@ resize: vertical; border: none; outline: none; - min-height: 200px; + height: 400px; font-family: @font-family-monospace; } From 8147d47f6ee969adf8569cf49c02967457dad82c Mon Sep 17 00:00:00 2001 From: Jamie Taylor Date: Thu, 29 Mar 2018 16:46:05 +0900 Subject: [PATCH 3/6] Use a better css class name --- resources/assets/coffee/react/profile-page/user-page.coffee | 2 +- resources/assets/less/bem/page-extra.less | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/assets/coffee/react/profile-page/user-page.coffee b/resources/assets/coffee/react/profile-page/user-page.coffee index c10ddb7a01c..223d07daf66 100644 --- a/resources/assets/coffee/react/profile-page/user-page.coffee +++ b/resources/assets/coffee/react/profile-page/user-page.coffee @@ -22,7 +22,7 @@ el = React.createElement class ProfilePage.UserPage extends React.Component render: => isBlank = @props.userPage.initialRaw.trim() == '' - div className: 'page-extra page-extra--me-section', + div className: 'page-extra page-extra--userpage', el ProfilePage.ExtraHeader, name: @props.name, withEdit: @props.withEdit if !@props.userPage.editing && @props.withEdit && !isBlank diff --git a/resources/assets/less/bem/page-extra.less b/resources/assets/less/bem/page-extra.less index c1f3e069720..91c29f1bdd8 100644 --- a/resources/assets/less/bem/page-extra.less +++ b/resources/assets/less/bem/page-extra.less @@ -35,7 +35,7 @@ padding: 0; } - &--me-section { + &--userpage { padding-right: 0px; padding-bottom: 0px; } @@ -57,7 +57,7 @@ opacity: 0; } - .@{top}--me-section & { + .@{top}--userpage & { @media @mobile { margin-right: 30px; } @@ -119,7 +119,7 @@ top: 0; cursor: move; - .@{top}--me-section & { + .@{top}--userpage & { margin-right: 30px; } } From e71bfbc9c300a7715c33ab25cbb117d17e365e00 Mon Sep 17 00:00:00 2001 From: Jamie Taylor Date: Thu, 29 Mar 2018 16:51:55 +0900 Subject: [PATCH 4/6] Fix editor alignment on mobile --- resources/assets/less/bem/post-editor.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/assets/less/bem/post-editor.less b/resources/assets/less/bem/post-editor.less index 86d852144ec..4381e7b3b10 100644 --- a/resources/assets/less/bem/post-editor.less +++ b/resources/assets/less/bem/post-editor.less @@ -52,6 +52,7 @@ // not part of bbcode-editor &--profile-page { + margin-left: -@page-extra-side-padding--large; padding: @page-extra-side-padding--small; .beatmapset-description-editor__container & { @@ -59,7 +60,6 @@ } @media @desktop { - margin-left: -@page-extra-side-padding--large; padding-left: @page-extra-side-padding--large; padding-right: @page-extra-side-padding--large; } From 6ceee37d5d543f7e11abefeb303c2e354951c228 Mon Sep 17 00:00:00 2001 From: Jamie Taylor Date: Thu, 29 Mar 2018 17:07:43 +0900 Subject: [PATCH 5/6] Re-add right padding to content container --- resources/assets/less/bem/page-extra.less | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/assets/less/bem/page-extra.less b/resources/assets/less/bem/page-extra.less index 91c29f1bdd8..785247f33e2 100644 --- a/resources/assets/less/bem/page-extra.less +++ b/resources/assets/less/bem/page-extra.less @@ -92,6 +92,7 @@ } &__content-overflow-wrapper-inner { + padding-right: 30px; padding-bottom: 20px; } From 28cfd4c609c5d8a7c17450b7022a2b288349e08d Mon Sep 17 00:00:00 2001 From: Jamie Taylor Date: Thu, 29 Mar 2018 17:59:01 +0900 Subject: [PATCH 6/6] Change margins to use variables --- resources/assets/less/bem/page-extra.less | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/resources/assets/less/bem/page-extra.less b/resources/assets/less/bem/page-extra.less index 785247f33e2..aa2c21ead90 100644 --- a/resources/assets/less/bem/page-extra.less +++ b/resources/assets/less/bem/page-extra.less @@ -57,12 +57,6 @@ opacity: 0; } - .@{top}--userpage & { - @media @mobile { - margin-right: 30px; - } - } - .@{top}:hover & { opacity: 1; } @@ -121,7 +115,10 @@ cursor: move; .@{top}--userpage & { - margin-right: 30px; + margin-right: @page-extra-side-padding--large; + @media @mobile { + margin-right: @page-extra-side-padding--small; + } } } }