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

update admin for bs5

Browse Source 
- panel became card
- fix alignment of filter checkbox
- make all buttons consistently buttons
This commit is contained in:
Min RK
2024-04-09 13:44:05 +02:00
parent 93a34d9874
commit 3fe1e9d510
7 changed files with 75 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
jsx/src/components/AddUser/AddUser.jsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { Button } from "react-bootstrap";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
const AddUser = (props) => { const AddUser = (props) => {
@@ -47,11 +48,11 @@ const AddUser = (props) => {
)} )}
<div className="row"> <div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="panel panel-default"> <div className="card">
<div className="panel-heading"> <div className="card-header">
<h4>Add Users</h4> <h4>Add Users</h4>
</div> </div>
<div className="panel-body"> <div className="card-body">
<form> <form>
<div className="form-group"> <div className="form-group">
<textarea <textarea
@@ -82,10 +83,12 @@ const AddUser = (props) => {
</div> </div>
</form> </form>
</div> </div>
<div className="panel-footer"> <div className="card-footer">
<button id="return" className="btn btn-light"> <Link to="/">
<Link to="/">Back</Link> <Button variant="light" id="return">
</button> Back
</Button>
</Link>
<span> </span> <span> </span>
<button <button
id="submit" id="submit"

23
jsx/src/components/CreateGroup/CreateGroup.jsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { Button, Card } from "react-bootstrap";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
const CreateGroup = (props) => { const CreateGroup = (props) => {
@@ -46,11 +47,11 @@ const CreateGroup = (props) => {
)} )}
<div className="row"> <div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="panel panel-default"> <div className="card">
<div className="panel-heading"> <div className="card-header">
<h4>Create Group</h4> <h4>Create Group</h4>
</div> </div>
<div className="panel-body"> <div className="card-body">
<div className="input-group"> <div className="input-group">
<input <input
className="group-name-input" className="group-name-input"
@@ -65,15 +66,17 @@ const CreateGroup = (props) => {
></input> ></input>
</div> </div>
</div> </div>
<div className="panel-footer"> <div className="card-footer">
<button id="return" className="btn btn-light"> <Link to="/groups">
<Link to="/">Back</Link> <Button variant="light" id="return">
</button> Back
</Button>
</Link>
<span> </span> <span> </span>
<button <Button
id="submit" id="submit"
data-testid="submit" data-testid="submit"
className="btn btn-primary" variant="primary"
onClick={() => { onClick={() => {
createGroup(groupName) createGroup(groupName)
.then((data) => { .then((data) => {
@@ -96,7 +99,7 @@ const CreateGroup = (props) => {
}} }}
> >
Create Create
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

15
jsx/src/components/EditUser/EditUser.jsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Link, useLocation, useNavigate } from "react-router-dom"; import { Link, useLocation, useNavigate } from "react-router-dom";
import { Button } from "react-bootstrap";
const EditUser = (props) => { const EditUser = (props) => {
const limit = useSelector((state) => state.limit), const limit = useSelector((state) => state.limit),
@@ -61,11 +62,11 @@ const EditUser = (props) => {
)} )}
<div className="row"> <div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div className="panel panel-default"> <div className="card">
<div className="panel-heading"> <div className="card-header">
<h4>Editing user {username}</h4> <h4>Editing user {username}</h4>
</div> </div>
<div className="panel-body"> <div className="card-body">
<form> <form>
<div className="form-group"> <div className="form-group">
<textarea <textarea
@@ -118,10 +119,10 @@ const EditUser = (props) => {
</div> </div>
</form> </form>
</div> </div>
<div className="panel-footer"> <div className="card-footer">
<button className="btn btn-light"> <Link to="/">
<Link to="/">Back</Link> <Button variant="light">Back</Button>
</button> </Link>
<span> </span> <span> </span>
<button <button
id="submit" id="submit"

9
jsx/src/components/GroupEdit/GroupEdit.jsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { Link, useNavigate, useLocation } from "react-router-dom"; import { Link, useNavigate, useLocation } from "react-router-dom";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Button } from "react-bootstrap";
import GroupSelect from "../GroupSelect/GroupSelect"; import GroupSelect from "../GroupSelect/GroupSelect";
import DynamicTable from "../DynamicTable/DynamicTable"; import DynamicTable from "../DynamicTable/DynamicTable";
@@ -103,9 +104,11 @@ const GroupEdit = (props) => {
<div className="row"> <div className="row">
<div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<button id="return" className="btn btn-light"> <Link to="/groups">
<Link to="/groups">Back</Link> <Button variant="light" id="return">
</button> Back
</Button>
</Link>
<span> </span> <span> </span>
<button <button
id="submit" id="submit"

29
jsx/src/components/Groups/Groups.jsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Button } from "react-bootstrap";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { usePaginationParams } from "../../util/paginationParams"; import { usePaginationParams } from "../../util/paginationParams";
import PaginationFooter from "../PaginationFooter/PaginationFooter"; import PaginationFooter from "../PaginationFooter/PaginationFooter";
@@ -44,11 +45,11 @@ const Groups = (props) => {
<div className="container" data-testid="container"> <div className="container" data-testid="container">
<div className="row"> <div className="row">
<div className="col-md-12 col-lg-10 col-lg-offset-1"> <div className="col-md-12 col-lg-10 col-lg-offset-1">
<div className="panel panel-default"> <div className="card">
<div className="panel-heading"> <div className="card-header">
<h4>Groups</h4> <h4>Groups</h4>
</div> </div>
<div className="panel-body"> <div className="card-body">
<ul className="list-group"> <ul className="list-group">
{groups_data.length > 0 ? ( {groups_data.length > 0 ? (
groups_data.map((e, i) => ( groups_data.map((e, i) => (
@@ -77,18 +78,16 @@ const Groups = (props) => {
handleLimit={handleLimit} handleLimit={handleLimit}
/> />
</div> </div>
<div className="panel-footer"> <div className="card-footer">
<button className="btn btn-light adjacent-span-spacing"> <Link to="/">
<Link to="/">Back</Link> <Button variant="light" id="return">
</button> Back
<button </Button>
className="btn btn-primary adjacent-span-spacing" </Link>
onClick={() => { <span> </span>
navigate("/create-group"); <Link to="/create-group">
}} <Button variant="primary">New Group</Button>
> </Link>
New Group
</button>
</div> </div>
</div> </div>
</div> </div>

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

@@ -421,7 +421,7 @@ const ServerDashboard = (props) => {
<></> <></>
)} )}
<div className="server-dashboard-container"> <div className="server-dashboard-container">
<Row> <Row className="rows-cols-lg-auto g-3 mb-3 align-items-center">
<Col md={4}> <Col md={4}>
<FormControl <FormControl
type="text" type="text"
@@ -432,12 +432,12 @@ const ServerDashboard = (props) => {
onChange={handleSearch} onChange={handleSearch}
/> />
</Col> </Col>
<Col md={3}> <Col md={4}>
{/* div.checkbox required for BS3 CSS */}
<div className="checkbox">
<label title="check to only show running servers, otherwise show all">
<Form.Check <Form.Check
inline inline
title="check to only show running servers, otherwise show all"
>
<Form.Check.Input
type="checkbox" type="checkbox"
name="active_servers" name="active_servers"
id="active-servers-filter" id="active-servers-filter"
@@ -446,13 +446,16 @@ const ServerDashboard = (props) => {
setStateFilter(event.target.checked ? "active" : null); setStateFilter(event.target.checked ? "active" : null);
}} }}
/> />
{"only active servers"} <Form.Check.Label>{"only active servers"}</Form.Check.Label>
</label> </Form.Check>
</div>
</Col> </Col>
<Col md="auto" style={{ float: "right", margin: 15 }}> <Col md={{ span: 3, offset: 1 }}>
<Link to="/groups">{"> Manage Groups"}</Link> <Link to="/groups">
<Button variant="light" className="form-control">
{"Manage Groups"}
</Button>
</Link>
</Col> </Col>
</Row> </Row>
<table className="table table-bordered table-hover"> <table className="table table-bordered table-hover">

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

@@ -73,7 +73,7 @@ goals:
min-width: 180px; min-width: 180px;
} }
.admin-table-head #actions-header { .admin-table-head #actions-header {
width: 350px; width: 410px;
} }
/* vertical stack server buttons on small windows */ /* vertical stack server buttons on small windows */