Limit content width for pages

src/app/+collection-page/collection-page.component.html

@@ -1,50 +1,52 @@
-<div class="collection-page">
-  <div *ngIf="collectionData.hasSucceeded | async" @fadeInOut>
-    <div *ngIf="collectionData.payload | async; let collectionPayload">
-      <!-- Collection Name -->
-      <ds-comcol-page-header
-        [name]="collectionPayload.name">
-      </ds-comcol-page-header>
-      <!-- Collection logo -->
-      <ds-comcol-page-logo *ngIf="logoData"
-        [logo]="logoData.payload | async"
-        [alternateText]="'Collection Logo'">
-      </ds-comcol-page-logo>
-      <!-- Introductionary text -->
-      <ds-comcol-page-content
-        [content]="collectionPayload.introductoryText"
-        [hasInnerHtml]="true">
-      </ds-comcol-page-content>
-      <!-- News -->
-      <ds-comcol-page-content
-        [content]="collectionPayload.sidebarText"
-        [hasInnerHtml]="true"
-        [title]="'community.page.news'">
-      </ds-comcol-page-content>
-      <!-- Copyright -->
-      <ds-comcol-page-content
-        [content]="collectionPayload.copyrightText"
-        [hasInnerHtml]="true">
-      </ds-comcol-page-content>
-      <!-- Licence -->
-      <ds-comcol-page-content
-        [content]="collectionPayload.license"
-        [title]="'collection.page.license'">
-      </ds-comcol-page-content>
+<div class="container">
+  <div class="collection-page">
+    <div *ngIf="collectionData.hasSucceeded | async" @fadeInOut>
+      <div *ngIf="collectionData.payload | async; let collectionPayload">
+        <!-- Collection Name -->
+        <ds-comcol-page-header
+          [name]="collectionPayload.name">
+        </ds-comcol-page-header>
+        <!-- Collection logo -->
+        <ds-comcol-page-logo *ngIf="logoData"
+          [logo]="logoData.payload | async"
+          [alternateText]="'Collection Logo'">
+        </ds-comcol-page-logo>
+        <!-- Introductionary text -->
+        <ds-comcol-page-content
+          [content]="collectionPayload.introductoryText"
+          [hasInnerHtml]="true">
+        </ds-comcol-page-content>
+        <!-- News -->
+        <ds-comcol-page-content
+          [content]="collectionPayload.sidebarText"
+          [hasInnerHtml]="true"
+          [title]="'community.page.news'">
+        </ds-comcol-page-content>
+        <!-- Copyright -->
+        <ds-comcol-page-content
+          [content]="collectionPayload.copyrightText"
+          [hasInnerHtml]="true">
+        </ds-comcol-page-content>
+        <!-- Licence -->
+        <ds-comcol-page-content
+          [content]="collectionPayload.license"
+          [title]="'collection.page.license'">
+        </ds-comcol-page-content>
+      </div>
     </div>
+    <ds-error *ngIf="collectionData.hasFailed | async" message="{{'error.collection' | translate}}"></ds-error>
+    <ds-loading *ngIf="collectionData.isLoading | async" message="{{'loading.collection' | translate}}"></ds-loading>
+    <br>
+    <div *ngIf="itemData.hasSucceeded | async" @fadeIn>
+      <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
+      <ds-object-list
+        [config]="paginationConfig"
+        [sortConfig]="sortConfig"
+        [objects]="itemData"
+        [hideGear]="false">
+      </ds-object-list>
+    </div>
+    <ds-error *ngIf="itemData.hasFailed | async" message="{{'error.items' | translate}}"></ds-error>
+    <ds-loading *ngIf="itemData.isLoading | async" message="{{'loading.items' | translate}}"></ds-loading>
   </div>
-  <ds-error *ngIf="collectionData.hasFailed | async" message="{{'error.collection' | translate}}"></ds-error>
-  <ds-loading *ngIf="collectionData.isLoading | async" message="{{'loading.collection' | translate}}"></ds-loading>
-  <br>
-  <div *ngIf="itemData.hasSucceeded | async" @fadeIn>
-    <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
-    <ds-object-list
-      [config]="paginationConfig"
-      [sortConfig]="sortConfig"
-      [objects]="itemData"
-      [hideGear]="false">
-    </ds-object-list>
-  </div>
-  <ds-error *ngIf="itemData.hasFailed | async" message="{{'error.items' | translate}}"></ds-error>
-  <ds-loading *ngIf="itemData.isLoading | async" message="{{'loading.items' | translate}}"></ds-loading>
 </div>

src/app/+community-page/community-page.component.html

