added notification partial view and modified the layout of messages view

src/TravelersAround.WebMvc/Content/Site.css

@@ -381,6 +381,20 @@ div#logo img
     display: none;
 }
 
+#ui_message
+{
+    width:75%;
+    margin-left: 50px;
+}
+p.notification_message
+{
+    background: transparent url(/content/img/icons/check.png) no-repeat center left;
+}
+
+p.info-message
+{
+    background: transparent url(/content/img/icons/info.png) no-repeat center left;
+}
 /* Styles for editor and display helpers
 ----------------------------------------------------------*/
 .display-label,
@@ -441,7 +455,7 @@ fieldset.send-message input[type="text"]
 
 .main-area
 {
-    float:left;
+    /*float:left;*/
     width:100%;
 }
 
@@ -461,17 +475,27 @@ fieldset.send-message input[type="text"]
 }
 
 
-.list
-{
-    float:inherit;
-}
 
 
 
 /* Messages List
 -----------------------*/
 
-ul.side-menu li
+#side-menu
+{
+    display:inline-block;
+    width:110px;
+    margin-right:20px;
+}
+
+#messages-list
+{
+    display:inline-block;
+    vertical-align:top;
+    margin-top:10px;
+}
+
+#side-menu ul li
 {
     margin-bottom:10px;
 }
@@ -537,7 +561,8 @@ ul#search-results div.traveler-statusmsg
 .add-icon, .logout-icon, .search-icon,
 .trash-icon, .remove-icon, .new-icon, .inbox-icon,
 .sent-icon, .send-message-icon, mail-icon, .edit-icon,
-profile-icon, friends-icon
+profile-icon, friends-icon, .notification_message,
+.info-message
 {
     padding-left: 32px;
     padding-top: 16px;
@@ -615,9 +640,6 @@ profile-icon, friends-icon
     background: transparent url(/content/img/icons/users.png) no-repeat center left;
 }
 
-
-
-
 /* Profile
 -----------*/
 

src/TravelersAround.WebMvc/Views/Messages/Index.cshtml

@@ -17,18 +17,20 @@
 </p>
 
 <div class="main-area">
-    <ul class="side-menu rounded-box">
-        <li>
-            @Html.ActionLink("Inbox", "Index", new { folder = "Inbox" }, new { @class = "inbox-icon" })
-        </li>
-        <li>
-            @Html.ActionLink("Sent", "Index", new { folder = "Sent" }, new { @class = "sent-icon" })
-        </li>
-        <li>
-            @Html.ActionLink("Trash", "Index", new { folder = "Trash" }, new { @class = "trash-icon" })
-        </li>
-    </ul>
-    <div class="list">
+    <div id="side-menu">
+        <ul class="rounded-box">
+            <li>
+                @Html.ActionLink("Inbox", "Index", new { folder = "Inbox" }, new { @class = "inbox-icon" })
+            </li>
+            <li>
+                @Html.ActionLink("Sent", "Index", new { folder = "Sent" }, new { @class = "sent-icon" })
+            </li>
+            <li>
+                @Html.ActionLink("Trash", "Index", new { folder = "Trash" }, new { @class = "trash-icon" })
+            </li>
+        </ul>
+    </div>
+    <div id="messages-list">
         @if (Model.MessagesList.TotalEntitiesCount > 0)
         {
             using (Html.BeginForm("Delete", "Messages"))

src/TravelersAround.WebMvc/Views/Search/Index.cshtml

@@ -30,7 +30,7 @@
 <div class="main-area">
     @if (Model.Travelers.Entities.Count == 0)
     {
-        <p>It seems that currently now there are no travelers around you</p>
+        <p class="info-message">It seems that currently now there are no travelers around you</p>
     }
     else
     {

src/TravelersAround.WebMvc/Views/Shared/_Layout.cshtml

@@ -30,9 +30,7 @@
 
         <div id="main">
             <div id="content-container">
-                <div id="ui_message">
-                    <span class="notification_message">@ViewBag.NotificationMessage</span>
-                </div>
+                @Html.Partial("_UiNotification")
                 @RenderBody()
             </div>
         </div>

src/TravelersAround.WebMvc/Views/Shared/_UiNotification.cshtml

@@ -0,0 +1,6 @@
+ @if (ViewBag.NotificationMessage != null)
+{
+    <div id="ui_message" class="rounded-box">
+        <p class="notification_message">@ViewBag.NotificationMessage</p>
+    </div>
+}