Skip to content

Commit 23c9846

Browse files
vbakkevbakke
committed
Activity: Improved styling (draft)
1 parent 23e4a5c commit 23c9846

4 files changed

Lines changed: 453 additions & 98 deletions

File tree

‎src/app/component/activity-description/activity-description.component.css‎

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,315 @@
2929
.mat-raised-button {
3030
margin-right: 8px;
3131
}
32+
3233
.teams-implemented-list {
3334
list-style: none;
35+
}
36+
37+
/* UUID Section Styling */
38+
.uuid-preview {
39+
margin-left: 10px;
40+
font-size: 0.8em;
41+
color: #666;
42+
font-weight: normal;
43+
}
44+
45+
/* Difficulty Section Styling */
46+
.difficulty-summary {
47+
display: flex;
48+
gap: 15px;
49+
margin-left: 20px;
50+
align-items: center;
51+
}
52+
53+
.difficulty-indicator {
54+
display: flex;
55+
align-items: center;
56+
gap: 5px;
57+
}
58+
59+
.difficulty-icon {
60+
font-size: 16px;
61+
color: #666;
62+
}
63+
64+
.difficulty-level {
65+
font-size: 0.8em;
66+
padding: 2px 8px;
67+
border-radius: 12px;
68+
font-weight: normal;
69+
}
70+
71+
.difficulty-details {
72+
padding: 10px 0;
73+
}
74+
75+
.difficulty-detail-item {
76+
display: flex;
77+
align-items: center;
78+
gap: 10px;
79+
margin-bottom: 10px;
80+
}
81+
82+
.detail-label {
83+
min-width: 80px;
84+
font-weight: 500;
85+
}
86+
87+
.difficulty-badge {
88+
padding: 4px 12px;
89+
border-radius: 16px;
90+
font-size: 0.9em;
91+
font-weight: 500;
92+
}
93+
94+
/* Level-based coloring for difficulty */
95+
.level-1 { background-color: #e8f5e8; color: #2e7d32; }
96+
.level-2 { background-color: #fff3e0; color: #ef6c00; }
97+
.level-3 { background-color: #fff8e1; color: #f57c00; }
98+
.level-4 { background-color: #ffebee; color: #c62828; }
99+
.level-5 { background-color: #fce4ec; color: #ad1457; }
100+
101+
/* Usefulness Section Styling */
102+
.usefulness-stars {
103+
display: flex;
104+
align-items: center;
105+
gap: 5px;
106+
margin-left: 20px;
107+
}
108+
109+
.star {
110+
font-size: 16px;
111+
color: #ffc107;
112+
}
113+
114+
.star:not(.filled) {
115+
color: #e0e0e0;
116+
}
117+
118+
.usefulness-label {
119+
margin-left: 10px;
120+
font-size: 0.8em;
121+
color: #666;
122+
font-weight: normal;
123+
}
124+
125+
.usefulness-details {
126+
padding: 15px 0;
127+
}
128+
129+
.usefulness-rating {
130+
display: flex;
131+
flex-direction: column;
132+
align-items: center;
133+
gap: 10px;
134+
}
135+
136+
.star-display {
137+
display: flex;
138+
gap: 5px;
139+
}
140+
141+
.star-large {
142+
font-size: 24px;
143+
color: #ffc107;
144+
}
145+
146+
.star-large:not(.filled) {
147+
color: #e0e0e0;
148+
}
149+
150+
.rating-text {
151+
font-weight: 500;
152+
font-size: 1.1em;
153+
}
154+
155+
.usefulness-description {
156+
color: #666;
157+
font-style: italic;
158+
}
159+
160+
/* References Section Styling */
161+
.references-preview {
162+
display: flex;
163+
gap: 8px;
164+
margin-left: 20px;
165+
align-items: center;
166+
}
167+
168+
.reference-chip {
169+
background-color: #e3f2fd;
170+
color: #1976d2;
171+
padding: 2px 8px;
172+
border-radius: 12px;
173+
font-size: 0.75em;
174+
font-weight: 500;
175+
display: flex;
176+
align-items: center;
177+
gap: 4px;
178+
}
179+
180+
.reference-icon {
181+
font-size: 14px;
182+
}
183+
184+
.references-content {
185+
padding: 10px 0;
186+
}
187+
188+
.reference-section {
189+
margin-bottom: 20px;
190+
}
191+
192+
.reference-section h4 {
193+
margin: 0 0 10px 0;
194+
color: #333;
195+
font-size: 1em;
196+
}
197+
198+
.reference-tags {
199+
display: flex;
200+
flex-wrap: wrap;
201+
gap: 6px;
202+
}
203+
204+
.reference-tag {
205+
background-color: #f5f5f5;
206+
border: 1px solid #ddd;
207+
padding: 4px 8px;
208+
border-radius: 8px;
209+
font-size: 0.8em;
210+
color: #555;
211+
}
212+
213+
.reference-links {
214+
display: flex;
215+
flex-direction: column;
216+
gap: 8px;
217+
}
218+
219+
.reference-link {
220+
display: flex;
221+
align-items: center;
222+
gap: 8px;
223+
color: #1976d2;
224+
text-decoration: none;
225+
padding: 8px;
226+
border: 1px solid #e3f2fd;
227+
border-radius: 8px;
228+
transition: background-color 0.2s;
229+
}
230+
231+
.reference-link:hover {
232+
background-color: #e3f2fd;
233+
}
234+
235+
/* Implementation Section Styling */
236+
.implementation-preview {
237+
margin-left: 20px;
238+
}
239+
240+
.tool-count-badge {
241+
background-color: #e8f5e8;
242+
color: #2e7d32;
243+
padding: 2px 8px;
244+
border-radius: 12px;
245+
font-size: 0.75em;
246+
font-weight: 500;
247+
}
248+
249+
.implementation-tools {
250+
padding: 10px 0;
251+
}
252+
253+
.tool-card {
254+
border: 1px solid #e0e0e0;
255+
border-radius: 8px;
256+
margin-bottom: 12px;
257+
background-color: #fafafa;
258+
transition: box-shadow 0.2s;
259+
}
260+
261+
.tool-card:hover {
262+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
263+
}
264+
265+
.tool-header {
266+
padding: 12px 16px;
267+
cursor: pointer;
268+
display: flex;
269+
justify-content: space-between;
270+
align-items: center;
271+
}
272+
273+
.tool-info {
274+
flex: 1;
275+
}
276+
277+
.tool-name {
278+
margin: 0 0 8px 0;
279+
font-size: 1.1em;
280+
color: #333;
281+
}
282+
283+
.tool-tags {
284+
display: flex;
285+
flex-wrap: wrap;
286+
gap: 6px;
287+
}
288+
289+
.tag-chip {
290+
background-color: #e3f2fd;
291+
color: #1976d2;
292+
padding: 2px 8px;
293+
border-radius: 12px;
294+
font-size: 0.75em;
295+
font-weight: 500;
296+
}
297+
298+
.expand-icon {
299+
transition: transform 0.2s;
300+
color: #666;
301+
}
302+
303+
.expand-icon.rotated {
304+
transform: rotate(180deg);
305+
}
306+
307+
.tool-details {
308+
max-height: 0;
309+
overflow: hidden;
310+
transition: max-height 0.3s ease-out;
311+
border-top: 1px solid #e0e0e0;
312+
}
313+
314+
.tool-details.expanded {
315+
max-height: 300px;
316+
padding: 16px;
317+
}
318+
319+
.tool-url {
320+
display: flex;
321+
align-items: center;
322+
gap: 8px;
323+
margin-bottom: 12px;
324+
}
325+
326+
.tool-url a {
327+
color: #1976d2;
328+
text-decoration: none;
329+
word-break: break-all;
330+
}
331+
332+
.tool-url a:hover {
333+
text-decoration: underline;
334+
}
335+
336+
.tool-description {
337+
color: #555;
338+
line-height: 1.5;
339+
}
340+
341+
.tool-description p {
342+
margin: 0;
34343
}

0 commit comments

Comments
 (0)