Page MenuHomeSoftware Heritage
Files F9749661

D3295.id11676.diff
No OneTemporary
Actions

D3295.id11676.diff
View Options

diff --git a/cypress/integration/layout.spec.js b/cypress/integration/layout.spec.js
--- a/cypress/integration/layout.spec.js
+++ b/cypress/integration/layout.spec.js
@@ -8,8 +8,11 @@
const url = '/';
describe('Test top-bar', function() {
- it('should should contain all navigation links', function() {
+ beforeEach(function() {
+ cy.clearLocalStorage();
cy.visit(url);
+ });
+ it('should should contain all navigation links', function() {
cy.get('.swh-top-bar a')
.should('have.length.of.at.least', 4)
.and('be.visible')
@@ -17,17 +20,68 @@
});
it('should show donate button on lg screen', function() {
- cy.visit(url);
cy.get('.swh-donate-link')
.should('be.visible');
});
it('should hide donate button on sm screen', function() {
cy.viewport(600, 800);
- cy.visit(url);
cy.get('.swh-donate-link')
.should('not.be.visible');
});
+ it('should change container width when toggling Full width switch', function() {
+ cy.get('#swh-web-content')
+ .should('have.class', 'container')
+ .should('not.have.class', 'container-fluid');
+
+ cy.should(() => {
+ expect(JSON.parse(localStorage.getItem('swh-web-full-width'))).to.be.null;
+ });
+
+ cy.get('#swh-full-width-switch')
+ .click({force: true});
+
+ cy.get('#swh-web-content')
+ .should('not.have.class', 'container')
+ .should('have.class', 'container-fluid');
+
+ cy.should(() => {
+ expect(JSON.parse(localStorage.getItem('swh-web-full-width'))).to.be.true;
+ });
+
+ cy.get('#swh-full-width-switch')
+ .click({force: true});
+
+ cy.get('#swh-web-content')
+ .should('have.class', 'container')
+ .should('not.have.class', 'container-fluid');
+
+ cy.should(() => {
+ expect(JSON.parse(localStorage.getItem('swh-web-full-width'))).to.be.false;
+ });
+ });
+ it('should restore container width when loading page again', function() {
+ cy.visit(url)
+ .get('#swh-web-content')
+ .should('have.class', 'container')
+ .should('not.have.class', 'container-fluid');
+
+ cy.get('#swh-full-width-switch')
+ .click({force: true});
+
+ cy.visit(url)
+ .get('#swh-web-content')
+ .should('not.have.class', 'container')
+ .should('have.class', 'container-fluid');
+
+ cy.get('#swh-full-width-switch')
+ .click({force: true});
+
+ cy.visit(url)
+ .get('#swh-web-content')
+ .should('have.class', 'container')
+ .should('not.have.class', 'container-fluid');
+ });
});
describe('Test footer', function() {
diff --git a/swh/web/assets/src/bundles/webapp/webapp-utils.js b/swh/web/assets/src/bundles/webapp/webapp-utils.js
--- a/swh/web/assets/src/bundles/webapp/webapp-utils.js
+++ b/swh/web/assets/src/bundles/webapp/webapp-utils.js
@@ -313,3 +313,26 @@
export function getSwhIdsContext() {
return swhidsContext_;
}
+
+function setFullWidth(fullWidth) {
+ if (fullWidth) {
+ $('#swh-web-content').removeClass('container');
+ $('#swh-web-content').addClass('container-fluid');
+ } else {
+ $('#swh-web-content').removeClass('container-fluid');
+ $('#swh-web-content').addClass('container');
+ }
+ localStorage.setItem('swh-web-full-width', JSON.stringify(fullWidth));
+ $('#swh-full-width-switch').prop('checked', fullWidth);
+}
+
+export function fullWidthToggled(event) {
+ setFullWidth($(event.target).prop('checked'));
+}
+
+export function setContainerFullWidth() {
+ let previousFullWidthState = JSON.parse(localStorage.getItem('swh-web-full-width'));
+ if (previousFullWidthState !== null) {
+ setFullWidth(previousFullWidthState);
+ }
+}
diff --git a/swh/web/templates/layout.html b/swh/web/templates/layout.html
--- a/swh/web/templates/layout.html
+++ b/swh/web/templates/layout.html
@@ -71,11 +71,12 @@
<div class="wrapper">
<div class="swh-top-bar">
<ul>
- {% if oidc_enabled %}
- <li class="swh-position-left">
- <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
- </li>
- {% endif %}
+ <li class="swh-position-left">
+ <div class="custom-control custom-switch">
+ <input type="checkbox" class="custom-control-input" id="swh-full-width-switch" onclick="swh.webapp.fullWidthToggled(event)">
+ <label class="custom-control-label font-weight-normal" for="swh-full-width-switch">Full width</label>
+ </div>
+ </li>
<li>
<a href="https://www.softwareheritage.org">Home</a>
</li>
@@ -83,7 +84,10 @@
<a href="https://forge.softwareheritage.org/">Development</a>
</li>
<li>
- <a href="https://docs.softwareheritage.org/devel/">Documentation</a>
+ <a href="https://docs.softwareheritage.org/devel/">Documentation</a>
+ </li>
+ <li>
+ <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
</li>
<li class="swh-position-right">
{% url 'logout' as logout_url %}
@@ -100,8 +104,6 @@
{% else %}
<a href="{% url 'oidc-login' %}">login</a>
{% endif %}
- {% else %}
- <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
{% endif %}
</li>
</ul>
@@ -186,7 +188,7 @@
<div class="content-wrapper">
<section class="content">
- <div class="container">
+ <div class="container" id="swh-web-content">
{% block content %}{% endblock %}
</div>
</section>
@@ -215,6 +217,9 @@
<div id="back-to-top">
<a href="#top"><img alt="back to top" src="{% static 'img/arrow-up-small.png' %}" /></a>
</div>
+ <script>
+ swh.webapp.setContainerFullWidth();
+ </script>
</body>
</html>

File Metadata

Mime Type
text/plain
Expires
Sun, Aug 24, 6:04 PM (1 d, 21 h ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
3217667

Event Timeline

About · Developer information · Legal