Skip to content

Commit

Permalink
design user page
Browse files Browse the repository at this point in the history
  • Loading branch information
IC-Tech committed Aug 26, 2020
1 parent 5975286 commit 749da5e
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 28 deletions.
7 changes: 6 additions & 1 deletion src/comp.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,9 @@ const episodeUI = (a,b,op) => (op = op || {}).view == 'list' ? ({t: 'div', cl: [
{t:'span', cl: 'name', txt: a == 'skeleton' ? '' : TitleCase(a.name) || ''},
]})
const link = a => ({t: 'a', txt: a.t, at: {href: a.l, target: '_blank', rel: 'noopener'}})
export {top, bottom, comp_init, serEv0, animeUI as AniUI, episodeUI as EpUI, clean_search, link}
const sign_req = a => ({t: 'div', cl: nope(a, 'sign-req'), ch: [
{t: 'span', cl: 'des', txt: 'Create an account or log in to IAnime to continue'},
{t: 'a', cl: 'btn0', at: {href: '/sign?ui=register'}, txt: 'Sign Up'},
{t: 'a', cl: 'btn0', at: {href: '/sign'}, txt: 'Sign In'}
]})
export {top, bottom, comp_init, serEv0, animeUI as AniUI, episodeUI as EpUI, clean_search, link, sign_req}
1 change: 1 addition & 0 deletions src/one.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ class IAnime extends IAR {
}
this.switchPage(a[0], {
ex: a[1],
dirs: a,
url: b,
pram: pram(b)
})
Expand Down
9 changes: 3 additions & 6 deletions src/pages/settings.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* Copyright © 2020, Imesh Chamara. All rights reserved. */
import {meta_init} from '../meta'
import {sign_req} from '../comp'
import {page} from '../page'
import '../style/settings.scss'

