Add full screen menu

2025-08-12 00:54:45 +02:00 · 2019-11-30 20:17:53 +07:00
parent e83efe1b22
commit f74fb6660e
5 changed files with 173 additions and 0 deletions
--- a/client/patterns/full-screen-menu/Cover.tsx
+++ b/client/patterns/full-screen-menu/Cover.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        height: '100%',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            left: 0,
+                            position: 'absolute',
+                            top: 0,
+                            width: '100%',
+                        }}
+                    >
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Rectangle /></div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}><Rectangle /></div>
+                        <div style={{ marginBottom: '4px', width: '50%' }}><Rectangle /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;