@@ -1,30 +1,32 @@
-<div class="community-page" *ngIf="communityData.hasSucceeded | async" @fadeInOut>
-  <div *ngIf="communityData.payload | async; let communityPayload">
-    <!-- Community name -->
-    <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
-    <!-- Community logo -->
-    <ds-comcol-page-logo *ngIf="logoData"
-      [logo]="logoData.payload | async"
-      [alternateText]="'Community Logo'">
-    </ds-comcol-page-logo>
-    <!-- Introductionary text -->
-    <ds-comcol-page-content
-      [content]="communityPayload.introductoryText"
-      [hasInnerHtml]="true">
-    </ds-comcol-page-content>
-    <!-- News -->
-    <ds-comcol-page-content
-      [content]="communityPayload.sidebarText"
-      [hasInnerHtml]="true"
-      [title]="'community.page.news'">
-    </ds-comcol-page-content>
-    <!-- Copyright -->
-    <ds-comcol-page-content
-      [content]="communityPayload.copyrightText"
-      [hasInnerHtml]="true">
-    </ds-comcol-page-content>
-    <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
+<div class="container">
+  <div class="community-page" *ngIf="communityData.hasSucceeded | async" @fadeInOut>
+    <div *ngIf="communityData.payload | async; let communityPayload">
+      <!-- Community name -->
+      <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
+      <!-- Community logo -->
+      <ds-comcol-page-logo *ngIf="logoData"
+        [logo]="logoData.payload | async"
+        [alternateText]="'Community Logo'">
+      </ds-comcol-page-logo>
+      <!-- Introductionary text -->
+      <ds-comcol-page-content
+        [content]="communityPayload.introductoryText"
+        [hasInnerHtml]="true">
+      </ds-comcol-page-content>
+      <!-- News -->
+      <ds-comcol-page-content
+        [content]="communityPayload.sidebarText"
+        [hasInnerHtml]="true"
+        [title]="'community.page.news'">
+      </ds-comcol-page-content>
+      <!-- Copyright -->
+      <ds-comcol-page-content
+        [content]="communityPayload.copyrightText"
+        [hasInnerHtml]="true">
+      </ds-comcol-page-content>
+      <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
+    </div>
   </div>
+  <ds-error *ngIf="communityData.hasFailed | async" message="{{'error.community' | translate}}"></ds-error>
+  <ds-loading *ngIf="communityData.isLoading | async" message="{{'loading.community' | translate}}"></ds-loading>
 </div>
-<ds-error *ngIf="communityData.hasFailed | async" message="{{'error.community' | translate}}"></ds-error>
-<ds-loading *ngIf="communityData.isLoading | async" message="{{'loading.community' | translate}}"></ds-loading>

src/app/+home-page/home-news/home-news.component.html

@@ -1,6 +1,6 @@
 <div class="jumbotron jumbotron-fluid">
-  <div class="container-fluid">
-    <div class="row">
+  <div class="container">
+    <div class="row no-gutters">
       <div class="dspace-logo-container">
         <img src="assets/images/dspace-logo.png" />
       </div>
@@ -9,7 +9,7 @@
         <p class="lead">DSpace is an open source software platform that enables organisations to:</p>
       </div>
     </div>
-    <div class="row">
+    <div class="row no-gutters">
       <ul>
         <li>capture and describe digital material using a submission workflow module, or a variety of programmatic ingest options
         </li>

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

@@ -1,8 +1,7 @@
 @import '../../../styles/variables.scss';
+
 :host {
   display: block;
-  margin-right: ($grid-gutter-width / -2);
-  margin-left:  ($grid-gutter-width / -2);
   margin-top: -$content-spacing;
   margin-bottom: -$content-spacing;
 }

src/app/+home-page/home-page.component.html

@@ -1,3 +1,5 @@
 <ds-home-news></ds-home-news>
-<ds-search-form></ds-search-form>
-<ds-top-level-community-list></ds-top-level-community-list>
+<div class="container">
+  <ds-search-form></ds-search-form>
+  <ds-top-level-community-list></ds-top-level-community-list>
+</div>

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

@@ -1,23 +1,25 @@
-<div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
-  <div *ngIf="item.payload | async; let itemPayload">
-    <ds-item-page-title-field [item]="itemPayload"></ds-item-page-title-field>
-    <div class="simple-view-link">
-      <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + itemPayload.id]">
-        {{"item.page.link.simple" | translate}}
-      </a>
+<div class="container">
+  <div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
+    <div *ngIf="item.payload | async; let itemPayload">
+      <ds-item-page-title-field [item]="itemPayload"></ds-item-page-title-field>
+      <div class="simple-view-link">
+        <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + itemPayload.id]">
+          {{"item.page.link.simple" | translate}}
+        </a>
+      </div>
+      <table class="table table-responsive table-striped">
+        <tbody>
+          <tr *ngFor="let metadatum of (metadata | async)">
+            <td>{{metadatum.key}}</td>
+            <td>{{metadatum.value}}</td>
+            <td>{{metadatum.language}}</td>
+          </tr>
+        </tbody>
+      </table>
+      <ds-item-page-full-file-section [item]="itemPayload"></ds-item-page-full-file-section>
+      <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
     </div>
