44112: Upgrade to bootstrap 4 beta

package.json

@@ -88,7 +88,7 @@
     "@ngx-translate/core": "7.1.0",
     "@ngx-translate/http-loader": "0.1.0",
     "body-parser": "1.17.2",
-    "bootstrap": "4.0.0-alpha.6",
+    "bootstrap": "v4.0.0-beta",
     "cerialize": "0.1.15",
     "compression": "1.7.0",
     "cookie-parser": "1.4.3",

src/app/app.component.scss

@@ -1,7 +1,4 @@
-@import '../styles/variables.scss';
+@import '../styles/main.scss';
-@import '../../node_modules/bootstrap/scss/bootstrap.scss';
-@import "../../node_modules/font-awesome/scss/font-awesome.scss";
-
 html {
   position: relative;
   min-height: 100%;

src/app/collection-page/collection-page.component.scss

@@ -1 +1 @@
-@import '../../styles/variables.scss';
+@import '../../styles/main.scss';

src/app/community-page/community-page.component.scss

@@ -1 +1 @@
-@import '../../styles/variables.scss';
+@import '../../styles/main.scss';

src/app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss

@@ -1 +1 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';

src/app/core/footer/footer.component.scss

@@ -1,6 +1,5 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';
-@import '../../../../node_modules/bootstrap/scss/_variables.scss';
+$footer-bg: $gray-100;
-$footer-bg: $gray-lighter;
 $footer-border: 1px solid darken($footer-bg, 10%);
 $footer-padding: $spacer * 1.5;
 

src/app/header/header.component.html

@@ -1,11 +1,11 @@
 <header>
-  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-    <button class="navbar-toggler navbar-toggler-right" type="button" (click)="toggle()" aria-controls="collapsingNav" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon fa fa-bars fa-fw" aria-hidden="true"></span>
-    </button>
     <div [ngClass]="{'clearfix': !(isNavBarCollapsed | async)}">
       <a class="navbar-brand" routerLink="/home">{{ 'title' | translate }}</a>
     </div>
+    <button class="navbar-toggler" type="button" (click)="toggle()" aria-controls="collapsingNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon fa fa-bars fa-fw" aria-hidden="true"></span>
+    </button>
     <div [ngbCollapse]="(isNavBarCollapsed | async)" class="collapse navbar-collapse" id="collapsingNav">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item">

src/app/header/header.component.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../styles/main.scss';
 
 header nav.navbar {
   border-radius: 0;

src/app/home/home-news/home-news.component.scss

@@ -1,7 +1,8 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/main.scss';
 :host {
   display: block;
-  @include negate-gutters();
+  margin-right: ($grid-gutter-width / -2);
+  margin-left:  ($grid-gutter-width / -2);
 }
 
 .dspace-logo-container {

src/app/home/home.component.scss

@@ -1 +1 @@
-@import '../../styles/variables.scss';
+@import '../../styles/main.scss';

src/app/item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/variables.scss';
+@import '../../../../styles/main.scss';
 
 :host {
   .simple-view-element {

src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss

@@ -1 +1 @@
-@import '../../../../styles/variables.scss';
+@import '../../../../styles/main.scss';

src/app/item-page/field-components/metadata-values/metadata-values.component.scss

@@ -1 +1 @@
-@import '../../../../styles/variables.scss';
+@import '../../../../styles/main.scss';

src/app/item-page/full/field-components/file-section/full-file-section.component.scss

@@ -1,5 +1,4 @@
-@import '../../../../../styles/variables.scss';
+@import '../../../../../styles/main.scss';
-@import '../../../../../../node_modules/bootstrap/scss/_variables.scss';
 @media screen and (min-width: map-get($grid-breakpoints, md)) {
     dt {
         text-align: right;

src/app/item-page/full/full-item-page.component.html

@@ -2,7 +2,7 @@
     <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
 
     <div class="simple-view-link">
-        <a class="btn btn-secondary col-4" [routerLink]="['/items/' + (item.payload | async)?.id]">
+        <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + (item.payload | async)?.id]">
             {{"item.page.link.simple" | translate}}
         </a>
     </div>

src/app/item-page/full/full-item-page.component.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';
 :host {
     div.simple-view-link {
         text-align: center;

src/app/item-page/simple/item-page.component.html

@@ -16,7 +16,7 @@
             <ds-item-page-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
             <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
             <div>
-                <a class="btn btn-secondary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
+                <a class="btn btn-outline-primary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
                     {{"item.page.link.full" | translate}}
                 </a>
             </div>

src/app/item-page/simple/item-page.component.scss

@@ -1 +1 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';

src/app/object-list/collection-list-element/collection-list-element.component.scss

@@ -1 +1 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';

src/app/object-list/community-list-element/community-list-element.component.scss

@@ -1 +1 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';

src/app/object-list/item-list-element/item-list-element.component.scss

@@ -1 +1 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';

src/app/object-list/object-list-element/object-list-element.component.scss

@@ -1,7 +1,6 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';
-@import '../../../../node_modules/bootstrap/scss/variables';
 
 :host {
   display: block;
-  margin-bottom: $spacer-y;
+  margin-bottom: $spacer;
 }

src/app/object-list/object-list.component.scss

@@ -1 +1 @@
-@import '../../styles/variables.scss';
+@import '../../styles/main.scss';

src/app/pagenotfound/pagenotfound.component.scss

@@ -1 +1 @@
-@import '../../styles/variables.scss';
+@import '../../styles/main.scss';

src/app/shared/comcol-page-content/comcol-page-content.component.scss

@@ -1 +1 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';

src/app/shared/comcol-page-header/comcol-page-header.component.scss

@@ -1 +1 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';

src/app/shared/comcol-page-logo/comcol-page-logo.component.scss

@@ -1 +1 @@
-@import '../../../styles/variables.scss';
+@import '../../../styles/main.scss';

src/app/thumbnail/thumbnail.component.scss

@@ -1 +1 @@
-@import '../../styles/variables.scss';
+@import '../../styles/main.scss';

src/styles/_main.scss

@@ -0,0 +1,4 @@
+@import 'variables.scss';
+@import '../../node_modules/bootstrap/scss/bootstrap.scss';
+@import "../../node_modules/font-awesome/scss/font-awesome.scss";
+@import 'mixins.scss';

src/styles/_mixins.scss

@@ -1,12 +1 @@
-@import './variables.scss';
+/* Custom mixins go here */
-@import '../../node_modules/bootstrap/scss/variables';
-@import '../../node_modules/bootstrap/scss/mixins';
-@mixin negate-gutters($gutters: $grid-gutter-widths) {
-   @each $breakpoint in map-keys($gutters){
-    @include media-breakpoint-up($breakpoint) {
-      $gutter: map-get($gutters, $breakpoint);
-      margin-right: ($gutter / -2);
-      margin-left: ($gutter / -2);
-    }
-  }
-}

src/styles/variables.scss

@@ -4,17 +4,27 @@ $fa-font-path: "../assets/fonts";
 $image-path: "../assets/images";
 /* Colors */
 $gray-base: #000 !default;
-$gray-darker: lighten($gray-base, 13.5%) !default; // #222
+$gray-900: lighten($gray-base, 13.5%) !default; // #222
-$gray-dark: lighten($gray-base, 26.6%) !default; // #444
+$gray-800: lighten($gray-base, 26.6%) !default; // #444
-$gray: lighten($gray-base, 46.6%) !default; // #777
+$gray-700: lighten($gray-base, 46.6%) !default; // #777
-$gray-light: lighten($gray-base, 73.3%) !default; // #bbb
+$gray-600: lighten($gray-base, 73.3%) !default; // #bbb
-$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
+$gray-100: lighten($gray-base, 93.5%) !default; // #eee
 /* Reassign color vars to semantic color scheme */
-$brand-primary: #2B4E72 !default;
+$blue:    #2B4E72 !default;
-$brand-success: #94BA65 !default;
+$green:   #94BA65 !default;
-$brand-info: #2790B0 !default;
+$cyan:    #2790B0 !default;
-$brand-warning: #EBBB54 !default;
+$yellow:  #EBBB54 !default;
-$brand-danger: #CF4444 !default;
+$red:     #CF4444 !default;
-$brand-inverse: $brand-primary !default;
+
+$theme-colors: (
+        primary: $blue,
+        secondary: $gray-600,
+        success: $green,
+        info: $cyan,
+        warning: $yellow,
+        danger: $red,
+        light: $gray-100,
+        dark: $blue
+) !default;
 /* Fonts */
-$link-color: $brand-info !default;
+$link-color: $cyan !default;

yarn.lock

@@ -810,12 +810,9 @@ boom@2.x.x:
   dependencies:
     hoek "2.x.x"
 
-bootstrap@4.0.0-alpha.6:
+bootstrap@v4.0.0-beta:
-  version "4.0.0-alpha.6"
+  version "4.0.0-beta"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz#4f54dd33ac0deac3b28407bc2df7ec608869c9c8"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.tgz#dc5928175d2e71310bc668cf9e05a907211b72a6"
-  dependencies:
-    jquery ">=1.9.1"
-    tether "^1.4.0"
 
 brace-expansion@^1.1.7:
   version "1.1.7"
@@ -3518,10 +3515,6 @@ jodid25519@^1.0.0:
   dependencies:
     jsbn "~0.1.0"
 
-jquery@>=1.9.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
-
 js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
@@ -6893,10 +6886,6 @@ tar@^2.0.0, tar@^2.2.1:
     fstream "^1.0.2"
     inherits "2"
 
-tether@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.0.tgz#0f9fa171f75bf58485d8149e94799d7ae74d1c1a"
-
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"