Merge pull request #3686 from movilla/flash_conversation_mobile

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

@@ -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
 

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(){

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;
+  }
+}

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 {
@@ -60,3 +72,9 @@
         85%  { top : 0; }
         100% { top : -100px; }
 }
+@-o-keyframes expose {
+        0%   { top : -100px; }
+        15%  { top : 0; }
+        85%  { top : 0; }
+        100% { top : -100px; }
+}

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')
 

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|

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;}