From 4c3dd0b25472b4d291f607979d255dd406856bef Mon Sep 17 00:00:00 2001
From: Lynx Kotoura <lynx@lv9.org>
Date: Tue, 5 Sep 2017 19:31:24 +0900
Subject: Adjust status embeds (#4808)

* Adjust status embeds

Adjust styles of embed code. Adjust styles of embed pages. Fix overflow of embed-modal.

* Remove trailing whitespace

* Using width from the variable
---
 app/javascript/styles/components.scss     | 95 ++++++++++++++++---------------
 app/javascript/styles/stream_entries.scss | 71 ++++++++++++-----------
 2 files changed, 86 insertions(+), 80 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 0fbaeeea0..1b9763e90 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3966,41 +3966,10 @@ noscript {
   }
 }
 
-.embed-modal__html {
-  color: $ui-secondary-color;
-  outline: 0;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  border: none;
-  padding: 10px;
-  font-family: 'mastodon-font-monospace', monospace;
-  background: $ui-base-color;
-  color: $ui-primary-color;
-  font-size: 14px;
-  margin: 0;
-  margin-bottom: 15px;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-
-  &:focus {
-    background: lighten($ui-base-color, 4%);
-  }
-
-  @media screen and (max-width: 600px) {
-    font-size: 16px;
-  }
-}
-
 .embed-modal {
+  max-width: 80vw;
+  max-height: 80vh;
+
   h4 {
     padding: 30px;
     font-weight: 500;
@@ -4008,18 +3977,52 @@ noscript {
     text-align: center;
   }
 
-  .hint {
-    margin-bottom: 15px;
-  }
-}
+  .embed-modal__container {
+    padding: 10px;
 
-.embed-modal__container {
-  padding: 10px;
-}
+    .hint {
+      margin-bottom: 15px;
+    }
 
-.embed-modal__iframe {
-  width: 100%;
-  min-width: 400px;
-  overflow: hidden;
-  border: 0;
+    .embed-modal__html {
+      color: $ui-secondary-color;
+      outline: 0;
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      border: none;
+      padding: 10px;
+      font-family: 'mastodon-font-monospace', monospace;
+      background: $ui-base-color;
+      color: $ui-primary-color;
+      font-size: 14px;
+      margin: 0;
+      margin-bottom: 15px;
+
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &::-moz-focus-inner,
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
+      &:focus {
+        background: lighten($ui-base-color, 4%);
+      }
+
+      @media screen and (max-width: 600px) {
+        font-size: 16px;
+      }
+    }
+
+    .embed-modal__iframe {
+      width: 400px;
+      max-width: 100%;
+      overflow: hidden;
+      border: 0;
+    }
+  }
 }
diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss
index 7048ab110..8ed4c0b25 100644
--- a/app/javascript/styles/stream_entries.scss
+++ b/app/javascript/styles/stream_entries.scss
@@ -403,51 +403,54 @@
 
 .embed {
   .activity-stream {
-    border-radius: 4px;
     box-shadow: none;
 
     .entry {
-      &:last-child {
-        border-radius: 0 0 4px 4px;
-      }
 
-      &:first-child {
-        border-radius: 4px 4px 0 0;
+      .detailed-status.light {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: flex-start;
 
-        &:last-child {
-          border-radius: 4px;
+        .detailed-status__display-name {
+          flex: 1;
+          margin: 0 5px 15px 0;
         }
-      }
-    }
-  }
-}
 
-.button.button-secondary.logo-button {
-  position: absolute;
-  right: 14px;
-  top: 14px;
-  font-size: 14px;
+        .button.button-secondary.logo-button {
+          flex: 0 auto;
+          font-size: 14px;
 
-  svg {
-    width: 20px;
-    height: auto;
-    vertical-align: middle;
-    margin-right: 5px;
+          svg {
+            width: 20px;
+            height: auto;
+            vertical-align: middle;
+            margin-right: 5px;
 
-    path:first-child {
-      fill: $ui-primary-color;
-    }
+            path:first-child {
+              fill: $ui-primary-color;
+            }
 
-    path:last-child {
-      fill: $simple-background-color;
-    }
-  }
+            path:last-child {
+              fill: $simple-background-color;
+            }
+          }
 
-  &:active,
-  &:focus,
-  &:hover {
-    svg path:first-child {
-      fill: lighten($ui-primary-color, 4%);
+          &:active,
+          &:focus,
+          &:hover {
+            svg path:first-child {
+              fill: lighten($ui-primary-color, 4%);
+            }
+          }
+        }
+
+        .status__content,
+        .detailed-status__meta {
+          flex: 100%;
+        }
+      }
     }
   }
 }
-- 
cgit 


From d8d2a5474148c38ddc5754fc5d7cbf8083bab3bf Mon Sep 17 00:00:00 2001
From: PFM <info@eyesight.jp>
Date: Wed, 6 Sep 2017 20:55:47 +0900
Subject: fix text position of NSFW for video file (#4819)

---
 app/javascript/mastodon/components/video_player.js |  4 ++--
 app/javascript/styles/components.scss              | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js
index 999cf42d9..2c834fb66 100644
--- a/app/javascript/mastodon/components/video_player.js
+++ b/app/javascript/mastodon/components/video_player.js
@@ -146,7 +146,7 @@ export default class VideoPlayer extends React.PureComponent {
     if (!this.state.visible) {
       if (sensitive) {
         return (
-          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' onClick={this.handleVisibility}>
+          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler__video' onClick={this.handleVisibility}>
             {spoilerButton}
             <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
             <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
@@ -154,7 +154,7 @@ export default class VideoPlayer extends React.PureComponent {
         );
       } else {
         return (
-          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' onClick={this.handleVisibility}>
+          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler__video' onClick={this.handleVisibility}>
             {spoilerButton}
             <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
             <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 1b9763e90..bd7d0c3d4 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -2343,6 +2343,22 @@ button.icon-button.active i.fa-retweet {
   height: 100%;
 }
 
+.media-spoiler__video {
+  align-items: center;
+  background: $base-overlay-background;
+  color: $primary-text-color;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+  z-index: 100;
+}
+
 .media-spoiler__warning {
   display: block;
   font-size: 14px;
-- 
cgit 


From 13ffa3c59e1a2727b287b2e6cde47f39c14ae815 Mon Sep 17 00:00:00 2001
From: voidSatisfaction <lourie@naver.com>
Date: Thu, 7 Sep 2017 00:32:15 +0900
Subject: Add Smartphone screen favourite back button and adjust styles (#4813)

* Feat add get-back button on favourite columnHeader

* Style adjust nice looking get-back button

* Fix delete media query and add padding right

* fix: restore padding and add lastchild style for back-button
---
 app/javascript/mastodon/features/favourited_statuses/index.js | 1 +
 app/javascript/styles/components.scss                         | 4 ++++
 2 files changed, 5 insertions(+)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/mastodon/features/favourited_statuses/index.js b/app/javascript/mastodon/features/favourited_statuses/index.js
index 82b16b369..1e1f5873c 100644
--- a/app/javascript/mastodon/features/favourited_statuses/index.js
+++ b/app/javascript/mastodon/features/favourited_statuses/index.js
@@ -77,6 +77,7 @@ export default class Favourites extends ImmutablePureComponent {
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
+          showBackButton
         />
 
         <StatusList
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index bd7d0c3d4..7fd16f6b3 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1622,6 +1622,10 @@
   &:hover {
     text-decoration: underline;
   }
+
+  &:last-child {
+    padding: 0 15px 0 0;
+  }
 }
 
 .column-back-button__icon {
-- 
cgit