opensourcemirror
/
cockpit
mirror of https://github.com/cockpit-project/cockpit.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Replace all usages of container-fluid class 

Page && PageSection compoents should be used in the react pages and the
corresponding classes in the non-react.
container-fluid class comes from bootstrap which we try to stop using.

Closes #14717
This commit is contained in:
Katerina Koukiou 2020-10-09 11:36:09 +02:00 committed by Matej Marusak
parent 7f5528976a
commit a406a35805
33 changed files with 1252 additions and 1142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/docker-info/plugin.html
View File

@ -5,7 +5,9 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<h2>Docker Daemon Info</h2>
<ul>
<li>Total Memory: <span id="docker-memory">?</span></li>
@ -14,6 +16,8 @@
<li>Containers: <span id="docker-containers">?</span></li>
<li>Images: <span id="docker-images">?</span></li>
</ul>
</section>
</main>
</div>
<script>

6
examples/long-running-process/index.html
View File

@ -11,10 +11,14 @@
</head>
<body>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<p><label>State:</label> <span id="state"></span></p>
<p><input id="command" type="text" /> <button id="run" disabled>Start</button></p>
<pre id="output"></pre>
</section>
</main>
</div>
</body>
</html>

13
examples/ocserv/ocserv.html
View File

@ -28,7 +28,8 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body hidden>
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<div class="curtain-ocserv blank-slate-pf" hidden>
<div class="blank-slate-pf-icon">
<div class="fa fa-exclamation-circle"></div>
@ -37,7 +38,7 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
<p></p>
</div>
<div id="status-info" class="container-fluid page-ct">
<section id="status-info" class="pf-c-page__main-section pf-m-light">
<div class="panel panel-default">
<div class="panel-heading">
<span id="head">Server status</span>
@ -45,9 +46,9 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
<table class="info-table-ct" id="status-table">
</table>
</div>
</div>
</section>
<div id="users-info" class="container-fluid">
<section id="users-info" class="pf-c-page__main-section pf-m-light">
<div class="panel panel-default">
<div class="panel-heading">
<span id="head">Connected users</span>
@ -67,9 +68,9 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
</tbody>
</table>
</div>
</section>
</main>
</div>
<script>
var raw;
var status_raw;

10
examples/package-simple/test.html
View File

@ -6,7 +6,9 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<h2>Example: Simple Package</h2>
<p>This example is an installable cockpit package that runs a simple command
@ -24,9 +26,9 @@ $ sudo systemctl restart cockpit</pre>
<li>Choose this item from the sidebar menu</li>
<li>Feel free to edit this file and refresh in the browser.</li>
</ol>
</div>
</section>
<div class="container-fluid">
<section class="pf-c-page__main-section pf-m-light">
<table class="form-table-ct">
<tr>
<td><label class="control-label" for="address">URL</label></td>
@ -42,6 +44,8 @@ $ sudo systemctl restart cockpit</pre>
</pre>
</p>
<p id="failure" class="warning"></p>
</section>
</main>
</div>
<script>

6
examples/pinger/ping.html
View File

@ -7,7 +7,9 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<table class="form-table-ct">
<tr>
<td><label class="control-label" for="address">Address</label></td>
@ -19,6 +21,8 @@
</tr>
</table>
<pre id="output"></pre>
</section>
</main>
</div>
<script src="pinger.js"></script>

7
examples/poc-cim/test.html
View File

@ -7,7 +7,9 @@
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<h2>Proof of Concept: CIM Access</h2>
<p>This is a proof of concept for accessing CIM data via Pegasus in Cockpit.</p>
@ -27,7 +29,8 @@
<tbody>
</tbody>
</table>
</section>
</main>
</div>
<script>

7
examples/xhr-proxy/xhrproxy.html
View File

@ -7,7 +7,9 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<table class="form-table-ct">
<tr>
<th><label class="control-label" for="address">URL</label></th>
@ -24,7 +26,8 @@
<th>Output</th>
<td><pre id="output"></pre></td>
</table>
</section>
</main>
</div>
<script src="xhrproxy.js"></script>

6
examples/zoner/tz.html
View File

@ -5,7 +5,9 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid" style='max-width: 400px'>
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<table class="form-table-ct">
<tr>
<td><label class="control-label">Time Zone</label></td>
@ -20,6 +22,8 @@
<td><span id="failure"></span></td>
</tr>
</table>
</section>
</main>
</div>
<script>

7
pkg/apps/application-list.jsx
View File

