Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com> Co-Authored-By: taloth <taloth@users.noreply.github.com>pull/3564/head
Qstick
6 years ago
parent
d178dce0d3
commit
91ab518dfb
@ -0,0 +1,23 @@
|
||||
.optionText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1 0 0;
|
||||
min-width: 0;
|
||||
|
||||
&.isMobile {
|
||||
display: block;
|
||||
|
||||
.hintText {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hintText {
|
||||
@add-mixin truncate;
|
||||
|
||||
margin-left: 15px;
|
||||
color: $darkGray;
|
||||
font-size: $smallFontSize;
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import EnhancedSelectInputOption from './EnhancedSelectInputOption';
|
||||
import styles from './HintedSelectInputOption.css';
|
||||
|
||||
function HintedSelectInputOption(props) {
|
||||
const {
|
||||
value,
|
||||
hint,
|
||||
isMobile,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<EnhancedSelectInputOption
|
||||
isMobile={isMobile}
|
||||
{...otherProps}
|
||||
>
|
||||
<div className={classNames(
|
||||
styles.optionText,
|
||||
isMobile && styles.isMobile
|
||||
)}
|
||||
>
|
||||
<div>{value}</div>
|
||||
|
||||
{
|
||||
hint != null &&
|
||||
<div className={styles.hintText}>
|
||||
{hint}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</EnhancedSelectInputOption>
|
||||
);
|
||||
}
|
||||
|
||||
HintedSelectInputOption.propTypes = {
|
||||
value: PropTypes.string.isRequired,
|
||||
hint: PropTypes.node,
|
||||
isMobile: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
export default HintedSelectInputOption;
|
||||
@ -0,0 +1,24 @@
|
||||
.selectedValue {
|
||||
composes: selectedValue from '~./EnhancedSelectInputSelectedValue.css';
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.valueText {
|
||||
@add-mixin truncate;
|
||||
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.hintText {
|
||||
@add-mixin truncate;
|
||||
|
||||
flex: 1 10 0;
|
||||
margin-left: 15px;
|
||||
color: $gray;
|
||||
text-align: right;
|
||||
font-size: $smallFontSize;
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
|
||||
import styles from './HintedSelectInputSelectedValue.css';
|
||||
|
||||
function HintedSelectInputSelectedValue(props) {
|
||||
const {
|
||||
value,
|
||||
hint,
|
||||
includeHint,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<EnhancedSelectInputSelectedValue
|
||||
className={styles.selectedValue}
|
||||
{...otherProps}
|
||||
>
|
||||
<div className={styles.valueText}>
|
||||
{value}
|
||||
</div>
|
||||
|
||||
{
|
||||
hint != null && includeHint &&
|
||||
<div className={styles.hintText}>
|
||||
{hint}
|
||||
</div>
|
||||
}
|
||||
</EnhancedSelectInputSelectedValue>
|
||||
);
|
||||
}
|
||||
|
||||
HintedSelectInputSelectedValue.propTypes = {
|
||||
value: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
includeHint: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
HintedSelectInputSelectedValue.defaultProps = {
|
||||
includeHint: true
|
||||
};
|
||||
|
||||
export default HintedSelectInputSelectedValue;
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,25 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import MovieImage from './MovieImage';
|
||||
|
||||
const bannerPlaceholder = 'data:image/png;base64,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';
|
||||
|
||||
function MovieBanner(props) {
|
||||
return (
|
||||
<MovieImage
|
||||
{...props}
|
||||
coverType="banner"
|
||||
placeholder={bannerPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
MovieBanner.propTypes = {
|
||||
size: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
MovieBanner.defaultProps = {
|
||||
size: 70
|
||||
};
|
||||
|
||||
export default MovieBanner;
|
||||
@ -0,0 +1,199 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import LazyLoad from 'react-lazyload';
|
||||
|
||||
function findImage(images, coverType) {
|
||||
return images.find((image) => image.coverType === coverType);
|
||||
}
|
||||
|
||||
function getUrl(image, coverType, size) {
|
||||
if (image) {
|
||||
// Remove protocol
|
||||
let url = image.url.replace(/^https?:/, '');
|
||||
url = url.replace(`${coverType}.jpg`, `${coverType}-${size}.jpg`);
|
||||
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
class MovieImage extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
const pixelRatio = Math.ceil(window.devicePixelRatio);
|
||||
|
||||
const {
|
||||
images,
|
||||
coverType,
|
||||
size
|
||||
} = props;
|
||||
|
||||
const image = findImage(images, coverType);
|
||||
|
||||
this.state = {
|
||||
pixelRatio,
|
||||
image,
|
||||
url: getUrl(image, coverType, pixelRatio * size),
|
||||
isLoaded: false,
|
||||
hasError: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.state.url && this.props.onError) {
|
||||
this.props.onError();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
const {
|
||||
images,
|
||||
coverType,
|
||||
placeholder,
|
||||
size,
|
||||
onError
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
image,
|
||||
pixelRatio
|
||||
} = this.state;
|
||||
|
||||
const nextImage = findImage(images, coverType);
|
||||
|
||||
if (nextImage && (!image || nextImage.url !== image.url)) {
|
||||
this.setState({
|
||||
image: nextImage,
|
||||
url: getUrl(nextImage, coverType, pixelRatio * size),
|
||||
hasError: false
|
||||
// Don't reset isLoaded, as we want to immediately try to
|
||||
// show the new image, whether an image was shown previously
|
||||
// or the placeholder was shown.
|
||||
});
|
||||
} else if (!nextImage && image) {
|
||||
this.setState({
|
||||
image: nextImage,
|
||||
url: placeholder,
|
||||
hasError: false
|
||||
});
|
||||
|
||||
if (onError) {
|
||||
onError();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onError = () => {
|
||||
this.setState({
|
||||
hasError: true
|
||||
});
|
||||
|
||||
if (this.props.onError) {
|
||||
this.props.onError();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad = () => {
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
hasError: false
|
||||
});
|
||||
|
||||
if (this.props.onLoad) {
|
||||
this.props.onLoad();
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
style,
|
||||
placeholder,
|
||||
size,
|
||||
lazy,
|
||||
overflow
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
url,
|
||||
hasError,
|
||||
isLoaded
|
||||
} = this.state;
|
||||
|
||||
if (hasError || !url) {
|
||||
return (
|
||||
<img
|
||||
className={className}
|
||||
style={style}
|
||||
src={placeholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (lazy) {
|
||||
return (
|
||||
<LazyLoad
|
||||
height={size}
|
||||
offset={100}
|
||||
overflow={overflow}
|
||||
placeholder={
|
||||
<img
|
||||
className={className}
|
||||
style={style}
|
||||
src={placeholder}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<img
|
||||
className={className}
|
||||
style={style}
|
||||
src={url}
|
||||
onError={this.onError}
|
||||
onLoad={this.onLoad}
|
||||
/>
|
||||
</LazyLoad>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
className={className}
|
||||
style={style}
|
||||
src={isLoaded ? url : placeholder}
|
||||
onError={this.onError}
|
||||
onLoad={this.onLoad}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MovieImage.propTypes = {
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
coverType: PropTypes.string.isRequired,
|
||||
placeholder: PropTypes.string.isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
lazy: PropTypes.bool.isRequired,
|
||||
overflow: PropTypes.bool.isRequired,
|
||||
onError: PropTypes.func,
|
||||
onLoad: PropTypes.func
|
||||
};
|
||||
|
||||
MovieImage.defaultProps = {
|
||||
size: 250,
|
||||
lazy: true,
|
||||
overflow: false
|
||||
};
|
||||
|
||||
export default MovieImage;
|
||||
@ -1,195 +1,25 @@
|
||||
import _ from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import LazyLoad from 'react-lazyload';
|
||||
import React from 'react';
|
||||
import MovieImage from './MovieImage';
|
||||
|
||||
const posterPlaceholder = 'data:image/png;base64,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';
|
||||
|
||||
function findPoster(images) {
|
||||
return _.find(images, { coverType: 'poster' });
|
||||
}
|
||||
|
||||
function getPosterUrl(poster, size) {
|
||||
if (poster) {
|
||||
// Remove protocol
|
||||
let url = poster.url.replace(/^https?:/, '');
|
||||
url = url.replace('poster.jpg', `poster-${size}.jpg`);
|
||||
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
class MoviePoster extends Component {
|
||||
|
||||
//
|
||||
// Lifecycle
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
|
||||
const pixelRatio = Math.ceil(window.devicePixelRatio);
|
||||
|
||||
const {
|
||||
images,
|
||||
size
|
||||
} = props;
|
||||
|
||||
const poster = findPoster(images);
|
||||
|
||||
this.state = {
|
||||
pixelRatio,
|
||||
poster,
|
||||
posterUrl: getPosterUrl(poster, pixelRatio * size),
|
||||
isLoaded: false,
|
||||
hasError: false
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.state.posterUrl && this.props.onError) {
|
||||
this.props.onError();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const {
|
||||
images,
|
||||
size,
|
||||
onError
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
poster,
|
||||
pixelRatio
|
||||
} = this.state;
|
||||
|
||||
const nextPoster = findPoster(images);
|
||||
|
||||
if (nextPoster && (!poster || nextPoster.url !== poster.url)) {
|
||||
this.setState({
|
||||
poster: nextPoster,
|
||||
posterUrl: getPosterUrl(nextPoster, pixelRatio * size),
|
||||
hasError: false
|
||||
// Don't reset isLoaded, as we want to immediately try to
|
||||
// show the new image, whether an image was shown previously
|
||||
// or the placeholder was shown.
|
||||
});
|
||||
} else if (!nextPoster && poster) {
|
||||
this.setState({
|
||||
poster: nextPoster,
|
||||
posterUrl: posterPlaceholder,
|
||||
hasError: false
|
||||
});
|
||||
|
||||
if (onError) {
|
||||
onError();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Listeners
|
||||
|
||||
onError = () => {
|
||||
this.setState({
|
||||
hasError: true
|
||||
});
|
||||
|
||||
if (this.props.onError) {
|
||||
this.props.onError();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad = () => {
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
hasError: false
|
||||
});
|
||||
|
||||
if (this.props.onLoad) {
|
||||
this.props.onLoad();
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Render
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
style,
|
||||
size,
|
||||
lazy,
|
||||
overflow
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
posterUrl,
|
||||
hasError,
|
||||
isLoaded
|
||||
} = this.state;
|
||||
|
||||
if (hasError || !posterUrl) {
|
||||
return (
|
||||
<img
|
||||
className={className}
|
||||
style={style}
|
||||
src={posterPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (lazy) {
|
||||
return (
|
||||
<LazyLoad
|
||||
height={size}
|
||||
offset={100}
|
||||
overflow={overflow}
|
||||
placeholder={
|
||||
<img
|
||||
className={className}
|
||||
style={style}
|
||||
src={posterPlaceholder}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<img
|
||||
className={className}
|
||||
style={style}
|
||||
src={posterUrl}
|
||||
onError={this.onError}
|
||||
/>
|
||||
</LazyLoad>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
className={className}
|
||||
style={style}
|
||||
src={isLoaded ? posterUrl : posterPlaceholder}
|
||||
onError={this.onError}
|
||||
onLoad={this.onLoad}
|
||||
/>
|
||||
);
|
||||
}
|
||||
function MoviePoster(props) {
|
||||
return (
|
||||
<MovieImage
|
||||
{...props}
|
||||
coverType="poster"
|
||||
placeholder={posterPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
MoviePoster.propTypes = {
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.object,
|
||||
images: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
lazy: PropTypes.bool.isRequired,
|
||||
overflow: PropTypes.bool.isRequired,
|
||||
onError: PropTypes.func,
|
||||
onLoad: PropTypes.func
|
||||
size: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
MoviePoster.defaultProps = {
|
||||
size: 250,
|
||||
lazy: true,
|
||||
overflow: false
|
||||
size: 250
|
||||
};
|
||||
|
||||
export default MoviePoster;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/* stylelint-disable */
|
||||
|
||||
@import '~normalize.css/normalize.css';
|
||||
@import 'scaffolding.css';
|
||||
@import '/Content/Fonts/fonts.css';
|
||||
@import "~normalize.css/normalize.css";
|
||||
@import "scaffolding.css";
|
||||
|
||||
/* stylelint-enable */
|
||||
|
||||
@ -1,232 +1,291 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
|
||||
<!-- Chrome, Opera, and Firefox OS -->
|
||||
<meta name="theme-color" content="#3a3f51" />
|
||||
<!-- Windows Phone -->
|
||||
<meta name="msapplication-navbutton-color" content="#3a3f51" />
|
||||
|
||||
<meta name="description" content="Radarr (Preview)" />
|
||||
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/Content/Images/Icons/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/Content/Images/Icons/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/Content/Images/Icons/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="/Content/Images/Icons/manifest.json" />
|
||||
<link
|
||||
rel="mask-icon"
|
||||
href="/Content/Images/Icons/safari-pinned-tab.svg"
|
||||
color="#00ccff"
|
||||
/>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
type="image/ico"
|
||||
href="/favicon.ico"
|
||||
data-no-hash
|
||||
/>
|
||||
<meta
|
||||
name="msapplication-config"
|
||||
content="/Content/Images/Icons/browserconfig.xml"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/Content/styles.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css" />
|
||||
|
||||
<title>Login - Radarr</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
color: #656565;
|
||||
font-family: "Roboto", "open sans", "Helvetica Neue", Helvetica, Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta name="mobile-web-app-capable" content="yes"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
|
||||
<!-- Chrome, Opera, and Firefox OS -->
|
||||
<meta name="theme-color" content="#3a3f51"/>
|
||||
<!-- Windows Phone -->
|
||||
<meta name="msapplication-navbutton-color" content="#3a3f51"/>
|
||||
|
||||
<meta name="description" content="Radarr">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/Content/Images/Icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/Content/Images/Icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/Content/Images/Icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/Content/Images/Icons/manifest.json">
|
||||
<link rel="mask-icon" href="/Content/Images/Icons/safari-pinned-tab.svg" color="#00ccff">
|
||||
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" data-no-hash />
|
||||
<meta name="msapplication-config" content="/Content/Images/Icons/browserconfig.xml">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/Content/styles.css">
|
||||
|
||||
<title>Login - Radarr</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #f5f7fa;
|
||||
color: #656565;
|
||||
font-family: "Roboto", "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 0 0 325px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-top: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
background-color: #3a3f51;
|
||||
}
|
||||
.content {
|
||||
flex: 0 0 325px;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 20px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.sign-in {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.panel {
|
||||
margin-top: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
background-color: #3a3f51;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 16px;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border: 1px solid #dde6e9;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.panel-body {
|
||||
padding: 20px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: 0;
|
||||
border-color: #66afe9;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
.sign-in {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
border: 1px solid;
|
||||
border-color: #5899eb;
|
||||
border-radius: 4px;
|
||||
background-color: #5d9cec;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
}
|
||||
.form-group {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
border-color: #3483e7;
|
||||
background-color: #4b91ea;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.form-input {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 16px;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border: 1px solid #dde6e9;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.copy {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-input:focus {
|
||||
outline: 0;
|
||||
border-color: #66afe9;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
|
||||
0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
|
||||
.remember-me-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 25px;
|
||||
}
|
||||
.button {
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
padding: 10px 0;
|
||||
width: 100%;
|
||||
border: 1px solid;
|
||||
border-color: #5899eb;
|
||||
border-radius: 4px;
|
||||
background-color: #5d9cec;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.remember-me {
|
||||
font-size: 14px;
|
||||
}
|
||||
.button:hover {
|
||||
border-color: #3483e7;
|
||||
background-color: #4b91ea;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-left: auto;
|
||||
color: #909fa7;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
.copy {
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.forgot-password:focus,
|
||||
.forgot-password:hover {
|
||||
color: #748690;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.remember-me-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.forgot-password:visited {
|
||||
color: #748690;
|
||||
}
|
||||
.remember-me {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-failed {
|
||||
margin-top: 20px;
|
||||
color: #f05050;
|
||||
font-size: 14px;
|
||||
}
|
||||
.forgot-password {
|
||||
margin-left: auto;
|
||||
color: #909fa7;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.forgot-password:focus,
|
||||
.forgot-password:hover {
|
||||
color: #748690;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
|
||||
.form-input {
|
||||
font-size: 16px;
|
||||
.forgot-password:visited {
|
||||
color: #748690;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="center">
|
||||
<div class="content">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<img src="/Content/Images/logo.svg" alt="Image" class="logo">
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<div class="sign-in">
|
||||
SIGN IN TO CONTINUE
|
||||
</div>
|
||||
.login-failed {
|
||||
margin-top: 20px;
|
||||
color: #f05050;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
<form role="form" data-parsley-validate="" novalidate="" class="mb-lg" method="POST">
|
||||
<div class="form-group">
|
||||
<input type="email" name="username" class="form-input" placeholder="Username" autocomplete="off" pattern=".{1,}" required title="User name is required" autoFocus="true">
|
||||
</div>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
<div class="form-group">
|
||||
<input type="password" name="password" class="form-input" placeholder="Password" required>
|
||||
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
|
||||
.form-input {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="center">
|
||||
<div class="content">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<img src="/Content/Images/logo.svg" alt="Image" class="logo" />
|
||||
</div>
|
||||
|
||||
<div class="remember-me-container">
|
||||
<span class="remember-me">
|
||||
<input type="checkbox" name="rememberMe" id="rememberMe" checked="checked">
|
||||
<label for="rememberMe">Remember Me</label>
|
||||
</span>
|
||||
|
||||
<a href="https://github.com/Radarr/Radarr/wiki/Forgot-my-Password" class="forgot-password">Forgot your password?</a>
|
||||
<div class="panel-body">
|
||||
<div class="sign-in">
|
||||
SIGN IN TO CONTINUE
|
||||
</div>
|
||||
|
||||
<form
|
||||
role="form"
|
||||
data-parsley-validate=""
|
||||
novalidate=""
|
||||
class="mb-lg"
|
||||
method="POST"
|
||||
>
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="email"
|
||||
name="username"
|
||||
class="form-input"
|
||||
placeholder="Username"
|
||||
autocomplete="off"
|
||||
pattern=".{1,}"
|
||||
required
|
||||
title="User name is required"
|
||||
autoFocus="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
class="form-input"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="remember-me-container">
|
||||
<span class="remember-me">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="rememberMe"
|
||||
id="rememberMe"
|
||||
checked="checked"
|
||||
/>
|
||||
<label for="rememberMe">Remember Me</label>
|
||||
</span>
|
||||
|
||||
<a
|
||||
href="https://github.com/Radarr/Radarr/wiki/Forgot-my-Password"
|
||||
class="forgot-password"
|
||||
>Forgot your password?</a
|
||||
>
|
||||
</div>
|
||||
<button type="submit" class="button">Login</button>
|
||||
|
||||
<div id="login-failed" class="login-failed hidden">
|
||||
Incorrect Username or Password
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<button type="submit" class="button">Login</button>
|
||||
</div>
|
||||
|
||||
<div id="login-failed" class="login-failed hidden">
|
||||
Incorrect Username or Password
|
||||
</div>
|
||||
</form>
|
||||
<div id="copy" class="copy hidden">
|
||||
<span>©</span>
|
||||
<span id="year"></span>
|
||||
<span>-</span>
|
||||
<span>Radarr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<div id="copy" class="copy hidden">
|
||||
<span>©</span>
|
||||
<span id="year"></span>
|
||||
<span>-</span>
|
||||
<span>Radarr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
var yearSpan = document.getElementById('year');
|
||||
yearSpan.innerHTML = '2010-' + new Date().getFullYear();
|
||||
<script type="text/javascript">
|
||||
var yearSpan = document.getElementById("year");
|
||||
yearSpan.innerHTML = "2010-" + new Date().getFullYear();
|
||||
|
||||
var copyDiv = document.getElementById('copy');
|
||||
copyDiv.classList.remove('hidden');
|
||||
var copyDiv = document.getElementById("copy");
|
||||
copyDiv.classList.remove("hidden");
|
||||
|
||||
if (window.location.search.indexOf('loginFailed=true') > -1) {
|
||||
var loginFailedDiv = document.getElementById('login-failed');
|
||||
if (window.location.search.indexOf("loginFailed=true") > -1) {
|
||||
var loginFailedDiv = document.getElementById("login-failed");
|
||||
|
||||
loginFailedDiv.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
loginFailedDiv.classList.remove("hidden");
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue