Skip to content

Commit b623a5a

Browse files
ecrum19ecrum19
committed
refactored styling of LandingPage, PodUpload, and PodBrowser, and DataQuery components
1 parent 6ff9459 commit b623a5a

16 files changed

Lines changed: 4132 additions & 1559 deletions

‎src/components/ContainerNav.vue‎

Lines changed: 296 additions & 86 deletions
Large diffs are not rendered by default.

‎src/components/DataQuery.vue‎

Lines changed: 1039 additions & 551 deletions
Large diffs are not rendered by default.

‎src/components/LandingPage.vue‎

Lines changed: 195 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,47 @@
11
<template>
2-
<v-container class="content-container">
3-
<v-col cols="12">
4-
<div class="logo-container">
5-
<img :src="visualUrl" alt="Full Solid Cockpit logo" />
2+
<section class="landing-page">
3+
<!-- Hero block gives the landing page the same card-first, polished structure as Data Upload. -->
4+
<section class="hero-card">
5+
<!-- The logo sits on the left, with supporting text and status details on the right. -->
6+
<div class="logo-panel">
7+
<div class="logo-container">
8+
<img :src="visualUrl" alt="Full Solid Cockpit logo" />
9+
</div>
610
</div>
7-
</v-col>
8-
</v-container>
911

10-
<div class="login-container">
11-
<pod-login />
12-
</div>
12+
<!-- Supporting copy stays beside the logo for a balanced hero layout. -->
13+
<div class="hero-copy">
14+
<p class="hero-summary">
15+
Connect your pod, manage data, and work with Solid resources through
16+
an intuitive browser-based workspace.
17+
</p>
18+
<div class="status-row">
19+
<div class="status-pill" :class="{ active: loggedIn }">
20+
<span class="status-dot"></span>
21+
<span>{{ loggedIn ? "Session active" : "Not connected" }}</span>
22+
</div>
23+
<span v-if="loggedIn && selectedPodUrl" class="status-meta">
24+
Selected pod: {{ selectedPodUrl }}
25+
</span>
26+
</div>
27+
</div>
28+
</section>
29+
30+
<!-- Login stays carded; pod registration sits directly on the page without extra framing. -->
31+
<section class="action-grid">
32+
<div class="surface-card login-surface">
33+
<pod-login />
34+
</div>
1335

14-
<div v-if="loggedIn" class="pod-chooseContainer">
15-
<PodRegistration />
16-
</div>
36+
<div v-if="loggedIn" class="pod-surface">
37+
<PodRegistration />
38+
</div>
39+
</section>
1740

18-
<div class="guide">
19-
<landing-guide />
20-
</div>
41+
<div class="guide-surface">
42+
<landing-guide />
43+
</div>
44+
</section>
2145
</template>
2246

