From b33f657c304b77938c1f68164d8e754787f5aae5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 09:20:19 +0100 Subject: Begin new menu design --- client/src/app/menu/menu.component.scss | 131 ++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 client/src/app/menu/menu.component.scss (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss new file mode 100644 index 000000000..8a4910605 --- /dev/null +++ b/client/src/app/menu/menu.component.scss @@ -0,0 +1,131 @@ +menu { + background-color: $black-background; + margin: 0; + padding: 0; + height: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + z-index: 1000; + color: $menu-color; + + @media screen and (max-width: 550px) { + font-size: 90%; + } + + .logged-in-block { + height: 100px; + background-color: rgba(255, 255, 255, 0.15); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 35px; + + .logged-in-info { + flex-grow: 1; + margin-left: 40px; + + .logged-in-username { + font-size: 16px; + font-weight: $font-semibold; + } + + .logged-in-email { + font-size: 13px; + color: #C6C6C6; + } + } + + .logged-in-more { + margin-right: 20px; + + .glyphicon { + cursor: pointer; + font-size: 18px; + } + } + } + + .button-block { + margin: 30px 25px 35px 25px; + + .login-button, .create-account-button { + font-weight: $font-semibold; + font-size: 15px; + height: $button-height; + line-height: $button-height; + width: 190px; + border-radius: 3px; + text-align: center; + + &.login-button { + background-color: $orange-color; + margin-bottom: 10px; + } + + &.create-account-button { + background-color: rgba(255, 255, 255, 0.25); + } + } + } + + .block-title { + text-transform: uppercase; + font-weight: $font-bold; // Bold + font-size: 13px; + margin-bottom: 25px; + } + + .panel-block { + margin-bottom: 45px; + margin-left: 26px; + + a { + display: flex; + + .icon { + width: 22px; + height: 22px; + display: inline-block; + margin-right: 18px; + background-size: contain; + + &.icon-videos-trending { + position: relative; + top: -2px; + background-image: url('../../assets/menu/trending.svg'); + } + + &.icon-videos-recently-added { + width: 23px; + height: 23px; + position: relative; + top: -1px; + background-image: url('../../assets/menu/recently-added.svg'); + } + + &.icon-administration { + width: 23px; + height: 23px; + + background-image: url('../../assets/menu/administration.svg'); + } + } + } + } + + a { + color: $menu-color; + height: 22px; + line-height: 22px; + display: block; + font-size: 16px; + cursor: pointer; + margin-bottom: 15px; + + &:hover, &:focus { + text-decoration: none !important; + outline: none !important; + } + } +} -- cgit v1.2.3 From 26c6ee80d0fecfce595e8970f15717560b4f4ceb Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 13:08:46 +0100 Subject: Implement header design --- client/src/app/menu/menu.component.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 8a4910605..2c2106733 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -123,9 +123,6 @@ menu { cursor: pointer; margin-bottom: 15px; - &:hover, &:focus { - text-decoration: none !important; - outline: none !important; - } + @include disable-default-a-behaviour; } } -- cgit v1.2.3 From c30745f342480b59fb0856a059c8c2fbffbcfc6a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 17:38:26 +0100 Subject: Add account settings new design --- client/src/app/menu/menu.component.scss | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 2c2106733..9d67ca66c 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -28,6 +28,10 @@ menu { .logged-in-username { font-size: 16px; font-weight: $font-semibold; + color: $menu-color; + cursor: pointer; + + @include disable-default-a-behaviour; } .logged-in-email { @@ -57,6 +61,12 @@ menu { width: 190px; border-radius: 3px; text-align: center; + color: $menu-color; + display: block; + cursor: pointer; + margin-bottom: 15px; + + @include disable-default-a-behaviour; &.login-button { background-color: $orange-color; @@ -82,6 +92,13 @@ menu { a { display: flex; + color: $menu-color; + cursor: pointer; + height: 22px; + line-height: 22px; + font-size: 16px; + margin-bottom: 15px; + @include disable-default-a-behaviour; .icon { width: 22px; @@ -113,16 +130,4 @@ menu { } } } - - a { - color: $menu-color; - height: 22px; - line-height: 22px; - display: block; - font-size: 16px; - cursor: pointer; - margin-bottom: 15px; - - @include disable-default-a-behaviour; - } } -- cgit v1.2.3 From 2295ce6c4e7ba805cc100ff961527bebc2cd89e5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 4 Dec 2017 10:34:40 +0100 Subject: Add account avatar --- client/src/app/menu/menu.component.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 9d67ca66c..5d6fd61c6 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -21,9 +21,15 @@ menu { justify-content: center; margin-bottom: 35px; + img { + margin-left: 20px; + margin-right: 10px; + + @include avatar(34px); + } + .logged-in-info { flex-grow: 1; - margin-left: 40px; .logged-in-username { font-size: 16px; -- cgit v1.2.3 From d2cc03aaad62fa6cf1c64622229bcc83f24fccb6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 4 Dec 2017 11:04:08 +0100 Subject: Design account videos --- client/src/app/menu/menu.component.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'client/src/app/menu/menu.component.scss') 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'); } } } -- cgit v1.2.3 From 0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Dec 2017 10:27:33 +0100 Subject: Design video watch modals --- client/src/app/menu/menu.component.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index c93c59622..eda3e1a85 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -107,11 +107,9 @@ menu { @include disable-default-a-behaviour; .icon { - width: 22px; - height: 22px; - display: inline-block; + @include icon(22px); + margin-right: 18px; - background-size: contain; &.icon-videos-trending { position: relative; -- cgit v1.2.3 From cadb46d832724ea1a17b085b992142aa32e212be Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 8 Dec 2017 08:39:15 +0100 Subject: Design second video upload step --- client/src/app/menu/menu.component.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index eda3e1a85..63d63d287 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -43,6 +43,10 @@ menu { .logged-in-email { font-size: 13px; color: #C6C6C6; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 140px; } } -- cgit v1.2.3 From 9b7d1c723d7c11572d91d606954997e413f56a1f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Dec 2017 09:39:40 +0100 Subject: Responsive my account --- client/src/app/menu/menu.component.scss | 62 ++++++++++++++++++++++++++++++--- 1 file changed, 57 insertions(+), 5 deletions(-) (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 63d63d287..97ceadde3 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -9,10 +9,6 @@ menu { z-index: 1000; color: $menu-color; - @media screen and (max-width: 550px) { - font-size: 90%; - } - .logged-in-block { height: 100px; background-color: rgba(255, 255, 255, 0.15); @@ -68,7 +64,7 @@ menu { font-size: 15px; height: $button-height; line-height: $button-height; - width: 190px; + width: 100%; border-radius: 3px; text-align: center; color: $menu-color; @@ -139,3 +135,59 @@ menu { } } } + +@media screen and (max-width: 800px) { + menu { + .logged-in-block { + padding-left: 10px; + + img { + display: none; + } + + .logged-in-info { + .logged-in-username { + font-size: 14px; + } + + .logged-in-email { + font-size: 11px; + max-width: 120px; + } + } + + .logged-in-more { + margin-right: 5px; + + .login-button, .create-account-button { + font-weight: $font-semibold; + font-size: 15px; + height: $button-height; + line-height: $button-height; + width: 190px; + } + } + } + + .button-block { + margin: 20px 10px 25px 10px; + + .login-button, .create-account-button { + font-size: 13px; + } + } + + .panel-block { + margin-bottom: 30px; + margin-left: 10px; + + a { + font-size: 14px; + + .icon { + margin-right: 10px; + } + } + } + } +} -- cgit v1.2.3