SmileTable – single post structure description

Like i mentioned earlier posts are heart of SmileTable application. That is because SmileTable is nothing without posts and posts are main content of SmileTable Application.

Single post in SmileTable application is complex structure. It might seems to be simple but It doesn’t. I already described how comments engine work so there is more description about application backend flow.

SmileTable home page display posts. I am doing that by foreach loop. I designed post style structire which is repeated one by one.

Posts

SinglePost

I have slashed layout and mark divs as green. There is HTML code.

html singlepost

It’s look tiny but I deleted all content from divs to better ilustrate structure.

Post header

Header contains user image, username which is post owner, publish date and numbers of click Smile buttons. In right top corner there are also buttons which are visible for logged user to delete or edit post.

Post main content

Main content It’s just post text and extra content like image.

Post actions

On the every single post bottom are buttons. Smile button is kind of good know like button, It works the same way, second button is responsible for display bootstrap modal with link to single post. It generates link by postId. After click that link action method get post from db and display It. Last button Comments is the most interesting because hide a lot cool stuff. On click Comment button is sending Ajax request to action method which in response return partial view with comments which is append to single-post-comment-container div.

Comments

STcommentsImage

I won’t describe It because I already did It in comments engine post. I just paste HTML code simillar to post above to visualize html structure.

stcommentshtml

Advertisements

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s