Show something during initializing phase and use new style css layout for help.

src/i18n/messages-de.po

@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Spreed Speak Freely\n"
 "Report-Msgid-Bugs-To: simon@struktur.de\n"
-"POT-Creation-Date: 2014-03-18 14:40+0100\n"
+"POT-Creation-Date: 2014-03-18 18:42+0100\n"
-"PO-Revision-Date: 2014-03-18 14:41+0100\n"
+"PO-Revision-Date: 2014-03-18 18:42+0100\n"
 "Last-Translator: Simon Eisenmann <simon@struktur.de>\n"
 "Language-Team: de <LL@li.org>\n"
 "Plural-Forms: nplurals=1; plural=0\n"
@@ -264,6 +264,9 @@ msgstr "Abweisen"
 msgid "Waiting for camera/microphone access"
 msgstr "Warte auf Kamera/Mikrofon Freigabe"
 
+msgid "Please wait"
+msgstr "Bitte warten"
+
 msgid "Checking camera and microphone access."
 msgstr "Prüfe Zugriff auf Kamera und Mikrofon."
 

src/i18n/messages.pot

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Spreed Speak Freely 1.0\n"
 "Report-Msgid-Bugs-To: simon@struktur.de\n"
-"POT-Creation-Date: 2014-03-18 14:40+0100\n"
+"POT-Creation-Date: 2014-03-18 18:42+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -264,6 +264,9 @@ msgstr ""
 msgid "Waiting for camera/microphone access"
 msgstr ""
 
+msgid "Please wait"
+msgstr ""
+
 msgid "Checking camera and microphone access."
 msgstr ""
 

src/styles/components/_usability.scss

@@ -19,44 +19,44 @@
  *
  */
 #help {
-position:absolute;
+    position:absolute;
-top:80px;
+    top:80px;
-bottom:10px;
+    bottom:10px;
-left:0px;
+    left:0px;
-right:0px;
+    right:0px;
-width:350px;
+    width:350px;
-font-size:1.1em;
+    font-size:1.1em;
-color:#aaa;
+    color:#aaa;
-text-shadow: 0 0 5px black;
+    text-shadow: 0 0 5px black;
-margin: 0 auto;
+    margin: 0 auto;
--webkit-transition: left 200ms ease-in-out;
+    -webkit-transition: right 200ms ease-in-out;
--moz-transition: left 200ms ease-in-out;
+    -moz-transition: right 200ms ease-in-out;
--ms-transition: left 200ms ease-in-out;
+    -ms-transition: right 200ms ease-in-out;
--o-transition: left 200ms ease-in-out;
+    -o-transition: right 200ms ease-in-out;
-transition: left 200ms ease-in-out;
+    transition: right 200ms ease-in-out;
 }
-.withSettings #help, .withChat.withBuddylist #help {
+.withChat #help, .withBuddylist #help {
-left:-22%;
+    right:260px;
+}
+.withChat.withBuddylist #help, .withSettings #help {
+    right:520px;
 }
 #help > div {
-margin-left:-55%;
+    margin:0 10px;
 }
 #help .help-subline {
-padding:20px 0;
+    padding:20px 0;
-color:#666;
+    color:#888;
 }
 @media only screen and (max-width: 1020px) and (min-width: 400px) {
     #help {
-    width:250px;
+        width:250px;
-    font-size:1em;
+        font-size:1em;
-    left:0px !important;
-    margin:0px;
     }
     #help > div {
-    margin-left:10px;
+        //margin-left:10px;
     }
 }
-
 @media only screen and (max-width: 400px) {
 	#help {
 		display:none;

static/js/directives/page.js

@@ -49,7 +49,7 @@ define(['text!partials/page.html', 'text!partials/page/welcome.html'], function(
 			});
 
 			scope.refresh = function() {
-				if (scope.room || scope.status !== "waiting") {
+				if (scope.roomid || scope.room || scope.status !== "waiting") {
 					scope.page = null;
 				} else {
 					scope.page = "page/welcome.html";

static/partials/usability.html

@@ -1,6 +1,7 @@
 <div class="fadetogglecontainer" ng-hide="peer">
     <div class="animate-show" ng-hide="layout.settings">
         <div class="fadetogglecontainer" ng-switch="usabilityInfo">
+          <div ng-switch-when="initializing"><h1 style="text-align:center">{{_("Please wait")}} <i class="fa fa-spinner fa-spin"></i></h1></div>
           <div ng-switch-when="checking"><i class="fa fa-refresh fa-spin fa-4x pull-right"></i>{{_("Checking camera and microphone access.")}}</div>
           <div ng-switch-when="usermedia"><i><i class="fa fa-hand-o-up fa-4x pull-right"></i>{{_("Please allow access to your camera and microphone.")}}</i></div>
           <div ng-switch-when="denied"><i><i class="fa fa-exclamation-triangle fa-4x pull-right"></i>{{_("Camera / microphone access required.")}}</i></div>