Skip to content

Commit be5c818

Browse files
committed
added arcades, fix folder structure
1 parent 9152dd7 commit be5c818

File tree

3 files changed

+168
-4
lines changed

3 files changed

+168
-4
lines changed

docs/resources/Projects/how-to-create-find-organize-projects.md

Lines changed: 166 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,188 @@ toc_max_heading_level: 5
77
## How to Create a Project
88
To create a new project, go to the Dashboard and click the “Create New” button in the upper right corner. This will open the “Create Project” window where you can choose to start with a template app or a blank project. Name the project and then select a blank project or template.
99

10+
<img src="../../../static/img/create-new-project.avif" alt="Create New Project" />
11+
1012
During project creation, you can access a three-step "Project Setup" window, which is optional. If you prefer to bypass this, simply click "Skip." All setup options will remain accessible under “Settings and Integrations” → “Firebase” → Wizard hat icon.
1113

1214
## How to Find Projects
13-
Navigate to the Project Dashboard to view all your projects. You can search for specific projects using the search bar. Narrow your search scope with the dropdown menu next to the search bar:
15+
Navigate to the Project Dashboard to view all your projects. You can search for specific projects using the search bar.
16+
17+
<div style={{
18+
position: 'relative',
19+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
20+
height: 0,
21+
width: '100%'
22+
}}>
23+
<iframe
24+
src="https://demo.arcade.software/KWGdRdptt18rissIt8SQ?embed&show_copy_link=true"
25+
title="Projects - FlutterFlow"
26+
style={{
27+
position: 'absolute',
28+
top: 0,
29+
left: 0,
30+
width: '100%',
31+
height: '100%',
32+
colorScheme: 'light'
33+
}}
34+
frameBorder="0"
35+
loading="lazy"
36+
webkitAllowFullScreen
37+
mozAllowFullScreen
38+
allowFullScreen
39+
allow="clipboard-write">
40+
</iframe>
41+
</div>
42+
43+
44+
Narrow your search scope with the dropdown menu next to the search bar:
1445

1546
- My Private Projects: Projects accessible only to you.
1647
- My Shared Projects: Projects you own and have shared with others.
1748
- Shared With Me: Projects shared with you that you do not own.
1849

50+
<div style={{
51+
position: 'relative',
52+
paddingBottom: 'calc(56.72268907563025% + 41px)', // Adjusts the padding to maintain the aspect ratio with additional padding
53+
height: 0,
54+
width: '100%'
55+
}}>
56+
<iframe
57+
src="https://demo.arcade.software/INHhbP1PuCupUSWW3aTG?embed&show_copy_link=true"
58+
title="Public, Private and Shared Projects"
59+
style={{
60+
position: 'absolute',
61+
top: 0,
62+
left: 0,
63+
width: '100%',
64+
height: '100%',
65+
colorScheme: 'light'
66+
}}
67+
frameBorder="0"
68+
loading="lazy"
69+
webkitAllowFullScreen
70+
mozAllowFullScreen
71+
allowFullScreen
72+
allow="clipboard-write">
73+
</iframe>
74+
</div>
75+
76+
1977
## **Organizing Projects**
2078
### **Creating and Managing Tags**
2179
To create a tag, click the orange “Tag” button or access it via the three dots in the upper right corner of a project panel, then select “Add Tag”. Tags help categorize and filter your projects for easier management.
2280

