Centering card groups on mobile.

app/src/components/Apps.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {Button, Divider, Segment, TextArea} from "semantic-ui-react";
-import Container from "semantic-ui-react/dist/commonjs/elements/Container";
 import {Route} from "react-router-dom";
 import "../static/wrolpi.css";
 import {decryptOTP, encryptOTP} from "../api";

app/src/components/Archive.js

@@ -1,6 +1,7 @@
 import React, {useState} from "react";
 import {Card, Confirm, Container, Icon, Image, Placeholder} from "semantic-ui-react";
 import Paginator, {
+    CardGroupCentered,
     ClearButton,
     ExternalLink,
     PageContainer,
@@ -162,7 +163,7 @@ function ArchiveCard({archive, syncArchive, deleteArchive, setDomain}) {
 
 function ArchiveCards({archives, syncArchive, deleteArchive, setDomain}) {
     return (
-        <Card.Group>
+        <CardGroupCentered>
             {archives.map((i) => {
                 return <ArchiveCard
                     key={i['id']}
@@ -172,7 +173,7 @@ function ArchiveCards({archives, syncArchive, deleteArchive, setDomain}) {
                     setDomain={setDomain}
                 />
             })}
-        </Card.Group>
+        </CardGroupCentered>
     )
 }
 

app/src/components/Common.js

@@ -147,11 +147,11 @@ export function VideoCard({video}) {
 
 export function VideoCards({videos}) {
     return (
-        <Card.Group>
+        <CardGroupCentered>
             {videos.map((v) => {
                 return <VideoCard key={v['id']} video={v}/>
             })}
-        </Card.Group>
+        </CardGroupCentered>
     )
 }
 
@@ -506,14 +506,6 @@ export function changePageHistory(history, location, activePage, searchStr, sear
     scrollToTop();
 }
 
-export function objectToQuery(d) {
-    // Return an HTTP query string based on the provided dictionary.
-    // Do not include key/values when the value is null if noNull=true
-    let arr = Object.keys(d).map((k) => d[k] === null ? '' : `${k}=${d[k]}`);
-    arr = arr.filter((i) => i !== '')
-    return arr.join('&');
-}
-
 export function ClearButton({onClick, style, label, icon = 'close'}) {
     return <Button icon
                    labelPosition='right'
@@ -669,3 +661,20 @@ export function PageContainer(props) {
         </>
     )
 }
+
+export function CardGroupCentered(props) {
+    return (
+        <>
+            <Responsive minWidth={770}>
+                <Card.Group>
+                    {props.children}
+                </Card.Group>
+            </Responsive>
+            <Responsive maxWidth={769}>
+                <Card.Group centered>
+                    {props.children}
+                </Card.Group>
+            </Responsive>
+        </>
+    )
+}