From 763a8938297cb8c0470d9b7afd68fc01e9ab8bd7 Mon Sep 17 00:00:00 2001
From: movilla <moviglez@gmail.com>
Date: Sat, 8 Dec 2012 14:59:01 +0100
Subject: [PATCH] Add flash warning to conversation mobile, unification of
 flash warning with login and register mobile, and add support for flash
 warning to Opera browser

---
 Changelog.md                                  |  1 +
 app/assets/stylesheets/_mixins.css.scss       |  2 ++
 app/assets/stylesheets/mobile.css.scss        | 20 +++++++++++++++++
 .../stylesheets/new_styles/_animations.scss   | 22 +++++++++++++++++--
 app/views/conversations/index.mobile.haml     |  6 +++++
 app/views/registrations/new.mobile.haml       |  2 +-
 app/views/sessions/new.mobile.haml            |  2 +-
 7 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/Changelog.md b/Changelog.md
index d592a791b..e0be503fb 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -15,6 +15,7 @@
 
 * Add possibility to contact the administrator. [#3792](https://github.com/diaspora/diaspora/pull/3792)
 * Add simple background for unread messages/conversations mobile. [#3724](https://github.com/diaspora/diaspora/pull/3724)
+* Add flash warning to conversation mobile, unification of flash warning with login and register mobile, and add support for flash warning to Opera browser. [#3686](https://github.com/diaspora/diaspora/pull/3686)
 
 ## Bug Fixes
 
diff --git a/app/assets/stylesheets/_mixins.css.scss b/app/assets/stylesheets/_mixins.css.scss
index bc5d6ed2b..1423a84b6 100644
--- a/app/assets/stylesheets/_mixins.css.scss
+++ b/app/assets/stylesheets/_mixins.css.scss
@@ -87,12 +87,14 @@ $default-border-radius: 3px;
   -webkit-animation : $name $speed $occurances;
      -moz-animation : $name $speed $occurances;
       -ms-animation : $name $speed $occurances;
+       -o-animation : $name $speed $occurances;
 }
 
 @mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
   -webkit-animation: $name $speed $easing;
   -moz-animation: $name $speed $easing;
   -ms-animation: $name $speed $easing;
+  -o-animation: $name $speed $easing;
 }
 
 @mixin video-overlay(){
diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss
index 39e5d3d89..226f96769 100644
--- a/app/assets/stylesheets/mobile.css.scss
+++ b/app/assets/stylesheets/mobile.css.scss
@@ -2,6 +2,7 @@
 @import 'bootstrap-responsive';
 @import "_mixins.css.scss";
 @import 'vendor/autoSuggest';
+@import '_flash_messages.scss';
 
 $blue: #3f8fba;
 
@@ -804,3 +805,22 @@ form#new_user.new_user input.btn {
     }
   }
 }
+
+.conversation_error {
+  color: #DF0101;
+  text-shadow: 1px 1px 5px #666;
+}
+
+.conversation_notice {
+  color: rgb(10, 150, 10);
+  text-shadow: 1px 1px 20px rgb(126, 240, 77);
+}
+
+#flash_notice,
+#flash_alert,
+#flash_error {
+  .message {
+    min-width: 200px;
+    max-width: 400px;
+  }
+}
diff --git a/app/assets/stylesheets/new_styles/_animations.scss b/app/assets/stylesheets/new_styles/_animations.scss
index 761ec331e..3ccb0219b 100644
--- a/app/assets/stylesheets/new_styles/_animations.scss
+++ b/app/assets/stylesheets/new_styles/_animations.scss
@@ -13,7 +13,11 @@
 	65%  { @include opacity(0.9); }
 	100% { @include opacity(0.3); }
 }
-
+@-o-keyframes opacity-pulse {
+	0%   { @include opacity(0.3); }
+	65%  { @include opacity(0.9); }
+	100% { @include opacity(0.3); }
+}
 
 @-webkit-keyframes ease-over {
 	0%   { @include opacity(0); -webkit-transform : scale(1.3); }
@@ -27,6 +31,10 @@
 	0%   { @include opacity(0); -ms-transform : scale(1.3); }
 	100% { @include opacity(1); -ms-transform : scale(1); }
 }
+@-o-keyframes ease-over {
+	0%   { @include opacity(0); -o-transform : scale(1.3); }
+	100% { @include opacity(1); -o-transform : scale(1); }
+}
 
 @-webkit-keyframes ease-out {
 	0%     { @include opacity(1); -webkit-transform : scale(1); }
@@ -40,6 +48,10 @@
 	0%     { @include opacity(1); -ms-transform : scale(1); }
 	100%   { @include opacity(0); -ms-transform : scale(1.3); }
 }
+@-o-keyframes ease-out {
+	0%     { @include opacity(1); -o-transform : scale(1); }
+	100%   { @include opacity(0); -o-transform : scale(1.3); }
+}
 
 /* flash message animations */
 @-webkit-keyframes expose {
@@ -59,4 +71,10 @@
         15%  { top : 0; }
         85%  { top : 0; }
         100% { top : -100px; }
-}
\ No newline at end of file
+}
+@-o-keyframes expose {
+        0%   { top : -100px; }
+        15%  { top : 0; }
+        85%  { top : 0; }
+        100% { top : -100px; }
+}
diff --git a/app/views/conversations/index.mobile.haml b/app/views/conversations/index.mobile.haml
index 9f45d082c..68ea4c8a7 100644
--- a/app/views/conversations/index.mobile.haml
+++ b/app/views/conversations/index.mobile.haml
@@ -5,6 +5,12 @@
 .right
   = link_to t('.new_message'), new_conversation_path, :class => 'btn'
 
+- flash.each do |name, msg|
+  %div{:id => "flash_#{name}", :class => "expose"}
+    .message= msg
+  .stream
+    %p{:class => "conversation_#{name}"}= msg
+
 %h3
   = t('.inbox')
 
diff --git a/app/views/registrations/new.mobile.haml b/app/views/registrations/new.mobile.haml
index 856439250..339affcfa 100644
--- a/app/views/registrations/new.mobile.haml
+++ b/app/views/registrations/new.mobile.haml
@@ -9,7 +9,7 @@
 :css
   div.navbar.navbar-fixed-top{ display:none;}
   body{ padding: 10px;}
-  legend{ background-image: url(/assets/header-bg-long.jpg); color: #939393;}
+  #flash_error .message{ padding: 1px 1px 1px;}
 
 .stream
   - flash.each do |name, msg|
diff --git a/app/views/sessions/new.mobile.haml b/app/views/sessions/new.mobile.haml
index e4a9c87bf..b9b1560a0 100644
--- a/app/views/sessions/new.mobile.haml
+++ b/app/views/sessions/new.mobile.haml
@@ -6,7 +6,7 @@
 
 :css
   body{ padding: 10px; margin: 0px 10px;}
-  #flash_alert .message{ min-width: 200px; max-width: 400px;}
+  #flash_alert .message{ padding: 10px 12px 8px;}
   footer{ padding-top: 0;}
   .landing{ padding: 20px; margin: -10px -20px 10px -20px; background-color:#4b4b4b; box-shadow: 0 3px 40px rgba(0,0,0,0.8); z-index: 10; position: relative; text-align: center;}
   h1{ font-size: 40px; font-weight: 200;}