diff --git a/frontend/.eslintrc b/frontend/.eslintrc
index b4d4187e3..9b096f3ff 100644
--- a/frontend/.eslintrc
+++ b/frontend/.eslintrc
@@ -240,7 +240,6 @@
one-var-declaration-per-line: ["error", "always"],
operator-assignment: ["off", "never"],
operator-linebreak: ["error", "after"],
- padded-blocks: ["error", "never"],
quote-props: ["error", "as-needed"],
quotes: ["error", "single"],
require-jsdoc: "off",
@@ -283,6 +282,6 @@
"react/react-in-jsx-scope": 2,
"react/self-closing-comp": 2,
"react/sort-comp": 2,
- "react/wrap-multilines": 2
+ "react/jsx-wrap-multilines": 2
}
}
diff --git a/frontend/gulp/webpack.js b/frontend/gulp/webpack.js
index aa238d271..5faec4c87 100644
--- a/frontend/gulp/webpack.js
+++ b/frontend/gulp/webpack.js
@@ -1,14 +1,9 @@
-const _ = require('lodash');
const gulp = require('gulp');
-const simpleVars = require('postcss-simple-vars');
-const nested = require('postcss-nested');
-const autoprefixer = require('autoprefixer');
const webpackStream = require('webpack-stream');
const livereload = require('gulp-livereload');
const path = require('path');
const webpack = require('webpack');
const errorHandler = require('./helpers/errorHandler');
-const reload = require('require-nocache')(module);
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const uiFolder = 'UI';
@@ -18,13 +13,20 @@ const isProduction = process.argv.indexOf('--production') > -1;
console.log('ROOT:', root);
console.log('isProduction:', isProduction);
-const cssVariables = [
+const cssVarsFiles = [
'../src/Styles/Variables/colors',
'../src/Styles/Variables/dimensions',
'../src/Styles/Variables/fonts',
'../src/Styles/Variables/animations'
].map(require.resolve);
+const extractCSSPlugin = new ExtractTextPlugin({
+ filename: path.join('_output', uiFolder, 'Content', 'styles.css'),
+ allChunks: true,
+ disable: false,
+ ignoreOrder: true
+});
+
const config = {
devtool: '#source-map',
stats: {
@@ -39,9 +41,10 @@ const config = {
index: 'index.js'
},
resolve: {
- root: [
+ modules: [
root,
- path.join(root, 'Shims')
+ path.join(root, 'Shims'),
+ 'node_modules'
],
alias: {
jquery: 'jquery/src/jquery'
@@ -52,10 +55,11 @@ const config = {
sourceMapFilename: '[file].map'
},
plugins: [
- new ExtractTextPlugin(path.join('_output', uiFolder, 'Content', 'styles.css'), { allChunks: true }),
+ extractCSSPlugin,
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
+
new webpack.DefinePlugin({
__DEV__: !isProduction,
'process.env': {
@@ -64,22 +68,23 @@ const config = {
})
],
resolveLoader: {
- modulesDirectories: [
+ modules: [
'node_modules',
- 'gulp/webpack/'
+ 'frontend/gulp/webpack/'
]
},
- eslint: {
- formatter: function(results) {
- return JSON.stringify(results);
- }
- },
+ // TODO: Do we need this loader?
+ // eslint: {
+ // formatter: function(results) {
+ // return JSON.stringify(results);
+ // }
+ // },
module: {
- loaders: [
+ rules: [
{
test: /\.js?$/,
exclude: /(node_modules|JsLibraries)/,
- loader: 'babel',
+ loader: 'babel-loader',
query: {
plugins: ['transform-class-properties'],
presets: ['es2015', 'decorators-legacy', 'react', 'stage-2'],
@@ -95,51 +100,80 @@ const config = {
{
test: /\.css$/,
exclude: /(node_modules|globals.css)/,
- loader: ExtractTextPlugin.extract('style', 'css-loader?modules&importLoaders=1&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
+ use: extractCSSPlugin.extract({
+ fallback: 'style-loader',
+ use: [
+ {
+ loader: 'css-variables-loader',
+ options: {
+ cssVarsFiles
+ }
+ },
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ importLoaders: 1,
+ localIdentName: '[name]-[local]-[hash:base64:5]',
+ sourceMap: true
+ }
+ },
+ {
+ loader: 'postcss-loader',
+ options: {
+ config: {
+ ctx: {
+ cssVarsFiles
+ },
+ path: 'frontend/postcss.config.js'
+ }
+ }
+ }
+ ]
+ })
},
// Global styles
{
test: /\.css$/,
include: /(node_modules|globals.css)/,
- loader: 'style!css-loader'
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader'
+ }
+ ]
},
// Fonts
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
- loader: 'url?limit=10240&mimetype=application/font-woff&emitFile=false&name=Content/Fonts/[name].[ext]'
+ use: [
+ {
+ loader: 'url-loader',
+ options: {
+ limit: 10240,
+ mimetype: 'application/font-woff',
+ emitFile: false,
+ name: 'Content/Fonts/[name].[ext]'
+ }
+ }
+ ]
},
+
{
test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
- loader: 'file-loader?emitFile=false&name=Content/Fonts/[name].[ext]'
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ emitFile: false,
+ name: 'Content/Fonts/[name].[ext]'
+ }
+ }
+ ]
}
]
- },
- postcss: function(wpack) {
- cssVariables.forEach(wpack.addDependency);
-
- return [
- simpleVars({
- variables: function() {
- return cssVariables.reduce(function(obj, vars) {
- return _.extend(obj, reload(vars));
- }, {});
- }
- }),
- nested(),
- autoprefixer({
- browsers: [
- 'Chrome >= 30',
- 'Firefox >= 30',
- 'Safari >= 6',
- 'Edge >= 12',
- 'Explorer >= 10',
- 'iOS >= 7',
- 'Android >= 4.4'
- ]
- })
- ];
}
};
diff --git a/frontend/gulp/webpack/css-variables-loader.js b/frontend/gulp/webpack/css-variables-loader.js
new file mode 100644
index 000000000..5683c98be
--- /dev/null
+++ b/frontend/gulp/webpack/css-variables-loader.js
@@ -0,0 +1,11 @@
+const loaderUtils = require('loader-utils');
+
+module.exports = function cssVariablesLoader(source) {
+ const options = loaderUtils.getOptions(this);
+
+ options.cssVarsFiles.forEach((cssVarsFile) => {
+ this.addDependency(cssVarsFile);
+ });
+
+ return source;
+};
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 000000000..b9c229e48
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,33 @@
+const reload = require('require-nocache')(module);
+
+module.exports = (ctx, configPath, options) => {
+ const config = {
+ plugins: {
+ 'postcss-simple-vars': {
+ variables: () =>
+ ctx.options.cssVarsFiles.reduce((acc, vars) => {
+ return Object.assign(acc, reload(vars));
+ }, {})
+ },
+ 'postcss-nested': {},
+ 'postcss-mixins': {
+ mixinsDir: [
+ 'frontend/src/Styles/Mixins'
+ ]
+ },
+ autoprefixer: {
+ browsers: [
+ 'Chrome >= 30',
+ 'Firefox >= 30',
+ 'Safari >= 6',
+ 'Edge >= 12',
+ 'Explorer >= 11',
+ 'iOS >= 7',
+ 'Android >= 4.4'
+ ]
+ }
+ }
+ };
+
+ return config;
+};
diff --git a/frontend/src/Activity/History/HistoryRowConnector.js b/frontend/src/Activity/History/HistoryRowConnector.js
index 7ffcdbb57..036a4e240 100644
--- a/frontend/src/Activity/History/HistoryRowConnector.js
+++ b/frontend/src/Activity/History/HistoryRowConnector.js
@@ -3,16 +3,19 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
import createEpisodeSelector from 'Store/Selectors/createEpisodeSelector';
import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
import HistoryRow from './HistoryRow';
function createMapStateToProps() {
return createSelector(
+ createArtistSelector(),
createEpisodeSelector(),
createUISettingsSelector(),
- (episode, uiSettings) => {
+ (artist, episode, uiSettings) => {
return {
+ artist,
episode,
shortDateFormat: uiSettings.shortDateFormat,
timeFormat: uiSettings.timeFormat
@@ -28,6 +31,9 @@ const mapDispatchToProps = {
class HistoryRowConnector extends Component {
+ //
+ // Lifecycle
+
componentDidUpdate(prevProps) {
if (
prevProps.isMarkingAsFailed &&
diff --git a/frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css b/frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css
index f88543dd1..59e993ff8 100644
--- a/frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css
+++ b/frontend/src/AddArtist/AddNewArtist/AddNewArtistModalContent.css
@@ -52,8 +52,8 @@
}
.addButton {
+ @add-mixin truncate;
composes: button from 'Components/Link/SpinnerButton.css';
- composes: truncate from 'Styles/mixins/truncate.css';
}
.hideLanguageProfile {
diff --git a/frontend/src/Artist/Index/Banners/ArtistIndexBanner.css b/frontend/src/Artist/Index/Banners/ArtistIndexBanner.css
index 6e2dd7812..91026d17e 100644
--- a/frontend/src/Artist/Index/Banners/ArtistIndexBanner.css
+++ b/frontend/src/Artist/Index/Banners/ArtistIndexBanner.css
@@ -42,7 +42,7 @@ $hoverScale: 1.05;
}
.title {
- composes: truncate from 'Styles/mixins/truncate.css';
+ @add-mixin truncate;
background-color: $defaultColor;
color: $white;
diff --git a/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css b/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css
index eb1fd8be0..9a8161ca2 100644
--- a/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css
+++ b/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css
@@ -41,7 +41,7 @@ $hoverScale: 1.05;
}
.title {
- composes: truncate from 'Styles/mixins/truncate.css';
+ @add-mixin truncate;
background-color: $defaultColor;
color: $white;
diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.css b/frontend/src/Calendar/Agenda/AgendaEvent.css
index 07aa0fae2..f85b87cef 100644
--- a/frontend/src/Calendar/Agenda/AgendaEvent.css
+++ b/frontend/src/Calendar/Agenda/AgendaEvent.css
@@ -28,7 +28,7 @@
.artistName,
.albumTitle {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
flex: 0 1 300px;
margin-right: 10px;
diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
index dcb7d4308..c30f3562e 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/frontend/src/Calendar/Events/CalendarEvent.css
@@ -14,7 +14,7 @@
.artistName,
.albumTitle {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
flex: 1 0 1px;
margin-right: 10px;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css
index a1eb377cb..efe6d8103 100644
--- a/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css
@@ -8,7 +8,7 @@
@media (min-width: 768px) {
.title {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
float: left;
clear: left;
diff --git a/frontend/src/Components/Form/PathInput.css b/frontend/src/Components/Form/PathInput.css
index fd6128544..d3851b204 100644
--- a/frontend/src/Components/Form/PathInput.css
+++ b/frontend/src/Components/Form/PathInput.css
@@ -24,9 +24,9 @@
}
.pathContainer {
- composes: scrollbar from 'Styles/Mixins/scroller.css';
- composes: scrollbarTrack from 'Styles/Mixins/scroller.css';
- composes: scrollbarThumb from 'Styles/Mixins/scroller.css';
+ @add-mixin scrollbar;
+ @add-mixin scrollbarTrack;
+ @add-mixin scrollbarThumb;
}
.pathInputContainerOpen {
diff --git a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css
index 1f1683dc6..d1fdcb08e 100644
--- a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css
+++ b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css
@@ -8,13 +8,13 @@
}
.path {
- composes: truncate from 'Styles/mixins/truncate.css';
+ @add-mixin truncate;
flex: 1 0 0;
}
.freeSpace {
- composes: truncate from 'Styles/mixins/truncate.css';
+ @add-mixin truncate;
flex: 1 0 0;
margin-left: 15px;
diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js
index d8b17d095..6cb8f5d49 100644
--- a/frontend/src/Components/Icon.js
+++ b/frontend/src/Components/Icon.js
@@ -14,7 +14,7 @@ function Icon(props) {
} = props;
return (
-
-
+
);
}
diff --git a/frontend/src/Components/Menu/MenuItem.css b/frontend/src/Components/Menu/MenuItem.css
index b2ad5d312..bae1a649c 100644
--- a/frontend/src/Components/Menu/MenuItem.css
+++ b/frontend/src/Components/Menu/MenuItem.css
@@ -1,5 +1,5 @@
.menuItem {
- composes: truncate from 'Styles/mixins/truncate.css';
+ @add-mixin truncate;
display: block;
flex-shrink: 0;
diff --git a/frontend/src/Components/Modal/ModalHeader.css b/frontend/src/Components/Modal/ModalHeader.css
index 9ebaad61c..eab77a9f8 100644
--- a/frontend/src/Components/Modal/ModalHeader.css
+++ b/frontend/src/Components/Modal/ModalHeader.css
@@ -1,5 +1,5 @@
.modalHeader {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
flex-shrink: 0;
padding: 15px 50px 15px 30px;
diff --git a/frontend/src/Components/Page/Header/ArtistSearchInput.css b/frontend/src/Components/Page/Header/ArtistSearchInput.css
index aaf8a5be5..c34b0d256 100644
--- a/frontend/src/Components/Page/Header/ArtistSearchInput.css
+++ b/frontend/src/Components/Page/Header/ArtistSearchInput.css
@@ -37,9 +37,9 @@
}
.seriesContainer {
- composes: scrollbar from 'Styles/Mixins/scroller.css';
- composes: scrollbarTrack from 'Styles/Mixins/scroller.css';
- composes: scrollbarThumb from 'Styles/Mixins/scroller.css';
+ @add-mixin scrollbar;
+ @add-mixin scrollbarTrack;
+ @add-mixin scrollbarThumb;
}
.containerOpen {
diff --git a/frontend/src/Components/Page/Header/ArtistSearchResult.css b/frontend/src/Components/Page/Header/ArtistSearchResult.css
index 35dc98df5..87988a35b 100644
--- a/frontend/src/Components/Page/Header/ArtistSearchResult.css
+++ b/frontend/src/Components/Page/Header/ArtistSearchResult.css
@@ -29,6 +29,6 @@
.titles,
.title,
.alternateTitle {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
}
}
diff --git a/frontend/src/Components/Page/Sidebar/PageSidebar.js b/frontend/src/Components/Page/Sidebar/PageSidebar.js
index 8b38466d9..d805669df 100644
--- a/frontend/src/Components/Page/Sidebar/PageSidebar.js
+++ b/frontend/src/Components/Page/Sidebar/PageSidebar.js
@@ -330,9 +330,9 @@ class PageSidebar extends Component {
return;
}
- if (isSidebarVisible && (touchStartX > 210 || touchStartX < 50)) {
+ if (isSidebarVisible && (touchStartX > 210 || touchStartX < 180)) {
return;
- } else if (!isSidebarVisible && touchStartX > 50) {
+ } else if (!isSidebarVisible && touchStartX > 30) {
return;
}
@@ -373,6 +373,15 @@ class PageSidebar extends Component {
}
if (Math.abs(this._touchStartY - currentTouchY) > 20) {
+ this.setState({
+ transition: 'none',
+ transform: 0
+ });
+
+ return;
+ }
+
+ if (Math.abs(this._touchStartX - currentTouchX) < 20) {
return;
}
diff --git a/frontend/src/Components/Page/Sidebar/PageSidebarItem.js b/frontend/src/Components/Page/Sidebar/PageSidebarItem.js
index 23c6ccaf3..cfc694395 100644
--- a/frontend/src/Components/Page/Sidebar/PageSidebarItem.js
+++ b/frontend/src/Components/Page/Sidebar/PageSidebarItem.js
@@ -63,7 +63,7 @@ class PageSidebarItem extends Component {
}
-
+
{title}
diff --git a/frontend/src/Components/Scroller/Scroller.css b/frontend/src/Components/Scroller/Scroller.css
index 61005a527..c8783a8de 100644
--- a/frontend/src/Components/Scroller/Scroller.css
+++ b/frontend/src/Components/Scroller/Scroller.css
@@ -1,7 +1,7 @@
.scroller {
- composes: scrollbar from 'Styles/Mixins/scroller.css';
- composes: scrollbarTrack from 'Styles/Mixins/scroller.css';
- composes: scrollbarThumb from 'Styles/Mixins/scroller.css';
+ @add-mixin scrollbar;
+ @add-mixin scrollbarTrack;
+ @add-mixin scrollbarThumb;
}
.none {
diff --git a/frontend/src/Components/SignalRConnector.js b/frontend/src/Components/SignalRConnector.js
index 09c76b87a..3e10ca604 100644
--- a/frontend/src/Components/SignalRConnector.js
+++ b/frontend/src/Components/SignalRConnector.js
@@ -306,15 +306,17 @@ class SignalRConnector extends Component {
}
onDisconnected = () => {
- if (this.props.isReconnecting) {
- this.props.setAppValue({
- isConnected: false,
- isReconnecting: true,
- isDisconnected: true
- });
-
- this.retryConnection();
+ if (window.Sonarr.unloading) {
+ return;
}
+
+ this.props.setAppValue({
+ isConnected: false,
+ isReconnecting: true,
+ isDisconnected: true
+ });
+
+ this.retryConnection();
}
//
diff --git a/frontend/src/Components/Table/Cells/VirtualTableRowCell.css b/frontend/src/Components/Table/Cells/VirtualTableRowCell.css
index 90edf0285..e4cffe1c4 100644
--- a/frontend/src/Components/Table/Cells/VirtualTableRowCell.css
+++ b/frontend/src/Components/Table/Cells/VirtualTableRowCell.css
@@ -1,6 +1,6 @@
.cell {
+ @add-mixin truncate;
composes: cell from 'Components/Table/Cells/TableRowCell.css';
- composes: truncate from 'Styles/Mixins/truncate.css';
flex-grow: 0;
flex-shrink: 1;
diff --git a/frontend/src/Episode/Summary/EpisodeSummary.css b/frontend/src/Episode/Summary/EpisodeSummary.css
index fb04508f3..c05234997 100644
--- a/frontend/src/Episode/Summary/EpisodeSummary.css
+++ b/frontend/src/Episode/Summary/EpisodeSummary.css
@@ -25,7 +25,7 @@
}
.path {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
flex: 1 0 1px;
}
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css b/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css
index 1635faeac..e1032ddef 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css
@@ -7,11 +7,11 @@
}
.underlay {
- composes: cover from 'Styles/Mixins/cover.css';
+ @add-mixin cover;
}
.overlay {
- composes: linkOverlay from 'Styles/Mixins/linkOverlay.css';
+ @add-mixin linkOverlay;
padding: 10px;
}
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css
index 609cea818..cfeacec77 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css
@@ -5,7 +5,7 @@
}
.name {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
margin-bottom: 20px;
font-weight: 300;
diff --git a/frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css b/frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css
index e9dd6d1d5..d228b842b 100644
--- a/frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css
+++ b/frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css
@@ -7,11 +7,11 @@
}
.underlay {
- composes: cover from 'Styles/Mixins/cover.css';
+ @add-mixin cover;
}
.overlay {
- composes: linkOverlay from 'Styles/Mixins/linkOverlay.css';
+ @add-mixin linkOverlay;
padding: 10px;
}
diff --git a/frontend/src/Settings/Indexers/Indexers/Indexer.css b/frontend/src/Settings/Indexers/Indexers/Indexer.css
index 9cd62404c..d8e1a731e 100644
--- a/frontend/src/Settings/Indexers/Indexers/Indexer.css
+++ b/frontend/src/Settings/Indexers/Indexers/Indexer.css
@@ -5,7 +5,7 @@
}
.name {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
margin-bottom: 20px;
font-weight: 300;
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css
index 3415de2e1..e2181150c 100644
--- a/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css
@@ -7,11 +7,11 @@
}
.underlay {
- composes: cover from 'Styles/Mixins/cover.css';
+ @add-mixin cover;
}
.overlay {
- composes: linkOverlay from 'Styles/Mixins/linkOverlay.css';
+ @add-mixin linkOverlay;
padding: 10px;
}
diff --git a/frontend/src/Settings/Notifications/Notifications/Notification.css b/frontend/src/Settings/Notifications/Notifications/Notification.css
index 8d28cef8e..5a17a4c20 100644
--- a/frontend/src/Settings/Notifications/Notifications/Notification.css
+++ b/frontend/src/Settings/Notifications/Notifications/Notification.css
@@ -5,7 +5,7 @@
}
.name {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
margin-bottom: 20px;
font-weight: 300;
diff --git a/frontend/src/Settings/Profiles/Language/LanguageProfile.css b/frontend/src/Settings/Profiles/Language/LanguageProfile.css
index f94aef43a..d23bd1734 100644
--- a/frontend/src/Settings/Profiles/Language/LanguageProfile.css
+++ b/frontend/src/Settings/Profiles/Language/LanguageProfile.css
@@ -5,7 +5,7 @@
}
.name {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
margin-bottom: 20px;
font-weight: 300;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfile.css b/frontend/src/Settings/Profiles/Quality/QualityProfile.css
index 785047cd4..1ac9041bd 100644
--- a/frontend/src/Settings/Profiles/Quality/QualityProfile.css
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfile.css
@@ -5,7 +5,7 @@
}
.name {
- composes: truncate from 'Styles/Mixins/truncate.css';
+ @add-mixin truncate;
margin-bottom: 20px;
font-weight: 300;
diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.css b/frontend/src/Settings/Quality/Definition/QualityDefinition.css
index 5eced5bf4..69e8018f5 100644
--- a/frontend/src/Settings/Quality/Definition/QualityDefinition.css
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.css
@@ -25,25 +25,23 @@
}
.bar {
- top: 6px;
+ top: 9px;
margin: 0 5px;
- height: 10px;
- border: 1px solid $sliderAccentColor;
- border-radius: 4px;
+ height: 3px;
background-color: $sliderAccentColor;
box-shadow: 0 0 0 #000;
&:nth-child(odd) {
- background-color: $white;
+ background-color: #ddd;
}
}
.handle {
top: 1px;
z-index: 0 !important;
- width: 20px;
- height: 20px;
- border: 1px solid $sliderAccentColor;
+ width: 18px;
+ height: 18px;
+ border: 3px solid $sliderAccentColor;
border-radius: 50%;
background-color: $white;
text-align: center;
diff --git a/frontend/src/Styles/Mixins/cover.css b/frontend/src/Styles/Mixins/cover.css
index b266846d4..e44c99be6 100644
--- a/frontend/src/Styles/Mixins/cover.css
+++ b/frontend/src/Styles/Mixins/cover.css
@@ -1,4 +1,4 @@
-.cover {
+@define-mixin cover {
position: absolute;
top: 0;
left: 0;
diff --git a/frontend/src/Styles/Mixins/linkOverlay.css b/frontend/src/Styles/Mixins/linkOverlay.css
index 971f96b13..74c3fd753 100644
--- a/frontend/src/Styles/Mixins/linkOverlay.css
+++ b/frontend/src/Styles/Mixins/linkOverlay.css
@@ -1,5 +1,5 @@
-.linkOverlay {
- composes: cover from 'Styles/Mixins/cover.css';
+@define-mixin linkOverlay {
+ @add-mixin cover;
pointer-events: none;
user-select: none;
diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css
index 6a982646a..62a619103 100644
--- a/frontend/src/Styles/Mixins/scroller.css
+++ b/frontend/src/Styles/Mixins/scroller.css
@@ -1,17 +1,17 @@
-.scrollbar {
+@define-mixin scrollbar {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
}
-.scrollbarTrack {
+@define-mixin scrollbarTrack {
&&::-webkit-scrollbar-track {
background-color: transparent;
}
}
-.scrollbarThumb {
+@define-mixin scrollbarThumb {
&::-webkit-scrollbar-thumb {
min-height: 50px;
border: 1px solid transparent;
diff --git a/frontend/src/Styles/Mixins/truncate.css b/frontend/src/Styles/Mixins/truncate.css
index aa157178f..d0762a029 100644
--- a/frontend/src/Styles/Mixins/truncate.css
+++ b/frontend/src/Styles/Mixins/truncate.css
@@ -10,7 +10,7 @@
* occur.
*/
-.truncate {
+ @define-mixin truncate {
overflow: hidden !important;
max-width: 100%; /* 1 */
text-overflow: ellipsis !important;
diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
index f1510dba3..2a097e276 100644
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
@@ -20,7 +20,7 @@ import FilterMenu from 'Components/Menu/FilterMenu';
import MenuContent from 'Components/Menu/MenuContent';
import FilterMenuItem from 'Components/Menu/FilterMenuItem';
import ConfirmModal from 'Components/Modal/ConfirmModal';
-import CutoffUnmetRow from './CutoffUnmetRow';
+import CutoffUnmetRowConnector from './CutoffUnmetRowConnector';
class CutoffUnmet extends Component {
@@ -219,7 +219,7 @@ class CutoffUnmet extends Component {
{
items.map((item) => {
return (
- {
+ return {
+ artist
+ };
+ }
+ );
+}
+
+export default connect(createMapStateToProps)(CutoffUnmetRow);
diff --git a/frontend/src/Wanted/Missing/Missing.js b/frontend/src/Wanted/Missing/Missing.js
index 427b153ef..0914e3c3a 100644
--- a/frontend/src/Wanted/Missing/Missing.js
+++ b/frontend/src/Wanted/Missing/Missing.js
@@ -21,7 +21,7 @@ import MenuContent from 'Components/Menu/MenuContent';
import FilterMenuItem from 'Components/Menu/FilterMenuItem';
import ConfirmModal from 'Components/Modal/ConfirmModal';
import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
-import MissingRow from './MissingRow';
+import MissingRowConnector from './MissingRowConnector';
class Missing extends Component {
@@ -236,7 +236,7 @@ class Missing extends Component {
{
items.map((item) => {
return (
- {
+ return {
+ artist
+ };
+ }
+ );
+}
+
+export default connect(createMapStateToProps)(MissingRow);
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 0c50d3bc3..fd93b8500 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -48,8 +48,8 @@
-
-
+
+