Skip to content

Commit

Permalink
Replace all usages of container-fluid class
Browse files Browse the repository at this point in the history 
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 cockpit-project#14717
  • Loading branch information
@KKoukiou @marusak
KKoukiou authored and marusak committed Oct 13, 2020
1 parent 7f55289 commit a406a35
Show file tree
Hide file tree
Showing 33 changed files with 1,283 additions and 1,173 deletions.
22 changes: 13 additions & 9 deletions examples/docker-info/plugin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,19 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Docker Daemon Info</h2>
<ul>
<li>Total Memory: <span id="docker-memory">?</span></li>
<li>Go Routines: <span id="docker-routines">?</span></li>
<li>File Descriptors: <span id="docker-files">?</span></li>
<li>Containers: <span id="docker-containers">?</span></li>
<li>Images: <span id="docker-images">?</span></li>
</ul>
<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>
<li>Go Routines: <span id="docker-routines">?</span></li>
<li>File Descriptors: <span id="docker-files">?</span></li>
<li>Containers: <span id="docker-containers">?</span></li>
<li>Images: <span id="docker-images">?</span></li>
</ul>
</section>
</main>
</div>

<script>
Expand Down
12 changes: 8 additions & 4 deletions examples/long-running-process/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@
</head>

<body>
<div class="container-fluid">
<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>
<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>
79 changes: 40 additions & 39 deletions examples/ocserv/ocserv.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,48 +28,49 @@
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body hidden>

<div class="curtain-ocserv blank-slate-pf" hidden>
<div class="blank-slate-pf-icon">
<div class="fa fa-exclamation-circle"></div>
</div>
<h1>Couldn't connect to OpenConnect Server</h1>
<p></p>
</div>

<div id="status-info" class="container-fluid page-ct">
<div class="panel panel-default">
<div class="panel-heading">
<span id="head">Server status</span>
<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>
</div>
<h1>Couldn't connect to OpenConnect Server</h1>
<p></p>
</div>
<table class="info-table-ct" id="status-table">
</table>
</div>
</div>

<div id="users-info" class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<span id="head">Connected users</span>
</div>
<table class="table table-hover" id="users-table">
<thead>
<tr>
<th class="ocserv-users-id">ID</th>
<th class="ocserv-users-name">Username</th>
<th class="ocserv-users-remote-ip">Remote IP</th>
<th class="ocserv-users-ip">VPN IP</th>
<th class="ocserv-users-since">Since</th>
<th class="ocserv-users-state">State</th>
</tr>
</thead>
<tbody id="users-table-tbody">
</tbody>
</table>
</div>
<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>
</div>
<table class="info-table-ct" id="status-table">
</table>
</div>
</section>

<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>
</div>
<table class="table table-hover" id="users-table">
<thead>
<tr>
<th class="ocserv-users-id">ID</th>
<th class="ocserv-users-name">Username</th>
<th class="ocserv-users-remote-ip">Remote IP</th>
<th class="ocserv-users-ip">VPN IP</th>
<th class="ocserv-users-since">Since</th>
<th class="ocserv-users-state">State</th>
</tr>
</thead>
<tbody id="users-table-tbody">
</tbody>
</table>
</div>
</section>
</main>
</div>


<script>
var raw;
var status_raw;
Expand Down
70 changes: 37 additions & 33 deletions examples/package-simple/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,46 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Example: Simple Package</h2>
<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
to ping a remote address.</p>
<p>This example is an installable cockpit package that runs a simple command
to ping a remote address.</p>

<p>Link the package into your home directory:</p>
<ol>
<li>Make sure Cockpit works on the local machine.</li>
<li>Link this directory into your home directory:
<pre>$ mkdir -p ~/.local/share/cockpit
$ ln -snf $(pwd) ~/.local/share/cockpit/playground
$ sudo systemctl restart cockpit</pre>
</li>
<li>Log into cockpit using your web browser, with the same account as the above.</li>
<li>Choose this item from the sidebar menu</li>
<li>Feel free to edit this file and refresh in the browser.</li>
</ol>
</div>
<p>Link the package into your home directory:</p>
<ol>
<li>Make sure Cockpit works on the local machine.</li>
<li>Link this directory into your home directory:
<pre>$ mkdir -p ~/.local/share/cockpit
$ ln -snf $(pwd) ~/.local/share/cockpit/playground
$ sudo systemctl restart cockpit</pre>
</li>
<li>Log into cockpit using your web browser, with the same account as the above.</li>
<li>Choose this item from the sidebar menu</li>
<li>Feel free to edit this file and refresh in the browser.</li>
</ol>
</section>

