Skip to content

Commit

Permalink
fix sidenav styling for user pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@thostetler
thostetler committed Jun 30, 2020
1 parent a757acc commit 9aebb56
Show file tree
Hide file tree
Showing 8 changed files with 253 additions and 180 deletions.
30 changes: 25 additions & 5 deletions src/js/apps/discovery/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable global-require */
/**
* Discovery application: main bootstrapping routine
*
Expand All @@ -14,6 +15,7 @@
*/

define(['config/discovery.config', 'module'], function(config, module) {
// eslint-disable-next-line import/no-dynamic-require
require([
'router',
'js/components/application',
Expand Down Expand Up @@ -114,6 +116,19 @@ define(['config/discovery.config', 'module'], function(config, module) {
);
updateExternalLinkBehavior();

const toggle = ($sidebar, $content, $button) => {
$sidebar.toggleClass('show');
let text =
'<i class="fa fa-close" aria-hidden="true"></i> Close Menu';
if ($sidebar.hasClass('show')) {
$content.removeClass('full-width');
} else {
text = '<i class="fa fa-bars" aria-hidden="true"></i> Show Menu';
$content.addClass('full-width');
}
$button.html(text);
};

// some global event handlers, not sure if right place
$('body').on('click', 'button.toggle-menu', function(e) {
var $button = $(e.target);
Expand All @@ -122,11 +137,16 @@ define(['config/discovery.config', 'module'], function(config, module) {
.eq(1)
.find('.nav-container');

$sidebar.toggleClass('show');
var text = $sidebar.hasClass('show')
? ' <i class="fa fa-close" aria-hidden="true"></i> Close Menu'
: ' <i class="fa fa-bars" aria-hidden="true"></i> Show Menu';
$button.html(text);
var $content = $button
.parents()
.eq(1)
.find('.user-pages__main-content');

toggle($sidebar, $content, $button);

$('a', $sidebar).on('click', () => {
toggle($sidebar, $content, $button);
});
});

// accessibility: skip to main content
Expand Down
34 changes: 20 additions & 14 deletions src/js/wraps/home_page_manager/home-page-layout.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
<div>
<div class="col-sm-12">
<div data-widget="UserNavbarWidget" />
</div>
</div>
<section id="page-with-sidenav-layout">

<div class="nav-button-container s-nav-button-container">
<button class="btn btn-primary-faded toggle-menu s-toggle-menu ">
<i class="fa fa-bars" aria-hidden="true"></i> Show Menu
</button>
</div>
<!-- horizontal navbar -->
<article data-widget="UserNavbarWidget" />

<div class="row s-darker-background" style="margin-right:0;">
<div class="col-sm-2 nav-container s-nav-container"></div>
<div class="col-sm-10 body-min-height"></div>
</div>
<!-- mobile nav button -->
<article class="nav-button-container s-nav-button-container">
<button type="button" class="btn btn-primary-faded toggle-menu s-toggle-menu ">
<i class="fa fa-bars" aria-hidden="true"></i> Show Menu
</button>
</article>

<!-- main container -->
<article class="s-darker-background user-pages__main">

<!-- side nav -->
<section class="nav-container s-nav-container user-pages__main-aside"></section>

<!-- content -->
<section class="user-pages__main-content full-width"></section>
</article>
</section>
78 changes: 43 additions & 35 deletions src/js/wraps/libraries_page_manager/libraries-page-layout.html
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,45 @@
<div>
<div class="col-sm-12">
<div data-widget="UserNavbarWidget" />
</div>
</div>
<section id="page-with-sidenav-layout">

<div class="nav-button-container s-nav-button-container">
<button class="btn btn-primary-faded toggle-menu s-toggle-menu ">
<i class="fa fa-bars" aria-hidden="true"></i> Show Menu
</button>
</div>
<!-- horizontal navbar -->
<article data-widget="UserNavbarWidget" />

<!-- mobile nav button -->
<article class="nav-button-container s-nav-button-container">
<button type="button" class="btn btn-primary-faded toggle-menu s-toggle-menu ">
<i class="fa fa-bars" aria-hidden="true"></i> Show Menu
</button>
</article>

<!-- main container -->
<article class="s-darker-background user-pages__main">

<!-- side nav -->
<section class="nav-container s-nav-container user-pages__main-aside"></section>

<!-- content -->
<section class="user-pages__main-content full-width">
<div data-widget="IndividualLibraryWidget" />
<div data-widget="LibraryActionsWidget" />
<div data-widget="AllLibrariesWidget" />
<div data-widget="LibraryListWidget" />
<div
data-widget="ExportWidget"
class="s-inner-div-background"
data-origin="library"
/>
<div
data-widget="AuthorAffiliationTool"
class="s-inner-div-background"
data-origin="library"
/>
<div data-widget="Metrics" class="s-inner-div-background" />
<div data-widget="AuthorNetwork" class="s-inner-div-background" />
<div data-widget="PaperNetwork" class="s-inner-div-background" />
<div data-widget="BubbleChart" class="s-inner-div-background" />
<div data-widget="ConceptCloud" class="s-inner-div-background" />
<div data-widget="CitationHelper" class="s-inner-div-background" />

</section>
</article>
</section>

<div class="row s-darker-background" style="margin-right:0;"">
<div class="col-sm-2 nav-container s-nav-container"></div>
<div class="col-sm-10 body-min-height">
<div data-widget="IndividualLibraryWidget" />
<div data-widget="LibraryActionsWidget" />
<div data-widget="AllLibrariesWidget" />
<div data-widget="LibraryListWidget" />
<div
data-widget="ExportWidget"
class="s-inner-div-background"
data-origin="library"
/>
<div
data-widget="AuthorAffiliationTool"
class="s-inner-div-background"
data-origin="library"
/>
<div data-widget="Metrics" class="s-inner-div-background" />
<div data-widget="AuthorNetwork" class="s-inner-div-background" />
<div data-widget="PaperNetwork" class="s-inner-div-background" />
<div data-widget="BubbleChart" class="s-inner-div-background" />
<div data-widget="ConceptCloud" class="s-inner-div-background" />
<div data-widget="CitationHelper" class="s-inner-div-background" />
</div>
</div>
38 changes: 22 additions & 16 deletions src/js/wraps/user_settings_page_manager/user-settings-layout.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,30 @@
<div>
<div class="col-sm-12">
<div data-widget="UserNavbarWidget" />
</div>
</div>
<div class="nav-button-container s-nav-button-container">
<button class="btn btn-primary-faded toggle-menu s-toggle-menu ">
<i class="fa fa-bars" aria-hidden="true"></i> Show Menu
</button>
</div>
<section id="page-with-sidenav-layout">

<!-- horizontal navbar -->
<article data-widget="UserNavbarWidget" />

<div class="row s-darker-background" style="margin-right:0;"">
<div class="col-sm-2 nav-container s-nav-container"></div>
<!-- mobile nav button -->
<article class="nav-button-container s-nav-button-container">
<button type="button" class="btn btn-primary-faded toggle-menu s-toggle-menu ">
<i class="fa fa-bars" aria-hidden="true"></i> Show Menu
</button>
</article>

<div class="col-sm-10">
<div data-widget="LibraryImport"/>
<!-- main container -->
<article class="s-darker-background user-pages__main">

<!-- side nav -->
<section class="nav-container s-nav-container user-pages__main-aside"></section>

<!-- content -->
<section class="user-pages__main-content full-width">
<div data-widget="LibraryImport"/>
<div data-widget="UserSettings"/>
<div data-widget="UserPreferences"/>
<div data-widget="MyAdsDashboard"/>
</div>
</div>
</section>
</article>
</section>

<!--show this when user enters information and navigates away-->
<div class="modal fade confirm-modal">
Expand Down
Loading

0 comments on commit 9aebb56

Please sign in to comment.