mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-20 15:36:16 -04:00
Fixed admin panel mobile view.
This commit is contained in:
SamTv12345
parent
3de6c7caef
commit
178fe7c24d
3 changed files with 577 additions and 513 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import {useEffect} from 'react'
|
||||
import {useEffect, useState} from 'react'
|
||||
import './App.css'
|
||||
import {connect} from 'socket.io-client'
|
||||
import {isJSONClean} from './utils/utils.ts'
|
||||
|
|
@ -6,22 +6,23 @@ import {NavLink, Outlet, useNavigate} from "react-router-dom";
|
|||
import {useStore} from "./store/store.ts";
|
||||
import {LoadingScreen} from "./utils/LoadingScreen.tsx";
|
||||
import {Trans, useTranslation} from "react-i18next";
|
||||
import {Cable, Construction, Crown, NotepadText, Wrench, PhoneCall} from "lucide-react";
|
||||
import {Cable, Construction, Crown, NotepadText, Wrench, PhoneCall, LucideMenu} from "lucide-react";
|
||||
|
||||
const WS_URL = import.meta.env.DEV? 'http://localhost:9001' : ''
|
||||
export const App = ()=> {
|
||||
const WS_URL = import.meta.env.DEV ? 'http://localhost:9001' : ''
|
||||
export const App = () => {
|
||||
const setSettings = useStore(state => state.setSettings);
|
||||
const {t} = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const [sidebarOpen, setSidebarOpen] = useState<boolean>(true)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/admin-auth/', {
|
||||
method: 'POST'
|
||||
}).then((value)=>{
|
||||
if(!value.ok){
|
||||
}).then((value) => {
|
||||
if (!value.ok) {
|
||||
navigate('/login')
|
||||
}
|
||||
}).catch(()=>{
|
||||
}).catch(() => {
|
||||
navigate('/login')
|
||||
})
|
||||
}, []);
|
||||
|
|
@ -75,7 +76,7 @@ export const App = ()=> {
|
|||
useStore.getState().setShowLoading(false);
|
||||
});
|
||||
|
||||
settingSocket.on('saveprogress', (status)=>{
|
||||
settingSocket.on('saveprogress', (status) => {
|
||||
console.log(status)
|
||||
})
|
||||
|
||||
|
|
@ -85,7 +86,7 @@ export const App = ()=> {
|
|||
}
|
||||
}, []);
|
||||
|
||||
return <div id="wrapper">
|
||||
return <div id="wrapper" className={`${sidebarOpen ? '': 'closed' }`}>
|
||||
<LoadingScreen/>
|
||||
<div className="menu">
|
||||
<div className="inner-menu">
|
||||
|
|
@ -103,6 +104,9 @@ export const App = ()=> {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<button id="icon-button" onClick={() => {
|
||||
setSidebarOpen(!sidebarOpen)
|
||||
}}><LucideMenu/></button>
|
||||
<div className="innerwrapper">
|
||||
<Outlet/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
--etherpad-color: #0f775b;
|
||||
--etherpad-comp: #9C8840;
|
||||
--etherpad-light: #99FF99;
|
||||
--sidebar-width: 20em;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -28,17 +29,21 @@ body {
|
|||
}
|
||||
|
||||
div.menu {
|
||||
left: 0;
|
||||
transition: left .3s;
|
||||
height: 100vh;
|
||||
font-size: 16px;
|
||||
font-weight: bolder;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 20%;
|
||||
min-width: 20%;
|
||||
width: var(--sidebar-width);
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.icon-button{
|
||||
|
||||
.icon-button {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
background-color: var(--etherpad-color);
|
||||
|
|
@ -108,7 +113,7 @@ div.menu li {
|
|||
|
||||
|
||||
div.menu li:has(.active) {
|
||||
background-color: #9C885C ;
|
||||
background-color: #9C885C;
|
||||
}
|
||||
|
||||
div.menu li a {
|
||||
|
|
@ -116,12 +121,14 @@ div.menu li a {
|
|||
}
|
||||
|
||||
|
||||
|
||||
div.innerwrapper {
|
||||
transition: margin-left .3s;
|
||||
isolation: isolate;
|
||||
background-color: #F0F0F0;
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
flex-grow: 100;
|
||||
margin-left: var(--sidebar-width);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -130,11 +137,9 @@ div.innerwrapper-err {
|
|||
}
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
background: none repeat scroll 0px 0px #FFFFFF;
|
||||
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
|
||||
min-height: 100%;/*always display a scrollbar*/
|
||||
|
||||
min-height: 100%; /*always display a scrollbar*/
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -173,14 +178,17 @@ input {
|
|||
.sort {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sort:after {
|
||||
content: '▲▼'
|
||||
}
|
||||
|
||||
.sort.up:after {
|
||||
content:'▲'
|
||||
content: '▲'
|
||||
}
|
||||
|
||||
.sort.down:after {
|
||||
content:'▼'
|
||||
content: '▼'
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -196,11 +204,14 @@ table {
|
|||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#available-plugins th:first-child, #available-plugins th:nth-child(2){
|
||||
#available-plugins th:first-child, #available-plugins th:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -212,35 +223,40 @@ td, th {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#installed-plugins td>div {
|
||||
position: relative;/* Allows us to position the loading indicator relative to this row */
|
||||
#installed-plugins td > div {
|
||||
position: relative; /* Allows us to position the loading indicator relative to this row */
|
||||
display: inline-block; /*make this fill the whole cell*/
|
||||
width:100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.messages {
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.messages * {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.messages .fetching {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom:0; right:0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: auto;
|
||||
|
||||
background: rgb(255,255,255);
|
||||
background: rgb(255, 255, 255);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-progress.progress {
|
||||
padding-top: 20%;
|
||||
background: rgba(255,255,255,0.3);
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.progress * {
|
||||
|
|
@ -302,17 +318,46 @@ pre {
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
||||
#icon-button {
|
||||
color: var(--etherpad-color);
|
||||
top: 10px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.inner-menu span:nth-child(2) {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
#wrapper.closed .menu {
|
||||
left: calc(-1 * var(--sidebar-width));
|
||||
}
|
||||
|
||||
#wrapper.closed .innerwrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
div.innerwrapper {
|
||||
padding: 0 15px 15px 15px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.inner-menu {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
div.menu {
|
||||
padding: 1px 15px 0 15px;
|
||||
position: static;
|
||||
height: auto;
|
||||
border-right: none;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -376,6 +421,7 @@ pre {
|
|||
|
||||
.login-background {
|
||||
background-image: url("/fond.jpg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
|
|
@ -389,12 +435,11 @@ pre {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.login-inner-box [type=submit]{
|
||||
.login-inner-box [type=submit] {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.login-textinput {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
|
@ -405,14 +450,20 @@ pre {
|
|||
}
|
||||
|
||||
.login-box {
|
||||
width: 20%;
|
||||
padding: 20px;
|
||||
border-radius: 40px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login-inner-box{
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.login-box {
|
||||
width: 90%
|
||||
}
|
||||
}
|
||||
|
||||
.login-inner-box {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -480,7 +531,6 @@ pre {
|
|||
}
|
||||
|
||||
|
||||
|
||||
.ToastViewport {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
|
|
@ -518,19 +568,24 @@ pre {
|
|||
column-gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ToastRoot[data-state='open'] {
|
||||
animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.ToastRoot[data-state='closed'] {
|
||||
animation: hide 100ms ease-in;
|
||||
}
|
||||
|
||||
.ToastRoot[data-swipe='move'] {
|
||||
transform: translateX(var(--radix-toast-swipe-move-x));
|
||||
}
|
||||
|
||||
.ToastRoot[data-swipe='cancel'] {
|
||||
transform: translateX(0);
|
||||
transition: transform 200ms ease-out;
|
||||
}
|
||||
|
||||
.ToastRoot[data-swipe='end'] {
|
||||
animation: swipeOut 100ms ease-out;
|
||||
}
|
||||
|
|
@ -597,7 +652,7 @@ pre {
|
|||
border-color: transparent;
|
||||
border-radius: 20px;
|
||||
height: 2.5rem;
|
||||
width: 100vh;
|
||||
width: 100%;
|
||||
padding: 5px 5px 5px 30px;
|
||||
}
|
||||
|
||||
|
|
@ -684,7 +739,7 @@ table tbody tr.active-row {
|
|||
}
|
||||
|
||||
|
||||
.pad-pagination{
|
||||
.pad-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
|
@ -711,7 +766,7 @@ table tbody tr.active-row {
|
|||
align-self: center;
|
||||
}
|
||||
|
||||
.pad-pagination >span {
|
||||
.pad-pagination > span {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -765,9 +820,11 @@ input, button, select, optgroup, textarea {
|
|||
box-shadow: 0 2px 10px var(--black-a7);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.SwitchRoot:focus {
|
||||
box-shadow: 0 0 0 2px black;
|
||||
}
|
||||
|
||||
.SwitchRoot[data-state='checked'] {
|
||||
background-color: var(--etherpad-color);
|
||||
}
|
||||
|
|
@ -783,6 +840,7 @@ input, button, select, optgroup, textarea {
|
|||
transform: translateX(2px);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.SwitchThumb[data-state='checked'] {
|
||||
transform: translateX(25px);
|
||||
}
|
||||
|
|
@ -803,7 +861,7 @@ input, button, select, optgroup, textarea {
|
|||
color: white
|
||||
}
|
||||
|
||||
.search-pads{
|
||||
.search-pads {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@ export const HomePage = () => {
|
|||
<h2><Trans i18nKey="admin_plugins.available"/></h2>
|
||||
<SearchField onChange={v=>{setSearchTerm(v.target.value)}} placeholder={t('admin_plugins.available_search.placeholder')} value={searchTerm}/>
|
||||
|
||||
<div className="table-container">
|
||||
<table id="available-plugins">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -241,4 +242,5 @@ export const HomePage = () => {
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue