From b34a444e291c8ec90b4c2c965f7d0d6904d1faa7 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 9 Aug 2018 09:22:10 +0200 Subject: Upgrade to bootstrap 4 first step --- client/package.json | 3 +- client/src/app/app.component.scss | 2 +- client/src/app/search/search.component.scss | 2 +- .../videos/+video-watch/video-watch.component.scss | 2 + client/src/sass/application.scss | 5 +- client/src/sass/include/_bootstrap.scss | 85 +++++++++------------- client/yarn.lock | 10 ++- 7 files changed, 53 insertions(+), 56 deletions(-) (limited to 'client') diff --git a/client/package.json b/client/package.json index fe7dd28a3..e6b6e3b05 100644 --- a/client/package.json +++ b/client/package.json @@ -45,6 +45,7 @@ "@angular/router": "~6.1.0", "@angular/service-worker": "~6.1.0", "@angularclass/hmr": "^2.1.3", + "@neos21/bootstrap3-glyphicons": "^1.0.1", "@ngx-loading-bar/core": "^2.0.0", "@ngx-loading-bar/http-client": "^2.0.0", "@ngx-loading-bar/router": "^2.0.0", @@ -62,7 +63,7 @@ "@types/webtorrent": "^0.98.4", "angular2-notifications": "^1.0.2", "awesome-typescript-loader": "5.2.0", - "bootstrap-sass": "^3.3.7", + "bootstrap": "^4.1.3", "buffer": "^5.1.0", "cache-chunk-store": "^2.0.0", "codelyzer": "^4.0.2", diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index 9eca31320..ded45b5f7 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -85,10 +85,10 @@ footer { border-top: 1px solid $footer-border-color; padding: 10px 0; - text-align: center; font-size: 11px; margin-top: $footer-margin; height: $footer-height; + justify-content: center; } simple-notifications { diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index ef89c5666..e54a8b32a 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -11,7 +11,7 @@ } .search-result { - margin: 40px; + padding: 40px; .results-header { font-size: 16px; 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 5127687b2..b27a70197 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -5,6 +5,7 @@ background-color: #000; display: flex; justify-content: center; + flex-grow: 1; .remote-server-down { color: #fff; @@ -68,6 +69,7 @@ .video-bottom { margin-top: 40px; display: flex; + flex-grow: 1; .video-info { flex-grow: 1; diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 65711a225..74759348e 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -1,7 +1,7 @@ @import '_variables'; @import '_mixins'; -$icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; +$icon-font-path: '../../node_modules/@neos21/bootstrap3-glyphicons/assets/fonts/'; @import '_bootstrap'; @import '_fonts'; @@ -22,6 +22,7 @@ body { font-family: $main-fonts; font-weight: $font-regular; color: #000; + font-size: 14px; } #incompatible-browser { @@ -62,10 +63,12 @@ label { .main-col { margin-left: $menu-width; + width: auto; .margin-content { margin-left: $not-expanded-horizontal-margins; margin-right: $not-expanded-horizontal-margins; + flex-grow: 1; } .sub-menu { diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss index f15b8966e..b56b71536 100644 --- a/client/src/sass/include/_bootstrap.scss +++ b/client/src/sass/include/_bootstrap.scss @@ -1,50 +1,37 @@ -// Core variables and mixins -@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins"; +@import "~bootstrap/scss/functions"; +@import "~bootstrap/scss/variables"; +@import "~bootstrap/scss/mixins"; +@import "~bootstrap/scss/root"; +@import "~bootstrap/scss/reboot"; +@import "~bootstrap/scss/type"; +//@import "~bootstrap/scss/images"; +//@import "~bootstrap/scss/code"; +@import "~bootstrap/scss/grid"; +//@import "~bootstrap/scss/tables"; +@import "~bootstrap/scss/forms"; +@import "~bootstrap/scss/buttons"; +//@import "~bootstrap/scss/transitions"; +@import "~bootstrap/scss/dropdown"; +//@import "~bootstrap/scss/button-group"; +@import "~bootstrap/scss/input-group"; +//@import "~bootstrap/scss/custom-forms"; +@import "~bootstrap/scss/nav"; +//@import "~bootstrap/scss/navbar"; +//@import "~bootstrap/scss/card"; +//@import "~bootstrap/scss/breadcrumb"; +//@import "~bootstrap/scss/pagination"; +//@import "~bootstrap/scss/badge"; +//@import "~bootstrap/scss/jumbotron"; +@import "~bootstrap/scss/alert"; +//@import "~bootstrap/scss/progress"; +//@import "~bootstrap/scss/media"; +//@import "~bootstrap/scss/list-group"; +@import "~bootstrap/scss/close"; +@import "~bootstrap/scss/modal"; +@import "~bootstrap/scss/tooltip"; +@import "~bootstrap/scss/popover"; +//@import "~bootstrap/scss/carousel"; +//@import "~bootstrap/scss/utilities"; +//@import "~bootstrap/scss/print"; -// Reset and dependencies -@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/print"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons"; - -// Core CSS -@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/type"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/code"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons"; - -// Components -@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/button-groups"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/input-groups"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/labels"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/badges"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/jumbotron"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/alerts"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/progress-bars"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/media"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/list-group"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/close"; - -// Components w/ JavaScript -@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip"; -@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/carousel"; - -//// Utility classes -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities"; -//@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities"; +@import "~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons"; \ No newline at end of file diff --git a/client/yarn.lock b/client/yarn.lock index f75d7787c..32c0f7ea3 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -187,6 +187,10 @@ version "2.1.3" resolved "https://registry.yarnpkg.com/@angularclass/hmr/-/hmr-2.1.3.tgz#34e658ed3da37f23b0a200e2da5a89be92bb209f" +"@neos21/bootstrap3-glyphicons@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@neos21/bootstrap3-glyphicons/-/bootstrap3-glyphicons-1.0.1.tgz#e5eeec43e0153d4b51effd9ecb58cdf7029924d7" + "@ngtools/webpack@6.1.1": version "6.1.1" resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-6.1.1.tgz#dcfea287c0c1358f3e123621c65b0e3ccaab5b70" @@ -1328,9 +1332,9 @@ boom@2.x.x: dependencies: hoek "2.x.x" -bootstrap-sass@^3.3.7: - version "3.3.7" - resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498" +bootstrap@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be" brace-expansion@^1.1.7: version "1.1.11" -- cgit v1.2.3