aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-21 17:12:28 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commitea9f487b40c7f1d7348d9f88703cb9d52c7e8603 (patch)
tree94cd67ea5b3cab7449fd66e5c9864c1c3649ad2b
parent6562f1f727d13179025a8bb31715d2bf71dba86e (diff)
downloadPeerTube-ea9f487b40c7f1d7348d9f88703cb9d52c7e8603.tar.gz
PeerTube-ea9f487b40c7f1d7348d9f88703cb9d52c7e8603.tar.zst
PeerTube-ea9f487b40c7f1d7348d9f88703cb9d52c7e8603.zip
Client: fixed header and menu
-rw-r--r--client/src/app/app.component.html12
-rw-r--r--client/src/app/app.component.scss39
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss2
-rw-r--r--client/src/sass/_variables.scss2
-rw-r--r--client/src/sass/application.scss49
5 files changed, 58 insertions, 46 deletions
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index f1eb6e021..061ebe134 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -11,6 +11,10 @@
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <!-- Used for the fixed menu -->
15 <div class="col-md-2 col-sm-3 col-xs-3">
16 </div>
17
14 <div class="col-md-10 col-sm-9 col-xs-9 main-col"> 18 <div class="col-md-10 col-sm-9 col-xs-9 main-col">
15 <div class="header"> 19 <div class="header">
16 <my-search></my-search> 20 <my-search></my-search>
@@ -19,12 +23,12 @@
19 <div class="main-row"> 23 <div class="main-row">
20 <router-outlet></router-outlet> 24 <router-outlet></router-outlet>
21 </div> 25 </div>
26
27 <footer>
28 PeerTube, CopyLeft 2015-2017
29 </footer>
22 </div> 30 </div>
23 </div> 31 </div>
24
25 <footer>
26 PeerTube, CopyLeft 2015-2017
27 </footer>
28</div> 32</div>
29 33
30<my-confirm></my-confirm> 34<my-confirm></my-confirm>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e69de29bb..dc4dcf28b 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -0,0 +1,39 @@
1.title-menu-left {
2 height: calc(100vh - #{$header-height});
3 padding-right: 0;
4
5 .title-menu-left-block {
6 margin-left: -15px;
7
8 &.menu {
9 height: 100%;
10 }
11 }
12
13 #peertube-title {
14 background-color: #fff;
15 border-right: 1px solid $header-border-color;
16 font-size: 25px;
17 line-height: $header-height;
18 text-align: center;
19 margin-top: 0;
20 margin-bottom: 0;
21
22 a {
23 color: inherit !important;
24
25 &:hover {
26 color: inherit !important;
27 text-decoration: none !important;
28 }
29 }
30 }
31}
32
33footer {
34 border-top: 1px solid rgba(0, 0, 0, 0.2);
35 padding: 10px;
36 text-align: center;
37 font-size: small;
38 margin: 30px 10px 0 10px;
39}
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index cd9d71fb4..abd2832df 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -45,7 +45,7 @@
45 } 45 }
46 46
47 .video-small-blocks { 47 .video-small-blocks {
48 height: 150px; 48 height: $video-watch-info-height;
49 color: $video-watch-info-color; 49 color: $video-watch-info-color;
50 border-color: $video-watch-border-color; 50 border-color: $video-watch-border-color;
51 border-width: 1px 0px; 51 border-width: 1px 0px;
diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss
index d89fbb5e0..bb6799665 100644
--- a/client/src/sass/_variables.scss
+++ b/client/src/sass/_variables.scss
@@ -15,4 +15,4 @@ $video-miniature-other-infos: #686767;
15$video-watch-border-color: #eceef4; 15$video-watch-border-color: #eceef4;
16$video-watch-title-height: 90px; 16$video-watch-title-height: 90px;
17$video-watch-info-color: #8e909b; 17$video-watch-info-color: #8e909b;
18$video-watch-info-height: 150px; 18$video-watch-info-height: 120px;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index d65cd8c64..571372c2b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -24,6 +24,11 @@ input.readonly {
24.header { 24.header {
25 height: $header-height; 25 height: $header-height;
26 26
27 my-search {
28 position: fixed;
29 z-index: 1000;
30 }
31
27 .search-col { 32 .search-col {
28 height: 100%; 33 height: 100%;
29 margin-left: -15px; 34 margin-left: -15px;
@@ -31,6 +36,10 @@ input.readonly {
31 } 36 }
32} 37}
33 38
39.title-menu-left {
40 position: fixed;
41}
42
34.main-col { 43.main-col {
35 padding: 0; 44 padding: 0;
36 45
@@ -51,38 +60,6 @@ input.readonly {
51 } 60 }
52} 61}
53 62
54.title-menu-left {
55 height: calc(100vh - #{$header-height});
56 padding-right: 0;
57
58 .title-menu-left-block {
59 margin-left: -15px;
60
61 &.menu {
62 height: 100%;
63 }
64 }
65
66 #peertube-title {
67 background-color: #fff;
68 border-right: 1px solid $header-border-color;
69 font-size: 25px;
70 line-height: $header-height;
71 text-align: center;
72 margin-top: 0;
73 margin-bottom: 0;
74
75 a {
76 color: inherit !important;
77
78 &:hover {
79 color: inherit !important;
80 text-decoration: none !important;
81 }
82 }
83 }
84}
85
86/* some fixes for ng2-smart-table */ 63/* some fixes for ng2-smart-table */
87ng2-smart-table { 64ng2-smart-table {
88 thead tr { 65 thead tr {
@@ -103,11 +80,3 @@ ng2-smart-table {
103 font-family: 'Glyphicons Halflings' !important; 80 font-family: 'Glyphicons Halflings' !important;
104 } 81 }
105} 82}
106
107footer {
108 border-top: 1px solid rgba(0, 0, 0, 0.2);
109 padding-top: 10px;
110 text-align: center;
111 font-size: small;
112 margin-top: 30px;
113}