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) {
@@ -32,8 +38,8 @@ $i: !important;
     }
 }
 
-.navbar-default .navbar-nav > .active > a, 
-.navbar-default .navbar-nav > .active > a:hover, 
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
     color: #fff;
 }
@@ -46,7 +52,7 @@ hr {
     border-radius: .25rem $i;
 }
 
-.btn-group-separated .btn, 
+.btn-group-separated .btn,
 .btn-group-separated .btn + .btn {
     margin-left: 3px;
 }
@@ -324,44 +330,49 @@ $border-radius: 10px;
 }
 
 .checkbox label {
-   display: inline-block;
-   cursor: pointer;
-   position: relative;
-   padding-left: 25px;
-   margin-right: 15px;
-   font-size: 13px;
-   margin-bottom: 10px; }
- 
- .checkbox label:before {
-   content: "";
-   display: inline-block;
-   width: 18px;
-   height: 18px;
-   margin-right: 10px;
-   position: absolute;
-   left: 0;
-   bottom: 1px;
-   border: 2px solid #eee;
-   border-radius: 3px; }
- 
- .checkbox input[type=checkbox] {
-   display: none; }
- 
- .checkbox input[type=checkbox]:checked + label:before {
-   content: "\2713";
-   font-size: 13px;
-   color: #fafafa;
-   text-align: center;
-   line-height: 13px; }
-
-.input-group-sm{
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+    padding-left: 25px;
+    margin-right: 15px;
+    font-size: 13px;
+    margin-bottom: 10px;
+}
+
+.checkbox label:before {
+    content: "";
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 10px;
+    position: absolute;
+    left: 0;
+    bottom: 1px;
+    border: 2px solid #eee;
+    border-radius: 3px;
+}
+
+.checkbox input[type=checkbox] {
+    display: none;
+}
+
+.checkbox input[type=checkbox]:checked + label:before {
+    content: "\2713";
+    font-size: 13px;
+    color: #fafafa;
+    text-align: center;
+    line-height: 13px;
+}
+
+.input-group-sm {
     padding-top: 2px;
     padding-bottom: 2px;
 }
 
 .tab-pane .form-horizontal .form-group {
-  margin-right: 15px;
-  margin-left: 15px; }
+    margin-right: 15px;
+    margin-left: 15px;
+}
 
 .bootstrap-datetimepicker-widget.dropdown-menu {
     background-color: $form-color;
@@ -371,23 +382,36 @@ $border-radius: 10px;
     border-bottom: 6px solid $form-color $i;
 }
 
-.bootstrap-datetimepicker-widget table td.active, 
+.bootstrap-datetimepicker-widget table td.active,
 .bootstrap-datetimepicker-widget table td.active:hover {
     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;
 }
 
-div.landing-block{
-    background: #424242 !important;
-    padding-bottom:30px;
-    padding-top:15px;
+.landing-block .media .media-left {
+    display: inline-block;
+    float: left;
+    width: 70px;
 }
 
-span.landing-title{
-    font-size:32px;
-    font-weight:600;
-}
+.landing-block .media .media-left i.fa {
+    font-size: 3em;
+}
+
+.landing-title {
+    font-weight: bold;
+}

PlexRequests.UI/Views/Landing/Index.cshtml

@@ -2,54 +2,50 @@
 @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 />
-                <strong><span id="startDate"></span> <span id="endDate"></span></strong>
+            <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")");
-            var end = moment("@Model.NoticeEnd.ToString("O")");
+        var start = moment("@Model.NoticeStart.ToString("O")");
+        var end = moment("@Model.NoticeEnd.ToString("O")");
 
-            var text = "for " + start.to(end, true);
-            $('#startDate').html(start.toString());
-            $('#endDate').html(text);
+        var text = "for " + start.to(end, true);
+        $('#startDate').html(start.toString());
+        $('#endDate').html(text);
         </text>
         }
         var base = "@Html.GetBaseUrl()";