Skip to content

Commit 9f3e175

Browse files
AndreasEngelmarkAndreasEngelmark
committed
Merged in feature/BKL-83-ImplementEmbeddedCommentLayout (pull request #47)
Feature/BKL-83 ImplementEmbeddedCommentLayout
2 parents a6203a3 + 010ee8d commit 9f3e175

File tree

17 files changed

+300
-281
lines changed

17 files changed

+300
-281
lines changed

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
// Components
1313
@import "mixins.scss";
1414
@import "helper-classes.scss";
15-
@import "comment.scss";
1615
@import "teasers.scss";
1716
@import "fields.scss";
1817
@import "icons.scss";

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ $spacers: (
77
20: 20px,
88
30: 30px,
99
40: 40px,
10+
60: 60px,
1011
90: 90px,
12+
100: 100px,
1113
130: 130px,
1214
140: 140px,
1315
);

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/comment.scss‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import "layout/user.scss";
99
@import "layout/container-fluid-addition.scss"; // TODO: move this to bootstrap
1010
@import "layout/body.scss";
11+
@import "layout/entity.scss";
1112

1213
// blocks
1314
@import "blocks/notifications.scss";
@@ -46,6 +47,8 @@
4647
@import "pages/contact-page.scss";
4748
@import "pages/document.scss";
4849
@import "pages/document-collection.scss";
50+
@import "pages/question.scss";
51+
@import "pages/post.scss";
4952

5053
@import "pages/user-questions.scss";
5154
@import "pages/user-subscriptions.scss";

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/entity.scss‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
.entity {
2+
border: 1px solid $gray-300;
3+
border-radius: $border-radius-lg;
4+
overflow: hidden;
5+
6+
&.first-entity {
7+
border-color: $gray-500;
8+
9+
.entity-header {
10+
background-color: $gray-200;
11+
border-bottom: 1px solid $gray-500;
12+
}
13+
}
14+
15+
.entity-header {
16+
@extend .px-30, .py-20;
17+
background-color: $gray-100;
18+
border-bottom: 1px solid $gray-300;
19+
20+
.user-image {
21+
@include user-image(30px);
22+
}
23+
}
24+
25+
.entity-body {
26+
@extend .p-30, .pr-130;
27+
background-color: $loop-white;
28+
29+
.child-entity-heading {
30+
font-weight: $badge-font-weight;
31+
}
32+
}
33+
34+
.parent-entity {
35+
@extend .block-secondary-gray, .p-20;
36+
border: 1px solid $gray-200;
37+
position: relative;
38+
39+
.parent-entity-header {
40+
.user-image {
41+
@include user-image(20px, 9px);
42+
}
43+
}
44+
45+
.parent-entity-body {
46+
@extend .pr-100;
47+
48+
&.collapse:not(.show),
49+
&.collapsing {
50+
@extend .line-clamp-2;
51+
}
52+
}
53+
54+
// TODO: move to other template
55+
.toggle {
56+
position: absolute;
57+
bottom: 20px;
58+
right: 20px;
59+
60+
transition: transform 0.35s;
61+
62+
&.collapsed {
63+
transform: rotate(-180deg);
64+
}
65+
}
66+
}
67+
}
68+
69+
.top-comment {
70+
&.entity,
71+
.entity-header,
72+
.entity-body {
73+
border-color: $loop-green-400;
74+
}
75+
76+
.entity-header {
77+
background-color: $loop-green-200;
78+
79+
.icon:not(.upvote.flag),
80+
.badge-primary {
81+
background-color: $loop-green-400;
82+
color: $loop-white;
83+
}
84+
85+
.upvote.flag {
86+
color: $loop-green-400;
87+
background-color: $loop-green-200;
88+
}
89+
}
90+
91+
.badge-primary {
92+
@extend .ml-30;
93+
94+
font-size: $font-size-base;
95+
padding: 6px 12px;
96+
}
97+
98+
&.correct-answer {
99+
.badge-primary {
100+
@include inline-icon("\f586", 8px);
101+
}
102+
}
103+
104+
&.most-upvotes {
105+
.badge-primary {
106+
@include inline-icon("\f406", 8px);
107+
}
108+
}
109+
}

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/title.scss‎

Lines changed: 0 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -19,91 +19,3 @@
1919
}
2020
}
2121
}
22-
23-
.entity-header,
24-
.entity-body {
25-
width: 100%;
26-
border: 1px solid $gray-500;
27-
28-
p {
29-
margin: 0;
30-
}
31-
32-
.small {
33-
font-size: $font-size-sm;
34-
line-height: 1;
35-
}
36-
}
37-
38-
.entity-header {
39-
border-radius: 10px 10px 0 0;
40-
padding: 20px 30px;
41-
42-
background-color: $gray-200;
43-
44-
.user-image {
45-
margin-right: 21px;
46-
}
47-
}
48-
49-
.entity-body {
50-
border-radius: 0 0 10px 10px;
51-
border-top: none;
52-
padding: 30px;
53-
padding-right: 130px;
54-
}
55-
56-
.top-comment {
57-
.entity-header,
58-
.entity-body {
59-
border-color: $loop-green-400;
60-
}
61-
62-
.entity-header {
63-
background-color: $loop-green-200;
64-
65-
.icon:not(.upvote.flag),
66-
.badge-primary {
67-
background-color: $loop-green-400;
68-
color: $loop-white;
69-
}
70-
71-
.upvote.flag {
72-
color: $loop-green-400;
73-
background-color: $loop-green-200;
74-
}
75-
}
76-
77-
.badge-primary {
78-
@extend .ml-30;
79-
80-
font-size: $font-size-base;
81-
padding: 6px 12px;
82-
}
83-
84-
&.correct-answer {
85-
.badge-primary {
86-
@include inline-icon("\f586", 8px);
87-
}
88-
}
89-
90-
&.most-upvotes {
91-
.badge-primary {
92-
@include inline-icon("\f406", 8px);
93-
}
94-
}
95-
}
96-
97-
.os2loop-comment {
98-
+ .os2loop-comment,
99-
+ .indented {
100-
@extend .mt-30;
101-
}
102-
}
103-
104-
.indented {
105-
+ .os2loop-comment,
106-
+ .indented {
107-
@extend .mt-30;
108-
}
109-
}

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/user.scss‎

