Mobile fixes (#1539)

* Make new tag, gallery and studio pages mobile friendly
* Enable new button on mobile
* Update movies edit HTML to be more in line with scene

Update the code of the MovieEditPanel to be more in sync with the
SceneEditPanel. Changes made are:
 * Use FormUtil.renderLabel instead of manually building
 * Always apply xs=9 breakpoint

This fixes some layout issues on mobile while still looking the same on
tablet and desktop resolution.

* Enable delete button for tags, studios and movies on mobile
* Add changelog

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/Changelog/Changelog.tsx

@@ -11,6 +11,7 @@ import V050 from "./versions/v050.md";
 import V060 from "./versions/v060.md";
 import V070 from "./versions/v070.md";
 import V080 from "./versions/v080.md";
+import V090 from "./versions/v090.md";
 import { MarkdownPage } from "../Shared/MarkdownPage";
 
 // to avoid use of explicit any
@@ -49,9 +50,9 @@ const Changelog: React.FC = () => {
   // after new release:
   // add entry to releases, using the current* fields
   // then update the current fields.
-  const currentVersion = stashVersion || "v0.8.0";
+  const currentVersion = stashVersion || "v0.9.0";
   const currentDate = buildDate;
-  const currentPage = V080;
+  const currentPage = V090;
 
   const releases: IStashRelease[] = [
     {
@@ -60,6 +61,11 @@ const Changelog: React.FC = () => {
       page: currentPage,
       defaultOpen: true,
     },
+    {
+      version: "v0.8.0",
+      date: "2021-07-02",
+      page: V080,
+    },
     {
       version: "v0.7.0",
       date: "2021-05-15",

ui/v2.5/src/components/Changelog/versions/v090.md

@@ -0,0 +1,2 @@
+### 🐛 Bug fixes
+* Show New and Delete buttons in mobile view. ([#1539](https://github.com/stashapp/stash/pull/1539))

ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx

@@ -277,7 +277,7 @@ export const Gallery: React.FC = () => {
   if (isNew)
     return (
       <div className="row new-view">
-        <div className="col-6">
+        <div className="col-md-6">
           <h2>
             <FormattedMessage
               id="actions.create_entity"

ui/v2.5/src/components/MainNavbar.tsx

@@ -285,7 +285,7 @@ export const MainNavbar: React.FC = () => {
           </Fade>
         </Navbar.Collapse>
         <Nav className="order-2 flex-row">
-          <div className="d-none d-sm-block">{newButton}</div>
+          <div>{newButton}</div>
           <Nav.Link
             href="https://opencollective.com/stashapp"
             target="_blank"

ui/v2.5/src/components/Movies/MovieDetails/MovieEditPanel.tsx

@@ -23,7 +23,7 @@ import {
   Row,
   InputGroup,
 } from "react-bootstrap";
-import { DurationUtils, ImageUtils } from "src/utils";
+import { DurationUtils, FormUtils, ImageUtils } from "src/utils";
 import { RatingStars } from "src/components/Scenes/SceneDetails/RatingStars";
 import { useFormik } from "formik";
 import { Prompt } from "react-router-dom";
@@ -67,11 +67,6 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
     GQL.ScrapedMovie | undefined
   >();
 
-  const labelXS = 3;
-  const labelXL = 3;
-  const fieldXS = 9;
-  const fieldXL = 9;
-
   const schema = yup.object({
     name: yup.string().required(),
     aliases: yup.string().optional().nullable(),
@@ -362,10 +357,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
   function renderTextField(field: string, title: string) {
     return (
       <Form.Group controlId={field} as={Row}>
-        <Form.Label column xs={labelXS} xl={labelXL}>
+        {FormUtils.renderLabel({
-          {title}
+          title,
-        </Form.Label>
+        })}
-        <Col xs={fieldXS} xl={fieldXL}>
+        <Col xs={9}>
           <Form.Control
             className="text-input"
             placeholder={title}
@@ -396,10 +391,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
 
       <Form noValidate onSubmit={formik.handleSubmit} id="movie-edit">
         <Form.Group controlId="name" as={Row}>
-          <Form.Label column xs={labelXS} xl={labelXL}>
+          {FormUtils.renderLabel({
-            {intl.formatMessage({ id: "name" })}
+            title: intl.formatMessage({ id: "name" }),
-          </Form.Label>
+          })}
-          <Col xs={fieldXS} xl={fieldXL}>
+          <Col xs={9}>
             <Form.Control
               className="text-input"
               placeholder={intl.formatMessage({ id: "name" })}
@@ -415,10 +410,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
         {renderTextField("aliases", intl.formatMessage({ id: "aliases" }))}
 
         <Form.Group controlId="duration" as={Row}>
-          <Form.Label column sm={labelXS} xl={labelXL}>
+          {FormUtils.renderLabel({
-            {intl.formatMessage({ id: "duration" })}
+            title: intl.formatMessage({ id: "duration" }),
-          </Form.Label>
+          })}
-          <Col sm={fieldXS} xl={fieldXL}>
+          <Col xs={9}>
             <DurationInput
               numericValue={formik.values.duration ?? undefined}
               onValueChange={(valueAsNumber: number) => {
@@ -431,10 +426,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
         {renderTextField("date", intl.formatMessage({ id: "date" }))}
 
         <Form.Group controlId="studio" as={Row}>
-          <Form.Label column sm={labelXS} xl={labelXL}>
+          {FormUtils.renderLabel({
-            {intl.formatMessage({ id: "studio" })}
+            title: intl.formatMessage({ id: "studio" }),
-          </Form.Label>
+          })}
-          <Col sm={fieldXS} xl={fieldXL}>
+          <Col xs={9}>
             <StudioSelect
               onSelect={(items) =>
                 formik.setFieldValue(
@@ -450,10 +445,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
         {renderTextField("director", intl.formatMessage({ id: "director" }))}
 
         <Form.Group controlId="rating" as={Row}>
-          <Form.Label column sm={labelXS} xl={labelXL}>
+          {FormUtils.renderLabel({
-            {intl.formatMessage({ id: "rating" })}
+            title: intl.formatMessage({ id: "rating" }),
-          </Form.Label>
+          })}
-          <Col sm={fieldXS} xl={fieldXL}>
+          <Col xs={9}>
             <RatingStars
               value={formik.values.rating ?? undefined}
               onSetRating={(value) =>
@@ -464,10 +459,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
         </Form.Group>
 
         <Form.Group controlId="url" as={Row}>
-          <Form.Label column xs={labelXS} xl={labelXL}>
+          {FormUtils.renderLabel({
-            {intl.formatMessage({ id: "url" })}
+            title: intl.formatMessage({ id: "url" }),
-          </Form.Label>
+          })}
-          <Col xs={fieldXS} xl={fieldXL}>
+          <Col xs={9}>
             <InputGroup>
               <Form.Control
                 className="text-input"
@@ -480,10 +475,10 @@ export const MovieEditPanel: React.FC<IMovieEditPanel> = ({
         </Form.Group>
 
         <Form.Group controlId="synopsis" as={Row}>
-          <Form.Label column sm={labelXS} xl={labelXL}>
+          {FormUtils.renderLabel({
-            {intl.formatMessage({ id: "synopsis" })}
+            title: intl.formatMessage({ id: "synopsis" }),
-          </Form.Label>
+          })}
-          <Col sm={fieldXS} xl={fieldXL}>
+          <Col xs={9}>
             <Form.Control
               as="textarea"
               className="text-input"

ui/v2.5/src/components/Shared/DetailsEditNavbar.tsx

@@ -61,7 +61,7 @@ export const DetailsEditNavbar: React.FC<IProps> = (props: IProps) => {
     return (
       <Button
         variant="danger"
-        className="delete d-none d-sm-block"
+        className="delete"
         onClick={() => setIsDeleteAlertOpen(true)}
       >
         <FormattedMessage id="actions.delete" />

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -356,7 +356,7 @@ export const Studio: React.FC = () => {
       <div
         className={cx("studio-details", {
           "col-md-4": !isNew,
-          "col-8": isNew,
+          "col-md-8": isNew,
         })}
       >
         {isNew && (

ui/v2.5/src/components/Tags/TagDetails/Tag.tsx

@@ -259,7 +259,7 @@ export const Tag: React.FC = () => {
       <div
         className={cx("tag-details", {
           "col-md-4": !isNew,
-          "col-8": isNew,
+          "col-md-8": isNew,
         })}
       >
         <div className="text-center logo-container">