From f3aaa9a95cc2b61f1f255472d7014d08faa66561 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 5 Dec 2017 17:46:33 +0100 Subject: Fix client search --- client/src/app/header/header.component.scss | 39 +++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 client/src/app/header/header.component.scss (limited to 'client/src/app/header/header.component.scss') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss new file mode 100644 index 000000000..7ba8ef26c --- /dev/null +++ b/client/src/app/header/header.component.scss @@ -0,0 +1,39 @@ +#search-video { + @include peertube-input-text($search-input-width); + margin-right: 15px; + padding-right: 25px; // For the search icon + + &::placeholder { + color: #000; + } +} + +.icon.icon-search { + display: inline-block; + background: url('../../../assets/images/header/search.svg') no-repeat; + background-size: contain; + width: 25px; + height: 21px; + vertical-align: middle; + cursor: pointer; + // yolo + position: absolute; + margin-left: -50px; + margin-top: 5px; +} + +.upload-button { + @include peertube-button-link; + + margin-right: 25px; + + .icon.icon-upload { + display: inline-block; + background: url('../../../assets/images/header/upload.svg') no-repeat; + background-size: contain; + width: 22px; + height: 24px; + vertical-align: middle; + margin-right: 6px; + } +} -- cgit v1.2.3 From 7b272fd73f1ea67e83c1924f2cc33503b8759811 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 7 Dec 2017 10:02:01 +0100 Subject: Fix dropdown menu in video watch --- client/src/app/header/header.component.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'client/src/app/header/header.component.scss') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 7ba8ef26c..e7761a9df 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -10,7 +10,7 @@ .icon.icon-search { display: inline-block; - background: url('../../../assets/images/header/search.svg') no-repeat; + background: url('../../assets/images/header/search.svg') no-repeat; background-size: contain; width: 25px; height: 21px; @@ -24,12 +24,13 @@ .upload-button { @include peertube-button-link; + @include orange-button; margin-right: 25px; .icon.icon-upload { display: inline-block; - background: url('../../../assets/images/header/upload.svg') no-repeat; + background: url('../../assets/images/header/upload.svg') no-repeat; background-size: contain; width: 22px; height: 24px; -- 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/header/header.component.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'client/src/app/header/header.component.scss') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index e7761a9df..d1c59e8d1 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -9,13 +9,11 @@ } .icon.icon-search { - display: inline-block; - background: url('../../assets/images/header/search.svg') no-repeat; - background-size: contain; - width: 25px; + @include icon(25px); height: 21px; - vertical-align: middle; - cursor: pointer; + + background-image: url('../../assets/images/header/search.svg'); + // yolo position: absolute; margin-left: -50px; -- cgit v1.2.3 From 04e0fc488826f505a8de3ce99113f3cb2fcec147 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 8 Dec 2017 10:41:49 +0100 Subject: Begin admin design --- client/src/app/header/header.component.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'client/src/app/header/header.component.scss') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index d1c59e8d1..ed8695eab 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -27,10 +27,9 @@ margin-right: 25px; .icon.icon-upload { - display: inline-block; - background: url('../../assets/images/header/upload.svg') no-repeat; - background-size: contain; - width: 22px; + @include icon(22px); + + background-image: url('../../assets/images/header/upload.svg'); height: 24px; vertical-align: middle; margin-right: 6px; -- cgit v1.2.3 From 3daf400219fe8cc94025886ba14876bc59a45244 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Dec 2017 08:50:43 +0100 Subject: Responsive homepage --- client/src/app/header/header.component.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'client/src/app/header/header.component.scss') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index ed8695eab..5f64ede98 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -6,6 +6,14 @@ &::placeholder { color: #000; } + + @media screen and (max-width: 800px) { + width: calc(100% - 150px); + } + + @media screen and (max-width: 400px) { + width: calc(100% - 70px); + } } .icon.icon-search { @@ -34,4 +42,17 @@ vertical-align: middle; margin-right: 6px; } + + @media screen and (max-width: 400px) { + margin-right: 10px; + padding: 0 10px; + + .icon.icon-upload { + margin-right: 0; + } + + .upload-button-label { + display: none; + } + } } -- cgit v1.2.3 From 20206dfb0bfe1537912ae0a5b99f2fa40c881d33 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Dec 2017 10:02:17 +0100 Subject: Fix loading spinner in player --- client/src/app/header/header.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src/app/header/header.component.scss') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index 5f64ede98..fba70dd2f 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -7,7 +7,7 @@ color: #000; } - @media screen and (max-width: 800px) { + @media screen and (max-width: 600px) { width: calc(100% - 150px); } -- cgit v1.2.3