mirror of
https://github.com/uqbar-dao/nectar.git
synced 2024-12-22 16:11:38 +03:00
app_store UI: small adjustments, simplify css
This commit is contained in:
bitful-pannul
parent
74e769ba3b
commit
6959939665
@ -83,6 +83,7 @@ form {
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -94,6 +95,8 @@ select {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--gray);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: light-dark(var(--white), var(--tasteful-dark));
|
||||
color: light-dark(var(--off-black), var(--off-white));
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
@ -201,6 +204,12 @@ td {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.app-id {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray);
|
||||
@ -228,277 +237,124 @@ td {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* App Page */
|
||||
.app-page {
|
||||
background-color: light-dark(var(--off-white), var(--off-black));
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.app-description {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.app-info {
|
||||
background-color: light-dark(var(--tan), var(--tasteful-dark));
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.app-screenshots {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.screenshot-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.app-screenshot {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Store Page */
|
||||
.store-page {
|
||||
background-color: light-dark(var(--off-white), var(--off-black));
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.store-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.app-list {
|
||||
background-color: light-dark(var(--tan), var(--tasteful-dark));
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Publish Page */
|
||||
.publish-page {
|
||||
background-color: light-dark(var(--off-white), var(--off-black));
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.publish-form {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.my-packages {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.my-packages ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.my-packages li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--gray);
|
||||
}
|
||||
|
||||
/* Download Page */
|
||||
/* App Page and Download Page shared styles */
|
||||
.app-page,
|
||||
.downloads-page {
|
||||
background-color: light-dark(var(--white), var(--maroon));
|
||||
border-radius: 8px;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.app-header h2 {
|
||||
margin: 0;
|
||||
.app-description {
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.launch-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 14px;
|
||||
background-color: var(--orange);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.launch-button:hover {
|
||||
background-color: var(--dark-orange);
|
||||
}
|
||||
|
||||
.version-selector {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.version-selector select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid var(--orange);
|
||||
border-radius: 4px;
|
||||
background-color: light-dark(var(--white), var(--tasteful-dark));
|
||||
color: light-dark(var(--off-black), var(--off-white));
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.version-selector select:focus {
|
||||
outline: none;
|
||||
border-color: var(--dark-orange);
|
||||
box-shadow: 0 0 0 3px rgba(255, 79, 0, 0.2);
|
||||
.app-info {
|
||||
background-color: light-dark(var(--tan), var(--tasteful-dark));
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Download Page specific styles */
|
||||
.download-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.download-button,
|
||||
.install-button,
|
||||
.installed-button {
|
||||
.version-selector,
|
||||
.mirror-selector select {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
border: 1px solid var(--gray);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: light-dark(var(--white), var(--tasteful-dark));
|
||||
color: light-dark(var(--off-black), var(--off-white));
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-button,
|
||||
.primary,
|
||||
.secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 0.75em 1em;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
.primary {
|
||||
background-color: var(--orange);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.download-button:hover:not(:disabled) {
|
||||
.primary:hover:not(:disabled) {
|
||||
background-color: var(--dark-orange);
|
||||
}
|
||||
|
||||
.install-button {
|
||||
background-color: var(--blue);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.install-button:hover {
|
||||
background-color: color-mix(in srgb, var(--blue) 80%, black);
|
||||
.secondary {
|
||||
background-color: light-dark(var(--off-white), var(--off-black));
|
||||
color: var(--orange);
|
||||
border: 2px solid var(--orange);
|
||||
}
|
||||
|
||||
.installed-button {
|
||||
background-color: var(--gray);
|
||||
.secondary:hover:not(:disabled) {
|
||||
background-color: var(--orange);
|
||||
color: var(--white);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.download-button:disabled,
|
||||
.install-button:disabled,
|
||||
.installed-button:disabled {
|
||||
.action-button:disabled,
|
||||
.primary:disabled,
|
||||
.secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.my-downloads {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.my-downloads>button {
|
||||
/* App actions */
|
||||
.app-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: transparent;
|
||||
color: var(--orange);
|
||||
border: 2px solid var(--orange);
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.my-downloads>button:hover {
|
||||
background-color: var(--orange);
|
||||
color: var(--white);
|
||||
/* Screenshots */
|
||||
.app-screenshots {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.my-downloads table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.my-downloads th,
|
||||
.my-downloads td {
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--gray);
|
||||
}
|
||||
|
||||
.my-downloads td button {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.app-details {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.app-details>button {
|
||||
.screenshot-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: transparent;
|
||||
color: var(--orange);
|
||||
border: 2px solid var(--orange);
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.app-details>button:hover {
|
||||
background-color: var(--orange);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.app-details pre {
|
||||
background-color: light-dark(var(--tan), var(--tasteful-dark));
|
||||
color: light-dark(var(--off-black), var(--off-white));
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
margin-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.app-screenshot {
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* Capabilities approval popup */
|
||||
.cap-approval-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -538,73 +394,23 @@ td {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* My Downloads Page */
|
||||
.my-downloads-page {
|
||||
background-color: light-dark(var(--off-white), var(--off-black));
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 48em) {
|
||||
|
||||
.app-page,
|
||||
.downloads-page {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.app-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.my-packages li {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
.download-section {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cap-approval-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.cap-approval-content {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.download-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
background-color: #4caf50;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
||||
@ -167,7 +167,15 @@ export default function DownloadPage() {
|
||||
return (
|
||||
<div className="downloads-page">
|
||||
<div className="app-header">
|
||||
<div className="app-title-container">
|
||||
{app.metadata?.image && (
|
||||
<img src={app.metadata.image} alt={app.metadata?.name || app.package_id.package_name} className="app-icon" />
|
||||
)}
|
||||
<div className="app-title">
|
||||
<h2>{app.metadata?.name || app.package_id.package_name}</h2>
|
||||
<p className="app-id">{`${app.package_id.package_name}.${app.package_id.publisher_node}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
{installedApp && (
|
||||
<button
|
||||
onClick={handleLaunch}
|
||||
@ -178,29 +186,29 @@ export default function DownloadPage() {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<p>{app.metadata?.description}</p>
|
||||
<p className="app-description">{app.metadata?.description}</p>
|
||||
|
||||
<div className="version-selector">
|
||||
<div className="download-section">
|
||||
<select
|
||||
value={selectedVersion}
|
||||
onChange={(e) => setSelectedVersion(e.target.value)}
|
||||
className="version-selector"
|
||||
>
|
||||
{sortedVersions.map(({ version }, index) => (
|
||||
<option key={version} value={version}>
|
||||
{version} {index === 0 ? "(newest)" : ""}
|
||||
{installedApp && installedApp.our_version_hash === sortedVersions[index].hash ? " (installed)" : ""}
|
||||
<option value="">Select version</option>
|
||||
{sortedVersions.map((version) => (
|
||||
<option key={version.version} value={version.version}>
|
||||
{version.version}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="download-section">
|
||||
<MirrorSelector
|
||||
packageId={id}
|
||||
onMirrorSelect={handleMirrorSelect}
|
||||
/>
|
||||
|
||||
{isCurrentVersionInstalled ? (
|
||||
<button className="installed-button" disabled>
|
||||
<button className="action-button installed-button" disabled>
|
||||
<FaRocket /> Installed
|
||||
</button>
|
||||
) : isDownloaded ? (
|
||||
@ -211,7 +219,7 @@ export default function DownloadPage() {
|
||||
handleInstall(versionData.version, versionData.hash);
|
||||
}
|
||||
}}
|
||||
className="install-button"
|
||||
className="action-button install-button"
|
||||
>
|
||||
<FaRocket /> Install
|
||||
</button>
|
||||
@ -219,12 +227,11 @@ export default function DownloadPage() {
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
disabled={!canDownload}
|
||||
className="download-button"
|
||||
className="action-button download-button"
|
||||
>
|
||||
{isDownloading ? (
|
||||
<>
|
||||
<FaSpinner className="fa-spin" />
|
||||
Downloading... {downloadProgress}%
|
||||
<FaSpinner className="fa-spin" /> Downloading... {downloadProgress}%
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user