fix ui
This commit is contained in:
DioCrafts
@@ -5,11 +5,14 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
width: 100%;
|
||||||
background-color: #f5f7fa;
|
background-color: #f5f7fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-panel {
|
.auth-panel {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
max-width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||||||
|
|||||||
+175
-42
@@ -1504,48 +1504,6 @@ header {
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.sidebar {
|
|
||||||
width: 60px;
|
|
||||||
padding: 15px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-name, .storage-title, .storage-info {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
justify-content: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item i {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive styles for shared page */
|
|
||||||
.shared-filters {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shared-list thead th:nth-child(4),
|
|
||||||
.shared-list thead th:nth-child(5),
|
|
||||||
.shared-list tbody td:nth-child(4),
|
|
||||||
.shared-list tbody td:nth-child(5) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-content {
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Folder selection for move dialog */
|
/* Folder selection for move dialog */
|
||||||
.folder-select-item {
|
.folder-select-item {
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
@@ -1639,3 +1597,178 @@ header {
|
|||||||
background-color: #f44336;
|
background-color: #f44336;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 60px;
|
||||||
|
padding: 15px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-name, .storage-title, .storage-info {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
justify-content: center;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item i {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive styles for shared page */
|
||||||
|
.shared-filters {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shared-list thead th:nth-child(4),
|
||||||
|
.shared-list thead th:nth-child(5),
|
||||||
|
.shared-list tbody td:nth-child(4),
|
||||||
|
.shared-list tbody td:nth-child(5) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-content {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilos específicos para la página Shared */
|
||||||
|
.page-description {
|
||||||
|
color: #718096;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: -15px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mejoras para los filtros en la página Shared */
|
||||||
|
.shared-filters {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 15px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 15px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #4a5568;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group select {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input {
|
||||||
|
padding: 8px 15px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mejoras en la tabla de elementos compartidos */
|
||||||
|
.shared-list-container {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shared-list {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shared-list thead th {
|
||||||
|
padding: 15px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2d3748;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-bottom: 1px solid #e0e6ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shared-list tbody td {
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estado vacío mejorado */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 60px 20px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-icon {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #2d3748;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state p {
|
||||||
|
color: #718096;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.primary {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #ff5e3a;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.primary:hover {
|
||||||
|
background-color: #e64a29;
|
||||||
|
}
|
||||||
|
|||||||
+121
-66
@@ -6,83 +6,138 @@
|
|||||||
<title>OxiCloud - Shared Resources</title>
|
<title>OxiCloud - Shared Resources</title>
|
||||||
<link rel="stylesheet" href="/css/style.css">
|
<link rel="stylesheet" href="/css/style.css">
|
||||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<!-- Main layout similar to index.html -->
|
||||||
<div class="header-container">
|
<div class="sidebar">
|
||||||
<a href="/" class="logo-container">
|
<div class="logo-container">
|
||||||
<img src="/oxicloud-logo.svg" alt="OxiCloud Logo" class="logo">
|
<div class="logo">
|
||||||
<h1>OxiCloud</h1>
|
<svg viewBox="0 0 500 500">
|
||||||
</a>
|
<path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z" fill="#fff"/>
|
||||||
<div class="header-actions">
|
</svg>
|
||||||
<div class="language-selector">
|
</div>
|
||||||
<select id="language-selector">
|
<div class="app-name">OxiCloud</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-menu">
|
||||||
|
<div class="nav-item">
|
||||||
|
<i class="fas fa-folder"></i>
|
||||||
|
<span data-i18n="nav.files">Files</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item active">
|
||||||
|
<i class="fas fa-share-alt"></i>
|
||||||
|
<span data-i18n="nav.shared">Shared</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i class="fas fa-clock"></i>
|
||||||
|
<span data-i18n="nav.recent">Recent</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i class="fas fa-star"></i>
|
||||||
|
<span data-i18n="nav.favorites">Favorites</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
<span data-i18n="nav.trash">Trash</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="storage-container">
|
||||||
|
<div class="storage-title">Almacenamiento</div>
|
||||||
|
<div class="storage-bar">
|
||||||
|
<div class="storage-fill"></div>
|
||||||
|
</div>
|
||||||
|
<div class="storage-info">56% usado (5.6GB / 10GB)</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="main-content">
|
||||||
|
<!-- Top Bar -->
|
||||||
|
<div class="top-bar">
|
||||||
|
<div class="search-container">
|
||||||
|
<i class="fas fa-search search-icon"></i>
|
||||||
|
<input type="text" id="shared-search" data-i18n-placeholder="actions.search" placeholder="Search shared items...">
|
||||||
|
<button id="shared-search-btn" class="search-button"><i class="fas fa-search"></i></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="user-controls">
|
||||||
|
<div id="language-selector" class="language-selector">
|
||||||
|
<select id="language-selector-dropdown">
|
||||||
<option value="en">English</option>
|
<option value="en">English</option>
|
||||||
<option value="es">Español</option>
|
<option value="es">Español</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<button id="go-to-files" class="header-button">
|
<div class="user-avatar">MR</div>
|
||||||
<span data-i18n="shared.backToFiles">Back to Files</span>
|
<div id="logout-btn" class="logout-btn" title="Cerrar sesión">
|
||||||
</button>
|
<i class="fas fa-sign-out-alt"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="shared-page-container">
|
|
||||||
<div class="shared-header">
|
|
||||||
<h2 data-i18n="shared.pageTitle">Shared Resources</h2>
|
|
||||||
<p data-i18n="shared.pageDescription">Manage your shared files and folders</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="shared-filters">
|
|
||||||
<div class="filter-group">
|
|
||||||
<label for="filter-type" data-i18n="shared.filterType">Type:</label>
|
|
||||||
<select id="filter-type">
|
|
||||||
<option value="all" data-i18n="shared.filterAll">All</option>
|
|
||||||
<option value="file" data-i18n="shared.filterFiles">Files</option>
|
|
||||||
<option value="folder" data-i18n="shared.filterFolders">Folders</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="filter-group">
|
|
||||||
<label for="sort-by" data-i18n="shared.sortBy">Sort by:</label>
|
|
||||||
<select id="sort-by">
|
|
||||||
<option value="name" data-i18n="shared.sortByName">Name</option>
|
|
||||||
<option value="date" data-i18n="shared.sortByDate">Date shared</option>
|
|
||||||
<option value="expiration" data-i18n="shared.sortByExpiration">Expiration</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="search-box">
|
|
||||||
<input type="text" id="shared-search" placeholder="Search shared items...">
|
|
||||||
<button id="shared-search-btn"><span data-i18n="shared.search">Search</span></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="shared-list-container">
|
<div class="content-area">
|
||||||
<table class="shared-list">
|
<h1 class="page-title" data-i18n="shared.pageTitle">Shared Resources</h1>
|
||||||
<thead>
|
<p class="page-description" data-i18n="shared.pageDescription">Manage your shared files and folders</p>
|
||||||
<tr>
|
|
||||||
<th data-i18n="shared.colName">Name</th>
|
|
||||||
<th data-i18n="shared.colType">Type</th>
|
|
||||||
<th data-i18n="shared.colDateShared">Date Shared</th>
|
|
||||||
<th data-i18n="shared.colExpiration">Expiration</th>
|
|
||||||
<th data-i18n="shared.colPermissions">Permissions</th>
|
|
||||||
<th data-i18n="shared.colPassword">Password</th>
|
|
||||||
<th data-i18n="shared.colActions">Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="shared-items-list">
|
|
||||||
<!-- Shared items will be loaded here dynamically -->
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="empty-shared-state" class="empty-state" style="display:none;">
|
<div class="actions-bar">
|
||||||
<div class="empty-state-icon">📂</div>
|
<div class="action-buttons">
|
||||||
<h3 data-i18n="shared.emptyStateTitle">No shared resources yet</h3>
|
<button class="btn btn-secondary" id="go-to-files-btn">
|
||||||
<p data-i18n="shared.emptyStateDesc">When you share files or folders, they will appear here</p>
|
<i class="fas fa-arrow-left" style="margin-right: 5px;"></i> <span data-i18n="shared.backToFiles">Back to Files</span>
|
||||||
<a href="/" class="button primary" data-i18n="shared.goToFiles">Go to Files</a>
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shared-filters">
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="filter-type" data-i18n="shared.filterType">Type:</label>
|
||||||
|
<select id="filter-type">
|
||||||
|
<option value="all" data-i18n="shared.filterAll">All</option>
|
||||||
|
<option value="file" data-i18n="shared.filterFiles">Files</option>
|
||||||
|
<option value="folder" data-i18n="shared.filterFolders">Folders</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="sort-by" data-i18n="shared.sortBy">Sort by:</label>
|
||||||
|
<select id="sort-by">
|
||||||
|
<option value="name" data-i18n="shared.sortByName">Name</option>
|
||||||
|
<option value="date" data-i18n="shared.sortByDate">Date shared</option>
|
||||||
|
<option value="expiration" data-i18n="shared.sortByExpiration">Expiration</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="search-box">
|
||||||
|
<input type="text" id="shared-search-filter" placeholder="Search shared items...">
|
||||||
|
<button id="shared-search-filter-btn" class="btn btn-primary" data-i18n="shared.search">Search</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shared-list-container">
|
||||||
|
<table class="shared-list">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th data-i18n="shared.colName">Name</th>
|
||||||
|
<th data-i18n="shared.colType">Type</th>
|
||||||
|
<th data-i18n="shared.colDateShared">Date Shared</th>
|
||||||
|
<th data-i18n="shared.colExpiration">Expiration</th>
|
||||||
|
<th data-i18n="shared.colPermissions">Permissions</th>
|
||||||
|
<th data-i18n="shared.colPassword">Password</th>
|
||||||
|
<th data-i18n="shared.colActions">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="shared-items-list">
|
||||||
|
<!-- Shared items will be loaded here dynamically -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="empty-shared-state" class="empty-state">
|
||||||
|
<div class="empty-state-icon">📂</div>
|
||||||
|
<h3 data-i18n="shared.emptyStateTitle">No shared resources yet</h3>
|
||||||
|
<p data-i18n="shared.emptyStateDesc">When you share files or folders, they will appear here</p>
|
||||||
|
<a href="/" class="button primary" data-i18n="shared.goToFiles">Go to Files</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
|
|
||||||
<!-- Share Link Dialog (for editing existing shares) -->
|
<!-- Share Link Dialog (for editing existing shares) -->
|
||||||
<div id="share-dialog" class="dialog">
|
<div id="share-dialog" class="dialog">
|
||||||
|
|||||||
Reference in New Issue
Block a user