From 80bfd33c0bf910e2cfdd3270b14ba9eddd90e2e8 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 18 Dec 2018 09:31:09 +0100 Subject: Add history page on client --- .../my-account-history.component.scss | 68 ++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 client/src/app/+my-account/my-account-history/my-account-history.component.scss (limited to 'client/src/app/+my-account/my-account-history/my-account-history.component.scss') diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss new file mode 100644 index 000000000..115bb0e5c --- /dev/null +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss @@ -0,0 +1,68 @@ +@import '_variables'; +@import '_mixins'; + +.video { + @include row-blocks; + + my-video-thumbnail { + margin-right: 10px; + } + + .video-info { + flex-grow: 1; + + .video-info-name { + @include disable-default-a-behaviour; + + color: var(--mainForegroundColor); + display: block; + width: fit-content; + font-size: 18px; + font-weight: $font-semibold; + } + + .video-info-date-views { + font-size: 14px; + } + + .video-info-account { + @include disable-default-a-behaviour; + + display: block; + width: fit-content; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + color: #585858; + + &:hover { + color: #303030; + } + } + } +} + +@media screen and (max-width: $small-view) { + .video { + flex-direction: column; + height: auto; + text-align: center; + + .video-info-name { + margin: auto; + } + + input[type=checkbox] { + display: none; + } + + my-video-thumbnail { + margin-right: 0; + } + + .video-buttons { + margin-top: 10px; + } + } +} -- cgit v1.2.3 From 276d96529529621d5f70473990095495f2743c29 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 18 Dec 2018 11:32:37 +0100 Subject: Add ability to disable and clear history --- .../my-account-history.component.scss | 31 ++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'client/src/app/+my-account/my-account-history/my-account-history.component.scss') diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss index 115bb0e5c..82150cbe3 100644 --- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss @@ -1,6 +1,37 @@ @import '_variables'; @import '_mixins'; +.no-history { + display: flex; + justify-content: center; + margin-top: 50px; + font-weight: $font-semibold; + font-size: 16px; +} + +.top-buttons { + margin-bottom: 20px; + display: flex; + + .history-switch { + display: flex; + flex-grow: 1; + + label { + margin: 0 0 0 5px; + } + } + + .delete-history { + font-size: 15px; + + button { + @include peertube-button; + @include grey-button; + } + } +} + .video { @include row-blocks; -- cgit v1.2.3 From 457bb213b273a9b206cc5654eb085cede4e916ad Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 16 Jan 2019 16:05:40 +0100 Subject: Refactor how we use icons Inject them in an angular component so we can easily change their color --- .../+my-account/my-account-history/my-account-history.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'client/src/app/+my-account/my-account-history/my-account-history.component.scss') diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss index 82150cbe3..e7c6863f1 100644 --- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss +++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss @@ -65,10 +65,10 @@ text-overflow: ellipsis; white-space: nowrap; font-size: 14px; - color: #585858; + color: $grey-foreground-color; &:hover { - color: #303030; + color: $grey-foreground-hover-color; } } } -- cgit v1.2.3