Skip to content

Commit b1d526e

Browse files
dutowdutow
committed
First round of design/code cleanup
This mainly focuses on the sidebar and the thread list. The design is now a bit clener and more consistent.
1 parent 28c1237 commit b1d526e

File tree

16 files changed

+183
-332
lines changed

16 files changed

+183
-332
lines changed

‎app/assets/stylesheets/application.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66

77
@import "layouts/header.css";
88
@import "layouts/topic-view.css";
9-
@import "layouts/two-column.css";
109

10+
@import "components/form.css";
1111
@import "components/navigation.css";
1212
@import "components/sidebar.css";
1313
@import "components/search.css";

‎app/assets/stylesheets/base/root.css‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,24 @@ body {
66

77
.container {
88
max-width: var(--max-width-container);
9+
width: 100%;
910
margin: 0 auto;
10-
padding: 0 var(--spacing-5);
11+
padding: 0;
1112
background-color: var(--color-bg-container);
13+
min-width: 0;
14+
min-height: calc(100vh - var(--nav-height));
15+
}
16+
17+
.page-layout.with-sidebar {
18+
display: grid;
19+
grid-template-columns: 480px 1fr;
20+
gap: 0;
21+
align-items: start;
22+
}
23+
24+
.page-layout.with-sidebar .layout-sidebar {
25+
background: var(--color-bg-card);
26+
border-right: var(--border-width) solid var(--color-border);
27+
min-height: calc(100vh - var(--nav-height));
28+
background-color: var(--color-bg-sidebar);
1229
}

‎app/assets/stylesheets/colors.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,20 @@
3333
--color-gray-900: #0f172a;
3434

3535
--color-bg-page: var(--color-primary-1);
36-
--color-bg-container: var(--color-primary-4);
37-
--color-bg-nav: var(--color-primary-3);
36+
--color-bg-input: var(--color-primary-1);
37+
--color-bg-container: var(--color-primary-3);
38+
--color-bg-hover: var(--color-primary-4);
39+
--color-bg-sidebar: var(--color-primary-3);
40+
--color-bg-sidebar-header: var(--color-primary-2);
41+
--color-bg-table-header: var(--color-primary-2);
42+
--color-bg-nav: var(--color-primary-4);
3843
--color-border: var(--color-primary-5);
3944
--color-bg-button: var(--color-secondary2-2);
4045
--color-bg-button-hover: var(--color-secondary2-1);
46+
47+
--color-border-contributor: var(--color-secondary2-2);
48+
49+
--color-bg-icon: var(--color-secondary1-2);
50+
--color-bg-contributor: var(--color-secondary1-2);
51+
--color-bg-committer: var(--color-secondary1-1);
4152
}

‎app/assets/stylesheets/components/form.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
input {
3+
background-color: var(--color-bg-input);
4+
width: 100%;
5+
padding: var(--spacing-4);
6+
margin: var(--spacing-4) 0;
7+
border: var(--border-width) solid var(--color-gray-300);
8+
border-radius: var(--border-radius-md);
9+
font-size: var(--font-size-base);
10+
display: block;
11+
12+
&:focus {
13+
outline: none;
14+
border-color: var(--color-border-focus);
15+
}
16+
}
17+
18+
input[type=submit], input[type=button] {
19+
background-color: var(--color-bg-button);
20+
}

‎app/assets/stylesheets/components/participants.css‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
*/
55

66
.topic-participants {
7-
display: flex;
87
align-items: center;
98
gap: var(--spacing-2);
109
flex-wrap: nowrap;
@@ -40,15 +39,6 @@
4039
}
4140
}
4241

43-
.participant-avatar.is-creator {
44-
border-color: var(--color-primary-500);
45-
}
46-
47-
.participant-avatar.is-last-poster {
48-
border-color: var(--color-success);
49-
}
50-
51-
/* Contributor status borders */
5242
.participant-avatar.is-core-team {
5343
border-color: #ff0080;
5444
border-width: 3px;
@@ -76,6 +66,12 @@
7666
}
7767

