aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-02-04 16:44:53 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-02-13 16:35:24 +0100
commit9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110 (patch)
treef38e6f83a9d892a99f930c0a25b1a405e679cd4a /client/src/sass
parentece3029bd99a76b3c48a1cc8c58914c5cf61f106 (diff)
downloadPeerTube-9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110.tar.gz
PeerTube-9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110.tar.zst
PeerTube-9b8a7aa8ea128f7e197ff38ca9f86ffa53bbe110.zip
Improve search typeahead performance and use native events
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss5
-rw-r--r--client/src/sass/bootstrap.scss2
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss5
-rw-r--r--client/src/sass/include/_mixins.scss13
-rw-r--r--client/src/sass/include/_variables.scss2
5 files changed, 20 insertions, 7 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 6bf345789..560414e90 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,5 +1,6 @@
1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; 1$icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
2 2
3@import '_bootstrap-variables';
3@import '_variables'; 4@import '_variables';
4@import '_mixins'; 5@import '_mixins';
5 6
@@ -234,7 +235,7 @@ table {
234 } 235 }
235} 236}
236 237
237@media screen and (max-width: 1600px) { 238@media screen and (max-width: #{map-get($grid-breakpoints, xxl)}) {
238 .main-col { 239 .main-col {
239 &.expanded { 240 &.expanded {
240 .margin-content { 241 .margin-content {
@@ -245,7 +246,7 @@ table {
245 } 246 }
246} 247}
247 248
248@media screen and (max-width: 900px) { 249@media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
249 .main-col { 250 .main-col {
250 &.expanded { 251 &.expanded {
251 .margin-content { 252 .margin-content {
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index be5879b50..e10b84596 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -52,7 +52,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
52} 52}
53 53
54 54
55@media screen and (min-width: 768px) { 55@media screen and (min-width: #{map-get($grid-breakpoints, md)}) {
56 .modal:before { 56 .modal:before {
57 vertical-align: middle; 57 vertical-align: middle;
58 content: " "; 58 content: " ";
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 7f413836b..b3ab0eb2b 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -13,8 +13,9 @@ $grid-breakpoints: (
13 md: 768px, 13 md: 768px,
14 // Large screen / desktop 14 // Large screen / desktop
15 lg: 900px, 15 lg: 900px,
16 // Extra large screen / wide desktop 16 // Extra large screens / wide desktops
17 xl: 1200px 17 xl: 1200px,
18 xxl: 1600px
18); 19);
19 20
20$container-max-widths: ( 21$container-max-widths: (
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index ed2cacdd1..4766e4490 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -445,7 +445,6 @@
445@mixin actor-owner { 445@mixin actor-owner {
446 @include disable-default-a-behaviour; 446 @include disable-default-a-behaviour;
447 447
448 display: inline-table;
449 font-size: 13px; 448 font-size: 13px;
450 margin-top: 4px; 449 margin-top: 4px;
451 color: var(--mainForegroundColor); 450 color: var(--mainForegroundColor);
@@ -488,14 +487,15 @@
488 .actor-names { 487 .actor-names {
489 display: flex; 488 display: flex;
490 align-items: center; 489 align-items: center;
490 flex-wrap: wrap;
491 491
492 .actor-display-name { 492 .actor-display-name {
493 font-size: 23px; 493 font-size: 23px;
494 font-weight: $font-bold; 494 font-weight: $font-bold;
495 margin-right: 7px;
495 } 496 }
496 497
497 .actor-name { 498 .actor-name {
498 margin-left: 7px;
499 position: relative; 499 position: relative;
500 top: 3px; 500 top: 3px;
501 font-size: 14px; 501 font-size: 14px;
@@ -503,6 +503,10 @@
503 } 503 }
504 } 504 }
505 505
506 .actor-lower {
507 grid-area: lower;
508 }
509
506 .actor-followers { 510 .actor-followers {
507 font-size: 15px; 511 font-size: 15px;
508 } 512 }
@@ -522,6 +526,11 @@
522 margin-bottom: 0; 526 margin-bottom: 0;
523 text-transform: uppercase; 527 text-transform: uppercase;
524 font-weight: 600; 528 font-weight: 600;
529 font-size: 110%;
530
531 @media screen and (max-width: $mobile-view) {
532 font-size: 130%;
533 }
525 } 534 }
526 } 535 }
527} 536}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d0e1a8c9c..d8db3f3f8 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,3 +1,5 @@
1@import '_bootstrap-variables';
2
1$small-view: 800px; 3$small-view: 800px;
2$mobile-view: 500px; 4$mobile-view: 500px;
3 5