-
Notifications
You must be signed in to change notification settings - Fork 380
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Minimal 'dspace' theme #1063
Minimal 'dspace' theme #1063
Changes from 5 commits
77a8579
fb90bf6
619f4d7
60d917b
cbee776
b8cb8f9
6b7da66
7cbce55
9bf2465
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<div class="background-image"> | ||
<div class="container"> | ||
<div class="jumbotron jumbotron-fluid"> | ||
<div class="d-flex flex-wrap"> | ||
<div> | ||
<h1 class="display-3">DSpace 7</h1> | ||
<p class="lead">DSpace is the world leading open source repository platform that enables | ||
organisations to:</p> | ||
</div> | ||
</div> | ||
<ul> | ||
<li>easily ingest documents, audio, video, datasets and their corresponding Dublin Core | ||
metadata | ||
</li> | ||
<li>open up this content to local and global audiences, thanks to the OAI-PMH interface and | ||
Google Scholar optimizations | ||
</li> | ||
<li>issue permanent urls and trustworthy identifiers, including optional integrations with | ||
handle.net and DataCite DOI | ||
</li> | ||
</ul> | ||
<p>Join an international community of <a href="https://wiki.duraspace.org/display/DSPACE/DSpace+Positioning" target="_blank">leading institutions using DSpace</a>.</p> | ||
tdonohue marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</div> | ||
</div> | ||
<small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small> | ||
</div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
:host { | ||
display: block; | ||
margin-top: calc(var(--ds-content-spacing) * -1); | ||
|
||
div.background-image { | ||
color: white; | ||
background-color: var(--bs-info); | ||
position: relative; | ||
background-position-y: -200px; | ||
background-image: url('/assets/dspace/images/banner.jpg'); | ||
background-size: cover; | ||
@media screen and (max-width: map-get($grid-breakpoints, lg)) { | ||
background-position-y: 0; | ||
} | ||
|
||
.container { | ||
position: relative; | ||
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); | ||
|
||
&:before, &:after { | ||
content: ''; | ||
display: block; | ||
width: var(--ds-banner-background-gradient-width); | ||
height: 100%; | ||
top: 0; | ||
position: absolute; | ||
} | ||
|
||
&:before { | ||
background: linear-gradient(to left, var(--ds-banner-text-background), transparent); | ||
left: calc(-1 * var(--ds-banner-background-gradient-width)); | ||
|
||
} | ||
|
||
&:after { | ||
background: linear-gradient(to right, var(--ds-banner-text-background), transparent); | ||
right: calc(-1 * var(--ds-banner-background-gradient-width)); | ||
} | ||
|
||
background-color: var(--ds-banner-text-background); | ||
} | ||
|
||
|
||
small.credits { | ||
a { | ||
color: inherit; | ||
} | ||
|
||
opacity: 0.3; | ||
position: absolute; | ||
right: var(--bs-spacer); | ||
bottom: 0; | ||
} | ||
} | ||
|
||
.jumbotron { | ||
background-color: transparent; | ||
} | ||
|
||
a { | ||
color: var(--ds-home-news-link-color); | ||
|
||
@include hover { | ||
color: var(--ds-home-news-link-hover-color); | ||
} | ||
} | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Component } from '@angular/core'; | ||
import { HomeNewsComponent as BaseComponent } from '../../../../../app/+home-page/home-news/home-news.component'; | ||
|
||
@Component({ | ||
selector: 'ds-home-news', | ||
styleUrls: ['./home-news.component.scss'], | ||
templateUrl: './home-news.component.html' | ||
}) | ||
|
||
/** | ||
* Component to render the news section on the home page | ||
*/ | ||
export class HomeNewsComponent extends BaseComponent {} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,5 @@ | ||
@import 'src/app/navbar/navbar.component.scss'; | ||
|
||
nav.navbar { | ||
border-bottom: 5px $green solid; | ||
border-bottom: 5px var(--bs-green) solid; | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Component } from '@angular/core'; | ||
import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component'; | ||
import { slideMobileNav } from '../../../../app/shared/animations/slide'; | ||
|
||
/** | ||
* Component representing the public navbar | ||
*/ | ||
@Component({ | ||
selector: 'ds-navbar', | ||
styleUrls: ['./navbar.component.scss'], | ||
templateUrl: '../../../../app/navbar/navbar.component.html', | ||
animations: [slideMobileNav] | ||
}) | ||
export class NavbarComponent extends BaseComponent { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export const ENTRY_COMPONENTS = [ | ||
]; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
// Add any global css for the theme here | ||
|
||
// imports the base global style | ||
@import '../../../styles/_global-styles.scss'; | ||
|
||
.facet-filter,.setting-option { | ||
background-color: var(--bs-light); | ||
border-radius: var(--bs-border-radius); | ||
|
||
&.p-3 { | ||
// Needs !important because the original bootstrap class uses it | ||
padding-top: 0.5rem !important; | ||
padding-bottom: 0.5rem !important; | ||
} | ||
|
||
.badge-secondary { | ||
background-color: var(--bs-primary); | ||
} | ||
|
||
h5 { | ||
font-size: 1.1rem | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
// Override or add CSS variables for your theme here | ||
|
||
:root { | ||
--ds-banner-text-background: rgba(0, 0, 0, 0.35); | ||
--ds-banner-background-gradient-width: 300px; | ||
--ds-home-news-link-color: #{$green}; | ||
--ds-home-news-link-hover-color: #{darken($green, 15%)}; | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,20 @@ | ||
// DSpace works with CSS variables for its own components, and has a mapping of all bootstrap Sass | ||
// variables to CSS equivalents (see src/styles/_bootstrap_variables_mapping.scss). However Bootstrap | ||
// still uses Sass variables internally. So if you want to override bootstrap (or other sass | ||
// variables) you can do so here. Their CSS counterparts will include the changes you make here | ||
|
||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese'); | ||
|
||
$font-family-sans-serif: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | ||
$gray-100: #e8ebf3 !default; // #eee | ||
$gray-100: #e8ebf3 !default; | ||
$gray-400: #ced4da !default; | ||
$gray-800: #444444 !default; // #444 | ||
|
||
$navbar-dark-color: #FFFFFF; | ||
|
||
/* Reassign color vars to semantic color scheme */ | ||
$blue: #43515f !default; | ||
//$green: #92C642 !default; | ||
$green: #92C642 !default; | ||
$cyan: #2e80a3 !default; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We're going to have to make $cyan slightly darker...I'm getting an insufficient color contrast issues with this color on a white background when using the axe DevTools tool in Chrome. Maybe change this to something like Similarly, I think we'll need to update the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Done. I used your suggested color
That would make For now, I've changed |
||
$yellow: #ec9433 !default; | ||
|
@@ -16,4 +23,8 @@ $dark: #43515f !default; | |
|
||
$body-color: $gray-800 !default; | ||
|
||
$table-accent-bg: $gray-100 !default; | ||
$table-hover-bg: $gray-400 !default; | ||
|
||
$yiq-contrasted-threshold: 170 !default; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
// This file combines the other scss files in to one. You usually shouldn't edit this file directly | ||
|
||
@import './_theme_sass_variable_overrides.scss'; | ||
@import '../../../styles/_variables.scss'; | ||
@import '../../../styles/_mixins.scss'; | ||
@import '../../../styles/helpers/font_awesome_imports.scss'; | ||
@import '../../../../node_modules/bootstrap/scss/bootstrap.scss'; | ||
@import '../../../../node_modules/nouislider/distribute/nouislider.min'; | ||
@import '../../../styles/_custom_variables.scss'; | ||
@import './_theme_css_variable_overrides.scss'; | ||
@import '../../../styles/bootstrap_variables_mapping.scss'; | ||
@import './_global-styles.scss'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why this has been replaced with the themed css? Should the theme applied override the base-theme.css automatically?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It should, feel free to put it back and verify that it will update automatically. But it's an efficiency thing.
If you put the css needed for the initial page load there in the first place, it prevents people from having to download the wrong css first, before app.component can replace it.
It is something I would recommend everybody does after they've decided on the theme they want.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it makes sense, maybe for the 7.1 we can think to improve it by selecting the css according to the chosen theme. It could be made with webpack, here an article that could help https://medium.com/dailyjs/inserting-variables-into-html-and-javascript-with-webpack-80f33625edc6