github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-07-07 21:51:13 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix up landing page UI

Browse source
This commit is contained in:
Drewster727 2016-06-14 23:09:16 -05:00
parent d165bf6484
commit 664dae23fd
4 changed files with 121 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

32
PlexRequests.UI/Content/base.css
View file

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

2
PlexRequests.UI/Content/base.min.css vendored
View file

File diff suppressed because one or more lines are too long

118
PlexRequests.UI/Content/base.scss
View file

@ -6,7 +6,9 @@ $info-colour: #5bc0de;
$warning-colour: #f0ad4e; $warning-colour: #f0ad4e;
$danger-colour: #d9534f; $danger-colour: #d9534f;
$success-colour: #5cb85c; $success-colour: #5cb85c;
$i: !important; $i:
!important
;
@media (min-width: 768px ) { @media (min-width: 768px ) {
.row { .row {
@ -18,6 +20,10 @@ $i: !important;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
.landing-block .media {
max-width: 450px;
}
} }
@media (max-width: 48em) { @media (max-width: 48em) {
@ -32,8 +38,8 @@ $i: !important;
} }
} }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { .navbar-default .navbar-nav > .active > a:focus {
color: #fff; color: #fff;
} }
@ -46,7 +52,7 @@ hr {
border-radius: .25rem $i; border-radius: .25rem $i;
} }
.btn-group-separated .btn, .btn-group-separated .btn,
.btn-group-separated .btn + .btn { .btn-group-separated .btn + .btn {
margin-left: 3px; margin-left: 3px;
} }
@ -324,44 +330,49 @@ $border-radius: 10px;
} }
.checkbox label { .checkbox label {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
padding-left: 25px; padding-left: 25px;
margin-right: 15px; margin-right: 15px;
font-size: 13px; font-size: 13px;
margin-bottom: 10px; } 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{ .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-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
} }
.tab-pane .form-horizontal .form-group { .tab-pane .form-horizontal .form-group {
margin-right: 15px; margin-right: 15px;
margin-left: 15px; } margin-left: 15px;
}
.bootstrap-datetimepicker-widget.dropdown-menu { .bootstrap-datetimepicker-widget.dropdown-menu {
background-color: $form-color; background-color: $form-color;
@ -371,23 +382,36 @@ $border-radius: 10px;
border-bottom: 6px solid $form-color $i; 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 { .bootstrap-datetimepicker-widget table td.active:hover {
color: #fff !important; color: #fff !important;
} }
img.center { .landing-header {
display: block; display: block;
margin: 0 auto; margin: 60px auto;
} }
div.landing-block{ .landing-block {
background: #424242 !important; background: #2f2f2f !important;
padding-bottom:30px; padding: 5px;
padding-top:15px;
} }
span.landing-title{ .landing-block .media {
font-size:32px; margin: 30px auto;
font-weight:600; 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;
}

58
PlexRequests.UI/Views/Landing/Index.cshtml
View file

@ -2,54 +2,50 @@
@using PlexRequests.UI.Helpers @using PlexRequests.UI.Helpers
@inherits PlexRequests.UI.Helpers.EmptyViewBase<PlexRequests.UI.Models.LandingPageViewModel> @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"> <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="media">
<div class="col-md-1 col-md-push-3"> <div class="media-left media-middle">
<i class="fa fa-bell fa-5x"></i> <i class="fa fa-bell"></i>
</div> </div>
<div class="col-md-5 col-md-push-3"> <div class="media-body">
<span class="landing-title">Notice</span> <h4 class="media-heading landing-title">Notice</h4>
<br /> @Model.NoticeMessage<br />
@Model.NoticeMessage @if (Model.EnabledNoticeTime)
<br /> {
<strong><span id="startDate"></span> <span id="endDate"></span></strong> <strong><span id="startDate"></span> <span id="endDate"></span></strong>
}
</div> </div>
</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>
<div class="col-md-5 col-md-push-3">
<span id="statusTitle" class="landing-title">Loading...</span>
<br />
The Plex server is <strong><span id="statusText">Loading...</span></strong> (check this page for continuous status updates)
<div class="media">
<div class="media-left media-middle">
<i id="statusIcon" class="fa fa-spinner fa-spin fa-fw"></i>
</div>
<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>
</div> </div>
<div style="text-align: center; margin-top: 10px"> <div style="text-align: center; margin-top: 20px">
<a href="@Model.ContinueUrl?landing=false" class="btn btn-success-outline">Continue</a> <a href="@Model.ContinueUrl?landing=false" class="btn btn-primary-outline">Continue</a>
</div> </div>
<script> <script>
$(function () { $(function () {
@if (Model.NoticeEnable && Model.NoticeActive) @if (Model.NoticeEnable && (!Model.EnabledNoticeTime || Model.NoticeActive))
{ {
<text> <text>
var start = moment("@Model.NoticeStart.ToString("O")"); var start = moment("@Model.NoticeStart.ToString("O")");
var end = moment("@Model.NoticeEnd.ToString("O")"); var end = moment("@Model.NoticeEnd.ToString("O")");
var text = "for " + start.to(end, true); var text = "for " + start.to(end, true);
$('#startDate').html(start.toString()); $('#startDate').html(start.toString());
$('#endDate').html(text); $('#endDate').html(text);
</text> </text>
} }
var base = "@Html.GetBaseUrl()"; var base = "@Html.GetBaseUrl()";