Added tutorial content for basic and advanced functionality; still need to add screenshots

Author: megatera

src/components/dashboard_items/GetStarted.vue

@@ -17,7 +17,7 @@
       </q-tab>
       <q-tab 
         name="basics" 
-        label="Basic Functions" 
+        label="The Basics" 
         id="label-text"
         >
       </q-tab>

src/components/dashboard_items/tutorial/AdvancedFunctions.vue

@@ -1,8 +1,22 @@
 <template>
   <!--Typescript option, mock image?, nested HTML elements, import component/limitations -->
     <section id="advancedFunctions">
-      <h6 class="tutorialHeading">Advanced Functions Here!</h6>
-      <p class="tutorialContent">Some fancier functionality here</p>
+      <h6 class="tutorialHeading">Advanced Functionality</h6>
+      <h class="tutorial-sub-heading">Importing an existing component</h>
+      <p class="tutorialContent">To import an existing Vue component file, open the Import Component sub-menu in the left sidebar and click 'Import Component'.
+      </p>
+      <h class="tutorial-sub-heading">Adding Props</h>
+      <p class="tutorialContent">To add props, select the component and click the Props sub-menu in the Update Component menu in the left sidebar. Enter the name of the prop you want to add and click ‘+’ or press enter. Then select the added prop(s) from the dropdown and click the 'Add' Prop(s)’ button. To remove a prop, click the ‘x’ icon on the right side of the prop.
+      </p>
+      <h class="tutorial-sub-heading">Adding State or Actions</h>
+      <p class="tutorialContent">To add state or actions to a component, they must first be added to the store. Under the Store tab, click on Store State or Store Actions, enter the name and click the ‘+’ or press enter. Then, select the component to which you want to add state or actions. In the State or Actions sub-menus in the Update Component menu of the left sidebar, select your desired state(s) or action(s) from the dropdown and click ‘Map State’ or ‘Map Actions’. To remove them, click the ‘x’ icon on the right side of the state or action.
+      </p>
+      <h class="tutorial-sub-heading">Navigating HTML elements</h>
+      <p class="tutorialContent">To nest HTML elements, select a component, click the double down arrow icon on an HTML element (either in the HTML Elements sub-menu of the Update Component menu in the left sidebar or the HTML Elements sub-menu of the Component Details tab in the right sidebar). Click the icons to add additional HTML elements. To navigate back up a layer, click the up arrow icon. (Note: Certain types of HTML elements cannot be nested, these will not have a double arrow icon.)
+      </p>
+      <h class="tutorial-sub-heading">TypeScript Mode</h>
+      <p class="tutorialContent">To turn TypeScript mode on or off, click on the Settings gear icon in the right corner of the nav bar and click the toggle at the bottom of the menu.
+      </p>
       <q-btn
         class="tut-btn"
         color="secondary"
@@ -28,16 +42,24 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin: 10px;
 }
 
 .tutorialHeading {
   margin: .75rem;
   font-size: 2rem;
   padding-top: 15px;
 }
