Rename view to layout and adjust spacing (#1075)

See commits. In terms of review, the first commit doesn't need to be
code-reviewed at all. I think basically all bugs I could introduce there
are caught by type checking.

backend/src/api/model/block/mod.rs

@@ -83,8 +83,8 @@ pub(crate) enum VideoListOrder {
 }
 
 #[derive(Debug, Clone, Copy, FromSql, ToSql, GraphQLEnum)]
-#[postgres(name = "video_list_view")]
-pub(crate) enum VideoListView {
+#[postgres(name = "video_list_layout")]
+pub(crate) enum VideoListLayout {
     #[postgres(name = "slider")]
     Slider,
     #[postgres(name = "gallery")]
@@ -172,7 +172,7 @@ pub(crate) struct SeriesBlock {
     pub(crate) show_title: bool,
     pub(crate) show_metadata: bool,
     pub(crate) order: VideoListOrder,
-    pub(crate) view: VideoListView,
+    pub(crate) layout: VideoListLayout,
 }
 
 impl Block for SeriesBlock {
@@ -204,8 +204,8 @@ impl SeriesBlock {
         self.order
     }
 
-    fn view(&self) -> VideoListView {
-        self.view
+    fn layout(&self) -> VideoListLayout {
+        self.layout
     }
 
     fn id(&self) -> Id {
@@ -278,7 +278,7 @@ impl_from_db!(
             text_content,
             series,
             videolist_order,
-            videolist_view,
+            videolist_layout,
             video,
             show_title,
             show_link,
@@ -309,7 +309,7 @@ impl_from_db!(
                 shared,
                 series: row.series::<Option<Key>>().map(Id::series),
                 order: unwrap_type_dep(row.videolist_order(), "series", "videolist_order"),
-                view: unwrap_type_dep(row.videolist_view(), "series", "videolist_view"),
+                layout: unwrap_type_dep(row.videolist_layout(), "series", "videolist_layout"),
                 show_title: unwrap_type_dep(row.show_title(), "series", "show_title"),
                 show_metadata: unwrap_type_dep(row.show_metadata(), "series", "show_metadata"),
             }.into(),

backend/src/api/model/block/mutations.rs

@@ -5,7 +5,7 @@ use crate::{
     db::{types::Key, util::select},
     prelude::*,
 };
-use super::{BlockValue, VideoListOrder, VideoListView};
+use super::{BlockValue, VideoListOrder, VideoListLayout};
 
 
 impl BlockValue {
@@ -60,10 +60,10 @@ impl BlockValue {
         context.db
             .execute(
                 "insert into blocks \
-                    (realm, index, type, series, videolist_order, videolist_view, show_title, show_metadata) \
+                    (realm, index, type, series, videolist_order, videolist_layout, show_title, show_metadata) \
                     values ($1, $2, 'series', $3, $4, $5, $6, $7)",
                 &[&realm.key, &index, &series,
-                    &block.order, &block.view, &block.show_title, &block.show_metadata],
+                    &block.order, &block.layout, &block.show_title, &block.show_metadata],
             )
             .await?;
 
@@ -274,7 +274,7 @@ impl BlockValue {
             "update blocks set \
                 series = coalesce($2, series), \
                 videolist_order = coalesce($3, videolist_order), \
-                videolist_view = coalesce($4, videolist_view), \
+                videolist_layout = coalesce($4, videolist_layout), \
                 show_title = coalesce($5, show_title), \
                 show_metadata = coalesce($6, show_metadata) \
                 where id = $1 \
@@ -285,7 +285,7 @@ impl BlockValue {
             (&Self::key_for(id)?) as &(dyn postgres_types::ToSql + Sync),
             &series_id,
             &set.order,
-            &set.view,
+            &set.layout,
             &set.show_title,
             &set.show_metadata,
         ];
@@ -392,7 +392,7 @@ pub(crate) struct NewSeriesBlock {
     pub(crate) show_title: bool,
     pub(crate) show_metadata: bool,
     pub(crate) order: VideoListOrder,
-    pub(crate) view: VideoListView,
+    pub(crate) layout: VideoListLayout,
 }
 
 #[derive(GraphQLInputObject)]
@@ -419,7 +419,7 @@ pub(crate) struct UpdateSeriesBlock {
     show_title: Option<bool>,
     show_metadata: Option<bool>,
     order: Option<VideoListOrder>,
-    view: Option<VideoListView>,
+    layout: Option<VideoListLayout>,
 }
 
 #[derive(GraphQLInputObject)]

backend/src/api/mutation.rs

@@ -30,7 +30,7 @@ use super::{
             UpdateVideoBlock,
             RemovedBlock,
             VideoListOrder,
-            VideoListView,
+            VideoListLayout,
         },
     },
 };
@@ -248,7 +248,7 @@ impl Mutation {
                 show_title: false,
                 show_metadata: true,
                 order: VideoListOrder::NewToOld,
-                view: VideoListView::Gallery,
+                layout: VideoListLayout::Gallery,
             },
             context,
         ).await?;

backend/src/cmd/import_realm_tree.rs

@@ -304,7 +304,7 @@ impl Block {
                 // Insert block
                 let query = "
                     insert into blocks
-                    (realm, type, index, series, videolist_order, videolist_view, show_title, show_metadata)
+                    (realm, type, index, series, videolist_order, videolist_layout, show_title, show_metadata)
                     values ($1, 'series', $2, $3, 'new_to_old', 'gallery', $4, $5)
                     returning id
                 ";

backend/src/db/migrations/29-extend-series-block.sql

@@ -1,19 +1,19 @@
--- This adds a single `videolist_view` field of type `video_list_view` to blocks,
--- used for series to define the view
+-- This adds a single `videolist_layout` field of type `video_list_layout` to
+-- blocks, used for series to define the layout.
 
-create type video_list_view as enum ('slider', 'gallery', 'list');
+create type video_list_layout as enum ('slider', 'gallery', 'list');
 
--- Add new `videolist_view` column with default value to initialize existing series blocks
+-- Add new `videolist_layout` column with default value to initialize existing series blocks
 alter table blocks
-    add column videolist_view video_list_view default 'gallery';
+    add column videolist_layout video_list_layout default 'gallery';
 
 -- Drop column default and add constraints to ensure that series blocks have all required fields
 alter table blocks
-    alter column videolist_view drop default,
+    alter column videolist_layout drop default,
     drop constraint series_block_has_fields,
     add constraint series_block_has_fields check (type <> 'series' or (
         videolist_order is not null and
-        videolist_view is not null and
+        videolist_layout is not null and
         show_title is not null and
         show_metadata is not null
     ));

backend/src/db/tests/util.rs

@@ -136,7 +136,7 @@ impl TestDb {
 
     pub(super) async fn add_series_block(&self, realm: Key, series: Key, index: u8) -> Result<Key> {
         let row = self.query_one(
-            "insert into blocks (realm, index, type, series, show_title, videolist_order, videolist_view)
+            "insert into blocks (realm, index, type, series, show_title, videolist_order, videolist_layout)
                 values ($1, $2, 'series', $3, true, 'new_to_old', 'gallery')
                 returning id",
             &[&realm, &(index as i16), &series],

frontend/src/i18n/locales/de.yaml

@@ -192,8 +192,8 @@ series:
     old-to-new: Älteste zuerst
     a-z: A bis Z
     z-a: Z bis A
-    view: Ansicht
-    view-label: Blockansicht ändern
+    layout: Ansicht
+    layout-label: Blockansicht ändern
     gallery: Galerie
     slider: Slider
     list: Liste

frontend/src/i18n/locales/en.yaml

@@ -189,8 +189,8 @@ series:
     old-to-new: Oldest first
     a-z: A to Z
     z-a: Z to A
-    view: View
-    view-label: Change block view
+    layout: Layout
+    layout-label: Change block layout
     gallery: Gallery
     slider: Slider
     list: List

frontend/src/routes/manage/Realm/Content/AddButtons.tsx

@@ -116,7 +116,7 @@ const AddButtonsMenu: React.FC<Props & {floatingRef: RefObject<FloatingHandle>}>
         [LuType, "text", () => addBlock("Text")],
         [LuLayoutGrid, "series", () => addBlock("Series", (_store, block) => {
             block.setValue("NEW_TO_OLD", "order");
-            block.setValue("GALLERY", "view");
+            block.setValue("GALLERY", "layout");
             block.setValue(true, "showTitle");
             block.setValue(false, "showMetadata");
         })],

frontend/src/routes/manage/Realm/Content/Edit/EditMode/Series.tsx

@@ -8,7 +8,7 @@ import { EditModeForm } from ".";
 import { Heading } from "./util";
 import type {
     VideoListOrder,
-    VideoListView,
+    VideoListLayout,
     SeriesEditModeBlockData$key,
 } from "./__generated__/SeriesEditModeBlockData.graphql";
 import {
@@ -26,7 +26,7 @@ import { BREAKPOINT_SMALL } from "../../../../../../GlobalStyle";
 type SeriesFormData = {
     series: string;
     order: VideoListOrder;
-    view: VideoListView;
+    layout: VideoListLayout;
     showTitle: boolean;
     showMetadata: boolean;
 };
@@ -36,7 +36,7 @@ type EditSeriesBlockProps = {
 };
 
 export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRef }) => {
-    const { series, showTitle, showMetadata, order, view } = useFragment(graphql`
+    const { series, showTitle, showMetadata, order, layout } = useFragment(graphql`
         fragment SeriesEditModeBlockData on SeriesBlock {
             series {
                 id
@@ -50,7 +50,7 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
             showTitle
             showMetadata
             order
-            view
+            layout
         }
     `, blockRef);
 
@@ -104,8 +104,11 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
                 flexWrap: "wrap",
                 marginTop: 12,
                 justifyContent: "start",
-                rowGap: 12,
-                columnGap: 36,
+                rowGap: 24,
+                columnGap: 96,
+                [screenWidthAtMost(1000)]: {
+                    columnGap: 48,
+                },
                 [screenWidthAtMost(BREAKPOINT_SMALL)]: {
                     flexDirection: "column",
                     gap: 12,
@@ -142,24 +145,24 @@ export const EditSeriesBlock: React.FC<EditSeriesBlockProps> = ({ block: blockRe
                 ]} />
             </div>
             <div>
-                <Heading>{t("series.settings.view")}</Heading>
+                <Heading>{t("series.settings.layout")}</Heading>
                 <DisplayOptionGroup type="radio" {...{ form }} optionProps={[
                     {
-                        option: "view",
+                        option: "layout",
                         title: t("series.settings.slider"),
-                        checked: view === "SLIDER",
+                        checked: layout === "SLIDER",
                         value: "SLIDER",
                     },
                     {
-                        option: "view",
+                        option: "layout",
                         title: t("series.settings.gallery"),
-                        checked: view === "GALLERY",
+                        checked: layout === "GALLERY",
                         value: "GALLERY",
                     },
                     {
-                        option: "view",
+                        option: "layout",
                         title: t("series.settings.list"),
-                        checked: view === "LIST",
+                        checked: layout === "LIST",
                         value: "LIST",
                     },
                 ]} />

frontend/src/schema.graphql

@@ -9,6 +9,10 @@ type EventSearchResults {
   items: [SearchEvent!]!
 }
 
+input NewTitleBlock {
+  content: String!
+}
+
 type EventPageInfo {
   hasNextPage: Boolean!
   hasPreviousPage: Boolean!
@@ -112,7 +116,7 @@ type SeriesBlock implements Block & RealmNameSourceBlock {
   showTitle: Boolean!
   showMetadata: Boolean!
   order: VideoListOrder!
-  view: VideoListView!
+  layout: VideoListLayout!
   id: ID!
   index: Int!
   realm: Realm!
@@ -560,7 +564,7 @@ input UpdateSeriesBlock {
   showTitle: Boolean
   showMetadata: Boolean
   order: VideoListOrder
-  view: VideoListView
+  layout: VideoListLayout
 }
 
 type SearchRealm implements Node {
@@ -596,7 +600,7 @@ input NewSeriesBlock {
   showTitle: Boolean!
   showMetadata: Boolean!
   order: VideoListOrder!
-  view: VideoListView!
+  layout: VideoListLayout!
 }
 
 type SearchSeries implements Node {
@@ -607,12 +611,6 @@ type SearchSeries implements Node {
   hostRealms: [SearchRealm!]!
 }
 
-enum VideoListView {
-  SLIDER
-  GALLERY
-  LIST
-}
-
 type User {
   "The username, a unique string identifying the user."
   username: String!
@@ -665,8 +663,10 @@ enum JwtService {
   EDITOR
 }
 
-input NewTitleBlock {
-  content: String!
+enum VideoListLayout {
+  SLIDER
+  GALLERY
+  LIST
 }
 
 schema {