@ -24,6 +24,7 @@ import {
DataList, DataListItem, DataListItemRow, DataListCell,
DataListAction,
DataListItemCells,
Page, PageSection, PageSectionVariants,
} from "@patternfly/react-core";
import { RebootingIcon } from "@patternfly/react-icons";
@ -162,7 +163,8 @@ export class ApplicationList extends React.Component {
}
return (
<>
<Page>
<PageSection variant={PageSectionVariants.light}>
<header className='ct-table-header'>
<h2 className='ct-table-heading'>{_("Applications")}</h2>
<div className='ct-table-actions'>
@ -175,7 +177,8 @@ export class ApplicationList extends React.Component {
<DataList aria-label={_("Applications list")}>
{ tbody }
</DataList>
</>
</PageSection>
</Page>
);
}
}

5
pkg/apps/application.css
View File

@ -8,11 +8,6 @@
margin: 0;
}
.ct-table-header {
/* Add enough spacing to align header & refresh to the list edges */
padding: 0 var(--pf-global--spacer--md) var(--pf-global--spacer--md);
}
.app-list-empty {
color: var(--color-subtle-copy);
text-align: center;

4
pkg/apps/index.html
View File

@ -30,11 +30,11 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
</head>
<body class="pf-m-redhat-font" hidden>
<div id="list-page" class="container-fluid page-ct">
<div id="list-page">
<div id="list"></div>
</div>
<div id="app-page" class="container-fluid page-ct">
<div id="app-page">
<div id="app"></div>
</div>

18
pkg/dashboard/index.html
View File

@ -32,9 +32,9 @@
</head>
<body class="pf-m-redhat-font" hidden>
<div id="dashboard" class="container-fluid page-ct">
<div class="row" role="presentation">
<div class="col-md-12">
<div id="dashboard" class="pf-c-page">
<main class="pf-c-page__main">
<section class="pf-c-page__main-section pf-m-light">
<div id="dashboard-toolbar" class="pull-right zoom-controls">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@ -80,10 +80,8 @@
<div class="dashboard-plot zoomable-plot" id="dashboard-plot-1"></div>
<div class="dashboard-plot zoomable-plot" id="dashboard-plot-2"></div>
<div class="dashboard-plot zoomable-plot" id="dashboard-plot-3"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
</section>
<section class="pf-c-page__main-section pf-m-light">
<div class="panel panel-default" id="dashboard-hosts">
<div class="panel-heading">
<h2 class="panel-title" translate>Servers</h2>
@ -101,9 +99,8 @@
<div class="list-group">
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script id="dashboard-hosts-tmpl" type="x-template/mustache">
{{#machines}}
@ -189,5 +186,6 @@
</div>
</div>
</div>
</div>
</body>
</html>

1
pkg/kdump/kdump.scss
View File

@ -26,7 +26,6 @@
.popover-ct-kdump {
margin-left: 5px;
/* Don't escape the container-fluid */
white-space: nowrap;
}

1
pkg/lib/page.scss
View File

@ -1,4 +1,5 @@
@import "./patternfly/patternfly-4-overrides.scss";
@import "../../node_modules/@patternfly/patternfly/components/Page/page.scss";
a {
cursor: pointer;

11
pkg/lib/patternfly/patternfly-overrides.scss
View File

@ -452,8 +452,7 @@ small {
// Bump content away from cards
.content,
.page-ct,
.container,
.container-fluid {
.container {
--container-padding-x: var(--pf-global--spacer--md);
--container-padding-y: var(--pf-global--spacer--lg);
--container-padding: var(--container-padding-y) var(--container-padding-x);
@ -468,8 +467,7 @@ small {
// Add PF4 padding to desktop mode
.content,
.page-ct,
.container,
.container-fluid {
.container {
--container-padding-x: var(--pf-global--spacer--lg);
--container-padding-y: var(--pf-global--spacer--xl);
@ -481,7 +479,7 @@ small {
// Rely on page-ct padding; don't duplicate
.page-ct .container,
.page-ct .container-fluid {
.page-ct {
padding: 0;
}
@ -494,8 +492,7 @@ small {
// Bump content away from cards
.content,
.page-ct,
.container,
.container-fluid {
.container {
.cards-pf + & {
padding-top: 1rem;
}

3
pkg/lib/table.css
View File

@ -73,9 +73,8 @@
@media screen and (max-width: 640px) {
/* Remove _most_ of the gaps on the sides of small screens */
/* to maximize space, but still keep the boxy panel look */
/* (container-fluid & page-ct adds 20px, so we remove 1/2 of that) */
/* (page-ct adds 20px, so we remove 1/2 of that) */
.page-ct > .panel,
.container-fluid > .panel,
.col-md-12 > .panel {
margin-left: -10px;
margin-right: -10px;

6
pkg/playground/exception.html
View File

@ -7,12 +7,16 @@
<script src="../base1/cockpit.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>
<div id="internal" class="container-fluid">
<div id="internal" class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<h2>Exception</h2>
<p>Clicking this button should make a javascript exception happen.<p>
<button id="exception">Exception</button>
</section>
</main>
</div>
<script src="exception.js"></script>
</body>

8
pkg/playground/index.html
View File

@ -10,16 +10,20 @@
<script src="index.js"></script>
</head>
<body class="pf-m-redhat-font">
<section class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<h2>Development Playground</h2>
<ul id="nav"></ul>
</section>
<section class="container-fluid">
<section class="pf-c-page__main-section pf-m-light">
<h2>Page Status</h2>
<label>Type <input id="type"></label>
<label>Title <input id="title"></label>
<button id="set-status">Set</button>
<button id="clear-status">Clear</button>
</section>
</main>
</div>
</body>
</html>

8
pkg/playground/journal.html
View File

@ -10,10 +10,12 @@
</head>
<body class="pf-m-redhat-font">
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<div id="journal-box"></div>
</section>
</main>
</div>
</body>
</html>

13
pkg/playground/jquery-patterns.html
View File

@ -10,7 +10,8 @@
<script src="jquery-patterns.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<div class="modal" id="test-dialog" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
@ -72,16 +73,15 @@
</div>
</div>
<div class="container-fluid">
<section class="pf-c-page__main-section pf-m-light">
<h3>Dialogs</h3>
<button class="pf-c-button pf-m-secondary" data-target="#test-dialog" data-toggle="modal">
Show Dialog
</button>
<hr>
</div>
<div class="container-fluid">
</section>
<section class="pf-c-page__main-section pf-m-light">
<table class="listing-ct">
<thead>
<tr>
@ -367,7 +367,8 @@
</tbody>
</table>
</section>
</main>
</div>
</body>
</html>

6
pkg/playground/metrics.html
View File

@ -10,10 +10,14 @@
<script src="metrics.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<h1>Monitoring</h1>
<button id="reload">Reload</button>
<div id="results"></div>
</section>
</main>
</div>
</body>
</html>

6
pkg/playground/pkgs.html
View File

@ -9,8 +9,12 @@
<script src="pkgs.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<button id="reload">Reload</button>
</section>
</main>
</div>
</body>
</html>

6
pkg/playground/plot.html
View File

@ -10,8 +10,11 @@
<script src="plot.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<header class="pf-c-page__header">
<h1>Plots</h1>
</header>
<div id="toolbar" class="zoom-controls">
<div class="dropdown" style="display:inline-block">
@ -47,6 +50,7 @@
<span class="plot-unit" id="plot_pmcd_unit"></span>
<div id="plot_pmcd" class="zoomable-plot"></div>
</main>
</div>
</body>
</html>

31
pkg/playground/react-patterns.html
View File

@ -10,43 +10,38 @@
</head>
<body class="pf-m-redhat-font">
<hr>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<h3>Select file</h3>
<div id="demo-file-ac"></div>
</div>
</section>
<hr>
<div class="container-fluid">
<section class="pf-c-page__main-section pf-m-light">
<h3>Dialogs</h3>
<button id="demo-show-dialog" class="pf-c-button pf-m-secondary">Show Dialog</button>
<button id="demo-show-error-dialog" class="pf-c-button pf-m-secondary">Show Error-Dialog</button>
<div id="demo-dialog-result"></div>
</div>
</section>
<hr>
<div class="container-fluid">
<section class="pf-c-page__main-section pf-m-light">
<h3>Listing Pattern</h3>
<div id="demo-listing"></div>
<div id="demo-listing-selectable"></div>
<div id="demo-listing-empty"></div>
</div>
</section>
<div class="container-fluid">
<section class="pf-c-page__main-section pf-m-light">
<h3>OnOff Switch</h3>
<div id="demo-onoff"></div>
</div>
</section>
<div class="container-fluid">
<section class="pf-c-page__main-section pf-m-light">
<h3>Cards</h3>
<div id="demo-cards"></div>
</section>
</main>
</div>
<hr>
</body>
</html>

28
pkg/playground/speed.html
View File

@ -9,7 +9,9 @@
<script src="speed.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>
<div class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<h1>Speed Tests</h1>
<table>
<tbody>
@ -54,8 +56,8 @@
</tr>
</tbody>
</table>
</div>
<div class="container-fluid">
</section>
<section class="pf-c-page__main-section pf-m-light">
<h1>Read Test</h1>
<table>
<tbody>
@ -69,8 +71,8 @@
</tr>
</tbody>
</table>
</div>
<div class="container-fluid">
</section>
<section class="pf-c-page__main-section pf-m-light">
<h1>Download Test</h1>
<table>
<tbody>
@ -83,28 +85,30 @@
</tr>
</tbody>
</table>
</div>
<div class="container-fluid">
<h1>Spawn Test</h1>
</section>
<section class="pf-c-page__main-section pf-m-light">
<h1>spawn test</h1>
<table>
<tbody>
<tr>
<td><label class="control-label" for="spawn">Command</label></td>
<td><label class="control-label" for="spawn">command</label></td>
<td><input class="form-control" id="spawn-command" value="seq 1000000"></td>
</tr>
<tr>
<td><label class="control-label" for="spawn-result">Result</label></td>
<td><label class="control-label" for="spawn-result">result</label></td>
<td><label class="form-control" id="spawn-result"></label>
</tr>
<tr>
<td><label class="control-label" for="spawn-output">Output block</label></td>
<td><label class="control-label" for="spawn-output">output block</label></td>
<td><pre id="spawn-output"></pre>
</tr>
<tr>
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="spawn">Spawn Command</button></td>
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="spawn">spawn command</button></td>
</tr>
</tbody>
</table>
</section>
</main>
</div>
</body>
</html>

6
pkg/playground/test.html
View File

@ -10,7 +10,9 @@
<script src="test.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>
<div id="internal" class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section id="internal" class="pf-c-page__main-section pf-m-light">
<img src="hammer.gif" class="pull-right" id="hammer">
<div id="nav"></div>
<button class="pf-c-button pf-m-secondary" id="go-down">Go down</button>
@ -40,6 +42,8 @@
<textarea id="edit-file"></textarea>
<br/>
Visibility: <label id="hidden"></label>
</section>
</main>
</div>
</body>
</html>

6
pkg/playground/translate.html
View File

@ -8,7 +8,9 @@
<script src="../base1/cockpit.js"></script>
</head>
<body class="pf-m-redhat-font" hidden>
<div id="internal" class="container-fluid">
<div class="pf-c-page">
<main class="pf-c-page__main" tabindex="-1">
<section id="internal" class="pf-c-page__main-section pf-m-light">
<h2>HTML translations</h2>
<p>For translating HTML use these forms:<p>
@ -166,6 +168,8 @@
<ul>
<li>Extraction of single quoted strings.</li>
</ul>
</section>
</main>
</div>
<script src="translate.js"></script>
<!-- Bring in initial translations -->

11
pkg/selinux/setroubleshoot-view.jsx
View File

@ -20,7 +20,10 @@
import cockpit from "cockpit";
import React from "react";
import { Alert, AlertActionCloseButton, Button } from "@patternfly/react-core";
import {
Alert, AlertActionCloseButton, Button,
Page, PageSection, PageSectionVariants
} from "@patternfly/react-core";
import { ExclamationCircleIcon, TrashIcon } from "@patternfly/react-icons";
import * as cockpitListing from "cockpit-components-listing.jsx";
@ -469,7 +472,8 @@ export class SETroubleshootPage extends React.Component {
}
return (
<div className="container-fluid">
<Page>
<PageSection variant={PageSectionVariants.light}>
<SELinuxStatus
selinuxStatus={this.props.selinuxStatus}
selinuxStatusError={this.props.selinuxStatusError}
@ -479,7 +483,8 @@ export class SETroubleshootPage extends React.Component {
{errorMessage}
{modifications}
{troubleshooting}
</div>
</PageSection>
</Page>
);
}
}

11
pkg/storaged/multipath.jsx
View File

@ -19,7 +19,10 @@
import cockpit from "cockpit";
import React from "react";
import { Alert, Button } from "@patternfly/react-core";
import {
Alert, Button,
Page, PageSection
} from "@patternfly/react-core";
import { get_multipathd_service } from "./utils.js";
import { dialog_open } from "./dialog.jsx";
@ -63,7 +66,8 @@ export class MultipathAlert extends React.Component {
if (multipath_broken && !multipathd_running) {
return (
<div className="container-fluid page-ct">
<Page>
<PageSection>
<Alert isInline variant='danger' title={
<>
<Button onClick={activate} variant="secondary" className="pull-right">{_("Start multipath")}</Button>
@ -72,7 +76,8 @@ export class MultipathAlert extends React.Component {
</span>
</>
} />
</div>
</PageSection>
</Page>
);
} else
return null;

20
pkg/systemd/logs.html
View File

@ -29,8 +29,9 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
</head>
<body class="pf-m-redhat-font">
<div id="journal">
<div class="content-header-extra">
<div class="pf-c-page" id="journal">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section content-header-extra">
<div class="filters">
<div class="filter">
<button id="log-filters" class="btn btn-default dropdown-toggle ct-select" type="button" data-toggle="dropdown">
@ -105,23 +106,28 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
<button id="journal-follow" class="pf-c-button pf-m-secondary" type="button" translate>Pause</button>
</div>
</section>
<section id="journal-box" class="pf-c-page__main-section pf-m-light"></section>
</main>
</div>
<div id="journal-box" class="container-fluid"></div>
</div>
<div id="journal-entry" class="container-fluid" hidden>
<div id="journal-entry" class="pf-c-page" hidden>
<main role="main" class="pf-c-page__main" tabindex="-1">
<section id="journal-box" class="pf-c-page__main-breadcrumb">
<ol class="breadcrumb">
<li><a role="link" tabindex="0" id="journal-navigate-home" translate="yes">Logs</a></li>
<li id="journal-entry-crumb" class="active" translate="yes">Entry</li>
</ol>
</section>
<section class="pf-c-page__main-section pf-m-light">
<h2 id="journal-entry-heading"></h2>
<table class="info-table-ct panel panel-default" id="journal-entry-fields">
</table>
</section>
</main>
</div>
<script type="text/javascript" src="logs.js"></script>
</body>
</html>

1
pkg/systemd/system-global.scss
View File

@ -32,7 +32,6 @@
/* Extra content header */
.content-header-extra {
background: #f5f5f5;
border-bottom: 1px solid #ddd;
padding: 10px 20px;
width: 100%;

8
pkg/users/accounts-list.js
View File

@ -21,7 +21,7 @@ import cockpit from 'cockpit';
import React from 'react';
import { superuser } from "superuser";
import { Button, Badge } from '@patternfly/react-core';
import { Button, Badge, Page, PageSection, PageSectionVariants } from '@patternfly/react-core';
import { account_create_dialog } from "./account-create-dialog.js";
const _ = cockpit.gettext;
@ -68,7 +68,8 @@ export function AccountsList({ accounts, current_user }) {
});
return (
<div id="accounts" className="container-fluid">
<Page id="accounts">
<PageSection variant={PageSectionVariants.light}>
{ superuser.allowed &&
<Button id="accounts-create" onClick={() => account_create_dialog(accounts)}>
{_("Create new account")}
@ -77,5 +78,6 @@ export function AccountsList({ accounts, current_user }) {
<ul id="accounts-list">
{ filtered_accounts.map(a => <AccountItem key={a.name} account={a} current={current_user == a.name} />) }
</ul>
</div>);
</PageSection>
</Page>);
}

46
test/verify/files/embed-cockpit/index.html
View File

@ -32,7 +32,8 @@
<body id="content" class="cards-pf">
<!-- BOILERPLATE: Makes this look like another app -->
<div class="container-fluid container-cards-pf">
<main class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light container-cards-pf">
<div class="row row-cards-pf">
<div id="embed-links" class="col-xs-3 col-sm-3 col-md-2">
<div class="row row-cards-pf">
@ -114,8 +115,51 @@
</div>
</div>
</div>
<<<<<<< HEAD:test/verify/files/embed-cockpit/index.html
</div>
</div><!-- /row -->
</div><!-- /container -->
=======
</div><!-- /row -->
</section>
</main>
<script>
var frames = { };
function click(ev) {
var href = ev.target.getAttribute("href");
ev.preventDefault();
var address = document.getElementById("embed-address").value;
if (address.indexOf(":") === -1)
address += ":9090";
var url = address + href;
var frame = frames[url];
if (!frame) {
frame = frames[url] = document.createElement("iframe");
frame.setAttribute("src", url)
frame.setAttribute("name", ev.target.getAttribute("id"));
document.getElementById("embed-here").appendChild(frame);
frame.addEventListener("load", function(ev) {
ev.target.setAttribute("loaded", "1");
});
}
var i, iframes = document.querySelectorAll("iframe");
for (i = 0; i < iframes.length; i++)
iframes[i].setAttribute("hidden", "hidden");
frame.removeAttribute("hidden");
document.getElementById("embed-title").innerText = ev.target.innerText;
return false;
}
var x, links = document.querySelectorAll("#embed-links a[href]");
for (x = 0; x < links.length; x++)
links[x].addEventListener("click", click);
</script>
>>>>>>> b64ab575d... Replace all usages of container-fluid class:test/verify/files/embed-cockpit.html
<div id="embed-loaded">
</div>
</body>