-
+.tutorial-sub-heading{
+  align-self: flex-start;
+  font-size: 1.4rem;
+  margin: .75rem;
+  margin-bottom: 0px;
+}
 .tutorialContent {
   margin: .75rem;
+  align-self: flex-start;
+  font-size: 1rem;
 }
 
 .tut-btn {

src/components/dashboard_items/tutorial/BasicFunctions.vue

@@ -6,18 +6,41 @@
       you to integrate this tool into your design process for creating Vue applications. 
     </p><br>
     <h class="tutorial-sub-heading">Navigating OverVue</h>
-    <p class="tutorialContent">If you ever want to navigate back to this page, click the gear icon <img style="vertical-align:middle" alt="Gear" src="../../../assets/gear.png" id="tut-image"> in the top navigation bar, all the way to the right, and select "Getting Started"
+    <p class="tutorialContent">If you ever want to navigate back to this page, click the gear icon <img style="vertical-align:middle" alt="Gear" src="../../../assets/gear.png" class="tut-image"> in the top navigation bar, all the way to the right, and select "Getting Started"
       to return to the landing page.
     </p>
-    <p class="tutorialContent">Almost any action in OverVue can be reversed with 'undo' or recreated with 'redo' <img style="vertical-align:middle" alt="Undo-redo" src="../../../assets/undo_redo.png" id="tut-image"> found on
+    <p class="tutorialContent">Almost any action in OverVue can be reversed with 'undo' or recreated with 'redo' <img style="vertical-align:middle" alt="Undo-redo" src="../../../assets/undo_redo.png" class="tut-image"> found on
       the left side of the top navigation bar. You can also utilize keyboard shortcuts (cmd-z or ctrl-z to undo; cmd-y or ctrl-y to redo) to accomplish the same thing as clicking the buttons.
     </p>
     <p class="tutorialContent">There are three additional buttons on the top navigation bar to utilize: Save, Import and Export.
     </p>
     <p class="tutorialContent">
-      <img style="vertical-align:middle" alt="save" src="../../../assets/save.png" id="tut-image">Save text here<br>
-      <img style="vertical-align:middle" alt="import" src="../../../assets/import.png" id="tut-image">Import text here<br>
-      <img style="vertical-align:middle" alt="export" src="../../../assets/export.png" id="tut-image">Export text here<br>
+      <img style="vertical-align:middle" alt="save" src="../../../assets/save.png" class="tut-image">Save your OverVue project progress as a JSON file to access it again later<br>
+      <img style="vertical-align:middle" alt="import" src="../../../assets/import.png" class="tut-image">Open an existing JSON project file or import an existing Vue component <br>
+      <img style="vertical-align:middle" alt="export" src="../../../assets/export.png" class="tut-image">Export boilerplate code for your whole project or a single component<br>
+    </p>
+    <p class="tutorialContent">In the right sidebar, you'll find the Routes, Project Tree, and Component Details tabs:</p>
+    <h class="tutorial-sub-heading">Routes</h>
+    <p class="tutorialContent">You can find all your routes in the Routes tab. To add a route, enter the name in the input field and click the ‘+’ or press enter. Once added, you can click on a route to navigate to it. To delete a route, click on the ‘x’ on the right side of the route block. (Note: The default route HomeView cannot be deleted.)
+    </p>
+    <h class="tutorial-sub-heading">Uploading mockups</h>
+    <p class="tutorialContent">You can upload a design mockup in the Routes tab of the right sidebar menu (one mockup per route). Select the route in the Routes tab, open the ‘Upload Mockup’ sub-menu and click ‘Upload Mockup’. To clear the image, click the ‘Clear Image’ button.
+    </p>
+    <h class="tutorial-sub-heading">Project Tree</h>
+    <p class="tutorialContent">You can find a visualization of your app hierarchy in the Project Tree tab of the right sidebar. Routes are blue, components are green. You can also navigate to a component or route by clicking on it in the project tree.
+    </p>
+    <h class="tutorial-sub-heading">Component Details</h>
+    <p class="tutorialContent">Under the component details tab, you can access details about the active/selected component - including a code snippet (live generated boilerplate code), the HTML elements, state, actions or props in the component.
+    </p>
+    <p class="tutorialContent">In the left sidebar, you’ll find the Component and Store tabs:</p>
+    <h class="tutorial-sub-heading">Creating a component from scratch</h>
+    <p class="tutorialContent">Under the Create Component menu in the left sidebar, set a component name (required) and optionally select a parent component, and/or html elements to be nested inside the component (see Advanced Functionality to add deeper nesting to html elements).
+    </p>
+    <h class="tutorial-sub-heading">Editing a component</h>
+    <p class="tutorialContent">To update a component, select the component on the canvas and an Update Component menu will appear in the left sidebar. To update the name, enter the new name in the field and click enter.
+    </p>
+    <h class="tutorial-sub-heading">Deleting a component</h>
+    <p class="tutorialContent">To delete a component, select it and click ‘Delete Currently Selected’ in the Update Component menu or press the delete key.
     </p>
     <q-btn
       class="tut-btn"
@@ -48,6 +71,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin: 10px;
 }
 
 .tutorialHeading {
@@ -75,7 +99,7 @@ export default {
   height: auto;
 }
 
-#tut-image {
+.tut-image {
   margin: 4px;
 }
 </style>