From b08d2d4f78e143189c0dc3470a8dc186bf441419 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Wed, 23 Dec 2020 19:55:23 +0100
Subject: Fix media modal buttons not showing up on mobile (#15417)

Fixes #15374

When the pop-out player was introduced, it had tweaks for the mobile
view, but it's now disabled in mobile mode and the styling was reused
for modals, causing the footer to be hidden on mobile without a good
reason.

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/styles/mastodon/components.scss | 15 ---------------
 1 file changed, 15 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 2163d74fc..c248f681e 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7194,21 +7194,6 @@ noscript {
   .audio-player {
     border-radius: 0;
   }
-
-  @media screen and (max-width: 415px) {
-    width: 210px;
-    bottom: 10px;
-    right: 10px;
-
-    &__footer {
-      display: none;
-    }
-
-    .video-player,
-    .audio-player {
-      border-radius: 0 0 4px 4px;
-    }
-  }
 }
 
 .picture-in-picture-placeholder {
-- 
cgit 


From ba748a83f2050dff27758bce67c05d37a8b7d8f3 Mon Sep 17 00:00:00 2001
From: Takeshi Umeda <noel.yoshiba@gmail.com>
Date: Sun, 27 Dec 2020 07:50:34 +0900
Subject: Fix logo button style (#15428)

* Fix bell button rtl style

* Remove size and style props from button component

* Fix logo button style

* Update jest snapshot
---
 .../__tests__/__snapshots__/button-test.js.snap    | 49 ----------------------
 app/javascript/mastodon/components/button.js       | 14 -------
 .../mastodon/features/account/components/header.js | 12 +++---
 app/javascript/styles/mastodon/components.scss     |  5 +++
 app/javascript/styles/mastodon/containers.scss     |  5 +++
 app/javascript/styles/mastodon/rtl.scss            |  5 +++
 app/javascript/styles/mastodon/statuses.scss       |  9 +++-
 7 files changed, 28 insertions(+), 71 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap
index 5c04e0979..86fbba917 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap
@@ -4,13 +4,6 @@ exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] =
 <button
   className="button button-secondary"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 />
 `;
 
@@ -18,13 +11,6 @@ exports[`<Button /> renders a button element 1`] = `
 <button
   className="button"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 />
 `;
 
@@ -33,13 +19,6 @@ exports[`<Button /> renders a disabled attribute if props.disabled given 1`] = `
   className="button"
   disabled={true}
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 />
 `;
 
@@ -47,13 +26,6 @@ exports[`<Button /> renders class="button--block" if props.block given 1`] = `
 <button
   className="button button--block"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 />
 `;
 
@@ -61,13 +33,6 @@ exports[`<Button /> renders the children 1`] = `
 <button
   className="button"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 >
   <p>
     children
@@ -79,13 +44,6 @@ exports[`<Button /> renders the given text 1`] = `
 <button
   className="button"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 >
   foo
 </button>
@@ -95,13 +53,6 @@ exports[`<Button /> renders the props.text instead of children 1`] = `
 <button
   className="button"
   onClick={[Function]}
-  style={
-    Object {
-      "height": "36px",
-      "lineHeight": "36px",
-      "padding": "0 16px",
-    }
-  }
 >
   foo
 </button>
diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js
index eb8dd7dc8..85b2d78ca 100644
--- a/app/javascript/mastodon/components/button.js
+++ b/app/javascript/mastodon/components/button.js
@@ -10,17 +10,11 @@ export default class Button extends React.PureComponent {
     disabled: PropTypes.bool,
     block: PropTypes.bool,
     secondary: PropTypes.bool,
-    size: PropTypes.number,
     className: PropTypes.string,
     title: PropTypes.string,
-    style: PropTypes.object,
     children: PropTypes.node,
   };
 
-  static defaultProps = {
-    size: 36,
-  };
-
   handleClick = (e) => {
     if (!this.props.disabled) {
       this.props.onClick(e);
@@ -36,13 +30,6 @@ export default class Button extends React.PureComponent {
   }
 
   render () {
-    const style = {
-      padding: `0 ${this.props.size / 2.25}px`,
-      height: `${this.props.size}px`,
-      lineHeight: `${this.props.size}px`,
-      ...this.props.style,
-    };
-
     const className = classNames('button', this.props.className, {
       'button-secondary': this.props.secondary,
       'button--block': this.props.block,
@@ -54,7 +41,6 @@ export default class Button extends React.PureComponent {
         disabled={this.props.disabled}
         onClick={this.handleClick}
         ref={this.setRef}
-        style={style}
         title={this.props.title}
       >
         {this.props.text || this.props.children}
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index c8fd85e1d..b47ebed62 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@@ -164,13 +164,17 @@ class Header extends ImmutablePureComponent {
       info.push(<span key='domain_blocked' className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain blocked' /></span>);
     }
 
+    if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
+      bellBtn = <IconButton icon='bell-o' size={24} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
+    }
+
     if (me !== account.get('id')) {
       if (!account.get('relationship')) { // Wait until the relationship is loaded
         actionBtn = '';
       } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
+        actionBtn = <Button className={classNames('logo-button', { 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} style={account.getIn(['relationship', 'following']) && { padding: '0 10px', 'min-width': '88px' }} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />;
+        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']), 'button--with-bell': bellBtn !== '' })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />;
       } else if (account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
       }
@@ -178,10 +182,6 @@ class Header extends ImmutablePureComponent {
       actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} onClick={this.openEditProfile} />;
     }
 
-    if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) {
-      bellBtn = <IconButton icon='bell-o' size={24} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
-    }
-
     if (account.get('moved') && !account.getIn(['relationship', 'following'])) {
       actionBtn = '';
     }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index c248f681e..d6385f161 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -154,6 +154,11 @@
     display: block;
     width: 100%;
   }
+
+  .layout-multiple-columns &.button--with-bell {
+    font-size: 12px;
+    padding: 0 8px;
+  }
 }
 
 .column__wrapper {
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 51d9b46b0..cb0301372 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -444,6 +444,11 @@
       }
     }
 
+    .logo-button {
+      line-height: 36px;
+      padding: 3px 15px;
+    }
+
     &__image {
       border-radius: 4px 4px 0 0;
       overflow: hidden;
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index 8051e4edb..baacf46b9 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -170,6 +170,11 @@ body.rtl {
     right: 42px;
   }
 
+  .account__header__tabs__buttons > .icon-button {
+    margin-right: 0;
+    margin-left: 8px;
+  }
+
   .account__avatar-overlay-overlay {
     right: auto;
     left: 0;
diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss
index 7ae1c5a24..b49b4c7cd 100644
--- a/app/javascript/styles/mastodon/statuses.scss
+++ b/app/javascript/styles/mastodon/statuses.scss
@@ -83,9 +83,14 @@
   background: $ui-highlight-color;
   color: $primary-text-color;
   text-transform: none;
-  line-height: 36px;
+  line-height: 16px;
   height: auto;
-  padding: 3px 15px;
+  min-height: 36px;
+  min-width: 88px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  padding: 0 15px;
   border: 0;
 
   svg {
-- 
cgit 


From 3f4b0dfd47d35818b36fedb767a5a82dc02f87cc Mon Sep 17 00:00:00 2001
From: Takeshi Umeda <noel.yoshiba@gmail.com>
Date: Thu, 31 Dec 2020 07:18:39 +0900
Subject: Fix logo button style more (#15458)

---
 app/javascript/styles/mastodon/containers.scss | 1 -
 app/javascript/styles/mastodon/statuses.scss   | 8 +++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index cb0301372..e40ad18ff 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -445,7 +445,6 @@
     }
 
     .logo-button {
-      line-height: 36px;
       padding: 3px 15px;
     }
 
diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss
index b49b4c7cd..078714325 100644
--- a/app/javascript/styles/mastodon/statuses.scss
+++ b/app/javascript/styles/mastodon/statuses.scss
@@ -83,7 +83,7 @@
   background: $ui-highlight-color;
   color: $primary-text-color;
   text-transform: none;
-  line-height: 16px;
+  line-height: 1.2;
   height: auto;
   min-height: 36px;
   min-width: 88px;
@@ -131,6 +131,12 @@
   }
 }
 
+a.button.logo-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .embed,
 .public-layout {
   .status__content[data-spoiler=folded] {
-- 
cgit 


From e38874dcf7b0fca0f9934fcd0e12bba457c7c212 Mon Sep 17 00:00:00 2001
From: Takeshi Umeda <noel.yoshiba@gmail.com>
Date: Wed, 6 Jan 2021 03:57:32 +0900
Subject: Fix getting-started footer in single column mode not being clickable
 in Safari (#15496)

---
 app/javascript/styles/mastodon/components.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d6385f161..43b340723 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2884,6 +2884,7 @@ a.account__display-name {
     flex: 0 0 auto;
     padding: 10px;
     padding-top: 20px;
+    z-index: 1;
 
     ul {
       margin-bottom: 10px;
-- 
cgit