Expand Down Expand Up @@ -37,7 +38,7 @@ class settings extends page {
fld({e: {t: 'textarea', cl: 'rez', at: {name: 'about'}}, name: 'About', des: 'Tell us about yourself'}),
save(a.changed.about),
img({name: 'Avatar', id: 'avatar', img: (a.user && a.user.poster) || '/images/default/avatar_op.jpg', des: 'This is your image will display as your avatar. Allowed Formats: JPEG, PNG. Max size: 2mb.'}),
img({name: 'Banner', id: 'banner', img: (a.user && a.user.banner) || '/images/default/banner_2.jpg', des: 'This is your image will display as your banner. Allowed Formats: JPEG, PNG. Max size: 4mb.'})
img({name: 'Banner', id: 'banner', img: (a.user && a.user.banner) || '/images/default/banner_3_unoptimised.jpg', des: 'This is your image will display as your banner. Allowed Formats: JPEG, PNG. Max size: 4mb.'})
]},
{name: 'account', title: 'Account', render: a => [
{t: 'span', cl: 'title', txt: a.ops[a.ui].title + ' Settings'},
Expand Down Expand Up @@ -86,11 +87,7 @@ class settings extends page {
}
content() {
return ([
{t: 'div', cl: nope(!this.user, 'sign-req'), ch: [
{t: 'span', cl: 'des', txt: 'Create an account or log in to IAnime to continue'},
{t: 'a', cl: 'btn0', at: {href: '/sign?ui=register'}, txt: 'Sign Up'},
{t: 'a', cl: 'btn0', at: {href: '/sign'}, txt: 'Sign In'}
]},
sign_req(!this.user),
{t: 'div', cl: nope(this.user, 'cont'), ch: [
{t: 'div', cl: 'ops', ch: this.ops.map((a,b) => ({t: 'a', at: {href: '/settings/' + a.name}, cl: ['op', this.ui == b ? 'sel' : 'K'], txt: a.title}))},
{t: 'div', cl: 'opc', ch: this.ops[this.ui].render(this)}
Expand Down
51 changes: 49 additions & 2 deletions src/pages/user.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,65 @@
/* Copyright © 2020, Imesh Chamara. All rights reserved. */
import {getuser} from '../account'
import {meta_init} from '../meta'
import {sign_req} from '../comp'
import {page} from '../page'
import '../style/user.scss'

const nope = (a,b) => [a ? 'K' : 'nope', b]

class user extends page {
constructor() {
super()
this.name = 'user'
this.u = {}
this.ui = 0
this.parse = async a => {
a = await getuser(a)
if(!this.init) this._load = !(this.init = !0)
if(!a) return this.switchPage('nope')
this.load_ = 0
console.log(a)
this.update()
}
this.ops = [
{id: 'overview', name: 'Overview', page: '', render: a => []},
{id: 'favorites', name: 'Favorites', page: 'favorites', render: a => []},
{id: 'bookmarks', name: 'Bookmarks', page: 'bookmarks', render: a => []},
{id: 'followings', name: 'Followings', page: 'followings', render: a => []},
{id: 'followers', name: 'Followers', page: 'followers', render: a => []},
]
}
load() {
meta_init(0, 'User')
load(a) {
this.u = {}
this.ui = 0
this._load = 1
this.load_ = 1
this.init = 0
this.parse(a.ex)
console.log(a)
this.update()
}
content() {
var a = this.user || {}
return ([
{t: 'div', cl: 'cont', ch: [
{t: 'div', at: {role: 'img', 'aria-label': 'Profile banner'}, cl: 'bann-c', s: {'background-image': `url(${(a.user && a.user.banner) || '/images/default/banner_3_unoptimised.jpg'})`}},
{t: 'div', cl: 'scon', ch: [
{t: 'div', cl: 'si1', ch: [
{t: 'div', cl: 'pos', s: {'background-image': `url(${(a.user && a.user.poster) || '/images/default/avatar_op.jpg'})`}},
]},
{t: 'div', cl: 'si2', ch: [
{t: 'span', cl: 'name', txt: (a.user && a.user.display_name) || 'Imesh'},
]}
]},
{t: 'div', cl: 'tab-c', ch: [
{t: 'div', cl: 'hld'},
{t: 'div', cl: 'tab-c2', ch: [
{t: 'div', cl: 'tabs', ch: this.ops.map((c,b) => ({t: 'a', cl: ['tab', this.ui == b ? 'sel' : 'K'], at: {href: '/user/' + ((a.user && a.user.id) || 1) + (c.page ? '/' + c.page : '')}, txt: c.name}))}
]}
]},
]},
{t: 'div', cl: ['cont-r', this.ops[this.ui].id], ch: this.ops[this.ui].render(this)}
])
}
}
Expand Down
19 changes: 19 additions & 0 deletions src/style/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -854,6 +854,25 @@ a[href="#main"] {
}
}
}
.sign-req {
box-sizing: border-box;
padding: 40px 0 0 0;
&.nope {
display: none !important;
}
.des {
display: block;
text-align: center;
padding: 20px 0;
}
.btn0 {
margin: 0 auto 20px;
display: block;
width: 100px;
text-align: center;
@include button;
}
}
}
.notis-c {
display: block;
Expand Down
16 changes: 0 additions & 16 deletions src/style/settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,6 @@
.nope {
display: none !important;
}
.sign-req {
box-sizing: border-box;
padding: 40px 0 0 0;
.des {
display: block;
text-align: center;
padding: 20px 0;
}
.btn0 {
margin: 0 auto 20px;
display: block;
width: 100px;
text-align: center;
@include button;
}
}
> .cont {
display: flex;
flex-direction: row;
Expand Down
124 changes: 121 additions & 3 deletions src/style/user.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,126 @@
@import 'main.scss';
[ui='user'] {
.content {
width: 80%;
max-width: 800px;
margin: 0 auto;
--poster-col: 0.1;
}
.top {
background-color: #0005;
transition-duration: $default-transition;
transition-delay: 1s;
}
.top.fo, .top:hover, .top-scroll .top, .top-ser .top {
transition-delay: 0s;
background-color: $pcol2;
}
.content {
min-height: calc(100vh - 80px);
width: 100%;
.nope {
display: none !important;
}
> .cont-r {
width: 80%;
max-width: 1000px;
margin: 0 auto;
}
> .cont {
display: block;
> * {
display: block;
margin: 0 auto;
width: 80%;
max-width: 1000px;
}
}
.bann-c {
position: relative;
display: block;
margin-top: -40px;
height: 480px;
width: 100%;
max-width: 100vw;
background-size: cover;
background-position: center;
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(#0000, #0005 75%);
}
}
.scon {
display: flex;
flex-direction: row;
z-index: 2;
margin-top: -50px;
position: relative;
flex-wrap: wrap;
> * {
position: relative;
box-sizing: border-box;
}
.pos {
margin: -70px 0 0 0;
width: 200px;
height: 200px;
background-size: cover;
background-position: top center;
border-radius: 6px;
box-shadow: 0 0 20px #0008;
}
.si1 {
padding-right: 20px;
}
.name {
display: block;
font-size: 36px;
text-shadow: 2px 2px 4px #000;
margin-bottom: -20px;
}
}
.tab-c {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: -60px;
z-index: 4;
position: relative;
.hld {
width: 200px;
height: 80px;
padding-right: 20px;
}
.tabs {
display: flex;
flex-direction: row;
flex-wrap: wrap;
> * {
display: block;
padding: 8px 16px;
background-color: $pcol2;
cursor: pointer;
border-left: 1px solid $pcol1;
text-decoration: none;
&.sel {
background-color: $pcol3;
}
&:last-child {
border-radius: 0 6px 6px 0;
}
&:first-child {
border-radius: 6px 0 0 6px;
}
}
}
}
.cont-r {
display: block;
padding: 10px;
background-color: $pcol2;
border-radius: 4px;
}
}
}

0 comments on commit 749da5e

Please sign in to comment.