-
-
-
-
-

- {{t 'institutions.description'}} -
- - {{t 'institutions.read_more'}} - -

-
-
-
+
+

+ {{t 'institutions.description'}} +
+ + {{t 'institutions.read_more'}} + +

-
-
-
-
-
-
-
-
- - {{t 'institutions.title'}} - - -
-
- -
-
-
- {{#each this.institutions as |institution|}} - -
- {{institution.name}} -
-
- - {{institution.name}} - -
- - {{/each}} -
- {{#if this.hasMore}} - - - - {{/if}} +
+
+
+ + {{t 'institutions.title'}} + + +
+
+ +
+
+
+ {{#each this.institutions as |institution|}} + + {{#unless this.isMobile}} +
+ {{institution.name}}
+ {{/unless}} +
+ {{institution.name}}
-
-
+ + {{/each}}
+ {{#if this.hasMore}} + + {{/if}}
-
-
-
-

- {{t 'institutions.footer'}} - - {{t 'institutions.contact_us'}} - -

-
-
-
+

+ {{t 'institutions.footer'}} + + {{t 'institutions.contact_us'}} + +

diff --git a/app/meetings/detail/-components/meeting-detail-header/styles.scss b/app/meetings/detail/-components/meeting-detail-header/styles.scss index 3ea7f96e0eb..ac6885f143e 100644 --- a/app/meetings/detail/-components/meeting-detail-header/styles.scss +++ b/app/meetings/detail/-components/meeting-detail-header/styles.scss @@ -26,3 +26,8 @@ .meeting-format-body { padding-left: 25px; } + +.img-responsive { + display: block; + max-width: 100%; +} diff --git a/app/meetings/detail/-components/meeting-detail-header/template.hbs b/app/meetings/detail/-components/meeting-detail-header/template.hbs index 25df81896bc..50c19f2b94f 100644 --- a/app/meetings/detail/-components/meeting-detail-header/template.hbs +++ b/app/meetings/detail/-components/meeting-detail-header/template.hbs @@ -14,21 +14,22 @@ data-test-meeting-logo src={{this.meeting.logoUrl}} alt={{t 'meetings.detail.meeting-detail-header.image_alt'}} - class='img-responsive' + local-class='img-responsive' >
{{/if}}
{{#if this.meeting.active}} - + @layout='fake-link' + {{on 'click' (action this.togglePanel)}} + > {{t 'meetings.detail.meeting-detail-header.add_your'}} {{this.addSubmissionText}} - + {{/if}} {{if (and this.meeting.active this.meeting.infoUrl) '|'}} {{#if this.meeting.infoUrl}} diff --git a/app/meetings/detail/-components/meeting-submissions-list/component.ts b/app/meetings/detail/-components/meeting-submissions-list/component.ts index 0684446ed03..3c41e7ce542 100644 --- a/app/meetings/detail/-components/meeting-submissions-list/component.ts +++ b/app/meetings/detail/-components/meeting-submissions-list/component.ts @@ -1,5 +1,7 @@ import { tagName } from '@ember-decorators/component'; import Component from '@ember/component'; +import Media from 'ember-responsive'; +import { inject as service } from '@ember/service'; import { action, computed } from '@ember/object'; import { waitFor } from '@ember/test-waiters'; import { restartableTask, timeout } from 'ember-concurrency'; @@ -8,6 +10,7 @@ import MeetingSubmissionModel from 'ember-osf-web/models/meeting-submission'; @tagName('') export default class MeetingSubmissionsList extends Component { + @service media!: Media; // Private properties search?: string; sort?: string; @@ -40,4 +43,8 @@ export default class MeetingSubmissionsList extends Component { downloadFile(submission: MeetingSubmissionModel) { window.open(submission.links.download); } + + get isMobile() { + return this.media.isMobile; + } } diff --git a/app/meetings/detail/-components/meeting-submissions-list/styles.scss b/app/meetings/detail/-components/meeting-submissions-list/styles.scss index 2ede4e016bc..c78f22442c1 100644 --- a/app/meetings/detail/-components/meeting-submissions-list/styles.scss +++ b/app/meetings/detail/-components/meeting-submissions-list/styles.scss @@ -1,3 +1,34 @@ +// stylelint-disable max-nesting-depth, selector-max-compound-selectors + +.search-container { + width: 100%; + background: $color-bg-gray-light; + margin: 0 0 10px; + padding: 7px; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + + .search { + width: 50%; + padding: 6px 12px; + border: 1px solid $color-border-gray; + padding-right: 15px; + padding-left: 15px; + + &.mobile { + width: 100%; + } + + &:focus { + border-color: #66afe9; + outline: 0; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + } + } +} + .table { ul { display: table; @@ -18,73 +49,60 @@ white-space: nowrap; } } -} -.search { - display: inline-block; - width: 100%; - background: #efefef; - margin: 0 0 10px; - padding: 7px; + .header { + .wide-column, + .narrow-column { + width: 15%; - input { - float: right; - width: 100%; - padding: 6px 12px; - border: 1px solid #ccc; - - &:focus { - border-color: #66afe9; - outline: 0; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); - } - } -} + padding: 3px 0 7px 5px; + font-weight: 700; + background: #f5f5f5; + border-left: 1px solid #ddd; -.header > div { - padding: 3px 0 7px 5px; - font-weight: 700; - background: #f5f5f5; - border-left: 1px solid #ddd; + &:first-of-type { + border-left: 0; + } + + .sort-button { + display: inline; + padding-left: 4px; - &:first-of-type { - border-left: 0; - } -} + button, + button:active, + button:focus, + button:focus:active, + button:hover { + padding-top: 0; + height: 1em; + margin-top: -10px; + } + } + } -.sort-button { - display: inline; - padding-left: 4px; - - button, - button:active, - button:focus, - button:focus:active, - button:hover { - padding-top: 0; - height: 1em; - margin-top: -10px; + .wide-column { + width: 40%; + } } -} -.item > div { - padding: 2px 0 4px 5px; - border-top: 1px solid #f5f5f5; + .item > div { + padding: 2px 0 4px 5px; + border-top: 1px solid #f5f5f5; - :global(.ember-content-placeholders-text__line) { - margin: 2px 0 3px 1px; - height: 1em; + :global(.ember-content-placeholders-text__line) { + margin: 2px 0 3px 1px; + height: 1em; + } } -} -.empty { - text-align: center; -} - -.HeaderWide { - width: 40%; + .empty { + text-align: center; + } } -.HeaderNarrow { - width: 15%; +.btn-xs { + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; } diff --git a/app/meetings/detail/-components/meeting-submissions-list/template.hbs b/app/meetings/detail/-components/meeting-submissions-list/template.hbs index 90005c760ce..73fd37770ba 100644 --- a/app/meetings/detail/-components/meeting-submissions-list/template.hbs +++ b/app/meetings/detail/-components/meeting-submissions-list/template.hbs @@ -1,12 +1,11 @@ -
-
- -
+
+
@@ -24,23 +23,23 @@ sortAction=(action this.sortSubmissions) sort=this.sort ) as |SortButton|}} -
+
{{t 'meetings.detail.meeting-submissions-list.title'}}
-
+
{{t 'meetings.detail.meeting-submissions-list.author'}}
-
+
{{t 'meetings.detail.meeting-submissions-list.category'}}
-
+
{{t 'meetings.detail.meeting-submissions-list.dateCreated'}}
-
+
{{t 'meetings.detail.meeting-submissions-list.downloads'}}
@@ -64,14 +63,14 @@
{{#if submission.links.download}} - - + {{submission.downloadCount}} {{/if}}
diff --git a/app/meetings/detail/styles.scss b/app/meetings/detail/styles.scss index a4bf8a23e70..9511bd03581 100644 --- a/app/meetings/detail/styles.scss +++ b/app/meetings/detail/styles.scss @@ -1,3 +1,21 @@ -.meeting-submission-list { - margin-top: 0; +.meeting-detail-container { + background-color: $color-bg-white; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + width: 100%; + + .meeting-detail, + .meeting-submission-list-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 90%; + } + + .meeting-submission-list-container { + align-items: center; + } } diff --git a/app/meetings/detail/template.hbs b/app/meetings/detail/template.hbs index 41a1187f4e1..17a321124fa 100644 --- a/app/meetings/detail/template.hbs +++ b/app/meetings/detail/template.hbs @@ -1,8 +1,8 @@ -
- -
-
- -
+
+
+ +
+
+
\ No newline at end of file diff --git a/app/meetings/index/-components/meetings-footer/component.ts b/app/meetings/index/-components/meetings-footer/component.ts new file mode 100644 index 00000000000..5d7645f476c --- /dev/null +++ b/app/meetings/index/-components/meetings-footer/component.ts @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; +import Media from 'ember-responsive'; + +export default class MeetingsFooter extends Component { + @service media!: Media; + + get isMobile() { + return this.media.isMobile; + } +} diff --git a/app/meetings/index/-components/meetings-footer/styles.scss b/app/meetings/index/-components/meetings-footer/styles.scss index 6d11300435a..3ab91966a55 100644 --- a/app/meetings/index/-components/meetings-footer/styles.scss +++ b/app/meetings/index/-components/meetings-footer/styles.scss @@ -1,27 +1,76 @@ -.org-logo { +// stylelint-disable max-nesting-depth, selector-max-compound-selectors + +.row-container { display: flex; + flex-direction: row; + justify-content: space-evenly; align-items: center; -} + margin-top: 25px; + margin-bottom: 25px; + width: 100%; -.org-logo img { - padding: 20px 20% 0; -} + &.mobile { + flex-direction: column; -.org-logo div { - position: relative; - top: 50%; -} + .icon-container { + width: 100%; + height: 225px; + } + + .uses-container { + width: 100%; + } + } + + + .icon-container { + width: 33%; + height: 225px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-left: 20px; + padding-right: 20px; + + .footer-text { + text-align: center; + } + + .icon-circle { + border-radius: 60px; + width: 100px; + height: 100px; + border: 3px solid #d3e1ee; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .blue-icon { + color: $color-text-blue-dark; + font-size: 50px; + } + } + } + + .uses-container { + width: 25%; + text-align: center; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 125px; -.blue-icon { - color: #337ab7; - font-size: 50px; + .img { + width: 100px; + } + } } -.icon-circle { - display: inline-block; - border-radius: 60px; - width: 100px; - height: 100px; - padding-top: 20px; - border: 3px solid #d3e1ee; +.uses-text-container { + width: 100%; + margin-bottom: 15px; + text-align: center; } diff --git a/app/meetings/index/-components/meetings-footer/template.hbs b/app/meetings/index/-components/meetings-footer/template.hbs index 856af59e69b..4ee2b271dbe 100644 --- a/app/meetings/index/-components/meetings-footer/template.hbs +++ b/app/meetings/index/-components/meetings-footer/template.hbs @@ -1,106 +1,94 @@ -
-
-
-
- -
-

- {{t 'meetings.index.meetings-footer.discover'}} -

-
-

- {{t 'meetings.index.meetings-footer.discover_text'}} -

-
+
+
+
+
+

+ {{t 'meetings.index.meetings-footer.discover'}} +

+

+ {{t 'meetings.index.meetings-footer.discover_text'}} +

-
-
-
- -
-

- {{t 'meetings.index.meetings-footer.share'}} -

-
-

- {{t 'meetings.index.meetings-footer.share_text'}} -

-
+
+
+
+

+ {{t 'meetings.index.meetings-footer.share'}} +

+

+ {{t 'meetings.index.meetings-footer.share_text'}} +

-
-
-
- -
-

- {{t 'meetings.index.meetings-footer.enhance'}} -

-
-

- {{t 'meetings.index.meetings-footer.enhance_text'}} -

-
+
+
+
+

+ {{t 'meetings.index.meetings-footer.enhance'}} +

+

+ {{t 'meetings.index.meetings-footer.enhance_text'}} +

-
+

{{t 'meetings.index.meetings-footer.who_use_text'}}

-
-
+
+
{{t
-
+
{{t
-
+
{{t
-
+
{{t
diff --git a/app/meetings/index/-components/meetings-hero-banner/component.ts b/app/meetings/index/-components/meetings-hero-banner/component.ts index 27c758c2f6d..2f074b23b17 100644 --- a/app/meetings/index/-components/meetings-hero-banner/component.ts +++ b/app/meetings/index/-components/meetings-hero-banner/component.ts @@ -1,8 +1,11 @@ import Component from '@ember/component'; +import { inject as service } from '@ember/service'; +import Media from 'ember-responsive'; import { action } from '@ember/object'; export default class MeetingsHeroBanner extends Component { // Private properties + @service media!: Media; registerPanelOpen = false; uploadPanelOpen = false; @@ -15,4 +18,8 @@ export default class MeetingsHeroBanner extends Component { toggleUploadPanel() { this.toggleProperty('uploadPanelOpen'); } + + get isMobile() { + return this.media.isMobile; + } } diff --git a/app/meetings/index/-components/meetings-hero-banner/styles.scss b/app/meetings/index/-components/meetings-hero-banner/styles.scss index 960aae1e718..f196224b6cc 100644 --- a/app/meetings/index/-components/meetings-hero-banner/styles.scss +++ b/app/meetings/index/-components/meetings-hero-banner/styles.scss @@ -1,55 +1,98 @@ -.osf-meeting-header-img { +// stylelint-disable max-nesting-depth, selector-max-compound-selectors + +.meeting-container { background: #67a3bf; background: linear-gradient(35deg, #67a3bf 0%, #166596 18%, #000 100%); color: #fff; padding-top: 40px; - position: relative; -} + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; -.network-img { - background: url('/assets/images/meetings/network-web.png') repeat; - background-size: contain; - height: 1000px; - margin-bottom: -1000px; - opacity: 0.35; -} + .meeting-information-container, + .meeting-header-container { + width: 80%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + margin-bottom: 25px; + position: relative; + z-index: 2; -.user-icon { - font-size: 85px; - padding-top: 25px; -} + h2 { + font-size: 24px; + text-align: center; + } -.cloud-icon { - font-size: 100px; - padding-top: 25px; -} + .meeting-logo { + width: 90%; + } -.icon-circle { - border-radius: 85px; - box-shadow: 0 0 10px #e0e7ec; - width: 140px; - height: 140px; - margin-left: auto; - margin-right: auto; -} + .meeting-action-container { + width: 40%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 25px; -.osf-meeting-header { - h1 { - font-size: 3.5em; - margin-bottom: -15px; + .font-weight { + font-weight: 600; + } - img { - width: 80%; + .icon-circle { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + border-radius: 85px; + box-shadow: 0 0 10px #e0e7ec; + width: 140px; + height: 140px; + + .user-icon { + font-size: 85px; + } + } + + .button-container { + padding-top: 15px; + padding-bottom: 15px; + } + + .register-box { + padding: 15px; + margin: 25px; + + a { + color: $color-link-dark; + } + } } } - h2 { - font-size: 24px; - } + .meeting-information-container { + flex-direction: row; + align-items: flex-start; - .register-box { - a { - color: $color-link-dark; + &.mobile { + flex-direction: column; + + .meeting-action-container { + width: 100%; + } } } + + .network-img { + background: url('/assets/images/meetings/network-web.png') repeat; + background-size: contain; + width: 100%; + height: 1000px; + margin-bottom: -1000px; + opacity: 0.35; + } } diff --git a/app/meetings/index/-components/meetings-hero-banner/template.hbs b/app/meetings/index/-components/meetings-hero-banner/template.hbs index c9c5e5a5d33..b27e0cd4ca9 100644 --- a/app/meetings/index/-components/meetings-hero-banner/template.hbs +++ b/app/meetings/index/-components/meetings-hero-banner/template.hbs @@ -1,89 +1,80 @@ -
-
-
-
-

- {{t -

-

- {{t 'meetings.index.meetings-hero-banner.h3' htmlSafe=true}} -

+
+
+ {{t +

+ {{t 'meetings.index.meetings-hero-banner.h3' htmlSafe=true}} +

+
+
+
+
+
+
-
-
-
-
- -
-

- {{t 'meetings.index.meetings-hero-banner.conference_organizers_h3'}} -

-
-

- {{t 'meetings.index.meetings-hero-banner.conference_organizers_help_text'}} -

-
-
- - {{t 'meetings.index.meetings-hero-banner.conference_organizers_register_button'}} - -
- - -
- {{t 'meetings.index.meetings-hero-banner.conference_organizers_register_panel_texts' htmlSafe=true}} -
- - -
-
-
- -
-

- {{t 'meetings.index.meetings-hero-banner.conference_participants_h3'}} -

-
-

- {{t 'meetings.index.meetings-hero-banner.conference_participants_help_text'}} -

-
-
- - {{t 'meetings.index.meetings-hero-banner.conference_participants_upload_button'}} - +

+ {{t 'meetings.index.meetings-hero-banner.conference_organizers_h3'}} +

+

+ {{t 'meetings.index.meetings-hero-banner.conference_organizers_help_text'}} +

+
+ +
+ + +
+ {{t 'meetings.index.meetings-hero-banner.conference_organizers_register_panel_texts' htmlSafe=true}}
- - -
- {{t 'meetings.index.meetings-hero-banner.conference_participants_upload_panel_texts' htmlSafe=true}} -
- - -
+ + +
+
+
+
+

+ {{t 'meetings.index.meetings-hero-banner.conference_participants_h3'}} +

+

+ {{t 'meetings.index.meetings-hero-banner.conference_participants_help_text'}} +

+
+ +
+ + +
+ {{t 'meetings.index.meetings-hero-banner.conference_participants_upload_panel_texts' htmlSafe=true}} +
+ +
\ No newline at end of file diff --git a/app/meetings/index/-components/meetings-list/component.ts b/app/meetings/index/-components/meetings-list/component.ts index 65eae0b8c80..1c0f6443ec9 100644 --- a/app/meetings/index/-components/meetings-list/component.ts +++ b/app/meetings/index/-components/meetings-list/component.ts @@ -1,9 +1,12 @@ import Component from '@ember/component'; import { action, computed } from '@ember/object'; import { waitFor } from '@ember/test-waiters'; +import { inject as service } from '@ember/service'; +import Media from 'ember-responsive'; import { restartableTask, timeout } from 'ember-concurrency'; export default class MeetingsList extends Component { + @service media!: Media; // Private properties search?: string; sort = '-submissions_count'; @@ -31,4 +34,8 @@ export default class MeetingsList extends Component { sortMeetings(sort: string) { this.set('sort', sort); } + + get isMobile() { + return this.media.isMobile; + } } diff --git a/app/meetings/index/-components/meetings-list/styles.scss b/app/meetings/index/-components/meetings-list/styles.scss index b3cedd36271..91d85902391 100644 --- a/app/meetings/index/-components/meetings-list/styles.scss +++ b/app/meetings/index/-components/meetings-list/styles.scss @@ -1,4 +1,7 @@ -.min_5_submissions { +// stylelint-disable max-nesting-depth, selector-max-compound-selectors + +.minimum-submission-container { + width: 100%; font-size: 85%; } @@ -24,23 +27,38 @@ } } -.search { - display: inline-block; +.search-container { width: 100%; background: #efefef; margin: 0 0 10px; padding: 7px; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: flex-start; + + .search { + width: 50%; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + + &.mobile { + width: 100%; + } - input { - float: right; - width: 100%; - padding: 6px 12px; - border: 1px solid #ccc; - - &:focus { - border-color: #66afe9; - outline: 0; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + .search-input { + float: right; + width: 100%; + padding: 6px 12px; + border: 1px solid #ccc; + + &:focus { + border-color: #66afe9; + outline: 0; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); + } } } } diff --git a/app/meetings/index/-components/meetings-list/template.hbs b/app/meetings/index/-components/meetings-list/template.hbs index 33a62fe6b32..453f0902a57 100644 --- a/app/meetings/index/-components/meetings-list/template.hbs +++ b/app/meetings/index/-components/meetings-list/template.hbs @@ -1,10 +1,11 @@ -

+

{{t 'meetings.index.meetings-list.min_5_submissions'}}

-
-
+
+
-
-
-
- -
+
+
+
diff --git a/app/models/preprint-provider.ts b/app/models/preprint-provider.ts index 2ea03a9a80a..7661f66766f 100644 --- a/app/models/preprint-provider.ts +++ b/app/models/preprint-provider.ts @@ -1,8 +1,9 @@ -import { attr, hasMany, AsyncHasMany } from '@ember-data/model'; +import { attr, hasMany, AsyncHasMany, belongsTo, AsyncBelongsTo } from '@ember-data/model'; import { computed } from '@ember/object'; import { alias } from '@ember/object/computed'; import { inject as service } from '@ember/service'; import Intl from 'ember-intl/services/intl'; +import BrandModel from 'ember-osf-web/models/brand'; import { RelatedLinkMeta } from 'osf-api'; @@ -25,6 +26,9 @@ export default class PreprintProviderModel extends ProviderModel { @attr('boolean', { allowNull: true }) reviewsCommentsPrivate!: boolean | null; // Relationships + @belongsTo('brand') + brand!: AsyncBelongsTo & BrandModel; + @hasMany('preprint', { inverse: 'provider' }) preprints!: AsyncHasMany; diff --git a/app/not-found/styles.scss b/app/not-found/styles.scss new file mode 100644 index 00000000000..953099864e2 --- /dev/null +++ b/app/not-found/styles.scss @@ -0,0 +1,17 @@ +// stylelint-disable max-nesting-depth, selector-max-compound-selectors + +.not-found-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + width: 100%; + + .not-found { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: calc(100% - 60px); + } +} diff --git a/app/not-found/template.hbs b/app/not-found/template.hbs index d58931325de..6dc1a78b7f6 100644 --- a/app/not-found/template.hbs +++ b/app/not-found/template.hbs @@ -1,8 +1,6 @@ -
-
-
-

{{t 'not_found.title'}}

-

{{t 'not_found.body' supportEmail=this.supportEmail htmlSafe=true}}

-
+
+
+

{{t 'not_found.title'}}

+

{{t 'not_found.body' supportEmail=this.supportEmail htmlSafe=true}}

diff --git a/app/register/styles.scss b/app/register/styles.scss index aff1a0ccac0..88498a06116 100644 --- a/app/register/styles.scss +++ b/app/register/styles.scss @@ -90,3 +90,38 @@ background-color: $color-bg-gray-light; } } + +.row { + margin-right: -15px; + margin-left: -15px; +} + +.row::before, +.row::after { + display: table; + content: ' '; +} + +.row::after { + clear: both; +} + +.m-t-xl { + margin-top: 50px; +} + +.m-b-xl { + margin-bottom: 50px; +} + +.p-md { + padding: 15px; +} + +.m-sm { + margin: 10px; +} + +.m-md { + margin: 15px; +} diff --git a/app/register/template.hbs b/app/register/template.hbs index 695c3ebe5fd..a8bdeab2d55 100644 --- a/app/register/template.hbs +++ b/app/register/template.hbs @@ -1,7 +1,7 @@ {{page-title (t 'routes.register.sign_up')}}
-
-
+
+
{{#if this.hasProvider}}

@@ -34,9 +34,9 @@ local-class='osf-service-logo' > {{/if}} -

{{t 'routes.register.create_a_free_account'}}

-

{{t 'routes.register.sign_up_using'}}

-
+

{{t 'routes.register.create_a_free_account'}}

+

{{t 'routes.register.sign_up_using'}}

+
-
+
diff --git a/app/router.ts b/app/router.ts index 1bd1968b012..06be6e4c76a 100644 --- a/app/router.ts +++ b/app/router.ts @@ -41,7 +41,6 @@ Router.map(function() { this.route('create'); }); }); - this.route('support'); this.route('meetings', function() { this.route('detail', { path: '/:meeting_id' }); }); diff --git a/app/services/meta-tags.ts b/app/services/meta-tags.ts index ba9ba121537..70400f362ee 100644 --- a/app/services/meta-tags.ts +++ b/app/services/meta-tags.ts @@ -53,10 +53,15 @@ export interface LinkMetaTagAttrs { href: string; } -export type MetaTagAttrs = NameMetaTagAttrs | PropMetaTagAttrs | LinkMetaTagAttrs; +export interface ScriptTagAttrs { + type: string; +} + +export type MetaTagAttrs = NameMetaTagAttrs | PropMetaTagAttrs | LinkMetaTagAttrs | ScriptTagAttrs; export interface HeadTagDef { type: string; + content?: string; attrs: MetaTagAttrs; } diff --git a/app/settings/account/-components/change-password/styles.scss b/app/settings/account/-components/change-password/styles.scss index e69de29bb2d..b1c69f6fe9b 100644 --- a/app/settings/account/-components/change-password/styles.scss +++ b/app/settings/account/-components/change-password/styles.scss @@ -0,0 +1,3 @@ +.password-form input { + margin-bottom: 20px; +} diff --git a/app/settings/account/-components/change-password/template.hbs b/app/settings/account/-components/change-password/template.hbs index 51fb6cf3b0d..9ff31a52f89 100644 --- a/app/settings/account/-components/change-password/template.hbs +++ b/app/settings/account/-components/change-password/template.hbs @@ -4,7 +4,7 @@ > -
+ {{#let (component 'validated-input/text') as |ValidatedTextInput| }} {{/let}} - {{t 'settings.account.changePassword.updateButton'}} - +
diff --git a/app/settings/account/-components/connected-emails/styles.scss b/app/settings/account/-components/connected-emails/styles.scss index 9448925fa94..7a5e0069d99 100644 --- a/app/settings/account/-components/connected-emails/styles.scss +++ b/app/settings/account/-components/connected-emails/styles.scss @@ -73,3 +73,18 @@ .add-email-button { margin-left: 8px; } + +.clearfix::before, +.clearfix::after { + display: table; + content: ' '; +} + +.clearfix::after { + clear: both; +} + +.modal-title { + margin: 0; + line-height: $tall-line-height; +} diff --git a/app/settings/account/-components/connected-emails/template.hbs b/app/settings/account/-components/connected-emails/template.hbs index d0e5fce8001..0eaaa6b5612 100644 --- a/app/settings/account/-components/connected-emails/template.hbs +++ b/app/settings/account/-components/connected-emails/template.hbs @@ -33,20 +33,20 @@ as |list| > -
+
{{#if email}}
{{email.emailAddress}}
- {{t 'settings.account.connected_emails.make_primary'}} - + -
+
{{t 'settings.account.connected_emails.no_alternate_emails'}}
@@ -90,33 +90,32 @@ as |list| > -
+
{{#if email}}
{{email.emailAddress}}
- {{t 'settings.account.connected_emails.resend_confirmation'}} - - + - -

+ +

{{t 'settings.account.connected_emails.resend_confirmation_modal.title'}}

- + - +

{{t 'settings.account.connected_emails.resend_confirmation_modal.body' @@ -124,28 +123,28 @@ htmlSafe=true }}

- + - - {{t 'general.cancel'}} - - + + + -
+
{{t 'settings.account.connected_emails.no_unconfirmed_emails'}}
@@ -186,7 +185,7 @@ @placeholder={{t 'settings.account.connected_emails.placeholder_text'}} @ariaLabel={{t 'settings.account.connected_emails.placeholder_text'}} /> - {{t 'settings.account.connected_emails.add_email'}} - + - - -

+ +

{{t 'settings.account.connected_emails.add_email_modal.title'}}

- + - +

{{t 'settings.account.connected_emails.add_email_modal.body' emailAddress=this.lastUserEmail htmlSafe=true}}

- + - - {{t 'general.close'}} - - - + + +

diff --git a/app/settings/account/-components/default-region/template.hbs b/app/settings/account/-components/default-region/template.hbs index 8b40b047c45..663efd108cc 100644 --- a/app/settings/account/-components/default-region/template.hbs +++ b/app/settings/account/-components/default-region/template.hbs @@ -29,7 +29,7 @@

{{t 'settings.account.defaultRegion.why'}}

- {{t 'settings.account.defaultRegion.updateButton'}} - + diff --git a/app/settings/account/-components/request-deactivation/styles.scss b/app/settings/account/-components/request-deactivation/styles.scss new file mode 100644 index 00000000000..c40679e7709 --- /dev/null +++ b/app/settings/account/-components/request-deactivation/styles.scss @@ -0,0 +1,3 @@ +.warning-alert { + margin-bottom: 20px; +} diff --git a/app/settings/account/-components/request-deactivation/template.hbs b/app/settings/account/-components/request-deactivation/template.hbs index cd9693f863f..23a9f9517bd 100644 --- a/app/settings/account/-components/request-deactivation/template.hbs +++ b/app/settings/account/-components/request-deactivation/template.hbs @@ -4,104 +4,108 @@ > - - {{t 'settings.account.deactivation.warning'}} - {{t 'settings.account.deactivation.warningText'}} - +
+ + {{t 'settings.account.deactivation.warning'}} + {{t 'settings.account.deactivation.warningText'}} + +

{{t 'settings.account.deactivation.body' htmlSafe=true}}

{{#if (or this.loadSettings.isRunning this.saveSettings.isRunning)}} - + {{else}} {{#if this.user.settings.deactivationRequested}}

{{t 'settings.account.deactivation.pending'}}

- {{t 'settings.account.deactivation.undoRequestButton'}} - + {{else}} - {{t 'settings.account.deactivation.requestButton'}} - + {{/if}} {{/if}} - - +

{{t 'settings.account.deactivation.confirmationTitle'}}

- - + + {{t 'settings.account.deactivation.confirmationBody'}} - - - + + + + - - +

{{t 'settings.account.deactivation.undoRequestConfirmationTitle'}}

- - + + {{t 'settings.account.deactivation.undoRequestConfirmationBody'}} - - - + + + + diff --git a/app/settings/account/-components/security/styles.scss b/app/settings/account/-components/security/styles.scss index 1f75f157888..0adb33fb348 100644 --- a/app/settings/account/-components/security/styles.scss +++ b/app/settings/account/-components/security/styles.scss @@ -14,3 +14,15 @@ padding-top: 1em; } } + +.bg-danger { + background-color: #f2dede; +} + +.scan-image code { + color: $color-red; +} + +.verification-code input { + margin-bottom: 20px; +} diff --git a/app/settings/account/-components/security/template.hbs b/app/settings/account/-components/security/template.hbs index d7d0c88a362..f01f4319410 100644 --- a/app/settings/account/-components/security/template.hbs +++ b/app/settings/account/-components/security/template.hbs @@ -18,7 +18,7 @@ {{t 'settings.account.security.why'}}

{{#if (and this.settings.twoFactorEnabled (not this.settings.twoFactorConfirmed))}} -

+

{{t 'settings.account.security.importantWarning'}}

@@ -27,7 +27,7 @@

{{t 'settings.account.security.onceVerified'}}

-

+

{{t 'settings.account.security.scanImage' secretKey=this.settings.secret htmlSafe=true}}

-
+
{{/if}} - {{t 'settings.account.security.submitVerification'}} - - +
{{/if}} {{#if (and this.settings.twoFactorEnabled this.settings.twoFactorConfirmed)}} - {{t 'settings.account.security.disableTwoFactor'}} - + {{else if (not this.settings.twoFactorEnabled)}} - {{t 'settings.account.security.enableTwoFactor'}} - + {{/if}} {{/if}} - - +

{{t 'settings.account.security.enableTwoFactor'}}

- - + + {{t 'settings.account.security.enableWarning'}} - - - + + + + - - +

{{t 'settings.account.security.disableTwoFactor'}}

- - + + {{t 'settings.account.security.disableWarning'}} - - - + + + + diff --git a/app/settings/controller.ts b/app/settings/controller.ts index 0251898197b..56e8fb80498 100644 --- a/app/settings/controller.ts +++ b/app/settings/controller.ts @@ -1,12 +1,28 @@ import Controller from '@ember/controller'; +import RouterService from '@ember/routing/router-service'; import { inject as service } from '@ember/service'; import Analytics from 'ember-osf-web/services/analytics'; import CurrentUser from 'ember-osf-web/services/current-user'; +import Media from 'ember-responsive'; +import { tracked } from 'tracked-built-ins'; export default class SettingsController extends Controller { @service analytics!: Analytics; @service currentUser!: CurrentUser; + @service media!: Media; + @service router!: RouterService; - navCollapsed = true; + @tracked navCollapsed = true; + + get shouldShowNavLinks() { + if (this.media.isMobile){ + return !this.navCollapsed; + } + return true; + } + + get isMobile() { + return this.media.isMobile; + } } diff --git a/app/settings/developer-apps/-components/app-form/styles.scss b/app/settings/developer-apps/-components/app-form/styles.scss new file mode 100644 index 00000000000..158b7582e52 --- /dev/null +++ b/app/settings/developer-apps/-components/app-form/styles.scss @@ -0,0 +1,4 @@ +.dev-apps-form input, +.dev-apps-form textarea { + margin-bottom: 20px; +} diff --git a/app/settings/developer-apps/-components/app-form/template.hbs b/app/settings/developer-apps/-components/app-form/template.hbs index 595dc423731..2ca0a872434 100644 --- a/app/settings/developer-apps/-components/app-form/template.hbs +++ b/app/settings/developer-apps/-components/app-form/template.hbs @@ -6,33 +6,35 @@ @changeset={{this.changeset}} as |form| > - - - - +
+ + + + +
{{#if this.createMode}} - {{t 'settings.developer-apps.createApp'}} - + {{else}} - {{t 'general.save'}} - + {{/if}}
diff --git a/app/settings/developer-apps/-components/client-secret/template.hbs b/app/settings/developer-apps/-components/client-secret/template.hbs index 12a656b3377..b4f01a94eb9 100644 --- a/app/settings/developer-apps/-components/client-secret/template.hbs +++ b/app/settings/developer-apps/-components/client-secret/template.hbs @@ -9,10 +9,10 @@ />

- {{#if this.shouldShowSecret}} @@ -21,7 +21,7 @@ {{t 'settings.developer-apps.showSecret'}} {{/if}} - + {{t 'settings.developer-apps.createApp'}} diff --git a/app/settings/profile/name/-components/name/template.hbs b/app/settings/profile/name/-components/name/template.hbs index feefec6f834..e69de29bb2d 100644 --- a/app/settings/profile/name/-components/name/template.hbs +++ b/app/settings/profile/name/-components/name/template.hbs @@ -1,62 +0,0 @@ - - - {{t 'settings.profile.name.instructions'}} - -

{{t 'settings.profile.name.citationName'}}

- - - - - - - {{settings/profile/name/-components/citation-preview user=this.user}} -
- - {{t 'validated_input_form.discard_changes'}} - - - {{t 'general.save'}} - -
- diff --git a/app/settings/profile/name/styles.scss b/app/settings/profile/name/styles.scss new file mode 100644 index 00000000000..33ac2b31420 --- /dev/null +++ b/app/settings/profile/name/styles.scss @@ -0,0 +1,34 @@ +.clearfix::before, +.clearfix::after { + display: table; + content: ' '; +} + +.clearfix::after { + clear: both; +} + +.panel { + margin-bottom: 20px; + background-color: $color-bg-white; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); +} + +.panel-default { + border-color: $color-border-gray; +} + +.panel-heading { + color: $color-text-black; + background-color: #f5f5f5; + border-color: $color-border-gray; +} + +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: 16px; + color: inherit; +} diff --git a/app/settings/profile/name/template.hbs b/app/settings/profile/name/template.hbs index 48d81f72cd3..e0ae545fdfd 100644 --- a/app/settings/profile/name/template.hbs +++ b/app/settings/profile/name/template.hbs @@ -1,7 +1,7 @@ {{page-title (t 'settings.profile.name.title')}} -
-
-

{{t 'settings.profile.name.title'}}

+
+
+

{{t 'settings.profile.name.title'}}

{{settings/profile/name/-components/name user=this.user diff --git a/app/settings/styles.scss b/app/settings/styles.scss index 1a3d82bb3a1..63f04204826 100644 --- a/app/settings/styles.scss +++ b/app/settings/styles.scss @@ -1,22 +1,105 @@ -@media(min-width: $screen-md-min) { - .SideNav.SideNav { - display: block; +// stylelint-disable max-nesting-depth, selector-max-compound-selectors + +.settings-container { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + + &.mobile { + .setting-container { + flex-direction: column; + + .profile-container { + width: 100%; + } + + .navigation-container { + width: 100%; + } + } + } + + .setting-container { + width: 90%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + + .local-page-header { + width: 100%; + } + + .navigation-toggle { + color: $color-text-black; + float: right; + font-size: large; + padding: 0; + line-height: 1em; + } + + .navigation-container { + width: calc(30% - 25px); + + .stacked-nav { + ul { + list-style: none; + padding-left: 0; + } + + a:global(.active) { + color: $color-text-white; + } + + li > a { + position: relative; + display: block; + padding: 10px 15px; + border-radius: 0; + text-decoration: none; + } + + li > a:hover { + text-decoration: none; + } + + li:hover { + background-color: $color-bg-gray-lighter; + } + + :global(.active) { + background-color: $color-bg-blue-dark; + + :hover { + background-color: $color-bg-blue-dark; + } + } + } + } + + .profile-container { + width: 70%; + } } } -.NavToggle { - color: $color-text-black; - float: right; - font-size: large; - padding: 0; - line-height: 1em; +.page-header { + padding-bottom: 9px; + margin: 40px 0 20px; + border-bottom: 1px solid $color-border-gray; } -.ProfileNav { - margin-left: 20px; - display: none; +.panel { + margin-bottom: 20px; + background-color: $color-bg-white; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } -:global(.active) .ProfileNav { - display: block; + +.panel-default { + border-color: $color-border-gray; } diff --git a/app/settings/template.hbs b/app/settings/template.hbs index c21295cadf6..8014f7c9626 100644 --- a/app/settings/template.hbs +++ b/app/settings/template.hbs @@ -1,118 +1,86 @@ -
-
-
-

- {{t 'general.settings'}} +
+
+

+ {{t 'general.settings'}} + {{#if this.isMobile}} -

-
+ {{/if}} +

-
-
- -
- - - - {{t 'settings.profile.title'}} - - - - - {{t 'settings.profile.name.title'}} - - - - - {{t 'settings.profile.social.title'}} - - - - - {{t 'settings.profile.education.title'}} - - - - - {{t 'settings.profile.employment.title'}} - - - - - - - {{t 'settings.account.title'}} - - - - - {{t 'settings.addons.title'}} - - - - - {{t 'settings.notifications.title'}} - - - - - {{t 'settings.developer-apps.title'}} - - - - - {{t 'settings.tokens.title'}} - - - +
+
+ {{#if this.shouldShowNavLinks}} +
+
- + {{/if}}
-
+
{{#if this.currentUser.user}} {{outlet}} {{/if}} diff --git a/app/settings/tokens/-components/create-form/component.ts b/app/settings/tokens/-components/create-form/component.ts new file mode 100644 index 00000000000..e4519825338 --- /dev/null +++ b/app/settings/tokens/-components/create-form/component.ts @@ -0,0 +1,65 @@ +import Component from '@glimmer/component'; +import { alias } from '@ember/object/computed'; +import RouterService from '@ember/routing/router-service'; +import { inject as service } from '@ember/service'; +import Store from '@ember-data/store'; +import { BufferedChangeset } from 'ember-changeset/types'; +import { task } from 'ember-concurrency'; + +import Intl from 'ember-intl/services/intl'; +import Toast from 'ember-toastr/services/toast'; + +import Token from 'ember-osf-web/models/token'; +import Analytics from 'ember-osf-web/services/analytics'; +import buildChangeset from 'ember-osf-web/utils/build-changeset'; +import { ValidationObject } from 'ember-changeset-validations'; +import { validatePresence } from 'ember-changeset-validations/validators'; + + +export default class CreateFormComponent extends Component { + @service analytics!: Analytics; + @service intl!: Intl; + @service router!: RouterService; + @service toast!: Toast; + @service store!: Store; + + allScopes = this.store.findAll('scope'); + + token!: Token; + changeset!: BufferedChangeset; + validation: ValidationObject = { + name: [ + validatePresence({ + type: 'empty', + presence: true, + }), + ], + scopes: [ + validatePresence({ + type: 'blank', + presence: true, + }), + ], + }; + @alias('onSave.isRunning') disabled!: boolean; + + constructor(owner: unknown, args: object) { + super(owner, args); + this.token = this.store.createRecord('token'); + this.changeset = buildChangeset(this.token, this.validation); + } + + @task + async onSave() { + try { + this.changeset.validate(); + if (this.changeset.isValid) { + await this.changeset.save(); + this.toast.success(this.intl.t('settings.tokens.created')); + this.router.transitionTo('settings.tokens.edit', this.token.get('id')); + } + } catch { + this.toast.error(this.intl.t('settings.tokens.create-error')); + } + } +} diff --git a/app/settings/tokens/-components/token-form/styles.scss b/app/settings/tokens/-components/create-form/styles.scss similarity index 100% rename from app/settings/tokens/-components/token-form/styles.scss rename to app/settings/tokens/-components/create-form/styles.scss diff --git a/app/settings/tokens/-components/token-form/template.hbs b/app/settings/tokens/-components/create-form/template.hbs similarity index 73% rename from app/settings/tokens/-components/token-form/template.hbs rename to app/settings/tokens/-components/create-form/template.hbs index 28fde41f2b7..1508904da21 100644 --- a/app/settings/tokens/-components/token-form/template.hbs +++ b/app/settings/tokens/-components/create-form/template.hbs @@ -1,9 +1,7 @@ -
- - {{yield (hash - disabled=this.inputsDisabled - )}} - + + \ No newline at end of file diff --git a/app/settings/tokens/-components/edit-form/component.ts b/app/settings/tokens/-components/edit-form/component.ts new file mode 100644 index 00000000000..05cd6e5e4bd --- /dev/null +++ b/app/settings/tokens/-components/edit-form/component.ts @@ -0,0 +1,77 @@ +import Store from '@ember-data/store'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { alias } from '@ember/object/computed'; +import RouterService from '@ember/routing/router-service'; +import { inject as service } from '@ember/service'; +import { task } from 'ember-concurrency'; +import Intl from 'ember-intl/services/intl'; +import Toast from 'ember-toastr/services/toast'; + +import Token from 'ember-osf-web/models/token'; +import { BufferedChangeset } from 'ember-changeset/types'; +import buildChangeset from 'ember-osf-web/utils/build-changeset'; +import { ValidationObject } from 'ember-changeset-validations'; +import { validatePresence } from 'ember-changeset-validations/validators'; + +interface Args { + token: Token; +} + +export default class TokenForm extends Component { + @service intl!: Intl; + @service router!: RouterService; + @service toast!: Toast; + @service store!: Store; + + @alias('onSave.isRunning') disabled!: boolean; + allScopes = this.store.findAll('scope'); + + // Optional arguments + token!: Token; // If not provided, new token created by validated-model-form + changeset!: BufferedChangeset; + validation: ValidationObject = { + name: [ + validatePresence({ + type: 'empty', + presence: true, + }), + ], + scopes: [ + validatePresence({ + type: 'blank', + presence: true, + }), + ], + }; + constructor(owner: unknown, args: Args) { + super(owner, args); + this.token = args.token; + this.changeset = buildChangeset(this.token, this.validation); + } + + @task + async onSave() { + try { + this.changeset.validate(); + if (this.changeset.isValid) { + await this.changeset.save(); + this.toast.success(this.intl.t('settings.tokens.saved')); + this.router.transitionTo('settings.tokens'); + } + } catch { + this.toast.error(this.intl.t('settings.tokens.save-error')); + } + } + + @action + async deleteToken() { + try { + await this.token!.destroyRecord(); + this.toast.success(this.intl.t('settings.tokens.deleted')); + this.router.transitionTo('settings.tokens'); + } catch { + this.toast.error(this.intl.t('settings.tokens.delete-error')); + } + } +} diff --git a/app/settings/tokens/-components/edit-form/styles.scss b/app/settings/tokens/-components/edit-form/styles.scss new file mode 100644 index 00000000000..02b818f9820 --- /dev/null +++ b/app/settings/tokens/-components/edit-form/styles.scss @@ -0,0 +1,11 @@ +.Scope { + display: flex; + + input { + flex-shrink: 0; + } +} + +.Scope__description { + font-weight: normal; +} diff --git a/app/settings/tokens/-components/edit-form/template.hbs b/app/settings/tokens/-components/edit-form/template.hbs new file mode 100644 index 00000000000..1f1099ec429 --- /dev/null +++ b/app/settings/tokens/-components/edit-form/template.hbs @@ -0,0 +1,55 @@ + + + +
+ +

{{t 'settings.tokens.scopesDescription'}}

+ + +
+ {{cb.checkbox}} + +
+ +
+ + + + + diff --git a/app/settings/tokens/-components/token-form/component.ts b/app/settings/tokens/-components/token-form/component.ts deleted file mode 100644 index 41b79e9d168..00000000000 --- a/app/settings/tokens/-components/token-form/component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import Store from '@ember-data/store'; -import Component from '@ember/component'; -import { inject as service } from '@ember/service'; - -import { requiredAction } from 'ember-osf-web/decorators/component'; -import Token from 'ember-osf-web/models/token'; - -export default class TokenForm extends Component { - // Required arguments - @requiredAction onSave!: (token: Token) => void; - - // Optional arguments - token?: Token; // If not provided, new token created by validated-model-form - disabled?: boolean; - - // Private properties - @service store!: Store; - - allScopes = this.store.findAll('scope'); -} diff --git a/app/settings/tokens/create/controller.ts b/app/settings/tokens/create/controller.ts index f7f3b1c92a3..771ff4d174d 100644 --- a/app/settings/tokens/create/controller.ts +++ b/app/settings/tokens/create/controller.ts @@ -1,22 +1,5 @@ import Controller from '@ember/controller'; -import { action } from '@ember/object'; -import RouterService from '@ember/routing/router-service'; -import { inject as service } from '@ember/service'; -import Intl from 'ember-intl/services/intl'; -import Toast from 'ember-toastr/services/toast'; - -import Token from 'ember-osf-web/models/token'; -import Analytics from 'ember-osf-web/services/analytics'; export default class SettingsTokenCreateController extends Controller { - @service analytics!: Analytics; - @service intl!: Intl; - @service router!: RouterService; - @service toast!: Toast; - @action - onSave(token: Token) { - this.toast.success(this.intl.t('settings.tokens.created')); - this.router.transitionTo('settings.tokens.edit', token.get('id')); - } } diff --git a/app/settings/tokens/create/template.hbs b/app/settings/tokens/create/template.hbs index f5459a8044e..632616ec9e0 100644 --- a/app/settings/tokens/create/template.hbs +++ b/app/settings/tokens/create/template.hbs @@ -11,18 +11,5 @@

{{t 'settings.tokens.createToken'}}

- {{#settings/tokens/-components/token-form - onSave=(action 'onSave') - as |form| - }} - - {{t 'settings.tokens.createToken'}} - - {{/settings/tokens/-components/token-form}} +
\ No newline at end of file diff --git a/app/settings/tokens/edit/controller.ts b/app/settings/tokens/edit/controller.ts index 75247be4137..2027d341f1e 100644 --- a/app/settings/tokens/edit/controller.ts +++ b/app/settings/tokens/edit/controller.ts @@ -20,22 +20,6 @@ export default class SettingsTokensEditController extends Controller { @reads('model.taskInstance.value') token?: Token; - @action - tokenSaved() { - // Analytics handled by `settings/tokens/-components/token-form` - this.toast.success(this.intl.t('settings.tokens.saved')); - this.router.transitionTo('settings.tokens'); - } - - @action - async deleteToken() { - // Analytics handled by delete-button - await this.token!.destroyRecord(); - - this.toast.success(this.intl.t('settings.tokens.deleted')); - this.router.transitionTo('settings.tokens'); - } - @action refresh() { this.clearTokenValue(); diff --git a/app/settings/tokens/edit/styles.scss b/app/settings/tokens/edit/styles.scss index 6fb734a898e..33c893c118f 100644 --- a/app/settings/tokens/edit/styles.scss +++ b/app/settings/tokens/edit/styles.scss @@ -2,3 +2,7 @@ text-align: center; padding: 5px; } + +.bg-danger { + background-color: #f2dede; +} diff --git a/app/settings/tokens/edit/template.hbs b/app/settings/tokens/edit/template.hbs index 9868bcad131..d85971d44de 100644 --- a/app/settings/tokens/edit/template.hbs +++ b/app/settings/tokens/edit/template.hbs @@ -23,7 +23,7 @@ @analyticsLabel='Settings - Tokens - Copy token' />

-

+

{{t 'settings.tokens.createSuccess.warning'}} @@ -31,44 +31,20 @@

{{t 'settings.tokens.createSuccess.instructions'}}

- {{t 'settings.tokens.createSuccess.editScopes'}} - + {{else}}

{{t 'settings.tokens.editToken'}}

{{#if this.model.taskInstance.isError}} {{this.model.taskInstance.error}} {{else}} - {{#settings/tokens/-components/token-form - onSave=(action this.tokenSaved) - token=this.token - disabled=this.model.taskInstance.isRunning - as |form| - }} - - - - {{t 'general.save'}} - - {{/settings/tokens/-components/token-form}} + {{/if}} {{/if}}
diff --git a/app/settings/tokens/index/styles.scss b/app/settings/tokens/index/styles.scss index a2e9b0e106b..26a58b6a897 100644 --- a/app/settings/tokens/index/styles.scss +++ b/app/settings/tokens/index/styles.scss @@ -7,3 +7,40 @@ .Top__explanation { padding-right: 20px; } + +.btn { + display: inline-block; + margin-bottom: 0; + font-weight: 400; + text-align: center; + white-space: nowrap; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + border-radius: 2px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857; + user-select: none; + vertical-align: middle; +} + +.btn-primary { + color: $color-text-white; + background-color: #337ab7; + border-color: #2e6da4; +} + +.btn-primary:focus, +.btn-primary.focus { + color: $color-text-white; + background-color: #286090; + border-color: #122b40; +} + +.btn-primary:hover { + color: $color-text-white; + background-color: #286090; + border-color: #204d74; +} diff --git a/app/settings/tokens/index/template.hbs b/app/settings/tokens/index/template.hbs index 4efc8651613..f204983253e 100644 --- a/app/settings/tokens/index/template.hbs +++ b/app/settings/tokens/index/template.hbs @@ -5,7 +5,7 @@

{{t 'settings.tokens.createToken'}} diff --git a/app/styles/_accessibility.scss b/app/styles/_accessibility.scss index 320449e1a50..a3236b239c3 100644 --- a/app/styles/_accessibility.scss +++ b/app/styles/_accessibility.scss @@ -5,7 +5,7 @@ border-color: darken($brand-success, 5%); &:hover { - background-color: darken($brand-success, 10%); + background-color: darken($brand-success, 10%) !important; border-color: darken($brand-success, 15%); } diff --git a/app/styles/_components.scss b/app/styles/_components.scss index aec3178b695..7aa123fa52c 100644 --- a/app/styles/_components.scss +++ b/app/styles/_components.scss @@ -201,7 +201,7 @@ } } -@media (max-width: 992px) { +@media (max-width: 991px) { #navbarScope div.container { width: 100%; } @@ -231,7 +231,7 @@ } .navbar-nav { - margin: 7.5px -15px; + margin: 7.5px 0 0 -15px; } .navbar-nav>li { @@ -258,7 +258,7 @@ } } -@media (min-width: 993px) { +@media (min-width: 992px) { .nav.navbar-nav { display: flex; float: none; @@ -391,7 +391,7 @@ .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { - background-color: $bg-light; + background-color: inherit; border: none; border-bottom: 2px solid #204762; } @@ -403,7 +403,7 @@ .nav>li>a:hover, .nav>li>a:focus { - background-color: $bg-light; + background-color: inherit; } @@ -422,6 +422,7 @@ #navbarScope a:hover { color: rgba(255, 255, 255, 0.8); + background-color: inherit; } #navbarScope .button-container { @@ -441,6 +442,11 @@ font-size: 15px; } +#navbarScope .btn-top-login:hover { + background-color: #124a5b; + border-color: #0e3946; +} + .navbar-default { background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%); background-repeat: repeat-x; @@ -490,7 +496,7 @@ } .navbar { - min-height: 50px; + height: 50px; margin-bottom: 25px; } @@ -675,6 +681,7 @@ .sign-in { padding-top: 5px; + list-style: none; } #menuLogin { diff --git a/app/styles/_global.scss b/app/styles/_global.scss index 6702899796d..8f5b204eed3 100644 --- a/app/styles/_global.scss +++ b/app/styles/_global.scss @@ -28,3 +28,422 @@ .BlurredInert[inert] { filter: grayscale(100%) blur(5px); } + +// Lifted from Bootstrap for the file upload progress bar in registries +.progress { + height: 20px; + margin-bottom: 0; + overflow: hidden; + background-color: #f5f5f5; + border-radius: 4px; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.progress-bar { + float: left; + width: 0; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #fff; + text-align: center; + background-color: #337ab7; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + transition: width 0.6s ease; +} + +// Lifted from Bootstrap +.jumbotron { + padding-top: 30px; + padding-bottom: 30px; + margin-bottom: 30px; + color: inherit; + background-color: #eee; +} + +.jumbotron h1, +.jumbotron .h1 { + color: inherit; +} + +.jumbotron p { + margin-bottom: 15px; + font-size: 21px; + font-weight: 200; +} + +.jumbotron > hr { + border-top-color: #d5d5d5; +} + +.container .jumbotron, +.container-fluid .jumbotron { + padding-right: 15px; + padding-left: 15px; + border-radius: 6px; +} + +.jumbotron .container { + max-width: 100%; +} + +@media screen and (min-width: 768px) { + .jumbotron { + padding-top: 48px; + padding-bottom: 48px; + } + + .container .jumbotron, + .container-fluid .jumbotron { + padding-right: 60px; + padding-left: 60px; + } + + .jumbotron h1, + .jumbotron .h1 { + font-size: 63px; + } +} + +// Form control from Bootstrap +// stylelint-disable selector-no-qualifying-type + +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; +} + +input[type=search] { + box-sizing: border-box; + appearance: none; +} + +input[type=checkbox], +input[type=radio] { + margin: 4px 0 0; + margin-top: 1px\9; + line-height: normal; +} + +input[type=file] { + display: block; +} + +input[type=range] { + display: block; + width: 100%; +} + +select[multiple], +select[size] { + height: auto; +} + +input[type=file]:focus, +input[type=checkbox]:focus, +input[type=radio]:focus { + outline: -webkit-focus-ring-color auto 5px; + outline-offset: -2px; +} + +output { + display: block; + padding-top: 7px; + font-size: 14px; + line-height: 1.42857; + color: #555; +} + +.form-control { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: $tall-line-height; + color: $color-text-gray; + background-color: $color-bg-white; + background-image: none; + border: 1px solid $color-border-gray; + border-radius: 2px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} + +.form-control:focus { + border-color: #66afe9; + outline: 0; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); +} + +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: #eee; + opacity: 1; +} + +.form-control[disabled], +fieldset[disabled] .form-control { + cursor: not-allowed; +} + +.has-success .form-control { + border-color: #3c763d; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.has-success .form-control:focus { + border-color: #2b542c; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; +} + +.has-warning .form-control { + border-color: #8a6d3b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.has-warning .form-control:focus { + border-color: #66512c; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; +} + +.has-error .form-control { + border-color: #a94442; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.has-error .form-control:focus { + border-color: #843534; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; +} + +// Container classes from Bootstrap +.container { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +.container::before, +.container::after { + display: table; + content: ' '; +} + +.container::after { + clear: both; +} + +@media (min-width: 768px) { + .container { + width: 750px; + } +} + +@media (min-width: 992px) { + .container { + width: 970px; + } +} + +@media (min-width: 1200px) { + .container { + width: 1170px; + } +} + +// Bootstrap Navbar + +.navbar-toggle { + position: relative; + float: right; + padding: 9px 10px; + margin-right: 15px; + margin-top: 8px; + margin-bottom: 8px; + background-color: transparent; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; +} + +.navbar-toggle:focus { + outline: 0; +} + +.navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; +} + +.navbar-toggle .icon-bar+.icon-bar { + margin-top: 4px; +} + +.nav { + padding-left: 0; + margin-bottom: 0; + margin-top: 0; + list-style: none; +} + +.nav::after, +.nav::before { + display: table; + content: ' '; + clear: left; +} + +.nav>li, +.nav>li>a { + display: block; + position: relative; +} + +.nav>li>a { + padding: 10px 15px; +} + +.nav>li.disabled>a { + color: #777; +} + +.nav>li.disabled>a:focus, +.nav>li.disabled>a:hover { + color: #777; + text-decoration: none; + cursor: not-allowed; + background-color: transparent; +} + +.nav .open>a, +.nav .open>a:focus, +.nav .open>a:hover { + background-color: #eee; + border-color: #337ab7; +} + +.nav .nav-divider { + margin: 9px 0; + background-color: #e5e5e5; +} + +.navbar-fixed-top { + position: fixed; + right: 0; + left: 0; + z-index: 1030; +} + +.navbar-inverse .navbar-collapse, +.navbar-inverse .navbar-form { + border-color: #101010; +} + +.container-fluid>.navbar-collapse, +.container-fluid>.navbar-header, +.container>.navbar-collapse, +.container>.navbar-header { + margin-right: -15px; + margin-left: -15px; +} + +@media (min-width: 768px) { + .navbar-fixed-bottom .navbar-collapse, + .navbar-fixed-top .navbar-collapse, + .navbar-static-top .navbar-collapse { + padding-right: 15px; + padding-bottom: 15px; + padding-left: 0; + } +} + +.navbar-fixed-bottom .navbar-collapse, +.navbar-fixed-top .navbar-collapse { + max-height: 340px; +} + +@media (max-width: 991px) { + .navbar-collapse { + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); + min-width: 0; + } + + .navbar-inverse { + .navbar-collapse { + margin-top: 50px; + background-color: #263947; + margin-right: -60px; + padding-left: 15px; + } + } + + .navbar-inverse .navbar-toggle .icon-bar { + background-color: #fff; + } +} + +@media (min-width: 768px) { + .navbar-right { + float: right !important; + margin-right: -15px; + } +} + +@media (min-width: 768px) { + .navbar-collapse { + width: auto; + border-top: 0; + box-shadow: none; + } +} + +.navbar-collapse { + padding-right: 15px; + padding-left: 15px; + overflow-x: visible; + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + + +.visible-sm, +.visible-xs { + display: none !important; +} + +@media (max-width: 767px) { + .visible-xs { + display: block !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm { + display: block !important; + } +} + +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} + +@media (min-width: 768px) { + .navbar-toggle { + display: none; + } +} + +@media (max-width: 992px) { + .navbar-collapse.collapse.in { + display: block !important; + } +} diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss index e1c1861ed8b..aaf92e733c5 100644 --- a/app/styles/_variables.scss +++ b/app/styles/_variables.scss @@ -20,6 +20,7 @@ $mobile-width: 768px; $radius: 2px; $bg-light: #f8f8f8; $border-light: 1px solid #eee; +$tall-line-height: 1.42857; $osf-teal-navbar: #2e6a74; $osf-highlight-navbar: #5a8288; diff --git a/app/styles/headers.scss b/app/styles/headers.scss index 8989658ce24..ce654bede9b 100644 --- a/app/styles/headers.scss +++ b/app/styles/headers.scss @@ -2,7 +2,6 @@ @import 'variables'; // 3rd parties -@import 'ember-bootstrap/bootstrap'; @import 'ember-power-select'; @import 'ember-content-placeholders'; @@ -40,9 +39,246 @@ color: #fff; } +*, +::after, +::before { + box-sizing: border-box; +} + body { -webkit-font-smoothing: antialiased; font-family: 'Open Sans', 'Helvetica Neue', sans-serif !important; + margin: 0; + font-size: 14px; + line-height: 1.42857; +} + +button, +input, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +a { + color: #337ab7; + text-decoration: none; +} + +dl, +ol, +ul { + margin-top: 0; +} + +ol, +ul { + margin-bottom: 10px; +} + +dl { + margin-bottom: 20px; +} + +dd, +dt { + line-height: 1.42857; +} + +dd { + margin-left: 0; +} + +dl, +ol, +ul { + margin-top: 0; +} + +blockquote ol:last-child, +blockquote p:last-child, +blockquote ul:last-child, +ol ol, +ol ul, +ul ol, +ul ul { + margin-bottom: 0; +} + +ol, +ul { + margin-bottom: 10px; +} + +dt, +kbd kbd, +label { + font-weight: 700; +} + +a:focus, +a:hover { + color: #23527c; + text-decoration: underline; +} + +a:focus { + outline: -webkit-focus-ring-color auto 5px; + outline-offset: -2px; +} + +fieldset, +legend { + padding: 0; + border: 0; +} + +fieldset { + min-width: 0; + margin: 0; +} + +legend { + display: block; + width: 100%; + font-size: 21px; + line-height: inherit; + border-bottom: 1px solid #e5e5e5; + margin-bottom: 20px; +} + +figure { + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} + +h1, +h2, +h3 { + margin-top: 20px; + margin-bottom: 10px; +} + +h4, +h5, +h6 { + margin-top: 10px; + margin-bottom: 10px; +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 24px; +} + +h4 { + font-size: 18px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 12px; +} + +p { + margin: 0 0 10px; +} + +img { + vertical-align: middle; +} + +hr, +img { + border: 0; +} + +// Bootstrap navbar +.navbar-nav { + margin: 7.5px -15px; +} + +.navbar-nav>li>a { + padding-top: 10px; + padding-bottom: 10px; + line-height: 20px; +} + +// stylelint-disable selector-max-compound-selectors + +@media (max-width: 767px) { + .navbar-nav .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + } + + .navbar-nav .open .dropdown-menu .dropdown-header, + .navbar-nav .open .dropdown-menu>li>a { + padding: 5px 15px 5px 25px; + } + + .navbar-nav .open .dropdown-menu>li>a { + line-height: 20px; + } + + .navbar-nav .open .dropdown-menu>li>a:focus, + .navbar-nav .open .dropdown-menu>li>a:hover { + background-image: none; + } +} + +@media (min-width: 768px) { + .navbar-toggle { + display: none; + } + + .navbar-nav { + float: left; + margin: 0; + } + + .navbar-nav>li { + float: left; + } + + .navbar-nav>li>a { + padding-top: 15px; + padding-bottom: 15px; + } +} + +.m-b-lg, +.m-v-lg, +.navbar { + margin-bottom: 25px; } @import 'loader'; // Custom sass loader for loaders.css library diff --git a/app/support/controller.ts b/app/support/controller.ts deleted file mode 100644 index 02d886abbd0..00000000000 --- a/app/support/controller.ts +++ /dev/null @@ -1,21 +0,0 @@ -import Controller from '@ember/controller'; -import { inject as service } from '@ember/service'; -import config from 'ember-get-config'; -import Analytics from 'ember-osf-web/services/analytics'; - -export default class Support extends Controller { - @service analytics!: Analytics; - - helpUrl = config.OSF.helpUrl; - - constructor(...args: any[]) { - super(...args); - Object.assign(this, config.support); - } -} - -declare module '@ember/controller' { - interface Registry { - support: Support; - } -} diff --git a/app/support/route.ts b/app/support/route.ts deleted file mode 100644 index e4a4018ef7d..00000000000 --- a/app/support/route.ts +++ /dev/null @@ -1,4 +0,0 @@ -import Route from '@ember/routing/route'; - -export default class Support extends Route { -} diff --git a/app/support/styles.scss b/app/support/styles.scss deleted file mode 100644 index 9f2a30ca3dc..00000000000 --- a/app/support/styles.scss +++ /dev/null @@ -1,33 +0,0 @@ -/* stylelint-disable selector-class-pattern */ - -.Support { - a:not(:global(.btn)), - :global(.btn-link) { - font-weight: bold; - } -} - -.SupportCol { - background: $color-bg-white; - box-shadow: 5px 5px 20px $color-shadow-gray-dark; - min-height: 300px; - display: block; - color: $color-text-black; - - > * { - padding: 20px; - } - - h4, - h4 > a { - font-weight: bold; - color: $color-text-white; - } -} - -@media (max-width: 767px) { - .SupportCol { - margin: 15px; - min-height: 80px; - } -} diff --git a/app/support/template.hbs b/app/support/template.hbs deleted file mode 100644 index e0af6d8f1b0..00000000000 --- a/app/support/template.hbs +++ /dev/null @@ -1,132 +0,0 @@ -{{page-title (t 'support.title')}} -
-

{{t 'support.title'}}

-
-
-
-

- - {{t 'support.faq_title'}} - -

-
-

- {{t 'support.faq_paragraph' faqPageUrl=this.faqPageUrl htmlSafe=true}} -

- - {{t 'support.faq_button'}} - - -
-
-
-
-
-

- - {{t 'support.guides_title'}} - -

-
-

- {{t 'support.guides_paragraph' helpUrl=this.helpUrl htmlSafe=true}} -

- - {{t 'support.guides_button'}} - - -
-
-
-
-
-

{{t 'support.contact_title'}}

-
-

{{t 'support.contact_questions'}}

-

- - {{t 'support.contact_form'}} - -

-
-
-
-
-
-
-
-
{{t 'support.prereg_title'}}
-

- {{t 'support.prereg_paragraph' preregUrl=this.preregUrl htmlSafe=true}} -

-
-
-
{{t 'support.status_title'}}
-

- {{t 'support.status_paragraph' statusPageUrl=this.statusPageUrl htmlSafe=true}} -

-
-
-
{{t 'support.consultation_title'}}
-

- {{t 'support.consultation_paragraph' consultationUrl=this.consultationUrl htmlSafe=true}} -

-
-
-
-
-
-

{{t 'support.social_title'}}

- - {{t 'support.social_twitter'}} - - - {{t 'support.social_mailing'}} - - - {{t 'support.social_facebook'}} - - - {{t 'support.social_github'}} - -
-
-
diff --git a/config/deprecation-workflow.js b/config/deprecation-workflow.js index ba2b8a4a65c..e55a87d60db 100644 --- a/config/deprecation-workflow.js +++ b/config/deprecation-workflow.js @@ -3,7 +3,6 @@ self.deprecationWorkflow.config = { workflow: [ { handler: 'silence', matchId: 'manager-capabilities.modifiers-3-13' }, { handler: 'silence', matchId: 'this-property-fallback' }, - { handler: 'silence', matchId: 'ember-bootstrap.subclassing#Alert' }, { handler: 'silence', matchId: 'routing.transition-methods' }, { handler: 'silence', matchId: 'ember-utils.try-invoke' }, { handler: 'silence', matchId: 'has-block-and-has-block-params' }, diff --git a/ember-cli-build.js b/ember-cli-build.js index c2d5a623a9b..b1740c2f0ca 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -36,11 +36,6 @@ module.exports = function(defaults) { ), ], }, - 'ember-bootstrap': { - bootstrapVersion: 3, - importBootstrapFont: true, - importBootstrapCSS: false, - }, 'ember-composable-helpers': { only: ['compose', 'contains', 'flatten', 'includes', 'range', 'queue', 'map-by', 'without', 'find-by'], }, diff --git a/handbook-docs/analytics/template.md b/handbook-docs/analytics/template.md index f397654626f..ae2500c6eac 100644 --- a/handbook-docs/analytics/template.md +++ b/handbook-docs/analytics/template.md @@ -9,12 +9,12 @@ Tracking clicks is as easy as adding a few `data-` attributes. ### `data-analytics-name` If an element is named with a `data-analytics-name` attribute, click events on that element will be tracked: ```hbs - Create new project - + ``` ### `data-analytics-scope` @@ -39,13 +39,13 @@ and buttons (` ``` ### `data-analytics-extra` diff --git a/handbook-docs/components/bs-alert/demo-danger-hidden/component.ts b/handbook-docs/components/bs-alert/demo-danger-hidden/component.ts deleted file mode 100644 index 51eda586825..00000000000 --- a/handbook-docs/components/bs-alert/demo-danger-hidden/component.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Component from '@ember/component'; - -export default class DemoDangerHiddenComponent extends Component { - hideAlert = false; -} diff --git a/handbook-docs/components/bs-alert/demo-danger-hidden/template.hbs b/handbook-docs/components/bs-alert/demo-danger-hidden/template.hbs deleted file mode 100644 index f5a33c5279f..00000000000 --- a/handbook-docs/components/bs-alert/demo-danger-hidden/template.hbs +++ /dev/null @@ -1,16 +0,0 @@ - - - - Danger, Will Robinson! - - - - - set: hideAlert = {{not this.hideAlert}} - - - - diff --git a/handbook-docs/components/bs-alert/demo-info/template.hbs b/handbook-docs/components/bs-alert/demo-info/template.hbs deleted file mode 100644 index 6bf7371760f..00000000000 --- a/handbook-docs/components/bs-alert/demo-info/template.hbs +++ /dev/null @@ -1,10 +0,0 @@ - - - - Hey! You like info? - This is some fine info - - - - - diff --git a/handbook-docs/components/bs-alert/demo-warn-no-dismiss/template.hbs b/handbook-docs/components/bs-alert/demo-warn-no-dismiss/template.hbs deleted file mode 100644 index e25260513c6..00000000000 --- a/handbook-docs/components/bs-alert/demo-warn-no-dismiss/template.hbs +++ /dev/null @@ -1,13 +0,0 @@ - - - - Uh oh. - I've got a bad feeling about this. - - - - - diff --git a/handbook-docs/components/bs-alert/template.md b/handbook-docs/components/bs-alert/template.md deleted file mode 100644 index a6e16f8ebf5..00000000000 --- a/handbook-docs/components/bs-alert/template.md +++ /dev/null @@ -1,16 +0,0 @@ -# bs-alert - -Generates what is mostly a [boostrap alert](https://www.ember-bootstrap.com/api/classes/Components.Alert.html). - -In addition to the standard look and functionality, we: - - Have a font-awesome close icon to match OSF styling; - - Gave the close button an aria-label to work well with i18n. - -## info -{{docs/components/bs-alert/demo-info}} - -## warning (not dismissible) -{{docs/components/bs-alert/demo-warn-no-dismiss}} - -## danger (hidden) -{{docs/components/bs-alert/demo-danger-hidden}} diff --git a/handbook-docs/components/new-project-modal/demo/template.hbs b/handbook-docs/components/new-project-modal/demo/template.hbs index 128de19acad..8ee34425f1d 100644 --- a/handbook-docs/components/new-project-modal/demo/template.hbs +++ b/handbook-docs/components/new-project-modal/demo/template.hbs @@ -1,31 +1,33 @@ +{{!-- template-lint-disable no-bare-strings --}} - - Create project - - {{#if this.newNode}} - The new node title is "{{this.newNode.title}}". - {{else}} - There is no node. + + {{#if this.newNode}} + The new node title is "{{this.newNode.title}}". + {{else}} + There is no node. + {{/if}} + {{#if this.shouldReload}} + Reload requested. + {{else}} + No reload requested. + {{/if}} + + {{#if this.shouldShowModal}} + {{/if}} - {{#if this.shouldReload}} - Reload requested. - {{else}} - No reload requested. - {{/if}} - - {{#if this.shouldShowModal}} - - {{/if}} - + +{{!-- template-lint-enable no-bare-strings --}} \ No newline at end of file diff --git a/handbook-docs/components/new-project-navigation-modal/demo/template.hbs b/handbook-docs/components/new-project-navigation-modal/demo/template.hbs index 82c949a5e7d..0e573eece13 100644 --- a/handbook-docs/components/new-project-navigation-modal/demo/template.hbs +++ b/handbook-docs/components/new-project-navigation-modal/demo/template.hbs @@ -1,14 +1,15 @@ +{{!-- template-lint-disable no-bare-strings --}} - Create project - + {{#if this.shouldShowModal}} @@ -17,3 +18,4 @@ +{{!-- template-lint-enable no-bare-strings --}} diff --git a/handbook-docs/components/validated-model-form/controller.ts b/handbook-docs/components/validated-model-form/controller.ts deleted file mode 100644 index 0acdd91c77a..00000000000 --- a/handbook-docs/components/validated-model-form/controller.ts +++ /dev/null @@ -1,51 +0,0 @@ -import Controller from '@ember/controller'; -import { action, computed } from '@ember/object'; -import { reads } from '@ember/object/computed'; -import { inject as service } from '@ember/service'; -import DS from 'ember-data'; -import Toast from 'ember-toastr/services/toast'; - -import Node from 'ember-osf-web/models/node'; - -export default class ValidatedModelFormController extends Controller { - @service store!: DS.Store; - @service toast!: Toast; - - @reads('model.taskInstance.value') - existingNode?: Node; - createDirt = false; - editDirt = false; - - // BEGIN-SNIPPET validated-model-form.controller.ts - @action - async onSave() { - if (this.existingNode !== undefined) { - this.toast.success('Saved!'); - } else { - this.toast.error('Nothing to save'); - } - } - - @action - onWillDestroy() { - if (this.get('isDirty')) { - // Do something cool here - } - } - - // Since there are two forms on the page, we need to report on both - @action - changeDirtEditForm(dirt: boolean) { - this.set('editDirt', dirt); - } - @action - changeDirtCreateForm(dirt: boolean) { - this.set('createDirt', dirt); - } - - @computed('createDirt', 'editDirt') - get isDirty() { - return this.createDirt || this.editDirt; - } - // END-SNIPPET -} diff --git a/handbook-docs/components/validated-model-form/demo-create/template.hbs b/handbook-docs/components/validated-model-form/demo-create/template.hbs deleted file mode 100644 index 6668129ea96..00000000000 --- a/handbook-docs/components/validated-model-form/demo-create/template.hbs +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - Save - - - - - - diff --git a/handbook-docs/components/validated-model-form/demo-edit/template.hbs b/handbook-docs/components/validated-model-form/demo-edit/template.hbs deleted file mode 100644 index 3be0c6c6402..00000000000 --- a/handbook-docs/components/validated-model-form/demo-edit/template.hbs +++ /dev/null @@ -1,45 +0,0 @@ - - {{#if this.node}} - - - - - - Cancel - - - Save - - - - - - - - {{/if}} - diff --git a/handbook-docs/components/validated-model-form/route.ts b/handbook-docs/components/validated-model-form/route.ts deleted file mode 100644 index 690fb4ba81f..00000000000 --- a/handbook-docs/components/validated-model-form/route.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { computed } from '@ember/object'; -import Route from '@ember/routing/route'; -import { task } from 'ember-concurrency'; -import ConfirmationMixin from 'ember-onbeforeunload/mixins/confirmation'; - -import ValidatedModelFormController from './controller'; - -export default class ValidatedModelFormRoute extends Route.extend(ConfirmationMixin) { - @task - async modelTask() { - const node = await this.store.findRecord('node', 'extng'); - return node; - } - - model() { - return { - taskInstance: this.modelTask.perform(), - }; - } - - // BEGIN-SNIPPET validated-model-form.route.ts - // This tells ember-onbeforeupload's ConfirmationMixin whether or not to stop transitions - @computed('controller.isDirty') - get isPageDirty() { - const controller = this.controller as ValidatedModelFormController; - return () => controller.get('isDirty'); - } - // END-SNIPPET -} diff --git a/handbook-docs/components/validated-model-form/template.md b/handbook-docs/components/validated-model-form/template.md deleted file mode 100644 index 5ad1440052b..00000000000 --- a/handbook-docs/components/validated-model-form/template.md +++ /dev/null @@ -1,53 +0,0 @@ -# validated-model-form -Helps build validated forms. - -This component is appropriate if: -- You want a form for editing the fields on a model instance -- The model class has validations defined using `ember-cp-validations` - -Renders a `
` element, provides tools to easily build that form, and handles -creating (if necessary), validating, and saving the model. - -### Params -* `onSave(changeset)` (required): Action called after the model is successfully validated and saved. -* `onError(error, changeset)` (optional): Action called if saving the model fails. -* `onWillDestroy()` (optional): Action called if you transition. -* `onDirtChange(dirt: Boolean)` (optional): Action called When validation is run to pass along `changeset.isDirty`. -* `model` (optional): Model instance to edit. A changeset will be created to match. -* `changeset` (optional): Changeset to use for this form. Without this, the form will create a changeset from the model. -* `modelName` (optional): Name of the model to create. -* `modelProperties` (optional): Properties to be passed through to the model on creation. -* `recreateModel` (optional): Boolean to initiate creating a new model instance upon saving. -* `disabled` (default `false`) - -### Yielded hash -When invoked in block form, `validated-model-form` yields a hash with the following keys: - -* `model`: The model instance being created/edited. -* `changeset`: The changeset for this particular form. -* `disabled`: `true` when the model is being saved or the passed-in `disabled` param is `true`. -* `rollback`: Action to allow the form components to rollback the changes -* `submit`: Action to submit the form. Alternately, you can put a `
+ - {{#if this.linksModalShown}} - {{#bs-modal-simple - title=(t 'analytics.links') - closeTitle=(t 'general.close') - onHide=(action 'hideLinksModal') - }} + + + + {{t 'analytics.links'}} + + {{#if this.node}} -
    +
      {{#paginated-list/has-many model=this.node relationshipName='linkedByNodes' @@ -64,66 +64,75 @@ {{else}} {{/if}} - {{/bs-modal-simple}} - {{/if}} + + + + + {{/if}}
-
-
+
+

{{t 'analytics.templateCopies'}}

{{#if this.loading}} {{loading-indicator dark=true}} {{else}} -
{{this.templatedByCount}}
+
{{this.templatedByCount}}
{{/if}}
{{#if this.nodePrivate}} -
-
- {{t 'analytics.privateProject' htmlSafe=true}} -
+
+ {{t 'analytics.privateProject' htmlSafe=true}}
{{else}} {{!nodePrivate}} -
+
{{/if}} -
-
+
{{analytics-charts nodeId=this.model.nodeId timespan=this.timespan diff --git a/lib/analytics-page/addon/components/analytics-charts/component.ts b/lib/analytics-page/addon/components/analytics-charts/component.ts index d63fd595204..d544ff4dae2 100644 --- a/lib/analytics-page/addon/components/analytics-charts/component.ts +++ b/lib/analytics-page/addon/components/analytics-charts/component.ts @@ -3,6 +3,7 @@ import Component from '@glimmer/component'; import { TaskInstance } from 'ember-concurrency'; import Intl from 'ember-intl/services/intl'; import moment, { Duration } from 'moment'; +import Media from 'ember-responsive'; import { Timespan } from 'analytics-page/application/route'; @@ -76,6 +77,7 @@ interface AnalyticsChartArgs { } export default class AnalyticsChart extends Component { + @service media!: Media; @service intl!: Intl; get shouldUseFakeData(): boolean { @@ -378,4 +380,8 @@ export default class AnalyticsChart extends Component { } return this.intl.t('general.home'); } + + get isMobile() { + return this.media.isMobile; + } } diff --git a/lib/analytics-page/addon/components/analytics-charts/styles.scss b/lib/analytics-page/addon/components/analytics-charts/styles.scss new file mode 100644 index 00000000000..39c90cbf3b2 --- /dev/null +++ b/lib/analytics-page/addon/components/analytics-charts/styles.scss @@ -0,0 +1,19 @@ +.chart-container { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + + .chart { + width: calc(50% - 20px); + margin-left: 10px; + margin-right: 10px; + + &.mobile { + width: 100%; + margin: 0; + } + } +} diff --git a/lib/analytics-page/addon/components/analytics-charts/template.hbs b/lib/analytics-page/addon/components/analytics-charts/template.hbs index 7ac97af8dcd..f315a9d52af 100644 --- a/lib/analytics-page/addon/components/analytics-charts/template.hbs +++ b/lib/analytics-page/addon/components/analytics-charts/template.hbs @@ -1,6 +1,6 @@ -
+
{{#each this.chartSpecs as |chartSpec|}} -
+
{{analytics-charts/x-chart-wrapper chartSpec=chartSpec chartEnabled=@chartsEnabled diff --git a/lib/analytics-page/addon/components/analytics-charts/x-chart-wrapper/styles.scss b/lib/analytics-page/addon/components/analytics-charts/x-chart-wrapper/styles.scss index d7bcc27b7cd..982c09eeec5 100644 --- a/lib/analytics-page/addon/components/analytics-charts/x-chart-wrapper/styles.scss +++ b/lib/analytics-page/addon/components/analytics-charts/x-chart-wrapper/styles.scss @@ -39,3 +39,41 @@ .ChartContainer { position: relative; } + +.panel { + margin-bottom: 20px; + background-color: #fff; + border: 1px solid transparent; + border-radius: 0; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); + border-color: #ddd; +} + +.panel-body { + padding: 15px; +} + +.panel-title { + float: left; + font-weight: 400; + margin-top: 0; + margin-bottom: 0; + font-size: 16px; + color: inherit; +} + +.panel-heading { + color: #333; + background-color: #f5f5f5; + border-color: #ddd; + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom: 1px solid transparent; + padding: 10px 15px; + display: inline-block; + width: 100%; +} + +.clearfix::after { + clear: both; +} diff --git a/lib/analytics-page/addon/components/analytics-charts/x-chart-wrapper/template.hbs b/lib/analytics-page/addon/components/analytics-charts/x-chart-wrapper/template.hbs index b7dea45160c..d4427b18681 100644 --- a/lib/analytics-page/addon/components/analytics-charts/x-chart-wrapper/template.hbs +++ b/lib/analytics-page/addon/components/analytics-charts/x-chart-wrapper/template.hbs @@ -1,11 +1,10 @@
-
-

{{t @chartSpec.titleKey}}

+
+

{{t @chartSpec.titleKey}}

-
+
li > a { line-height: 27px !important; } } + +@media (max-width: 991px) { + .links > li > a:hover { + background-color: #263947; + } + + .secondary-navigation { + min-width: 210px; + position: absolute; + right: 0; + } +} diff --git a/lib/app-components/addon/components/branded-navbar/template.hbs b/lib/app-components/addon/components/branded-navbar/template.hbs index c4c6b334394..c9db3e9233a 100644 --- a/lib/app-components/addon/components/branded-navbar/template.hbs +++ b/lib/app-components/addon/components/branded-navbar/template.hbs @@ -16,74 +16,74 @@ {{! Navigation toggle - XS screen }} - + {{#if this.isMobileOrTablet}} + + {{/if}}
{{! Secondary nav links }} - - - +
+ {{/if}}
diff --git a/lib/app-components/addon/components/error-page/styles.scss b/lib/app-components/addon/components/error-page/styles.scss index 56824f3707c..7d353a39d34 100644 --- a/lib/app-components/addon/components/error-page/styles.scss +++ b/lib/app-components/addon/components/error-page/styles.scss @@ -1,7 +1,33 @@ -// .header-error { -// padding-top: 70px; +.error-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + + .error { + width: 100%; + } +} -// .container { -// margin-bottom: 60px; -// } -// } +.button { + margin-top: 15px; + border-radius: 2px; + color: #fff; + background-color: #337ab7; + border-color: #2e6da4; + display: inline-block; + margin-bottom: 0; + font-weight: normal; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + padding: 6px 12px; + font-size: 14px; + line-height: $tall-line-height; + user-select: none; +} diff --git a/lib/app-components/addon/components/error-page/template.hbs b/lib/app-components/addon/components/error-page/template.hbs index 11ce63d22f1..ff51d6bca4d 100644 --- a/lib/app-components/addon/components/error-page/template.hbs +++ b/lib/app-components/addon/components/error-page/template.hbs @@ -1,37 +1,35 @@ {{page-title (t (concat this.translateKey '.heading'))}} -
-
-
-

{{t (concat this.translateKey '.heading')}}

-

- {{t (concat this.translateKey '.message') brand=(t 'general.services.collections')}} -
- - {{t 'app_components.error_page.email_message'}} - - {{this.supportEmail}} - - -

- {{#if this.theme.isProvider}} +
+
+

{{t (concat this.translateKey '.heading')}}

+

+ {{t (concat this.translateKey '.message') brand=(t 'general.services.collections')}} +
+ + {{t 'app_components.error_page.email_message'}} - {{t 'app_components.error_page.go_to' - brand=(t @brandKey name=this.theme.provider.name) - }} + {{this.supportEmail}} - {{else}} - - {{t 'app_components.error_page.go_to' brand=(t 'general.OSF')}} - - {{/if}} -

+ +

+ {{#if this.theme.isProvider}} + + {{t 'app_components.error_page.go_to' + brand=(t @brandKey name=this.theme.provider.name) + }} + + {{else}} + + {{t 'app_components.error_page.go_to' brand=(t 'general.OSF')}} + + {{/if}}
diff --git a/lib/app-components/addon/components/project-contributors/component.ts b/lib/app-components/addon/components/project-contributors/component.ts index a849c310123..8324b53d05b 100644 --- a/lib/app-components/addon/components/project-contributors/component.ts +++ b/lib/app-components/addon/components/project-contributors/component.ts @@ -1,6 +1,8 @@ import ArrayProxy from '@ember/array/proxy'; import Component from '@ember/component'; import { action } from '@ember/object'; +import { inject as service } from '@ember/service'; +import Media from 'ember-responsive'; import { layout, requiredAction } from 'ember-osf-web/decorators/component'; import Contributor from 'ember-osf-web/models/contributor'; @@ -10,6 +12,7 @@ import template from './template'; @layout(template, styles) export default class ProjectContributors extends Component { + @service media!: Media; node!: Node; contributors!: ArrayProxy; reloadContributorsList?: () => void; // bound by project-contributors/list @@ -27,4 +30,8 @@ export default class ProjectContributors extends Component { this.onAddContributor(); } } + + get isMobile() { + return this.media.isMobile; + } } diff --git a/lib/app-components/addon/components/project-contributors/list/component.ts b/lib/app-components/addon/components/project-contributors/list/component.ts index 3bdd14a0fcd..f958cb1568b 100644 --- a/lib/app-components/addon/components/project-contributors/list/component.ts +++ b/lib/app-components/addon/components/project-contributors/list/component.ts @@ -7,6 +7,7 @@ import { dropTask, enqueueTask, task, timeout } from 'ember-concurrency'; import { taskFor } from 'ember-concurrency-ts'; import Intl from 'ember-intl/services/intl'; import Toast from 'ember-toastr/services/toast'; +import Media from 'ember-responsive'; import { layout } from 'ember-osf-web/decorators/component'; import Contributor from 'ember-osf-web/models/contributor'; @@ -21,6 +22,7 @@ import template from './template'; @layout(template, styles) export default class List extends Component { + @service media!: Media; // Required parameters node!: Node; @@ -185,4 +187,8 @@ export default class List extends Component { this.set('contributors', []); taskFor(this.loadContributors).perform(); } + + get isMobile() { + return this.media.isMobile; + } } diff --git a/lib/app-components/addon/components/project-contributors/list/item/component.ts b/lib/app-components/addon/components/project-contributors/list/item/component.ts index b7c7526e4f2..a7e58cf9264 100644 --- a/lib/app-components/addon/components/project-contributors/list/item/component.ts +++ b/lib/app-components/addon/components/project-contributors/list/item/component.ts @@ -2,6 +2,7 @@ import { tagName } from '@ember-decorators/component'; import Component from '@ember/component'; import { computed } from '@ember/object'; import { inject as service } from '@ember/service'; +import Media from 'ember-responsive'; import { layout, requiredAction } from 'ember-osf-web/decorators/component'; import Contributor, { permissions } from 'ember-osf-web/models/contributor'; @@ -14,6 +15,7 @@ export type HighlightableContributor = Contributor & { highlightClass: '' | 'suc @layout(template, styles) @tagName('') export default class Item extends Component { + @service media!: Media; @service currentUser!: CurrentUser; permissions = permissions; @@ -45,4 +47,8 @@ export default class Item extends Component { get canRemove(): boolean { return this.isAdmin && !this.isSelf && !this.contributor.node.get('isRegistration'); } + + get isMobile() { + return this.media.isMobile; + } } diff --git a/lib/app-components/addon/components/project-contributors/list/item/styles.scss b/lib/app-components/addon/components/project-contributors/list/item/styles.scss index f18e2010cef..94b2968baf8 100644 --- a/lib/app-components/addon/components/project-contributors/list/item/styles.scss +++ b/lib/app-components/addon/components/project-contributors/list/item/styles.scss @@ -1,44 +1,121 @@ -@keyframes greenHighlight { - 0% { - background: #dff0d8; - } +// stylelint-disable max-nesting-depth, selector-max-compound-selectors +.popover-format { + text-align: left; } -@keyframes redHighlight { - 0% { - background: #f2dede; +.contributor-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + border-top: 1px solid #eee !important; + height: 50px; + width: 100%; + + &.mobile { + height: 95px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding-top: 5px; + + .top-row-container { + height: 55px; + } + + .second-row-container { + width: 100%; + height: 40px; + + .permission-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + + flex: 1; + } + + .citation-container { + width: 75px; + + display: flex; + justify-content: space-evenly; + align-items: center; + } + } } -} -.success { - animation: greenHighlight 2s; -} - -.error { - animation: redHighlight 2s; -} + .top-row-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + flex: 1; -.row { - display: flex; - border-top: 1px solid #eee !important; - padding-top: 2px; - > * { - padding: 5px; + .sort-container { + width: 30px; + } + + .profile-image-container { + width: 50px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + .profile-image { + width: 40px; + height: 40px; + } + } + + .name-container { + margin-left: 5px; + flex: 1; + } } - @media(max-width: 767px) { - padding-top: 10px; + .second-row-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + width: 350px; + + .permission-container { + margin-left: 10px; + margin-right: 10px; + width: 130px; + + .permission-spacer { + margin-right: 5px; + } + } + + .citation-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + width: 100px; + } + + .remove-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + width: 100px; + } } } -.profile-image { - width: 30px; - height: 30px; +.small { + font-size: 85%; } -@media (min-width: 768px) { - .text-sm-center { - text-align: center; - } +.text-smaller { + font-size: 0.9em; } diff --git a/lib/app-components/addon/components/project-contributors/list/item/template.hbs b/lib/app-components/addon/components/project-contributors/list/item/template.hbs index 0d6b01378be..33483bd0fc4 100644 --- a/lib/app-components/addon/components/project-contributors/list/item/template.hbs +++ b/lib/app-components/addon/components/project-contributors/list/item/template.hbs @@ -1,76 +1,100 @@
- {{! Handle }} -
- -
+
+ {{! Sort Handle }} +
+ +
- {{! Profile image}} -
- {{t -
+ {{! Profile image}} +
+ {{t +
- {{! Name }} -
- {{#if @contributor.unregisteredContributor}} - {{@contributor.unregisteredContributor}} - {{else}} - - {{@contributor.users.fullName}} - - {{/if}} + {{! Name }} +
+ {{#if @contributor.unregisteredContributor}} + {{@contributor.unregisteredContributor}} + {{else}} + + {{@contributor.users.fullName}} + + {{/if}} +
+
+ {{! Permissions }} +
+ {{#if this.isMobile}} +
+ + {{t 'app_components.project_contributors.list.item.permissions_label'}} + +
+ {{/if}} + {{#if this.canChangePermissions}} + + {{t (concat 'app_components.project_contributors.list.item.permissions.' option)}} + + {{else}} +
+ {{t (concat 'app_components.project_contributors.list.item.permissions.' @contributor.permission)}} +
+ {{/if}} +
-
- -
+ {{! Bibliographic (Citation) }} +
+ - {{! Permissions }} -
- - - {{t 'app_components.project_contributors.list.item.permissions_label'}} - - - {{#if this.canChangePermissions}} - - {{t (concat 'app_components.project_contributors.list.item.permissions.' option)}} - - {{else}} - - {{t (concat 'app_components.project_contributors.list.item.permissions.' @contributor.permission)}} - - {{/if}} -
+ {{#if this.isMobile}} + + +
+

{{t 'app_components.project_contributors.list.citation_popover_title'}}

+ {{t 'app_components.project_contributors.list.citation_popover'}} +
+ + {{/if}} - {{! Bibliographic (Citation) }} -
- -
+
- {{! Remove }} -
diff --git a/lib/app-components/addon/components/project-contributors/list/styles.scss b/lib/app-components/addon/components/project-contributors/list/styles.scss index 6726ed0cc5e..977dabd593f 100644 --- a/lib/app-components/addon/components/project-contributors/list/styles.scss +++ b/lib/app-components/addon/components/project-contributors/list/styles.scss @@ -1,3 +1,44 @@ +.popover-format { + text-align: left; +} + +.header-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: flex-start; + width: 100%; + + .icon-spacer-container { + width: 80px; + } + + .name-container { + margin-left: 5px; + flex: 1; + } + + .permission-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + width: 150px; + } + + .citation-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + width: 100px; + } + + .remove-spacer-container { + width: 100px; + } +} + .has-more-container { text-align: center; } diff --git a/lib/app-components/addon/components/project-contributors/list/template.hbs b/lib/app-components/addon/components/project-contributors/list/template.hbs index 2d8d786044b..3ba66a38ed8 100644 --- a/lib/app-components/addon/components/project-contributors/list/template.hbs +++ b/lib/app-components/addon/components/project-contributors/list/template.hbs @@ -1,32 +1,38 @@ - -
+{{/unless}} {{else if this.hasMore}}
- {{t 'app_components.project_contributors.list.load_more_contributors'}} - +
{{/if}} diff --git a/lib/app-components/addon/components/project-contributors/search/result/styles.scss b/lib/app-components/addon/components/project-contributors/search/result/styles.scss index e69de29bb2d..ac5a636587d 100644 --- a/lib/app-components/addon/components/project-contributors/search/result/styles.scss +++ b/lib/app-components/addon/components/project-contributors/search/result/styles.scss @@ -0,0 +1,16 @@ +.p-v-xs { + padding-top: 5px; + padding-bottom: 5px; +} + +.m-l-xs { + margin-left: 5px; +} + +.small { + font-size: 85%; +} + +.pull-right { + float: right; +} diff --git a/lib/app-components/addon/components/project-contributors/search/result/template.hbs b/lib/app-components/addon/components/project-contributors/search/result/template.hbs index 03b40c1f242..36457e6a788 100644 --- a/lib/app-components/addon/components/project-contributors/search/result/template.hbs +++ b/lib/app-components/addon/components/project-contributors/search/result/template.hbs @@ -1,6 +1,6 @@ - + {{@user.fullname}} {{#if this.isSelf}} - + {{t 'app_components.project_contributors.search.result.yourself'}} {{/if}} - + {{#if this.isContributor}} - + {{else}} - + {{/if}} \ No newline at end of file diff --git a/lib/app-components/addon/components/project-contributors/search/styles.scss b/lib/app-components/addon/components/project-contributors/search/styles.scss index a0fc6f687a5..f3f145435f3 100644 --- a/lib/app-components/addon/components/project-contributors/search/styles.scss +++ b/lib/app-components/addon/components/project-contributors/search/styles.scss @@ -6,10 +6,43 @@ height: 34px; } -.unregisteredUsers { +.unregistered-users { text-align: center; margin-top: 20px; padding-top: 10px; padding-bottom: 20px; background-color: #eee; } + +.input-group { + position: relative; + display: table; + border-collapse: separate; + width: 100%; +} + +.input-group-btn { + position: relative; + font-size: 0; + white-space: nowrap; + vertical-align: middle; + display: table-cell; +} + +.text-center { + text-align: center; +} + +.table { + width: 100%; + max-width: 100%; + margin-bottom: 20px; +} + +.pull-right { + float: right !important; +} + +.text-right { + text-align: right; +} diff --git a/lib/app-components/addon/components/project-contributors/search/template.hbs b/lib/app-components/addon/components/project-contributors/search/template.hbs index 294ced6d181..c44e076ca7f 100644 --- a/lib/app-components/addon/components/project-contributors/search/template.hbs +++ b/lib/app-components/addon/components/project-contributors/search/template.hbs @@ -1,8 +1,7 @@
- - + +
@@ -31,28 +29,27 @@ /> {{else if this.results.isLoaded}}

{{t 'app_components.project_contributors.search.unregistered_description'}}

- +

{{t 'app_components.project_contributors.search.results'}}

{{#if this.search.isRunning}} -
+
{{else if this.results.length}} - +
{{#each this.results as |result|}}
-
+
-

+

{{t 'app_components.project_contributors.search.unregistered_contributor.paragraph'}}

-
- - +
diff --git a/lib/app-components/addon/components/project-contributors/styles.scss b/lib/app-components/addon/components/project-contributors/styles.scss index ec065b06859..379b1a2eb39 100644 --- a/lib/app-components/addon/components/project-contributors/styles.scss +++ b/lib/app-components/addon/components/project-contributors/styles.scss @@ -1,7 +1,46 @@ -.col-division-right { - border-right: 1px solid #ccc; +// stylelint-disable max-nesting-depth, selector-max-compound-selectors +.popover-format { + text-align: left; } -.inline { - display: inline; +.contributor-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + + &.mobile { + flex-direction: column; + margin-top: 10px; + } + + .instruction-container { + width: 50%; + + &.mobile { + width: 100%; + } + + .instructions { + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .icon-container { + margin-left: 10px; + } + } + } + + .search-container { + width: 50%; + + &.mobile { + width: 100%; + margin-bottom: 10px; + } + } } diff --git a/lib/app-components/addon/components/project-contributors/template.hbs b/lib/app-components/addon/components/project-contributors/template.hbs index 0f9e484971d..3fbd6f9508d 100644 --- a/lib/app-components/addon/components/project-contributors/template.hbs +++ b/lib/app-components/addon/components/project-contributors/template.hbs @@ -1,34 +1,41 @@ -
- -
-
-

- {{t 'app_components.project_contributors.title'}} -

- - - {{t 'app_components.project_contributors.contributors_popover'}} - - -

- {{t 'app_components.project_contributors.instructions'}} -

- +
+
+
+

+ {{t 'app_components.project_contributors.title'}} +

+
+ + +
+

{{t 'app_components.project_contributors.contributors_popover_title'}}

+ {{t 'app_components.project_contributors.contributors_popover'}} +
+ +
+
+

+ {{t 'app_components.project_contributors.instructions'}} +

+
+
+ +
+ * { + margin-right: 5px; + } + } +} diff --git a/lib/app-components/addon/components/project-metadata/template.hbs b/lib/app-components/addon/components/project-metadata/template.hbs index f1521f39efd..74dbfe19bba 100644 --- a/lib/app-components/addon/components/project-metadata/template.hbs +++ b/lib/app-components/addon/components/project-metadata/template.hbs @@ -2,80 +2,81 @@ @changeset={{this.changeset}} as |form| > -
- -
- -
+
+
+ +
+ +
-
- - {{t 'app_components.project_metadata.field_license_label'}} - -
- -
-
- - {{t 'app_components.submit_section.discard'}} - - - {{t 'app_components.submit_section.save'}} - + + {{tag}} + + + + +
+
+ + +
diff --git a/lib/app-components/addon/components/query-syntax/styles.scss b/lib/app-components/addon/components/query-syntax/styles.scss index bea0ee08988..8f40307e9fe 100644 --- a/lib/app-components/addon/components/query-syntax/styles.scss +++ b/lib/app-components/addon/components/query-syntax/styles.scss @@ -1,3 +1,10 @@ .query-syntax-help { margin-top: -24px; } + +.lead { + margin-bottom: 20px; + font-size: 16px; + font-weight: 300; + line-height: 1.4; +} diff --git a/lib/app-components/addon/components/query-syntax/template.hbs b/lib/app-components/addon/components/query-syntax/template.hbs index dcefb414cb8..b2ba6b742f8 100644 --- a/lib/app-components/addon/components/query-syntax/template.hbs +++ b/lib/app-components/addon/components/query-syntax/template.hbs @@ -1,8 +1,8 @@ {{!Copied from Ember SHARE}} {{!-- template-lint-disable no-bare-strings --}} -
+

{{t 'app_components.query_syntax.couldNotPerformQuery'}}

-

{{t 'app_components.query_syntax.moreInformationOnSearch'}}

+

{{t 'app_components.query_syntax.moreInformationOnSearch'}}

{{t 'app_components.query_syntax.reservedChars'}}

diff --git a/lib/app-components/addon/components/search-help-modal/styles.scss b/lib/app-components/addon/components/search-help-modal/styles.scss index e69de29bb2d..8ce223ce1b0 100644 --- a/lib/app-components/addon/components/search-help-modal/styles.scss +++ b/lib/app-components/addon/components/search-help-modal/styles.scss @@ -0,0 +1,4 @@ +.modal-title { + margin: 0; + line-height: $tall-line-height; +} diff --git a/lib/app-components/addon/components/search-help-modal/template.hbs b/lib/app-components/addon/components/search-help-modal/template.hbs index 238cc21526f..02875afd4da 100644 --- a/lib/app-components/addon/components/search-help-modal/template.hbs +++ b/lib/app-components/addon/components/search-help-modal/template.hbs @@ -1,14 +1,15 @@

- - -

+ +

{{t 'app_components.search_help_modal.title'}}

- - + +

{{t 'app_components.search_help_modal.queries'}}

@@ -16,7 +17,7 @@ {{t 'app_components.search_help_modal.searchSyntax' htmlSafe=true}} {{t 'app_components.search_help_modal.helpDescription'}}

-

diff --git a/lib/app-components/addon/components/search-paginator/styles.scss b/lib/app-components/addon/components/search-paginator/styles.scss index 30391ae94fd..d546212446a 100644 --- a/lib/app-components/addon/components/search-paginator/styles.scss +++ b/lib/app-components/addon/components/search-paginator/styles.scss @@ -10,7 +10,7 @@ position: relative; float: left; padding: 6px 12px; - line-height: 1.42857; + line-height: $tall-line-height; text-decoration: none; color: #337ab7; background-color: #fff; diff --git a/lib/app-components/addon/components/search-paginator/template.hbs b/lib/app-components/addon/components/search-paginator/template.hbs index 5f081b39c2c..f59464b83be 100644 --- a/lib/app-components/addon/components/search-paginator/template.hbs +++ b/lib/app-components/addon/components/search-paginator/template.hbs @@ -1,17 +1,16 @@
    {{#each this.items as |item|}}
  • - +
    • {{/each}}
diff --git a/lib/app-components/addon/components/submit-section-buttons/styles.scss b/lib/app-components/addon/components/submit-section-buttons/styles.scss index e69de29bb2d..bc7ae8244b8 100644 --- a/lib/app-components/addon/components/submit-section-buttons/styles.scss +++ b/lib/app-components/addon/components/submit-section-buttons/styles.scss @@ -0,0 +1,3 @@ +.buttons { + margin-top: 10px; +} diff --git a/lib/app-components/addon/components/submit-section-buttons/template.hbs b/lib/app-components/addon/components/submit-section-buttons/template.hbs index 4dbe1eacc03..b429f0f95b2 100644 --- a/lib/app-components/addon/components/submit-section-buttons/template.hbs +++ b/lib/app-components/addon/components/submit-section-buttons/template.hbs @@ -1,29 +1,28 @@ -{{#if this.showDiscard}} - + {{/if}} + -{{/if}} - + +
\ No newline at end of file diff --git a/lib/app-components/addon/components/submit-section/complete/styles.scss b/lib/app-components/addon/components/submit-section/complete/styles.scss index e0df4eafcf3..3b045fb154f 100644 --- a/lib/app-components/addon/components/submit-section/complete/styles.scss +++ b/lib/app-components/addon/components/submit-section/complete/styles.scss @@ -2,3 +2,7 @@ padding-top: 1em; font-style: italic; } + +.text-smaller { + font-size: 0.9em; +} diff --git a/lib/app-components/addon/components/submit-section/complete/template.hbs b/lib/app-components/addon/components/submit-section/complete/template.hbs index 674de1ea37f..3bd4ce7a25f 100644 --- a/lib/app-components/addon/components/submit-section/complete/template.hbs +++ b/lib/app-components/addon/components/submit-section/complete/template.hbs @@ -6,10 +6,7 @@ {{on 'click' this.edit}} > {{yield}} -

+

{{t 'app_components.submit_section.click_to_edit'}}

diff --git a/lib/app-components/addon/components/submit-section/template.hbs b/lib/app-components/addon/components/submit-section/template.hbs index 3edd4303d99..4a2ef1053d1 100644 --- a/lib/app-components/addon/components/submit-section/template.hbs +++ b/lib/app-components/addon/components/submit-section/template.hbs @@ -1,9 +1,10 @@ {{#if this.showTooltip}} - + @targetId={{this.elementId}} + > + {{this.tooltip}} + {{/if}} {{#@panels.panel open=this.isOpen diff --git a/lib/app-components/addon/components/submit-sections/styles.scss b/lib/app-components/addon/components/submit-sections/styles.scss index e69de29bb2d..c05f0191be4 100644 --- a/lib/app-components/addon/components/submit-sections/styles.scss +++ b/lib/app-components/addon/components/submit-sections/styles.scss @@ -0,0 +1,8 @@ +.row { + margin-right: -15px; + margin-left: -15px; +} + +.m-t-lg { + margin-top: 25px; +} diff --git a/lib/app-components/addon/components/submit-sections/template.hbs b/lib/app-components/addon/components/submit-sections/template.hbs index 0e5f956ccc6..8a0a0444948 100644 --- a/lib/app-components/addon/components/submit-sections/template.hbs +++ b/lib/app-components/addon/components/submit-sections/template.hbs @@ -1,4 +1,4 @@ -
+
diff --git a/lib/collections/addon/components/collection-item-picker/styles.scss b/lib/collections/addon/components/collection-item-picker/styles.scss index e69de29bb2d..e4df17123b6 100644 --- a/lib/collections/addon/components/collection-item-picker/styles.scss +++ b/lib/collections/addon/components/collection-item-picker/styles.scss @@ -0,0 +1,4 @@ +.form-group { + margin-bottom: 15px; + margin-top: 10px; +} diff --git a/lib/collections/addon/components/collection-item-picker/template.hbs b/lib/collections/addon/components/collection-item-picker/template.hbs index 1390b4d131f..8b74f098b9d 100644 --- a/lib/collections/addon/components/collection-item-picker/template.hbs +++ b/lib/collections/addon/components/collection-item-picker/template.hbs @@ -1,33 +1,27 @@ {{#if this.findNodes.last}} -
-
- - {{get-ancestor-descriptor item}} {{item.title}} - -
+
+ + {{get-ancestor-descriptor item}} {{item.title}} +
{{else}} -
-
-
-
-
+ {{/if}} \ No newline at end of file diff --git a/lib/collections/addon/components/collection-metadata/component.ts b/lib/collections/addon/components/collection-metadata/component.ts index 49ff2ce931c..30b6a0e4cb4 100644 --- a/lib/collections/addon/components/collection-metadata/component.ts +++ b/lib/collections/addon/components/collection-metadata/component.ts @@ -2,6 +2,8 @@ import Component from '@ember/component'; import { action, computed } from '@ember/object'; import { mapBy } from '@ember/object/computed'; import { underscore } from '@ember/string'; +import Media from 'ember-responsive'; +import { inject as service } from '@ember/service'; import CollectionSubmission, { choiceFields } from 'ember-osf-web/models/collection-submission'; import Collection, { ChoicesFields } from 'ember-osf-web/models/collection'; @@ -14,6 +16,7 @@ interface CollectionMetadataField { } export default class CollectionMetadata extends Component { + @service media!: Media; collection!: Collection; collectionSubmission!: CollectionSubmission; didValidate!: boolean; @@ -35,6 +38,10 @@ export default class CollectionMetadata extends Component { }); } + get isMobile() { + return this.media.isMobile; + } + @computed('displayFields.[]') get chunkedDisplayFields(): CollectionMetadataField[][] { return chunkArray(this.displayFields, 2); diff --git a/lib/collections/addon/components/collection-metadata/styles.scss b/lib/collections/addon/components/collection-metadata/styles.scss index e69de29bb2d..77fd29ffc96 100644 --- a/lib/collections/addon/components/collection-metadata/styles.scss +++ b/lib/collections/addon/components/collection-metadata/styles.scss @@ -0,0 +1,28 @@ +.metadata-field-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + width: 100%; + + .metadata-field { + width: calc(50% - 15px); + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + + &.mobile { + width: 100%; + } + + .label { + width: 100%; + } + + .input { + width: 100%; + } + } +} diff --git a/lib/collections/addon/components/collection-metadata/template.hbs b/lib/collections/addon/components/collection-metadata/template.hbs index 17d91b1eca8..3ea99beac19 100644 --- a/lib/collections/addon/components/collection-metadata/template.hbs +++ b/lib/collections/addon/components/collection-metadata/template.hbs @@ -1,11 +1,12 @@ {{#each this.chunkedDisplayFields as |fields|}} -
+
{{#each fields as |field|}} -
-
+ {{#validated-input/power-select + local-class='input' model=this.collectionSubmission valuePath=field.valuePath options=(sort (get this.collection field.optionsKey)) diff --git a/lib/collections/addon/components/collection-search-result/node/component.ts b/lib/collections/addon/components/collection-search-result/node/component.ts index e0d5688ee73..04b6c01d0ad 100644 --- a/lib/collections/addon/components/collection-search-result/node/component.ts +++ b/lib/collections/addon/components/collection-search-result/node/component.ts @@ -8,9 +8,10 @@ import { layout } from 'ember-osf-web/decorators/component'; import Node from 'ember-osf-web/models/node'; import Analytics from 'ember-osf-web/services/analytics'; import Theme from 'ember-osf-web/services/theme'; +import styles from './styles'; import template from './template'; -@layout(template) +@layout(template, styles) @tagName('') export default class SearchResultNode extends Component.extend({ didRender(...args: any[]) { diff --git a/lib/collections/addon/components/collection-search-result/node/styles.scss b/lib/collections/addon/components/collection-search-result/node/styles.scss new file mode 100644 index 00000000000..372321d62c9 --- /dev/null +++ b/lib/collections/addon/components/collection-search-result/node/styles.scss @@ -0,0 +1,16 @@ +.node-container { + width: 90%; + margin-left: 5px; +} + +.row { + margin-right: -15px; +} + +.m-t-sm { + margin-top: 10px; +} + +.text-muted { + color: $color-text-gray-light; +} diff --git a/lib/collections/addon/components/collection-search-result/node/template.hbs b/lib/collections/addon/components/collection-search-result/node/template.hbs index 8f37e2f9766..c5d1a73e8e2 100644 --- a/lib/collections/addon/components/collection-search-result/node/template.hbs +++ b/lib/collections/addon/components/collection-search-result/node/template.hbs @@ -1,36 +1,33 @@
-
- {{!Title}} -

- - {{this.item.title}} - -

-
+

+ + {{this.item.title}} + +

-
+
{{!Description}}

+ local-class='m-t-sm'> {{#if this.showBody}} {{unescape-xml-entities this.item.description}} {{else}} {{#if this.abbreviation}} {{this.abbreviation}} {{#if this.abbreviated}} - {{t 'general.ellipsis'}} + {{t 'general.ellipsis'}} {{/if}} {{/if}} {{/if}} @@ -41,7 +38,7 @@ {{#if this.item.dateModified}}
{{t @@ -52,7 +49,7 @@
{{/if}} -
+
{{yield}}
diff --git a/lib/collections/addon/components/collection-search-result/styles.scss b/lib/collections/addon/components/collection-search-result/styles.scss index a32150d42f9..87499d8ea10 100644 --- a/lib/collections/addon/components/collection-search-result/styles.scss +++ b/lib/collections/addon/components/collection-search-result/styles.scss @@ -25,3 +25,7 @@ .toggleShowBody:focus { outline: none; } + +.text-center { + text-align: center; +} diff --git a/lib/collections/addon/components/collection-search-result/template.hbs b/lib/collections/addon/components/collection-search-result/template.hbs index 19c30886b8f..b0b09625125 100644 --- a/lib/collections/addon/components/collection-search-result/template.hbs +++ b/lib/collections/addon/components/collection-search-result/template.hbs @@ -19,16 +19,15 @@ {{/component}} {{#if @expandable}} -
- +
{{/if}} diff --git a/lib/collections/addon/components/collections-submission/collection-submission-confirmation-modal/template.hbs b/lib/collections/addon/components/collections-submission/collection-submission-confirmation-modal/template.hbs index c57034cf177..05435def9ac 100644 --- a/lib/collections/addon/components/collections-submission/collection-submission-confirmation-modal/template.hbs +++ b/lib/collections/addon/components/collections-submission/collection-submission-confirmation-modal/template.hbs @@ -1,15 +1,14 @@ - - +

{{t 'collections.collection_submission_confirmation_modal.header'}}

- - + + {{#if @showResubmitModal}}

{{t 'collections.collection_submission_confirmation_modal.body_resubmit'}} @@ -32,33 +31,33 @@

{{/if}} {{/if}} - - - + + {{#if @showResubmitModal}} - {{t 'collections.collection_submission_confirmation_modal.resubmit'}} - + {{else}} - {{t 'collections.collection_submission_confirmation_modal.add_button'}} - + {{/if}} - - \ No newline at end of file + + \ No newline at end of file diff --git a/lib/collections/addon/components/collections-submission/styles.scss b/lib/collections/addon/components/collections-submission/styles.scss index 362ed815bc1..ab141c5d5b0 100644 --- a/lib/collections/addon/components/collections-submission/styles.scss +++ b/lib/collections/addon/components/collections-submission/styles.scss @@ -1,3 +1,4 @@ +// stylelint-disable max-nesting-depth, selector-max-compound-selectors .header { padding-top: 90px; border-bottom: 1px solid #eee; @@ -8,6 +9,11 @@ } } +.submit-header { + background: $color-bg-white; + color: $color-text-black; +} + .body { background-color: #f8f8f8; @@ -18,42 +24,59 @@ textarea { height: 10em; } -} -.buttons { - margin: 20px 10%; - padding: 10px 20px 20px; + .item-picker-container { + width: 100%; + } + + .subject { + display: inline-block; + background-color: #f8f8f8; + border: 1px solid #ccc; + border-radius: 3px; + padding: 2px; + margin: 2px; + + > :not(:last-child) { + padding: 1px; + + &::after { + content: '⮁'; + padding-left: 0.5em; + } + } + } } .last-buttons { margin: 20px 10%; padding: 10px 20px 20px; -} -.subject { - display: inline-block; - background-color: #f8f8f8; - border: 1px solid #ccc; - border-radius: 3px; - padding: 2px; - margin: 2px; + .button-container { + width: 100%; - > :not(:last-child) { - padding: 1px; - &::after { - content: '⮁'; - padding-left: 0.5em; + .remove-button { + float: left; } } } -.remove-button { - float: left; -} - .remove-textarea { margin-top: 12px; max-width: 100%; width: 100%; } + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.row { + margin-right: -15px; + margin-left: -15px; +} diff --git a/lib/collections/addon/components/collections-submission/template.hbs b/lib/collections/addon/components/collections-submission/template.hbs index d7d277eb91e..cc19b3d1439 100644 --- a/lib/collections/addon/components/collections-submission/template.hbs +++ b/lib/collections/addon/components/collections-submission/template.hbs @@ -6,7 +6,7 @@ @showResubmitModal={{this.showResubmitModal}} @collectionIsModerated={{this.collectionIsModerated}} /> -
+

{{t (concat this.intlKeyPrefix (if this.edit 'update' 'add') '_header')}}

@@ -26,7 +26,7 @@ > {{else}} -
+
-
+
{{#if (and this.edit this.isAccepted)}} {{/if}} -
- + {{#if this.edit}} - + {{else}} - + {{/if}}
diff --git a/lib/collections/addon/components/discover-page/active-filters/filter/template.hbs b/lib/collections/addon/components/discover-page/active-filters/filter/template.hbs index 22143247833..256fbfcdc36 100644 --- a/lib/collections/addon/components/discover-page/active-filters/filter/template.hbs +++ b/lib/collections/addon/components/discover-page/active-filters/filter/template.hbs @@ -6,15 +6,14 @@ {{@text}} {{#unless @hide}} - + {{/unless}} \ No newline at end of file diff --git a/lib/collections/addon/components/discover-page/active-filters/styles.scss b/lib/collections/addon/components/discover-page/active-filters/styles.scss index e69de29bb2d..a42302acd3c 100644 --- a/lib/collections/addon/components/discover-page/active-filters/styles.scss +++ b/lib/collections/addon/components/discover-page/active-filters/styles.scss @@ -0,0 +1,19 @@ +.active-filter-container { + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .header { + width: 50%; + } + + .button-container { + width: 50%; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: flex-start; + } +} diff --git a/lib/collections/addon/components/discover-page/active-filters/template.hbs b/lib/collections/addon/components/discover-page/active-filters/template.hbs index e413f99905d..0305f2fe51f 100644 --- a/lib/collections/addon/components/discover-page/active-filters/template.hbs +++ b/lib/collections/addon/components/discover-page/active-filters/template.hbs @@ -1,20 +1,16 @@ -
-
+
+

{{t 'collections.discover_page.active_filters.heading'}}:

-
- - {{!CLEAR FILTERS BUTTON}} - - +
+
diff --git a/lib/collections/addon/components/discover-page/component.ts b/lib/collections/addon/components/discover-page/component.ts index 52200a4cdc9..3fb863f8106 100644 --- a/lib/collections/addon/components/discover-page/component.ts +++ b/lib/collections/addon/components/discover-page/component.ts @@ -11,6 +11,7 @@ import { waitFor } from '@ember/test-waiters'; import { keepLatestTask, timeout } from 'ember-concurrency'; import { taskFor } from 'ember-concurrency-ts'; import config from 'ember-get-config'; +import Media from 'ember-responsive'; import { layout } from 'ember-osf-web/decorators/component'; import Analytics from 'ember-osf-web/services/analytics'; @@ -86,6 +87,7 @@ function emptyResults(): SearchQuery { @layout(template, styles) export default class DiscoverPage extends Component { + @service media!: Media; @service analytics!: Analytics; @service currentUser!: CurrentUser; @service store!: Store; @@ -148,6 +150,10 @@ export default class DiscoverPage extends Component { }; } + get isMobile() { + return this.media.isMobile; + } + /** * For PREPRINTS and REGISTRIES. A mapping of filter names for front-end display. Ex. {OSF: 'OSF Preprints'}. * @property {Object} filterReplace diff --git a/lib/collections/addon/components/discover-page/facets/styles.scss b/lib/collections/addon/components/discover-page/facets/styles.scss index 55d7f7ab8c3..42b6a7c5b9b 100644 --- a/lib/collections/addon/components/discover-page/facets/styles.scss +++ b/lib/collections/addon/components/discover-page/facets/styles.scss @@ -4,6 +4,9 @@ font-family: 'Open Sans' , 'Helvetica Neue' , sans-serif; border: 0; box-shadow: none; + margin-bottom: 20px; + background-color: $color-bg-white; + border-radius: 0; } .facet-heading { @@ -13,8 +16,14 @@ align-items: center; border-radius: 2px; font-size: 18px; + padding: 10px 15px; } .facet-body { background-color: #fbfbfb; + padding: 15px; +} + +.p-t-md { + padding-top: 15px; } diff --git a/lib/collections/addon/components/discover-page/facets/template.hbs b/lib/collections/addon/components/discover-page/facets/template.hbs index 3914dfb766a..d7e5b36bb7d 100644 --- a/lib/collections/addon/components/discover-page/facets/template.hbs +++ b/lib/collections/addon/components/discover-page/facets/template.hbs @@ -1,22 +1,19 @@ {{!Copied from Ember-SHARE}} -
+
{{#each @facetContexts as |context|}}

-
- {{/each}} -
+
+
    + {{#each reg.bibliographicContributors as |contrib|}} +
  • + {{contrib.users.fullName}} +
    • + {{/each}} +
+
+
+
+ {{/each}}
diff --git a/lib/registries/addon/components/registries-registration-type-facet/styles.scss b/lib/registries/addon/components/registries-registration-type-facet/styles.scss index 80cc1932984..863a0af9bde 100644 --- a/lib/registries/addon/components/registries-registration-type-facet/styles.scss +++ b/lib/registries/addon/components/registries-registration-type-facet/styles.scss @@ -48,3 +48,7 @@ .RegistrationType__Filter { background-color: #d7e6e9; } + +.m-t-sm { + margin-top: 10px; +} diff --git a/lib/registries/addon/components/registries-registration-type-facet/template.hbs b/lib/registries/addon/components/registries-registration-type-facet/template.hbs index 7766dfc8797..ac7e5de9f6f 100644 --- a/lib/registries/addon/components/registries-registration-type-facet/template.hbs +++ b/lib/registries/addon/components/registries-registration-type-facet/template.hbs @@ -5,7 +5,7 @@ {{t 'registries.facets.registration_type.only_available_with_osf'}} -
    +
      {{#each this.types as |type index|}}