mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-07-07 21:51:13 -07:00
fix up landing page UI
This commit is contained in:
Drewster727
parent
d165bf6484
commit
664dae23fd
4 changed files with 121 additions and 89 deletions
|
|
@ -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; }
|
||||
|
||||
|
|
|
|||
2
PlexRequests.UI/Content/base.min.css
vendored
2
PlexRequests.UI/Content/base.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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; }
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
margin-right: 15px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.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-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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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 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()";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue