fix up landing page UI

PlexRequests.UI/Content/base.css

@@ -4,7 +4,9 @@
   .bottom-align-text {
     position: absolute;
     bottom: 0;
-    right: 0; } }
+    right: 0; }
+  .landing-block .media {
+    max-width: 450px; } }
 
 @media (max-width: 48em) {
   .home {
@@ -304,16 +306,26 @@ label {
 .bootstrap-datetimepicker-widget table td.active:hover {
   color: #fff !important; }
 
-img.center {
+.landing-header {
   display: block;
-  margin: 0 auto; }
+  margin: 60px auto; }
 
-div.landing-block {
-  background: #424242 !important;
-  padding-bottom: 30px;
-  padding-top: 15px; }
+.landing-block {
+  background: #2f2f2f !important;
+  padding: 5px; }
 
-span.landing-title {
-  font-size: 32px;
-  font-weight: 600; }
+.landing-block .media {
+  margin: 30px auto;
+  max-width: 450px; }
+
+.landing-block .media .media-left {
+  display: inline-block;
+  float: left;
+  width: 70px; }
+
+.landing-block .media .media-left i.fa {
+  font-size: 3em; }
+
+.landing-title {
+  font-weight: bold; }
 

PlexRequests.UI/Content/base.scss

@@ -6,7 +6,9 @@ $info-colour: #5bc0de;
 $warning-colour: #f0ad4e;
 $danger-colour: #d9534f;
 $success-colour: #5cb85c;
-$i: !important;
+$i:
+!important
+;
 
 @media (min-width: 768px ) {
     .row {
@@ -18,6 +20,10 @@ $i: !important;
         bottom: 0;
         right: 0;
     }
+
+    .landing-block .media {
+        max-width: 450px;
+    }
 }
 
 @media (max-width: 48em) {
@@ -330,9 +336,10 @@ $border-radius: 10px;
     padding-left: 25px;
     margin-right: 15px;
     font-size: 13px;
-   margin-bottom: 10px; }
+    margin-bottom: 10px;
+}
 
- .checkbox label:before {
+.checkbox label:before {
     content: "";
     display: inline-block;
     width: 18px;
@@ -342,26 +349,30 @@ $border-radius: 10px;
     left: 0;
     bottom: 1px;
     border: 2px solid #eee;
-   border-radius: 3px; }
+    border-radius: 3px;
+}
 
- .checkbox input[type=checkbox] {
-   display: none; }
+.checkbox input[type=checkbox] {
+    display: none;
+}
 
- .checkbox input[type=checkbox]:checked + label:before {
+.checkbox input[type=checkbox]:checked + label:before {
     content: "\2713";
     font-size: 13px;
     color: #fafafa;
     text-align: center;
-   line-height: 13px; }
+    line-height: 13px;
+}
 
-.input-group-sm{
+.input-group-sm {
     padding-top: 2px;
     padding-bottom: 2px;
 }
 
 .tab-pane .form-horizontal .form-group {
     margin-right: 15px;
-  margin-left: 15px; }
+    margin-left: 15px;
+}
 
 .bootstrap-datetimepicker-widget.dropdown-menu {
     background-color: $form-color;
@@ -376,18 +387,31 @@ $border-radius: 10px;
     color: #fff !important;
 }
 
-img.center {
+.landing-header {
     display: block;
-    margin: 0 auto;
+    margin: 60px auto;
+}
+
+.landing-block {
+    background: #2f2f2f !important;
+    padding: 5px;
+}
+
+.landing-block .media {
+    margin: 30px auto;
+    max-width: 450px;
+}
+
+.landing-block .media .media-left {
+    display: inline-block;
+    float: left;
+    width: 70px;
 }
 
-div.landing-block{
-    background: #424242 !important;
-    padding-bottom:30px;
-    padding-top:15px;
+.landing-block .media .media-left i.fa {
+    font-size: 3em;
 }
 
-span.landing-title{
-    font-size:32px;
-    font-weight:600;
+.landing-title {
+    font-weight: bold;
 }

PlexRequests.UI/Views/Landing/Index.cshtml

@@ -2,46 +2,42 @@
 @using PlexRequests.UI.Helpers
 @inherits PlexRequests.UI.Helpers.EmptyViewBase<PlexRequests.UI.Models.LandingPageViewModel>
 
-<img class="center" src="~/Content/images/logo.png" width="300" />
+<img class="landing-header" src="~/Content/images/logo.png" width="300" />
 <div id="area" class="landing-block">
-    @if (Model.NoticeEnable && Model.NoticeActive)
+    @if (Model.NoticeEnable && (!Model.EnabledNoticeTime || Model.NoticeActive))
     {
-        <div class="row" style="padding-top: 20px">
-            <div class="col-md-1 col-md-push-3">
-                <i class="fa fa-bell fa-5x"></i>
+        <div class="media">
+            <div class="media-left media-middle">
+                <i class="fa fa-bell"></i>
             </div>
-            <div class="col-md-5 col-md-push-3">
-                <span class="landing-title">Notice</span>
-                <br />
-                @Model.NoticeMessage
-                <br />
+            <div class="media-body">
+                <h4 class="media-heading landing-title">Notice</h4>
+                @Model.NoticeMessage<br />
+                @if (Model.EnabledNoticeTime)
+                {
                     <strong><span id="startDate"></span> <span id="endDate"></span></strong>
+                }
             </div>
         </div>
-        <br />
-        <br />
-        <br />
-        <br />
     }
-    <div class="row">
-        <div class="col-md-1 col-md-push-3">
-            <i id="statusIcon" class="fa fa-spinner fa-spin fa-5x fa-fw"></i>
+
+    <div class="media">
+        <div class="media-left media-middle">
+            <i id="statusIcon" class="fa fa-spinner fa-spin fa-fw"></i>
         </div>
-        <div class="col-md-5 col-md-push-3">
-            <span id="statusTitle" class="landing-title">Loading...</span>
-            <br />
+        <div class="media-body">
+            <h4 class="media-heading landing-title" id="statusTitle">Checking...</h4>
             The Plex server is <strong><span id="statusText">Loading...</span></strong> (check this page for continuous status updates)
-
         </div>
     </div>
 </div>
-<div style="text-align: center; margin-top: 10px">
-    <a href="@Model.ContinueUrl?landing=false" class="btn btn-success-outline">Continue</a>
+<div style="text-align: center; margin-top: 20px">
+    <a href="@Model.ContinueUrl?landing=false" class="btn btn-primary-outline">Continue</a>
 </div>
 
 <script>
     $(function () {
-        @if (Model.NoticeEnable && Model.NoticeActive)
+        @if (Model.NoticeEnable && (!Model.EnabledNoticeTime || Model.NoticeActive))
         {
         <text>
         var start = moment("@Model.NoticeStart.ToString("O")");