[initial-screen] boxes re-aligned.

Author: frknbasaran

frontend/express/public/javascripts/countly/countly.views.js

@@ -1132,15 +1132,18 @@ window.ManageAppsView = countlyView.extend({
             $('#top-bar > div.logo-container > a').attr('href', 'javascript:void(0)');
             $('#top-bar > div.right-menu > div:nth-child(1)').css({'opacity': '0', 'pointer-events': 'none'});
             $("#sidebar").addClass("hidden");
-            $("#app-navigation").css({'opacity': '0', 'pointer-events':'none'});
+            $("#app-navigation").css({'opacity': '0', 'pointer-events': 'none'});
             $("#hide-sidebar-button").hide();
             $('#app-management-bar').hide();
             $('#content-container').css({'margin-left': '0px'});
+            var width = $('body').width();
             // create first app screen elements
             $('#content').prepend('<div id="first-app-welcome"></div>');
             $('#first-app-welcome').append('<h1 id="first-app-welcome-header" data-localize="management-applications.create-first-app-title"></h1>');
             $('#first-app-welcome').append('<p id="first-app-description" data-localize="management-applications.create-first-app-description"></p>');
             $('#content > div.widget').addClass('widget-first-app-state');
+            $('#content > div.widget').css({'width': width / (3) + 'px'});
+            $('#first-app-welcome').css({'width': width / (3.5) + 'px', 'margin-left': '10%'});
 
             $('#add-new-app').hide();
             // make visible first app form
@@ -1150,7 +1153,7 @@ window.ManageAppsView = countlyView.extend({
         // make things normal after first app create process
         function afterFirstApp() {
             $("#sidebar").removeClass("hidden");
-            $("#app-navigation").css({'opacity': '1','pointer-events':'auto'});
+            $("#app-navigation").css({'opacity': '1','pointer-events': 'auto'});
             $("#hide-sidebar-button").show();
             $('#app-management-bar').show();
             var widthOfSidebar = $('#sidebar').width();

frontend/express/public/stylesheets/main.css

@@ -2391,7 +2391,7 @@ h4 + .mgmt-plugins-row {
 #first-app-welcome-header { font-family: Ubuntu; font-size: 36px; font-weight: normal; color:black; }
 #first-app-description { color: #636363; font-size:18px; }
 #add-first-app { display: none; background-color: white; padding: 30px 60px 30px 60px; border-radius: 2px; border:1px solid #dbdbdb;}
-#first-app-welcome { width: 25%;margin-left: 20%;float: left;margin-top: 15%;padding-top: 1%;}
+#first-app-welcome { float: left;margin-top: 15%;padding-top: 1%;}
 .add-app-input-wrapper {padding:5px;margin-bottom:5px;}
 .add-app-input-label {
     display: inline-block;
@@ -2450,8 +2450,6 @@ h4 + .mgmt-plugins-row {
     color:#636363;
 }
 .widget-first-app-state {
-    margin-left: 15%;
-    width:25%;
     float:left;
     margin-top:10%;
 }