hazza/jupyterhub
1
0
Fork 0
mirror of https://github.com/jupyterhub/jupyterhub.git synced 2025-10-19 07:53:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

progress toward bootstrap 5

Browse Source
This commit is contained in:
Min RK
2024-04-04 16:10:15 +02:00
parent cca49486e3
commit 2fe060861a
11 changed files with 106 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -22,6 +22,8 @@ jupyterhub_cookie_secret
jupyterhub.sqlite
jupyterhub.sqlite*
share/jupyterhub/static/components
share/jupyterhub/static/css/style.css
share/jupyterhub/static/css/style.css.map
share/jupyterhub/static/css/style.min.css
share/jupyterhub/static/css/style.min.css.map
share/jupyterhub/static/js/admin-react.js*

1
jsx/.gitignore vendored
View File

@@ -1,2 +1,3 @@
node_modules
build/admin-react.js
.yarn

4
jsx/src/components/ServerDashboard/ServerDashboard.jsx
View File

@@ -342,7 +342,7 @@ const ServerDashboard = (props) => {
variant={open ? "secondary" : "primary"}
size="sm"
>
<span className="caret"></span>
<span className="fa fa-caret-down"></span>
</Button>{" "}
</span>
<span data-testid={`user-name-div-${userServerName}`}>
@@ -565,7 +565,7 @@ const ServerDashboard = (props) => {
Stop All
</Button>
{/* spacing between start/stop and Shutdown */}
<span style={{ marginLeft: "56px" }}> </span>
<span style={{ marginLeft: "30px" }}> </span>
{/* Shutdown Jupyterhub */}
<Button
variant="danger"

7
jsx/src/components/ServerDashboard/server-dashboard.css
View File

@@ -7,13 +7,6 @@
margin-left: auto;
}
.btn-light {
/* backport bs5 btn-light colors */
background-color: #f9fafb;
border-color: #f9fafb;
color: #000;
}
.server-dashboard-container .btn-light {
border: 1px solid #ddd;
}

10
share/jupyterhub/static/scss/login.scss
View File

@@ -3,21 +3,19 @@
height: 80vh;
& #insecure-login-warning {
// @include bg-warning();
background-color: $warning-bg-subtle;
padding: 10px;
}
.service-login {
text-align: center;
display: table-cell;
vertical-align: middle;
margin: auto auto 20% auto;
margin: auto;
}
form {
display: table-cell;
vertical-align: middle;
margin: auto auto 20% auto;
margin: auto;
width: 350px;
}
@@ -31,8 +29,8 @@
padding: 10px 20px;
color: #fff;
background: $jupyter-orange;
border-radius: $border-radius-large $border-radius-large 0 0;
font-size: large;
border-radius: $border-radius-large $border-radius-large 0 0;
}
.auth-form-header > h1 {

17
share/jupyterhub/static/scss/page.scss
View File

@@ -1,6 +1,5 @@
@import "./variables.scss";
$logo-height: 28px;
$grid-float-breakpoint: map-get($grid-breakpoints, "sm");
#jupyterhub-logo {
@media (max-width: $grid-float-breakpoint) {
@@ -9,7 +8,18 @@ $logo-height: 28px;
}
.jpy-logo {
height: $logo-height;
margin-top: ($navbar-height - $logo-height) / 2;
margin-top: calc($navbar-brand-height - $logo-height) / 2;
}
}
.navbar-nav {
.nav-link {
&:hover,
&:focus {
// no color change
color: var(--#{$prefix}navbar-color);
background-color: darken($body-tertiary-bg, 10%);
}
}
}
@@ -71,6 +81,7 @@ $logo-height: 28px;
0 0 8px $jupyter-orange;
border-color: $jupyter-orange;
outline-color: $jupyter-orange;
}
.btn-jupyter {
@include button-variant(#fff, $jupyter-orange, $jupyter-red);

59
share/jupyterhub/static/scss/style.scss
View File

@@ -1,31 +1,60 @@
/*! variables */
@import "./variables.scss";
/*!
*
* Twitter Bootstrap
* Bootstrap
*
*/
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../components/bootstrap/scss/functions"; // Required
@import "../components/bootstrap/scss/variables"; // Required
@import "../components/bootstrap/scss/mixins"; // Required
@import "../components/bootstrap/scss/root"; // Required
@import "../components/bootstrap/scss/reboot"; // Required
// 2. Include any default variable overrides here
@import "./variables.scss";
@import "../components/bootstrap/scss/alert";
@import "../components/bootstrap/scss/buttons";
@import "../components/bootstrap/scss/containers";
@import "../components/bootstrap/scss/grid";
@import "../components/bootstrap/scss/utilities";
@import "../components/bootstrap/scss/bootstrap"; // Full bootstrap (maybe wasteful?)
// // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
// @import "../components/bootstrap/scss/variables"; // Required
// @import "../components/bootstrap/scss/variables-dark"; // Required
//
//
// // 4. Include any default map overrides here
//
// // 5. Include remainder of required parts
// @import "../components/bootstrap/scss/maps"; // Required
// @import "../components/bootstrap/scss/mixins"; // Required
// @import "../components/bootstrap/scss/root"; // Required
//
// // 6. Optionally include any other parts as needed
// @import "../components/bootstrap/scss/utilities";
// @import "../components/bootstrap/scss/reboot";
// @import "../components/bootstrap/scss/type";
// @import "../components/bootstrap/scss/images";
// @import "../components/bootstrap/scss/navbar";
// @import "../components/bootstrap/scss/alert";
// @import "../components/bootstrap/scss/buttons";
// @import "../components/bootstrap/scss/containers";
// @import "../components/bootstrap/scss/grid";
// @import "../components/bootstrap/scss/modal";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
// @import "../components/bootstrap/scss/utilities/api";
// redefine .btn-xs, removed in bootstrap 4
.btn-xs {
// $padding-y, $padding-x, $font-size, $border-radius
@include button-size(1px, 5px, 14px, 3px);
}
/*!
*
* Font Awesome
*
*/
// $fa-font-path: "../components/font-awesome/fonts";
// @import "../components/font-awesome/scss/font-awesome.scss";
$fa-font-path: "../components/@fortawesome/fontawesome-free/webfonts";
@import "../components/@fortawesome/fontawesome-free/scss/fontawesome";
// You can include all the other styles the same as before
@import "../components/@fortawesome/fontawesome-free/scss/regular.scss";
@import "../components/@fortawesome/fontawesome-free/scss/solid.scss";
/*!
*

24
share/jupyterhub/static/scss/variables.scss
View File

@@ -1,23 +1,17 @@
$border-radius-small: 2px;
$border-radius-base: 2px;
$border-radius-large: 3px;
$border-radius-large: 5px;
$navbar-height: 40px;
$grid-float-breakpoint: $screen-xs-min;
$navbar-default-color: #222;
$navbar-default-link-color: $navbar-default-color;
// darken background on hover, no change to text
$navbar-default-link-hover-color: $navbar-default-color;
$navbar-default-link-hover-bg: darken($navbar-default-bg, 10%);
// background part is in page.scss
$nav-link-color: var(--bs-navbar-color);
$nav-link-hover-color: $nav-link-color;
$jupyter-orange: #f37524;
$jupyter-red: #e34f21;
// color blind-friendly alternative to red/green
// accessible alternative to red/green
// from 5-class RdYlBu via colorbrewer.org
// eliminate distinction between 'primary' and 'success'
$brand-primary: #2c7bb6;
$brand-success: $brand-primary;
$brand-danger: #d7191c;
$text-muted: #222;
$primary: #2c7bb6;
$success: $primary;
$danger: #d7191c;

2
share/jupyterhub/templates/login.html
View File

@@ -29,7 +29,7 @@
<div class="auth-form-header">
<h1>Sign in</h1>
</div>
<div class='auth-form-body'>
<div class='auth-form-body m-auto'>
<p id='insecure-login-warning' class='hidden'>
Warning: JupyterHub seems to be served over an unsecured HTTP connection.

35
share/jupyterhub/templates/page.html
View File

@@ -40,7 +40,7 @@
{% block scripts %}
<script src="{{static_url("components/requirejs/require.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{static_url("components/jquery/dist/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{static_url("components/bootstrap/dist/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script>
<!-- <script src="{{static_url("components/bootstrap/dist/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script> -->
{% endblock %}
<script>
require.config({
@@ -104,35 +104,30 @@
</noscript>
{% block nav_bar %}
<nav class="navbar navbar-default">
<nav class="navbar navbar-expand-lg bg-body-tertiary mb-4">
<div class="container-fluid">
<div class="navbar-header">
{% block logo %}
<span id="jupyterhub-logo" class="pull-left">
<span id="jupyterhub-logo" class="navbar-brand">
<a href="{{logo_url or base_url}}"><img src='{{base_url}}logo' alt='JupyterHub logo' class='jpy-logo' title='Home'/></a>
</span>
{% endblock %}
{% if user %}
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#thenavbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#thenavbar" aria-controls="thenavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{% endif %}
</div>
<div class="collapse navbar-collapse" id="thenavbar">
{% if user %}
<ul class="nav navbar-nav">
<ul class="nav navbar-nav me-auto mb-2 mb-lg-0">
{% block nav_bar_left_items %}
<li><a href="{{base_url}}home">Home</a></li>
<li><a href="{{base_url}}token">Token</a></li>
<li class="nav-item"><a class="nav-link" href="{{base_url}}home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{{base_url}}token">Token</a></li>
{% if 'admin-ui' in parsed_scopes %}
<li><a href="{{base_url}}admin">Admin</a></li>
<li class="nav-item"><a class="nav-link" href="{{base_url}}admin">Admin</a></li>
{% endif %}
{% if services %}
<li class="dropdown">
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
{% for service in services %}
@@ -146,16 +141,16 @@
{% endblock %}
</ul>
{% endif %}
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav me-2">
{% block nav_bar_right_items %}
<li>
<li class="nav-item">
{% block login_widget %}
<span id="login_widget">
{% if user %}
<p class="navbar-text">{{user.name}}</p>
<a id="logout" role="button" class="navbar-btn btn-sm btn btn-default" href="{{logout_url}}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
<span class="navbar-text">{{user.name}}</span>
<a id="logout" role="button" class="btn btn-sm btn-outline-dark" href="{{logout_url}}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
{% else %}
<a id="login" role="button" class="btn-sm btn navbar-btn btn-default" href="{{login_url}}">Login</a>
<a id="login" role="button" class="btn btn-sm btn-outline-dark" href="{{login_url}}">Login</a>
{% endif %}
</span>
{% endblock %}

28
share/jupyterhub/templates/token.html
View File

@@ -5,7 +5,7 @@
<div class="container">
<h1 class="sr-only">Manage JupyterHub Tokens</h1>
<div class="row">
<form id="request-token-form" class="col-md-offset-3 col-md-6">
<form id="request-token-form" class="m-auto col-lg-6">
<div class="text-center">
<button type="submit" class="btn btn-lg btn-jupyter">
Request new API token
@@ -48,16 +48,16 @@
</div>
<div class="row">
<div id="token-area" class="col-md-6 col-md-offset-3" style="display: none;">
<div class="panel panel-default">
<div class="panel-heading">
<div id="token-area" class="col-lg-6 m-auto" style="display: none;">
<div class="card">
<div class="card-header">
Your new API Token
</div>
<div class="panel-body">
<p class="lead text-center">
<div class="card-body">
<p class="card-title text-center">
<span id="token-result"></span>
</p>
<p>
<p class="card-text">
Copy this token. You won't be able to see it again,
but you can always come back here to get a new one.
</p>
@@ -86,10 +86,10 @@
</thead>
<tbody>
{% for token in api_tokens %}
<tr class="token-row" data-token-id="{{token.api_id}}">
<tr class="token-row container" data-token-id="{{token.api_id}}">
{% block token_row scoped %}
<td class="note-col col-sm-4">{{token.note}}</td>
<td class="scope-col col-sm-1">
<td class="note-col col">{{token.note}}</td>
<td class="scope-col col">
<details>
<summary>scopes</summary>
{% for scope in token.scopes %}
@@ -97,28 +97,28 @@
{% endfor %}
</details>
</td>
<td class="time-col col-sm-3">
<td class="time-col col">
{%- if token.last_activity -%}
{{ token.last_activity.isoformat() + 'Z' }}
{%- else -%}
Never
{%- endif -%}
</td>
<td class="time-col col-sm-3">
<td class="time-col col">
{%- if token.created -%}
{{ token.created.isoformat() + 'Z' }}
{%- else -%}
N/A
{%- endif -%}
</td>
<td class="time-col col-sm-3">
<td class="time-col col">
{%- if token.expires_at -%}
{{ token.expires_at.isoformat() + 'Z' }}
{%- else -%}
Never
{%- endif -%}
</td>
<td class="col-sm-1 text-center">
<td class="col text-center">
<button class="revoke-token-btn btn btn-xs btn-danger">revoke</button>
</td>
{% endblock token_row %}