2347
<script lang="ts">
@@ -64,24 +88,172 @@ export default {
6488
</script>
6589

6690
<style scoped>
91+
/* Landing page uses the same polished card system as the upload flow. */
92+
.landing-page {
93+
display: grid;
94+
gap: 0.5rem;
95+
}
96+
.hero-card {
97+
display: grid;
98+
grid-template-columns: minmax(360px, 1.15fr) minmax(320px, 0.85fr);
99+
gap: 1.1rem;
100+
margin: 0.5rem 0.5rem 0 0.5rem;
101+
padding: 1.25rem 1.35rem;
102+
border: 1px solid var(--border);
103+
border-radius: 18px;
104+
background:
105+
radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 11%, transparent) 0, transparent 32%),
106+
linear-gradient(
107+
145deg,
108+
color-mix(in srgb, var(--panel) 94%, var(--primary-100) 6%),
109+
var(--panel)
110+
);
111+
box-shadow: var(--shadow-1);
112+
align-items: center;
113+
}
114+
.hero-copy {
115+
display: grid;
116+
gap: 0.8rem;
117+
font-family: "Oxanium", monospace;
118+
align-content: center;
119+
}
120+
.hero-copy h1 {
121+
margin: 0;
122+
font-size: clamp(2.15rem, 4vw, 3.1rem);
123+
line-height: 1.08;
124+
color: var(--text-primary);
125+
font-weight: 900;
126+
font-family: "Orbitron", monospace;
127+
}
128+
.hero-summary {
129+
margin: 0;
130+
max-width: 34rem;
131+
font-size: 1.08rem;
132+
line-height: 1.72;
133+
font-family: "Oxanium", monospace;
134+
color: var(--text-muted);
135+
}
136+
.status-row {
137+
display: flex;
138+
flex-wrap: wrap;
139+
align-items: center;
140+
gap: 0.75rem;
141+
}
142+
.status-pill {
143+
display: inline-flex;
144+
align-items: center;
145+
gap: 0.55rem;
146+
padding: 0.65rem 0.9rem;
147+
border-radius: 999px;
148+
background: var(--panel-elev);
149+
color: var(--text-secondary);
150+
font-weight: 600;
151+
}
152+
.status-pill.active {
153+
background: color-mix(in srgb, var(--primary) 14%, transparent);
154+
}
155+
.status-dot {
156+
width: 10px;
157+
height: 10px;
158+
border-radius: 999px;
159+
background: var(--gray-500);
160+
}
161+
.status-pill.active .status-dot {
162+
background: var(--success);
163+
}
164+
.status-meta {
165+
color: var(--text-muted);
166+
font-size: 0.92rem;
167+
word-break: break-all;
168+
}
169+
.logo-panel {
170+
display: flex;
171+
justify-content: center;
172+
align-items: center;
173+
min-height: 100%;
174+
padding: 0.15rem 0;
175+
}
67176
.logo-container {
68177
display: flex;
69178
align-items: center;
70179
justify-content: center;
180+
width: 100%;
71181
}
72182
img {
73-
max-width: 80%;
74-
margin-top: 1rem;
183+
display: block;
184+
width: min(100%, 780px);
185+
max-width: none;
75186
height: auto;
76187
text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
77188
}
78-
.login-container {
79-
margin: 0 0.5rem 0.25rem 0.5rem;
189+
.action-grid {
190+
display: grid;
191+
gap: 0.5rem;
192+
margin: 0 0.5rem;
193+
}
194+
.surface-card,
195+
.guide-surface {
196+
border: 1px solid var(--border);
197+
border-radius: 18px;
198+
background: var(--panel);
199+
box-shadow: var(--shadow-1);
200+
}
201+
.login-surface,
202+
.pod-surface {
203+
padding: 0.7rem 0.9rem;
204+
}
205+
.pod-surface {
206+
padding: 0;
207+
}
208+
.guide-surface {
209+
margin: 0 0.5rem 0.5rem 0.5rem;
210+
overflow: hidden;
211+
}
212+
.guide-surface :deep(.container) {
213+
margin: 0;
214+
}
215+
@media (max-width: 980px) {
216+
/* Tablet layout stacks the hero areas without losing the visual hierarchy. */
217+
.hero-card {
218+
grid-template-columns: 1fr;
219+
}
220+
.logo-panel {
221+
padding: 0.2rem 0 0.35rem 0;
222+
}
223+
.hero-copy {
224+
justify-items: center;
225+
text-align: center;
226+
}
227+
.status-row {
228+
justify-content: center;
229+
}
80230
}
81-
.pod-chooseContainer {
82-
margin: 0 1rem 0.5rem 1rem;
83-
background-color: var(--panel);
84-
border-radius: 6px;
231+
@media (max-width: 760px) {
232+
/* Mobile spacing mirrors the compact card rhythm used elsewhere in the app. */
233+
.hero-card,
234+
.action-grid,
235+
.guide-surface {
236+
margin-left: 0.35rem;
237+
margin-right: 0.35rem;
238+
}
239+
.hero-card {
240+
padding: 1rem;
241+
gap: 0.85rem;
242+
}
243+
img {
244+
width: min(100%, 640px);
245+
}
246+
.status-row {
247+
align-items: stretch;
248+
}
249+
.status-pill {
250+
width: fit-content;
251+
max-width: 100%;
252+
}
253+
.login-surface,
254+
.pod-surface {
255+
padding: 0.55rem 0.7rem;
256+
}
85257
}
86258
87259
</style>

0 commit comments

Comments
 (0)