<div class="container-fluid">
<table class="form-table-ct">
<tr>
<td><label class="control-label" for="address">URL</label></td>
<td><input class="form-control" id="address" value="8.8.8.8"></td>
</tr>
<tr>
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="ping">Ping</button></td>
<td><button class="pf-c-button pf-m-secondary pf-m-danger" disabled id="stop">Stop</button></td>
</tr>
</table>
<p>
<pre id="output" style="display: none;">
</pre>
</p>
<p id="failure" class="warning"></p>
<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>
<td><input class="form-control" id="address" value="8.8.8.8"></td>
</tr>
<tr>
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="ping">Ping</button></td>
<td><button class="pf-c-button pf-m-secondary pf-m-danger" disabled id="stop">Stop</button></td>
</tr>
</table>
<p>
<pre id="output" style="display: none;">
</pre>
</p>
<p id="failure" class="warning"></p>
</section>
</main>
</div>

<script>
Expand Down
28 changes: 16 additions & 12 deletions examples/pinger/ping.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,22 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid">
<table class="form-table-ct">
<tr>
<td><label class="control-label" for="address">Address</label></td>
<td><input class="form-control" id="address" value="8.8.8.8"></td>
</tr>
<tr>
<td><button class="pf-c-button pf-m-primary" id="ping">Ping</button></td>
<td><span id="result"></span></td>
</tr>
</table>
<pre id="output"></pre>
<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>
<td><input class="form-control" id="address" value="8.8.8.8"></td>
</tr>
<tr>
<td><button class="pf-c-button pf-m-primary" id="ping">Ping</button></td>
<td><span id="result"></span></td>
</tr>
</table>
<pre id="output"></pre>
</section>
</main>
</div>

<script src="pinger.js"></script>
Expand Down
45 changes: 24 additions & 21 deletions examples/poc-cim/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,30 @@
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Proof of Concept: CIM Access</h2>

<p>This is a proof of concept for accessing CIM data via Pegasus in Cockpit.</p>

<p><button class="pf-c-button pf-m-secondary pf-m-primary" id="process">Process List</button>
<span id="message" class="warning" hidden></span></p>

<table class="table table-hover" style="font-size: 11px" hidden>
<thead>
<tr>
<td>PID</td>
<td>Name</td>
<td>UID</td>
<td>Priority</td>
</tr>
</thead>
<tbody>
</tbody>
</table>

<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>

<p><button class="pf-c-button pf-m-secondary pf-m-primary" id="process">Process List</button>
<span id="message" class="warning" hidden></span></p>

<table class="table table-hover" style="font-size: 11px" hidden>
<thead>
<tr>
<td>PID</td>
<td>Name</td>
<td>UID</td>
<td>Priority</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</main>
</div>

<script>
Expand Down
39 changes: 21 additions & 18 deletions examples/xhr-proxy/xhrproxy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,27 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid">
<table class="form-table-ct">
<tr>
<th><label class="control-label" for="address">URL</label></th>
<td><input class="form-control" id="address" value="http://localhost:12345"></td>
</tr>
<tr>
<th></th>
<td><button class="pf-c-button pf-m-primary" id="get">GET request</button></td>
<tr>
<th>Code</th>
<td><span id="result"></span></td>
</tr>
<tr>
<th>Output</th>
<td><pre id="output"></pre></td>
</table>

<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>
<td><input class="form-control" id="address" value="http://localhost:12345"></td>
</tr>
<tr>
<th></th>
<td><button class="pf-c-button pf-m-primary" id="get">GET request</button></td>
<tr>
<th>Code</th>
<td><span id="result"></span></td>
</tr>
<tr>
<th>Output</th>
<td><pre id="output"></pre></td>
</table>
</section>
</main>
</div>

<script src="xhrproxy.js"></script>
Expand Down
34 changes: 19 additions & 15 deletions examples/zoner/tz.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,25 @@
<script src="../base1/cockpit.js"></script>
</head>
<body>
<div class="container-fluid" style='max-width: 400px'>
<table class="form-table-ct">
<tr>
<td><label class="control-label">Time Zone</label></td>
<td><span id="current"></span></td>
</tr>
<tr>
<td><label class="control-label" for="new">New Zone</label></td>
<td><input class="form-control" id="new" value="UTC"></td>
</tr>
<tr>
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="change">Change</button></td>
<td><span id="failure"></span></td>
</tr>
</table>
<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>
<td><span id="current"></span></td>
</tr>
<tr>
<td><label class="control-label" for="new">New Zone</label></td>
<td><input class="form-control" id="new" value="UTC"></td>
</tr>
<tr>
<td><button class="pf-c-button pf-m-secondary pf-m-primary" id="change">Change</button></td>
<td><span id="failure"></span></td>
</tr>
</table>
</section>
</main>
</div>

<script>
Expand Down
Loading

0 comments on commit a406a35

Please sign in to comment.