orus-dev/dockship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made the ui more mobile friendly

Browse Source
This commit is contained in:
selimaj-dev
2025-12-26 20:59:52 +01:00
parent 567a75caff
commit 225eea0861
12 changed files with 1039 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/environment/page.tsx
+54 -39
View File
@@ -60,25 +60,28 @@ export default function EnvironmentPage() {
title="Environment"
subtitle="Manage environment variables"
>
<div className="flex gap-6">
<div className="flex flex-col gap-6 md:flex-row">
{/* Sidebar */}
<div className="w-56 shrink-0">
<div className="md:w-56 md:shrink-0">
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-xs text-muted-foreground uppercase tracking-wider">
Applications
</CardTitle>
</CardHeader>
<CardContent className="p-2">
<CardContent className="p-2 flex gap-2 md:block overflow-x-auto">
{envGroups.map((group) => (
<button
key={group.name}
onClick={() => setSelectedApp(group.name)}
className={`w-full text-left px-3 py-2 text-sm font-mono transition-colors ${
selectedApp === group.name
? "bg-secondary text-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
}`}
className={`
whitespace-nowrap md:w-full text-left px-3 py-2 text-sm font-mono transition-colors
${
selectedApp === group.name
? "bg-secondary text-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
}
`}
>
{group.name}
<Badge className="ml-2 text-[10px]">
@@ -90,10 +93,10 @@ export default function EnvironmentPage() {
</Card>
</div>
{/* Main Content */}
{/* Main */}
<div className="flex-1">
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div>
<CardTitle className="font-mono">{selectedApp}</CardTitle>
<p className="text-xs text-muted-foreground mt-1">
@@ -102,54 +105,66 @@ export default function EnvironmentPage() {
secrets
</p>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2">
<Button variant="outline" size="sm" className="gap-2">
<Plus className="w-4 h-4" />
Add Variable
<span className="hidden sm:inline">Add Variable</span>
</Button>
<Button size="sm" className="gap-2">
<Save className="w-4 h-4" />
Save Changes
<span className="hidden sm:inline">Save Changes</span>
</Button>
</div>
</CardHeader>
<CardContent>
<div className="space-y-0">
<div className="grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
<div className="col-span-4">Key</div>
<div className="col-span-6">Value</div>
<div className="col-span-2 text-right">Actions</div>
</div>
{/* Table header (desktop only) */}
<div className="hidden md:grid grid-cols-12 gap-4 text-xs text-muted-foreground uppercase tracking-wider py-2 border-b border-border">
<div className="col-span-4">Key</div>
<div className="col-span-6">Value</div>
<div className="col-span-2 text-right">Actions</div>
</div>
{/* Rows */}
<div className="divide-y divide-border md:divide-none">
{currentGroup?.variables.map((variable) => (
<div
key={variable.key}
className="grid grid-cols-12 gap-4 py-3 data-table-row items-center"
className="
py-4 md:py-3
flex flex-col gap-3
md:grid md:grid-cols-12 md:gap-4 md:items-center
"
>
<div className="col-span-4 flex items-center gap-2">
{/* Key */}
<div className="md:col-span-4 flex items-center gap-2">
{variable.secret && (
<Lock className="w-3 h-3 text-warning" />
)}
<span className="font-mono text-sm">{variable.key}</span>
</div>
<div className="col-span-6">
<div className="flex items-center gap-2">
<Input
type={
variable.secret && !showSecrets[variable.key]
? "password"
: "text"
}
value={
variable.secret && !showSecrets[variable.key]
? maskValue(variable.value)
: variable.value
}
readOnly
className="font-mono text-xs h-8 bg-background border-border"
/>
</div>
{/* Value */}
<div className="md:col-span-6">
<Input
type={
variable.secret && !showSecrets[variable.key]
? "password"
: "text"
}
value={
variable.secret && !showSecrets[variable.key]
? maskValue(variable.value)
: variable.value
}
readOnly
className="font-mono text-xs h-8 bg-background border-border"
/>
</div>
<div className="col-span-2 flex items-center justify-end gap-1">
{/* Actions */}
<div className="md:col-span-2 flex items-center justify-end gap-1">
{variable.secret && (
<Button
variant="ghost"