From: Chocobozzz Date: Mon, 4 Dec 2017 10:04:08 +0000 (+0100) Subject: Design account videos X-Git-Tag: v0.0.1-alpha~149^2~40 X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=d2cc03aaad62fa6cf1c64622229bcc83f24fccb6;p=github%2FChocobozzz%2FPeerTube.git Design account videos --- diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html index 6c8ac4508..94b976869 100644 --- a/client/src/app/account/account-videos/account-videos.component.html +++ b/client/src/app/account/account-videos/account-videos.component.html @@ -3,7 +3,17 @@ [infiniteScrollDistance]="0.5" (scrolled)="onNearOfBottom()" > -
+
+ +
+
{{ video.name }}
+ {{ video.createdAt | fromNow }} - {{ video.views | numberFormatter }} views +
+ + + + Edit +
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss index e69de29bb..b26933d22 100644 --- a/client/src/app/account/account-videos/account-videos.component.scss +++ b/client/src/app/account/account-videos/account-videos.component.scss @@ -0,0 +1,44 @@ +.video { + display: flex; + height: 130px; + padding-bottom: 20px; + margin-bottom: 20px; + border-bottom: 1px solid #C6C6C6; + + my-video-thumbnail { + margin-right: 10px; + } + + .video-info { + flex-grow: 1; + + .video-info-name { + font-size: 16px; + font-weight: $font-semibold; + } + + .video-info-date-views { + font-size: 13px; + } + } + + .edit-button { + @include peertube-button-link; + + font-size: 15px; + font-weight: $font-semibold; + color: #585858; + background-color: #E5E5E5; + + .icon.icon-edit { + display: inline-block; + background: url('../../../assets/images/account/edit.svg') no-repeat; + background-size: contain; + width: 21px; + height: 21px; + vertical-align: middle; + position: relative; + top: -2px; + } + } +} diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 1baffa5c8..97c5d461a 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -42,7 +42,7 @@ background-size: contain; &.icon-menu { - background-image: url('../assets/header/menu.svg'); + background-image: url('../assets/images/header/menu.svg'); margin: 0 18px 0 24px; } } @@ -58,7 +58,7 @@ .icon.icon-logo { display: inline-block; - background: url('../assets/logo.svg') no-repeat; + background: url('../assets/images/logo.svg') no-repeat; width: 20px; height: 24px; } diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 5d6fd61c6..c93c59622 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -116,7 +116,7 @@ menu { &.icon-videos-trending { position: relative; top: -2px; - background-image: url('../../assets/menu/trending.svg'); + background-image: url('../../assets/images/menu/trending.svg'); } &.icon-videos-recently-added { @@ -124,14 +124,14 @@ menu { height: 23px; position: relative; top: -1px; - background-image: url('../../assets/menu/recently-added.svg'); + background-image: url('../../assets/images/menu/recently-added.svg'); } &.icon-administration { width: 23px; height: 23px; - background-image: url('../../assets/menu/administration.svg'); + background-image: url('../../assets/images/menu/administration.svg'); } } } diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss index 191d3d597..7ba8ef26c 100644 --- a/client/src/app/shared/search/search.component.scss +++ b/client/src/app/shared/search/search.component.scss @@ -10,7 +10,7 @@ .icon.icon-search { display: inline-block; - background: url('../../../assets/header/search.svg') no-repeat; + background: url('../../../assets/images/header/search.svg') no-repeat; background-size: contain; width: 25px; height: 21px; @@ -29,7 +29,7 @@ .icon.icon-upload { display: inline-block; - background: url('../../../assets/header/upload.svg') no-repeat; + background: url('../../../assets/images/header/upload.svg') no-repeat; background-size: contain; width: 22px; height: 24px; diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts index 83990d8b8..220362ef0 100644 --- a/client/src/app/shared/users/user.model.ts +++ b/client/src/app/shared/users/user.model.ts @@ -54,6 +54,6 @@ export class User implements UserServerModel { getAvatarPath () { if (this.account && this.account.avatar) return this.account.avatar.path - return '/assets/default-avatar.png' + return '/assets/images/default-avatar.png' } } diff --git a/client/src/assets/images/account/edit.svg b/client/src/assets/images/account/edit.svg new file mode 100644 index 000000000..23ece68f1 --- /dev/null +++ b/client/src/assets/images/account/edit.svg @@ -0,0 +1,15 @@ + + + + edit + Created with Sketch. + + + + + + + + + + diff --git a/client/src/assets/default-avatar.png b/client/src/assets/images/default-avatar.png similarity index 100% rename from client/src/assets/default-avatar.png rename to client/src/assets/images/default-avatar.png diff --git a/client/src/assets/favicon.png b/client/src/assets/images/favicon.png similarity index 100% rename from client/src/assets/favicon.png rename to client/src/assets/images/favicon.png diff --git a/client/src/assets/header/menu.svg b/client/src/assets/images/header/menu.svg similarity index 100% rename from client/src/assets/header/menu.svg rename to client/src/assets/images/header/menu.svg diff --git a/client/src/assets/header/search.svg b/client/src/assets/images/header/search.svg similarity index 100% rename from client/src/assets/header/search.svg rename to client/src/assets/images/header/search.svg diff --git a/client/src/assets/header/upload.svg b/client/src/assets/images/header/upload.svg similarity index 100% rename from client/src/assets/header/upload.svg rename to client/src/assets/images/header/upload.svg diff --git a/client/src/assets/logo.svg b/client/src/assets/images/logo.svg similarity index 100% rename from client/src/assets/logo.svg rename to client/src/assets/images/logo.svg diff --git a/client/src/assets/menu/administration.svg b/client/src/assets/images/menu/administration.svg similarity index 100% rename from client/src/assets/menu/administration.svg rename to client/src/assets/images/menu/administration.svg diff --git a/client/src/assets/menu/recently-added.svg b/client/src/assets/images/menu/recently-added.svg similarity index 100% rename from client/src/assets/menu/recently-added.svg rename to client/src/assets/images/menu/recently-added.svg diff --git a/client/src/assets/menu/trending.svg b/client/src/assets/images/menu/trending.svg similarity index 100% rename from client/src/assets/menu/trending.svg rename to client/src/assets/images/menu/trending.svg