Show mastodon on modal (#6129)

diff --git a/app/controllers/authorize_follows_controller.rb b/app/controllers/authorize_follows_controller.rb
index 78b56418364723d20b07f3546f4a35cfe59d8ace..7afe664d1be21d171af7bbc51f6115ec7f653fe4 100644 (file)
--- a/app/controllers/authorize_follows_controller.rb
+++ b/app/controllers/authorize_follows_controller.rb
@@ -4,6 +4,7 @@ class AuthorizeFollowsController < ApplicationController
   layout 'modal'
 
   before_action :authenticate_user!
+  before_action :set_body_classes
 
   def show
     @account = located_account || render(:error)
@@ -58,4 +59,8 @@ class AuthorizeFollowsController < ApplicationController
   def acct_params
     params.fetch(:acct, '')
   end
+
+  def set_body_classes
+    @body_classes = 'modal-layout'
+  end
 end

diff --git a/app/controllers/remote_follow_controller.rb b/app/controllers/remote_follow_controller.rb
index 48b026aa5a08da48070d04f7b0f1dc9eb9e04ac6..3b988e08d80a83bcf2412087927f55518f2b2722 100644 (file)
--- a/app/controllers/remote_follow_controller.rb
+++ b/app/controllers/remote_follow_controller.rb
@@ -38,4 +38,8 @@ class RemoteFollowController < ApplicationController
   def suspended_account?
     @account.suspended?
   end
+
+  def set_body_classes
+    @body_classes = 'modal-layout'
+  end
 end

diff --git a/app/controllers/shares_controller.rb b/app/controllers/shares_controller.rb
index 994742c3df6b2ae61ab7c0907a3bc431c70ba185..fc2469deaaf76babcf5e12b77d7df0b8eaca6be4 100644 (file)
--- a/app/controllers/shares_controller.rb
+++ b/app/controllers/shares_controller.rb
@@ -25,6 +25,6 @@ class SharesController < ApplicationController
   end
 
   def set_body_classes
-    @body_classes = 'compose-standalone'
+    @body_classes = 'modal-layout compose-standalone'
   end
 end

diff --git a/app/javascript/images/mastodon-drawer.png b/app/javascript/images/mastodon-ui.png
similarity index 100%
rename from app/javascript/images/mastodon-drawer.png
rename to app/javascript/images/mastodon-ui.png

diff --git a/app/javascript/images/wave-compose-standalone.png b/app/javascript/images/wave-compose-standalone.png
new file mode 100644 (file)
index 0000000..287ee63
Binary files /dev/null and b/app/javascript/images/wave-compose-standalone.png differ

diff --git a/app/javascript/images/wave-modal.png b/app/javascript/images/wave-modal.png
new file mode 100644 (file)
index 0000000..88818a6
Binary files /dev/null and b/app/javascript/images/wave-modal.png differ

diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 44aa105645a01ca1fead9776442255cfadd14e4e..fd6665f65c1d4cbedeed78ec92ad1c4950960c7c 100644 (file)
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -6,6 +6,7 @@
 
 @import 'mastodon/reset';
 @import 'mastodon/basics';
+@import 'mastodon/modal';
 @import 'mastodon/containers';
 @import 'mastodon/lists';
 @import 'mastodon/footer';

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 3240b38a420c225e82e80f1fc3b515576c9b8d1a..bc193a15adf1dabe249da67ffc084ac91970a5d8 100644 (file)
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1773,7 +1773,7 @@
   }
 
   > .mastodon {
-    background: url('../images/mastodon-drawer.png') no-repeat left bottom / contain;
+    background: url('../images/mastodon-ui.png') no-repeat left bottom / contain;
     flex: 1;
   }
 }

diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
new file mode 100644 (file)
index 0000000..310dcb9
--- /dev/null
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -0,0 +1,20 @@
+.modal-layout {
+  background: $ui-base-color url('../images/wave-modal.png') repeat-x bottom fixed;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 0;
+}
+
+.modal-layout__mastodon {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  > * {
+    flex: 1;
+    max-height: 235px;
+    background: url('../images/mastodon-ui.png') no-repeat left bottom / contain;
+  }
+}

diff --git a/app/views/layouts/modal.html.haml b/app/views/layouts/modal.html.haml
index a819e098d6c57d61ae47eed5cd8b2abdb6fc3507..d01b6b6c565260947acb116514220183e46fadcb 100644 (file)
--- a/app/views/layouts/modal.html.haml
+++ b/app/views/layouts/modal.html.haml
@@ -12,5 +12,7 @@
         = fa_icon 'sign-out'
 
   .container= yield
+  .modal-layout__mastodon
+    %div
 
 = render template: 'layouts/application'