7868
.participants-count {
69+
border-radius: var(--border-radius-full);
70+
background: var(--color-bg-icon);
71+
min-width: 32px;
72+
height: 32px;
73+
text-align: center;
74+
line-height: 32px;
7975
font-size: var(--font-size-sm);
8076
color: var(--color-text-muted);
8177
font-weight: var(--font-weight-medium);

‎app/assets/stylesheets/components/sidebar.css‎

Lines changed: 14 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,39 @@
1-
/*
2-
* Sidebar Component
3-
*/
4-
51
.sidebar {
6-
padding: var(--spacing-5);
72
position: sticky;
83
top: calc(var(--nav-height) + var(--spacing-5));
94
align-self: start;
105
}
116

127
.sidebar-section {
138
margin-bottom: var(--spacing-8);
9+
}
1410

15-
&:last-child {
16-
margin-bottom: 0;
17-
}
11+
.sidebar-content {
12+
padding: var(--spacing-3);
1813
}
1914

2015
.sidebar-heading {
2116
font-size: var(--font-size-lg);
2217
font-weight: var(--font-weight-bold);
2318
color: var(--color-text-primary);
2419
margin-bottom: var(--spacing-4);
25-
padding-bottom: var(--spacing-3);
26-
border-bottom: var(--border-width-thick) solid var(--color-border);
20+
padding: var(--spacing-3);
21+
background-color: var(--color-bg-sidebar-header);
22+
text-align: right;
2723
}
2824

29-
.sidebar-stat {
30-
display: flex;
31-
justify-content: space-between;
32-
align-items: center;
33-
padding: var(--spacing-3) 0;
34-
color: var(--color-text-secondary);
35-
font-size: var(--font-size-base);
25+
.sidebar .quick-filters {
26+
list-style: square inside;
27+
padding-left: 0;
3628

37-
& .stat-label {
29+
& a {
30+
color: var(--color-text-link);
31+
text-decoration: none;
3832
font-weight: var(--font-weight-medium);
3933
}
4034

41-
& .stat-value {
42-
font-weight: var(--font-weight-bold);
43-
color: var(--color-primary-600);
44-
}
45-
}
46-
47-
.sidebar-search {
48-
& .search-input {
49-
width: 100%;
50-
padding: var(--spacing-3) var(--spacing-4);
51-
border: var(--border-width) solid var(--color-gray-300);
52-
border-radius: var(--border-radius-md);
53-
font-size: var(--font-size-base);
54-
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
55-
56-
&:focus {
57-
outline: none;
58-
border-color: var(--color-border-focus);
59-
box-shadow: var(--shadow-focus);
60-
}
61-
}
62-
63-
& .search-button {
64-
width: 100%;
65-
margin-top: var(--spacing-3);
66-
padding: var(--spacing-3) var(--spacing-4);
67-
background-color: var(--color-primary-500);
68-
color: white;
69-
border: none;
70-
border-radius: var(--border-radius-md);
71-
font-size: var(--font-size-base);
72-
font-weight: var(--font-weight-medium);
73-
cursor: pointer;
74-
transition: background-color var(--transition-fast);
75-
76-
&:hover {
77-
background-color: var(--color-primary-700);
78-
}
35+
& a:hover {
36+
text-decoration: underline;
7937
}
8038
}
8139

82-
.sidebar-pagination {
83-
& .pagination {
84-
display: flex;
85-
flex-direction: column;
86-
gap: var(--spacing-2);
87-
}
88-
89-
& .pagination a,
90-
& .pagination span {
91-
display: block;
92-
padding: var(--spacing-2) var(--spacing-3);
93-
text-align: center;
94-
border-radius: var(--border-radius-sm);
95-
text-decoration: none;
96-
color: var(--color-text-secondary);
97-
font-size: var(--font-size-sm);
98-
transition: background-color var(--transition-fast);
99-
}
100-
101-
& .pagination a:hover {
102-
background-color: var(--color-bg-hover);
103-
}
104-
105-
& .pagination .current {
106-
background-color: var(--color-primary-500);
107-
color: white;
108-
font-weight: var(--font-weight-semibold);
109-
}
110-
111-
& .pagination .disabled {
112-
color: var(--color-text-muted);
113-
cursor: not-allowed;
114-
}
115-
}

‎app/assets/stylesheets/components/topics.css‎

Lines changed: 21 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/*
2-
* Topics List Component
3-
*/
4-
51
.section-header {
62
display: flex;
73
justify-content: space-between;
@@ -46,63 +42,51 @@
4642
}
4743

4844
.topics-table {
49-
background: var(--color-bg-card);
50-
border: var(--border-width) solid var(--color-border);
51-
border-radius: var(--border-radius-lg);
52-
overflow: hidden;
53-
5445
& table {
5546
width: 100%;
5647
border-collapse: collapse;
5748
}
5849

5950
& th {
60-
background: var(--color-gray-50);
51+
background: var(--color-bg-table-header);
6152
padding: var(--spacing-4);
6253
text-align: left;
6354
font-weight: var(--font-weight-semibold);
6455
color: var(--color-text-secondary);
65-
border-bottom: var(--border-width) solid var(--color-border);
6656
}
6757

6858
& td {
6959
padding: var(--spacing-4);
70-
border-bottom: var(--border-width) solid var(--color-border-light);
60+
border-bottom: 1px #000 solid;
7161
vertical-align: top;
7262
}
7363

74-
& .topic-status {
75-
width: 12%;
64+
& .topic-participants {
65+
width: 340px;
7666
}
7767
}
7868

79-
.topic-row {
80-
&:hover {
81-
background: var(--color-bg-hover);
82-
}
83-
84-
&:last-child td {
85-
border-bottom: none;
86-
}
87-
88-
&.has-core-team-activity {
89-
background: linear-gradient(to right, rgba(255, 0, 128, 0.05) 0%, transparent 100%);
90-
border-left: 3px solid #ff0080;
91-
}
69+
.topic-icon {
70+
display: inline-block;
71+
background: var(--color-bg-icon);
72+
border-radius: var(--border-radius-sm);
73+
padding: 3px;
74+
margin: 5px 0px;
75+
margin-right: 10px;
76+
}
9277

93-
&.has-committer-activity {
94-
background: linear-gradient(to right, rgba(139, 92, 246, 0.05) 0%, transparent 100%);
95-
border-left: 3px solid #8b5cf6;
96-
}
78+
.activity-core_team {
79+
background-color: var(--color-bg-committer);
80+
}
9781

98-
&.has-contributor-activity {
99-
background: linear-gradient(to right, rgba(245, 158, 11, 0.03) 0%, transparent 100%);
100-
border-left: 2px solid #f59e0b;
101-
}
82+
.activity-committer {
83+
background-color: var(--color-bg-committer);
10284
}
10385

104-
.topic-title {
105-
width: 45%;
86+
.topic-row {
87+
&:hover {
88+
background: var(--color-bg-hover);
89+
}
10690
}
10791

10892
.topic-link {
@@ -118,27 +102,6 @@
118102
}
119103
}
120104

121-
.topic-attachment-icon {
122-
margin-right: var(--spacing-2);
123-
font-size: var(--font-size-base);
124-
}
125-
126-
.topic-participants {
127-
width: 20%;
128-
}
129-
130-
.topic-replies {
131-
width: 10%;
132-
text-align: center;
133-
font-weight: var(--font-weight-medium);
134-
color: var(--color-text-secondary);
135-
}
136-
137-
.topic-activity {
138-
width: 20%;
139-
color: var(--color-text-secondary);
140-
}
141-
142105
.activity-info {
143106
display: flex;
144107
flex-direction: column;
@@ -292,24 +255,6 @@
292255
}
293256
}
294257

295-
.quick-filters {
296-
list-style: none;
297-
padding-left: 0;
298-
display: flex;
299-
flex-direction: column;
300-
gap: var(--spacing-2);
301-
302-
& a {
303-
color: var(--color-text-link);
304-
text-decoration: none;
305-
font-weight: var(--font-weight-medium);
306-
}
307-
308-
& a:hover {
309-
text-decoration: underline;
310-
}
311-
}
312-
313258
.global-warning {
314259
background: #fff4e5;
315260
color: #9a4d00;

0 commit comments

Comments
 (0)