Skip to content
Jump to bottom

Automated Test: header-layout-optimization-post #313

Closed
wants to merge 1 commit into from
+54 −13
Closed

Automated Test: header-layout-optimization-post #313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 5 additions & 4 deletions app/assets/stylesheets/common/base/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,9 @@

.contents {
margin: 8px 0;
}

.title {
float: left;
@include flexbox();
@include align-items(center);
}

.valign-helper {
Expand All @@ -34,8 +33,10 @@
}

.panel {
float: right;
position: relative;
margin-left: auto;

@include order(3);
}

.login-button, button.sign-up-button {
Expand Down
9 changes: 5 additions & 4 deletions app/assets/stylesheets/common/base/topic-post.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,9 @@ table.md-table {
}

.small-action {
@include flexbox();
@include align-items(center);

.topic-avatar {
padding: 5px 0;
border-top: none;
Expand All @@ -274,8 +277,7 @@ table.md-table {
}

.small-action-desc {
padding: 0.5em 0 0.5em 4em;
margin-top: 5px;
padding: 0 1.5%;
text-transform: uppercase;
font-weight: bold;
font-size: 0.9em;
Expand All @@ -287,7 +289,7 @@ table.md-table {
font-weight: normal;
font-size: 14px;
p {
margin: 5px 0;
margin: 0;
}
}

Expand All @@ -298,7 +300,6 @@ table.md-table {

> p {
margin: 0;
padding-top: 4px;
}
}

Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/common/base/topic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@
}

.extra-info-wrapper {
@include order(2);

line-height: 1.5;
.badge-wrapper {
float: left;
&.bullet {
margin-top: 5px;
}
}

}
Expand Down
6 changes: 4 additions & 2 deletions app/assets/stylesheets/common/components/badges.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,10 @@


&.bullet { //bullet category style
display: inline-flex;
align-items: baseline;
@include inline-flex();

@include align-items(baseline);

margin-right: 10px;

span.badge-category {
Expand Down
37 changes: 37 additions & 0 deletions app/assets/stylesheets/common/foundation/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,40 @@
-moz-user-select: none;
-ms-user-select: none;
}

// ---------------------------------------------------

//Flexbox

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

@mixin inline-flex() {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}


@mixin align-items($alignment) {
-webkit-box-align: $alignment;
-webkit-align-items: $alignment;
-ms-flex-align: $alignment;
-ms-align-items: $alignment;
align-items:$alignment;
}
Comment on lines +117 to +123
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

-ms-align-items (line 121) is not a valid CSS property.

The correct IE10 prefix for align-items is -ms-flex-align, which is already present on line 120. -ms-align-items is unrecognized and has no effect—it should be removed.

Proposed fix 
 `@mixin` align-items($alignment) {
     -webkit-box-align: $alignment;
     -webkit-align-items: $alignment;
-    -ms-flex-align: $alignment;  
-    -ms-align-items: $alignment;
+    -ms-flex-align: $alignment;
     align-items:$alignment;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@mixin align-items($alignment) {
-webkit-box-align: $alignment;
-webkit-align-items: $alignment;
-ms-flex-align: $alignment;
-ms-align-items: $alignment;
align-items:$alignment;
}
`@mixin` align-items($alignment) {
-webkit-box-align: $alignment;
-webkit-align-items: $alignment;
-ms-flex-align: $alignment;
align-items:$alignment;
}
🤖 Prompt for AI Agents 
In `@app/assets/stylesheets/common/foundation/mixins.scss` around lines 117 - 123,
The mixin align-items contains an invalid CSS property (-ms-align-items); remove
the -ms-align-items declaration from the `@mixin` align-items so only valid
vendor-prefixed properties remain (keep -webkit-box-align, -webkit-align-items,
-ms-flex-align) and the standard align-items:$alignment; entry.


@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
Comment on lines +125 to +131
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

-webkit-box-ordinal-group is 1-based; passing $val directly is off-by-one.

The legacy -webkit-box-ordinal-group property uses 1-based values, whereas the standard order is 0-based. For example, order: 2 should correspond to -webkit-box-ordinal-group: 3. Passing $val unchanged will mis-order elements in old WebKit browsers that rely on the prefixed property.

Proposed fix 
 `@mixin` order($val) {
-  -webkit-box-ordinal-group: $val;
+  -webkit-box-ordinal-group: $val + 1;
   -moz-box-ordinal-group: $val;
   -ms-flex-order: $val;
   -webkit-order: $val;
   order: $val;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
`@mixin` order($val) {
-webkit-box-ordinal-group: $val + 1;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
🤖 Prompt for AI Agents 
In `@app/assets/stylesheets/common/foundation/mixins.scss` around lines 125 - 131,
The mixin order currently passes the 0-based $val directly to
-webkit-box-ordinal-group which expects a 1-based value; update the mixin (named
order) to set -webkit-box-ordinal-group to $val + 1 (i.e., convert the 0-based
order to 1-based) while leaving -ms-flex-order, -webkit-order and order
unchanged so old WebKit browsers receive the corrected ordinal-group value.