Individual SSU display

[calstatelaacm]

• The home page should only show a small portion of the description of each SSU.
• Users should be able to click on the title of each SSU, which takes them to a expanded display of that SSU.
• The individual SSU display must contain the full title, description and every detail of the SSU.
• Code must be clean and understandable.
• Put comments where necessary.
• Use Vue components.

How to implement this (Follow the following steps):

• First, edit the IndividualSsu.vue component (inside the components folder) and make it so that it displays only a portion of the description (the first 15 words).
• Second, make the SSU Title's clickable. JUST THE TITLE. Upon click, it should expand to show the entire description of the SSU, who posted it, and the date.
• Third, add 2 small buttons on the top right corner of each SSU display (in the expanded view). First button should be a delete button. Second should be a edit. Upon clicking those buttons, they should call "deleteSsu(ssuid)" and "editSsu(ssuid)" javascript functions respectively. Leave those functions unimplemented for now (waiting on #16 and #17 to finish) . Just make sure they have the ssuid received in the parameters.
• Lastly, users should be able to click the Title again to make the SSU go back to being small display so that Users can go back to scrolling. Hint: Have a boolean value called "expanded" in the Vue template that keeps track of whether it's expanded or not.

Do anything else that you feel is required to implement this feature. Dont start coding right away. Talk about it. Draw the display. Look up how Vue templates work. Then start implementing.

[exelarios]

All image assets and mock up is provided in the drive's folder: https://drive.google.com/drive/folders/1h7GA6gzi4WS4OOw_OKaRYuV1fe3V0Gl9?usp=sharing

use yellow: #f1c40f font: oswald <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

font-family: 'Oswald', sans-serif;

[PranilDahal]

Basic implementation