Improve app style

frontend/js/components/buttons/download.js

@@ -22,8 +22,9 @@ DownloadAndStream.propTypes = {
 
 const DownloadButton = ({ url }) => (
   <h5 className="d-inline">
-    <a href={url} className="badge badge-pill badge-primary m-1">
-      <span className="fa fa-download"> </span> Download
+    <a href={url} className="btn btn-sm btn-primary m-1">
+      <i className="fa fa-download mr-1" />
+      Download
     </a>
   </h5>
 );
@@ -37,9 +38,10 @@ const StreamButton = ({ name, url, subtitles }) => {
       <h5 className="d-inline">
         <a
           href="#"
-          className="badge badge-pill badge-primary m-1 clickable"
+          className="btn btn-sm btn-primary m-1 clickable"
           onClick={(e) => { e.preventDefault(); setShowModal(true) }}>
-          <span className="fa fa-play-circle"> </span> Play
+          <i className="fa fa-play-circle mr-1" />
+          Play
         </a>
       </h5>
 

frontend/js/components/buttons/imdb.js

@@ -7,9 +7,10 @@ export const ImdbBadge = ({ imdbId }) => {
   return (
     <h5 className="d-inline">
       <a
-        className="badge badge-pill badge-warning m-1"
+        className="btn btn-sm btn-warning m-1"
         href={`https://www.imdb.com/title/${imdbId}`}>
-        IMDb <i className="fa fa-external-link"></i>
+        IMDb
+        <i className="ml-1 fa fa-external-link"></i>
       </a>
     </h5>
   );

frontend/js/components/buttons/showMore.js

@@ -13,7 +13,7 @@ export const ShowMore = ({ children, id, inLibrary  }) => {
       <span>
         <a
           onClick={() => setDisplay(true)}
-          className="badge badge-pill badge-info clickable"
+          className="badge badge-pill badge-secondary clickable"
         >
           More options ...
         </a>

frontend/js/components/buttons/subtitles.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import PropTypes from "prop-types"
 import { List } from "immutable"
 
@@ -11,24 +11,37 @@ export const SubtitlesButton = ({
   search,
 }) => {
   if (inLibrary === false) { return null }
+  /* eslint-disable */
+  const [show, setShow] = useState(false);
+  /* eslint-enable */
+
+  const onSelect = (eventKey) => {
+    if (eventKey === null || eventKey != 1) {
+      setShow(false);
+    }
+  }
+
+  const onToggle = (isOpen, event, metadata) => {
+    // Don't close on select
+    if (metadata && metadata.source !== "select") {
+      setShow(isOpen);
+    }
+  }
 
   const count = (subtitles && subtitles.size !== 0) ? subtitles.size : 0;
   return (
     <span className="mr-1 mb-1">
-      <Dropdown drop="up">
-        <Dropdown.Toggle variant="success">
-          <i className="fa fa-language mr-1" />
+      <Dropdown drop="up" show={show} onToggle={onToggle} onSelect={onSelect}>
+        <Dropdown.Toggle variant="secondary" bsPrefix="btn-sm w-md-100">
+          <i className="fa fa-commenting mr-1" />
           Subtitles
-          <span className="ml-1 badge badge-pill badge-light">
+          <span className="ml-1 badge badge-pill badge-info">
             {count}
           </span>
         </Dropdown.Toggle>
 
         <Dropdown.Menu>
-          <Dropdown.Header>
-            <span className="text-warning">Advanced</span>
-          </Dropdown.Header>
-          <Dropdown.Item onClick={search} >
+          <Dropdown.Item eventKey={1} onClick={search} >
             <i className={`fa ${ searching ? "fa-spin" : "" } fa-refresh mr-1`} />
             Automatic search
           </Dropdown.Item>

frontend/js/components/buttons/torrents.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import PropTypes from "prop-types"
 import { List } from "immutable"
 import { connect } from "react-redux"
@@ -50,24 +50,39 @@ const torrentsButton = ({
   addTorrent,
   url,
 }) => {
+  /* eslint-disable */
+  const [show, setShow] = useState(false);
+  /* eslint-enable */
   const entries = buildMenuItems(torrents);
   const count = (torrents && torrents.size !== 0) ? torrents.size : 0;
+
+  const onSelect = (eventKey) => {
+    // Close the dropdown if the eventkey is not specified
+    if (eventKey === null) {
+      setShow(false);
+    }
+  }
+
+  const onToggle = (isOpen, event, metadata) => {
+    // Don't close on select
+    if (metadata && metadata.source !== "select") {
+      setShow(isOpen);
+    }
+  }
+
   return (
     <span className="mr-1 mb-1">
-      <Dropdown drop="up">
-        <Dropdown.Toggle variant="primary">
+      <Dropdown drop="up" show={show} onToggle={onToggle} onSelect={onSelect}>
+        <Dropdown.Toggle variant="secondary" bsPrefix="btn-sm w-md-100">
           <i className="fa fa-magnet mr-1" />
           Torrents
-          <span className="ml-1 badge badge-pill badge-light">
+          <span className="ml-1 badge badge-pill badge-info">
             {count}
           </span>
         </Dropdown.Toggle>
 
         <Dropdown.Menu>
-          <Dropdown.Header>
-            <span className="text-warning">Advanced</span>
-          </Dropdown.Header>
-          <Dropdown.Item onClick={search} >
+          <Dropdown.Item eventKey={1} onClick={search} >
             <i className={`fa ${ searching ? "fa-spin" : "" } fa-refresh mr-1`} />
             Automatic search
           </Dropdown.Item>

frontend/js/components/list/posters.js

@@ -11,6 +11,10 @@ import Poster from "./poster"
 import Loader from "../loader/loader"
 
 const ListPosters = (props) => {
+  if (props.loading) {
+    return (<Loader />);
+  }
+
   let elmts = props.data;
   const listSize = elmts !== undefined ? elmts.size : 0;
 
@@ -174,10 +178,6 @@ const Posters = (props) => {
     }
   }, [move])
 
-  if (props.loading) {
-    return (<Loader />);
-  }
-
   if (props.elmts.size === 0)  {
     return (
       <div className="jumbotron">

frontend/js/components/loader/loader.js

@@ -2,15 +2,13 @@ import React from "react"
 import Loading from "react-loading"
 
 const Loader = () => (
-  <div className="row" id="container">
-    <div className="col-12 col-md-6 offset-md-3">
-      <Loading
-        type="bars"
-        height={"100%"}
-        width={"100%"}
-        color="#EBEBEB"
-      />
-    </div>
+  <div className="col-12 col-md-6 offset-md-3">
+    <Loading
+      type="bars"
+      height={"100%"}
+      width={"100%"}
+      color="#EBEBEB"
+    />
   </div>
 );
 export default Loader;

frontend/js/components/shows/details/season.js

@@ -6,19 +6,17 @@ import { Episode } from "./episode"
 
 export const Season = (props) => {
   const [show, setShow] = useState(false);
-  const visibility = show ? "d-flex flex-column" : "d-none";
-  const icon = show ? "down" : "left"
 
   return (
-    <div className="card mb-3">
+    <div className="card mb-3 show-season">
       <div className="card-header clickable" onClick={() => setShow(!show)}>
         <h5 className="m-0">
           Season {props.season}
           <small className="text-primary"> — ({props.data.toList().size} episodes)</small>
-          <i className={`float-right fa fa-chevron-${icon}`}></i>
+          <i className={`float-right fa fa-chevron-${show ? "down" : "left"}`}></i>
         </h5>
       </div>
-      <div className={`card-body ${visibility}`}>
+      <div className={`card-body ${show ? "d-flex flex-column" : "d-none"}`}>
         {props.data.toList().map(function(episode) {
           let key = `${episode.get("season")}-${episode.get("episode")}`;
           return (

frontend/js/components/shows/details/seasons.js

@@ -7,6 +7,7 @@ import { Season } from "./season"
 export const SeasonsList = (props) => (
   <div className="col col-12 col-md-10 offset-md-1">
     {props.data.get("seasons").entrySeq().map(function([season, data]) {
+      if (season === 0) { return null }
       return (
         <Season
           key={`season-list-key-${season}`}

frontend/scss/app.scss

@@ -13,6 +13,12 @@ $fa-font-path: "~font-awesome/fonts";
     }
 }
 
+@include media-breakpoint-down(md) {
+    .w-md-100 {
+        width: 100%;
+    }
+}
+
 $body-padding-top: $navbar-padding-y + 3rem;
 
 body {
@@ -84,6 +90,10 @@ div.show.dropdown.nav-item > div {
     }
 }
 
+.show-season > div.card-body {
+    background-color: rgba($body-bg, .5)
+}
+
 .episode-thumb {
     img {
         @include media-breakpoint-down(md) {