81+
<div style={{
82+
position: 'relative',
83+
paddingBottom: 'calc(56.48535564853556% + 41px)', // This maintains the aspect ratio plus extra padding at the bottom
84+
height: 0,
85+
width: '100%'
86+
}}>
87+
<iframe
88+
src="https://demo.arcade.software/VqTlm9OtL3Zfev5BWtoj?embed&show_copy_link=true"
89+
title="Arcade Flow (Fri May 03 2024)"
90+
style={{
91+
position: 'absolute',
92+
top: 0,
93+
left: 0,
94+
width: '100%',
95+
height: '100%',
96+
colorScheme: 'light', // Property names in style objects should be in camelCase in JSX
97+
border: 'none' // Assuming you might want to remove the default border
98+
}}
99+
frameBorder="0"
100+
loading="lazy"
101+
webkitAllowFullScreen
102+
mozAllowFullScreen
103+
allowFullScreen
104+
allow="clipboard-write">
105+
</iframe>
106+
</div>
107+
108+
23109
### **Adding Tags to Projects**
24110
Add a tag to a project by clicking the three dots in the upper right corner of the project panel and selecting a tag. Each project can have only one tag.
111+
<div style={{
112+
position: 'relative',
113+
paddingBottom: 'calc(56.48535564853556% + 41px)', // Adjusts padding to maintain the desired aspect ratio and additional padding
114+
height: 0,
115+
width: '100%'
116+
}}>
117+
<iframe
118+
src="https://demo.arcade.software/6JYcGUZ1RuWkjf7TddxR?embed&show_copy_link=true"
119+
title="Add Tag To Project"
120+
style={{
121+
position: 'absolute',
122+
top: 0,
123+
left: 0,
124+
width: '100%',
125+
height: '100%',
126+
colorScheme: 'light'
127+
}}
128+
frameBorder="0"
129+
loading="lazy"
130+
webkitAllowFullScreen
131+
mozAllowFullScreen
132+
allowFullScreen
133+
allow="clipboard-write">
134+
</iframe>
135+
</div>
136+
25137

26138
### **Searching and Filtering by Tags**
27139
When a tag is selected, your projects list will filter to show only those projects associated with that tag. This filter can be combined with the search bar to refine your project search further.
140+
<div style={{
141+
position: 'relative',
142+
paddingBottom: 'calc(56.72268907563025% + 41px)', // This setup ensures the aspect ratio plus additional padding
143+
height: 0,
144+
width: '100%'
145+
}}>
146+
<iframe
147+
src="https://demo.arcade.software/zxnnkwJDaB6BHFNEEZY1?embed&show_copy_link=true"
148+
title="Filter Project"
149+
style={{
150+
position: 'absolute',
151+
top: 0,
152+
left: 0,
153+
width: '100%',
154+
height: '100%',
155+
colorScheme: 'light'
156+
}}
157+
frameBorder="0"
158+
loading="lazy"
159+
webkitAllowFullScreen
160+
mozAllowFullScreen
161+
allowFullScreen
162+
allow="clipboard-write">
163+
</iframe>
164+
</div>
165+
28166

29167
## **Editing and Removing Tags**
30-
Modify or remove tags by clicking the gear icon within the orange Tag button. This allows for quick updates to tag names and assignments.
168+
Modify or remove tags by clicking the gear icon within the orange Tag button. This allows for quick updates to tag names and assignments.
169+
170+
<div style={{
171+
position: 'relative',
172+
paddingBottom: 'calc(56.72268907563025% + 41px)', // Maintains the aspect ratio and includes additional padding
173+
height: 0,
174+
width: '100%'
175+
}}>
176+
<iframe
177+
src="https://demo.arcade.software/qmWRdELTRb5YCM1Bb2oe?embed&show_copy_link=true"
178+
title="Edit Tags"
179+
style={{
180+
position: 'absolute',
181+
top: 0,
182+
left: 0,
183+
width: '100%',
184+
height: '100%',
185+
colorScheme: 'light'
186+
}}
187+
frameBorder="0"
188+
loading="lazy"
189+
webkitAllowFullScreen
190+
mozAllowFullScreen
191+
allowFullScreen
192+
allow="clipboard-write">
193+
</iframe>
194+
</div>

sidebars.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ const sidebars: SidebarsConfig = {
1414
'intro/before-you-begin/setting-up-flutterflow', 'intro/before-you-begin/app-architecture', 'intro/quickstart'
1515
]
1616
}, {
17-
type: 'category', label: "Understanding The FlutterFlow UI", items: [
17+
type: 'category', label: "Resources", items: [
1818
{
1919
type: 'autogenerated',
20-
dirName: 'understanding-the-flutterflow-ui'
20+
dirName: 'resources'
2121
}
2222
],
2323
}],

static/img/create-new-project.avif

7.39 KB
Binary file not shown.

0 commit comments

Comments
 (0)