-    <table class="table table-responsive table-striped">
-      <tbody>
-        <tr *ngFor="let metadatum of (metadata | async)">
-          <td>{{metadatum.key}}</td>
-          <td>{{metadatum.value}}</td>
-          <td>{{metadatum.language}}</td>
-        </tr>
-      </tbody>
-    </table>
-    <ds-item-page-full-file-section [item]="itemPayload"></ds-item-page-full-file-section>
-    <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
   </div>
+  <ds-error *ngIf="item.hasFailed | async" message="{{'error.item' | translate}}"></ds-error>
+  <ds-loading *ngIf="item.isLoading | async" message="{{'loading.item' | translate}}"></ds-loading>
 </div>
-<ds-error *ngIf="item.hasFailed | async" message="{{'error.item' | translate}}"></ds-error>
-<ds-loading *ngIf="item.isLoading | async" message="{{'loading.item' | translate}}"></ds-loading>

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

@@ -1,27 +1,29 @@
-<div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
-  <div *ngIf="item.payload | async; let itemPayload">
-    <ds-item-page-title-field [item]="itemPayload"></ds-item-page-title-field>
-    <div class="row">
-      <div class="col-xs-12 col-md-4">
-        <ds-metadata-field-wrapper>
-          <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
-        </ds-metadata-field-wrapper>
-        <ds-item-page-file-section [item]="itemPayload"></ds-item-page-file-section>
-        <ds-item-page-date-field [item]="itemPayload"></ds-item-page-date-field>
-        <ds-item-page-author-field [item]="itemPayload"></ds-item-page-author-field>
-      </div>
-      <div class="col-xs-12 col-md-6">
-        <ds-item-page-abstract-field [item]="itemPayload"></ds-item-page-abstract-field>
-        <ds-item-page-uri-field [item]="itemPayload"></ds-item-page-uri-field>
-        <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
-        <div>
-          <a class="btn btn-outline-primary" [routerLink]="['/items/' + itemPayload.id + '/full']">
-            {{"item.page.link.full" | translate}}
-          </a>
+<div class="container">
+  <div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
+    <div *ngIf="item.payload | async; let itemPayload">
+      <ds-item-page-title-field [item]="itemPayload"></ds-item-page-title-field>
+      <div class="row">
+        <div class="col-xs-12 col-md-4">
+          <ds-metadata-field-wrapper>
+            <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
+          </ds-metadata-field-wrapper>
+          <ds-item-page-file-section [item]="itemPayload"></ds-item-page-file-section>
+          <ds-item-page-date-field [item]="itemPayload"></ds-item-page-date-field>
+          <ds-item-page-author-field [item]="itemPayload"></ds-item-page-author-field>
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <ds-item-page-abstract-field [item]="itemPayload"></ds-item-page-abstract-field>
+          <ds-item-page-uri-field [item]="itemPayload"></ds-item-page-uri-field>
+          <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
+          <div>
+            <a class="btn btn-outline-primary" [routerLink]="['/items/' + itemPayload.id + '/full']">
+              {{"item.page.link.full" | translate}}
+            </a>
+          </div>
         </div>
       </div>
     </div>
   </div>
+  <ds-error *ngIf="item.hasFailed | async" message="{{'error.item' | translate}}"></ds-error>
+  <ds-loading *ngIf="item.isLoading | async" message="{{'loading.item' | translate}}"></ds-loading>
 </div>
-<ds-error *ngIf="item.hasFailed | async" message="{{'error.item' | translate}}"></ds-error>
-<ds-loading *ngIf="item.isLoading | async" message="{{'loading.item' | translate}}"></ds-loading>

src/app/+search-page/search-page.component.html

@@ -1,9 +1,11 @@
-<div class="search-page">
-    <ds-search-form
-      [query]="query"
-      [scope]="scopeObject?.payload | async"
-      [currentParams]="currentParams"
-      [scopes]="scopeList?.payload">
-    </ds-search-form>
-    <ds-search-results [searchResults]="results" [searchConfig]="searchOptions"></ds-search-results>
+<div class="container">
+  <div class="search-page">
+      <ds-search-form
+        [query]="query"
+        [scope]="scopeObject?.payload | async"
+        [currentParams]="currentParams"
+        [scopes]="scopeList?.payload">
+      </ds-search-form>
+      <ds-search-results [searchResults]="results" [searchConfig]="searchOptions"></ds-search-results>
+  </div>
 </div>

src/app/app.component.html

@@ -3,9 +3,7 @@
     <ds-header></ds-header>
 
     <main class="main-content">
-      <div class="container-fluid">
-        <router-outlet></router-outlet>
-      </div>
+      <router-outlet></router-outlet>
     </main>
 
     <ds-footer></ds-footer>

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

@@ -1,3 +1,3 @@
 <div *ngIf="logo" class="dso-logo">
-    <img [src]="logo.content" class="img-responsive" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
+    <img [src]="logo.content" class="img-fluid" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
 </div>