Social network starter

showcase
1

Hey guys, I just created a social network starter.

Main features

  • Lazy-loading
  • Auth pages (login, register, forgot and reset)
  • Themes (default and dark)
  • Ngrx
  • LocalStorage
  • i18n (English and Russian)
  • Responsive design
  • Music player (on bottom - swipeable)

Everybody welcome and especially contributors! Let’s work together. :boom:

DEMO GIF

6 Likes
2

@thenaim nice work, just checked. Especially i like view of comments/likes, it’s can be implemented partially to one of my application. :partying_face:
Also one tip if you wanna make player more native: Divide pane into 2 sections/breaks - bottom and top; Apply to top section ‘hide-on-bottom’ attribute and listen transition end callback. On callback - show bottom section. Define also 2 breakpoints: bottom + break. Should look like iOS music player exactly.

1 Like
3

@Romwtb, Thank you for your feedback. I wanted to use your package)), but could not solve a couple of questions. I tried to change the styles, but still did not achieve the result.

  1. How to call clear pane without nothing, for example headers, paddings and other?
  2. How can i use ion-content on pane with header and footer (like ion-modal)?
4

1. By default next styles are applied

this.paneEl.style.position = 'fixed';
this.paneEl.style.zIndex = '11';
this.paneEl.style.paddingTop = '15px';
this.paneEl.style.width = '100%';
this.paneEl.style.maxWidth = '500px';
this.paneEl.style.left = '0px';
this.paneEl.style.right = '0px';
this.paneEl.style.marginLeft = 'auto';
this.paneEl.style.marginRight = 'auto';
this.paneEl.style.height = `${this.screen_height - this.topper - this.settings.bottomOffset}px`;
this.paneEl.style.background = '#ffffff';
this.paneEl.style.borderTopLeftRadius = '20px';
this.paneEl.style.borderTopRightRadius = '20px';
this.paneEl.style.boxShadow = '0 4px 16px rgba(0,0,0,.12)';
this.paneEl.style.overflow = 'hidden';
this.paneEl.style.willChange = 'transform';
this.paneEl.style.transform = `translateY(${this.breaks[this.settings.initialBreak]}px) translateZ(0px)`;

You can override them with css

::ng-deep .pane {
  // Any properties
}

2. Simply place in html

<div class="cupertino-pane">
  <ion-header>
    <ion-toolbar>
     <ion-title> Title </ion-title>
    </ion-toolbar>
  </ion-header>
  
  <div class="content" overflow-y>
  Any content
  </div>
</div>

Note that ion-content replaced with div to solve conflicts with ionic scroll.

Examples

5

@Romwtb, I will try to implement and will feedback you what happened.