Lines changed: 9 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,28 @@
1-
.user-image {
2-
@extend .rounded-circle;
3-
@extend .overflow-hidden;
1+
@mixin user-image($image-size, $font-size: $font-size-base) {
2+
@extend .rounded-circle, .overflow-hidden;
43

54
display: flex;
65
justify-content: center;
76
align-items: center;
87

9-
width: $user-image-size;
10-
height: $user-image-size;
11-
128
background-color: $gray-400;
139
color: $gray-800;
1410

15-
font-size: $font-size-sm;
11+
width: $image-size;
12+
height: $image-size;
13+
14+
font-size: $font-size;
1615
font-weight: 500;
1716

1817
img {
19-
min-width: $user-image-size;
20-
min-height: $user-image-size;
21-
18+
width: $image-size;
19+
height: $image-size;
2220
object-fit: cover;
2321
}
2422
}
2523

2624
.user-name {
27-
line-height: 1;
28-
29-
a,
30-
p {
31-
color: inherit;
32-
margin: 0;
33-
34-
+ span {
35-
margin-top: 7px;
36-
}
37-
}
38-
39-
:not(.h5) > a,
40-
:not(.h5) > p {
41-
font-size: $font-size-base;
42-
font-weight: $badge-font-weight;
43-
}
44-
45-
a:hover {
46-
text-decoration: inherit;
47-
color: inherit;
48-
}
49-
50-
span {
51-
color: inherit;
52-
margin: 0;
53-
54-
font-size: $font-size-sm;
55-
}
25+
font-weight: $badge-font-weight;
5626
}
5727

5828
.user-profile {

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/post.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.os2loop-post {
2+
section {
3+
article + article,
4+
article + div.indented,
5+
div.indented + article,
6+
div.intendet + div.indented {
7+
@extend .mt-30;
8+
}
9+
}
10+
}

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/question.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.os2loop-question {
2+
section {
3+
article + article,
4+
article + div.indented,
5+
div.indented + article,
6+
div.intendet + div.indented {
7+
@extend .mt-30;
8+
}
9+
}
10+
}

0 commit comments

Comments
 (0)