NOTE: Only the leftover parts of this task are shown, the rest has been removed from the description. See comment T232546#6831647.
In mockups for the newcomer tasks project, we started exploring some changes to the styling of homepage modules. That is shown [[ http://zpl.io/2vPvqoJ | in this mockup ]] and in the image below.
| Before SE added {F31134019} | After SE added: {F31134359}
This task details the styling changes for Desktop, **not** including the more comprehensive/structural design updates to the collapsible Start module or the Impact module, which will be tackled in T232896, T223219, and T223221 respectively.
=== Style updates and respective proposed CSS changes:
By making the following CSS changes to the existing version of the Desktop newcomer homepage should update it to look like this:
{F31133824}
==== {icon exclamation-triangle color=red} 1. Homepage layout updates
```
body.mw-special-Homepage.growthexperiments-homepage-desktop .growthexperiments-homepage-container {
max-width: 1600px; /* change from max-width:1215px; */
}
.growthexperiments-homepage-module {
margin: 12px; /* change from 1em */
padding:16px; /* change from 1em */
-webkit-box-shadow: none; /* remove -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.15); */
box-shadow: none; /* remove box-shadow: 0 1px 1px 0 rgba(0,0,0,0.15); */
}
body.mw-special-Homepage.growthexperiments-homepage-desktop .growthexperiments-homepage-container .growthexperiments-homepage-group-main .growthexperiments-homepage-module-impact, body.mw-special-Homepage.growthexperiments-homepage-desktop .growthexperiments-homepage-container .growthexperiments-homepage-group-main .growthexperiments-homepage-module-mentorship {
width:calc(50% - 18px); /* change from width:calc(50% - 1.5em); */
}
.growthexperiments-homepage-module-header-icon {
display:none; /* no longer show icons before module headers */
}
h2.growthexperiments-homepage-module-section-header.growthexperiments-homepage-module-header {
font-size: 16.8px;
line-height: 1;
padding-bottom: 16px; /* change from padding-bottom: 0.76923077em */
margin-bottom: 0px; /* change from margin-bottom: 0.76923077em */
border-bottom: none; /* remove border-bottom:1px solid #c8ccd1*/
}
.growthexperiments-homepage-module-footer {
margin-top:16px; /*change from 1.4em */
}
```
==== 2. Start module updates
```
.growthexperiments-homepage-module-start:not(.growthexperiments-homepage-module-completed){
-webkit-box-shadow: none; /* remove -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15); */
box-shadow: none; /* remove box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15); */
border: solid 1px #3366cc;
background-color: rgba(234,243,255,.5);
}
.growthexperiments-homepage-module-start-startediting-completed{
border:none!important; /* this removes the border around the start module when start editing is completed */
}
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module {
border:none;
padding:16px 16px 8px;
text-align:left;
}
.growthexperiments-homepage-module-completed, .growthexperiments-homepage-module-completed .growthexperiments-homepage-module-header-text {
background-color:#EAF3FF; /*makes start submodule slightly darker blue backgroundto indicate completed */
color:#222;
}
```
===== 2a. Start submodule icons
```
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon {
display:block; /* shows the icons before the start sub-module headers */
width: 28px; /*change from 34px */
height: 28px; /*change from 34px */
background-color: transparent; /* change from #d5fdf4 */
border:solid 1px #54595D; /* change from #c8ccd1 */
margin-right: 8px; /* change from margin-right:10px */
min-width: 28px;
}
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon .oo-ui-iconElement {
width: 16px; /*change from 34px */
height: 16px; /*change from 34px */
background-size: contain; /*change from unset */
min-width: 16px;
position: relative;
left: 6px;
}
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-start-email.growthexperiments-homepage-email-unconfirmed .growthexperiments-homepage-module-header-icon{
background-color:transparent; /* change from #3366cc */
border-color: #54595D; /* change from #3366cc */
}
```
===== 2b. Start submodule inner content
```
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header {
margin-bottom:8px; /*change from 1em */
}
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-text {
font-size: 12.4px;
}
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-body {
padding-top:8px; /*change from 1em */
}
```
===== 2c. Account submodule
```
.growthexperiments-homepage-module-section-userinfo {
display: flex; /*this makes the username sit on the same row as the avatar icon */
}
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-userinfo .oo-ui-iconElement{
height: 30px; /*change from 42px */
width: 30px; /*change from 42px */
border-radius: 0; /* change from border-radius: 50%; */
background-size: contain;; /*change from unset */
background-color:transparent; /* remove background-color: #54595d; */
opacity:0.65;
margin:0 8px 0 0;
}
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-userinfo .growthexperiments-homepage-module-section-username{
color:#222; /*change from #000 */
font-family:'Helvetica Neue','Helvetica','Arial',sans-serif; /*change from 'Georgia',serif */
font-weight: bold;
font-size:14px; /*change from 1.3em */
height: 24px;
margin-top: 6px;
}
.growthexperiments-homepage-module-editcount {
margin: 8px 0 0 -38px!important; /*change from margin:0 0 0.5em 0; */==== {icon exclamation-triangle color=red} > **3. Mentor module
color:#54595D!important; /*change from #72777D */3.1 - The mentor module should not have the border when it is on the RHS column**
padding-bottom:4px;| Expected:{F31631916} |Actual: {F31631917}
}
.growthexperiments-homepage-module-section-accountage{
color:#54595D!important; /*change from #72777D */
}
```
==== 3. Mentor module
```
.growthexperiments-homepage-mentorship-userlink .oo-ui-iconElement {
width: 40px; /*change from 20px */
height: 40px; /*change from 20px */
opacity: 0.65; /*change from 0.6 */
margin-right: 0.5em; /*change from 0.5em */
}
.growthexperiments-homepage-mentorship-username {3.2 Minor styling tweaks
vertical-align: bottom; /*change from middle */
}
.growthexperiments-homepage-mentorship-intro {
margin: 0 8px 16px; /* change from margin: 0.5em 0 1.1em 1.1em; */
font-size:14px; /* change from font-size: 1.2em; */
border-left: solid 4px #A2A9B1;
padding: 8px;
font-style: normal; /* change from font-style: italic; */
color: #222; /* change from #54595d */
}
.growthexperiments-homepage-mentorship-cta{
margin-left:0; /* change from margin-left:1.4em;a. */
}
.recent-questions-growthexperiments-mentor-questions{the bullet " • " separating the mentor edit count and last active date should be the same color and font-size as the two pieces of text.
background-color:#f8f9fa;
margin:16px -16px;
padding:16px;
}
.recent-questions-growthexperiments-mentor-questions h3 {
margin-top:0px!important; /* change from margin-top:1.4em; */
}
```
==== 4. Help module
```
/* Remove the background border and color */
.growthexperiments-homepage-module.growthexperiments-homepage-module-help.growthexperiments-homepage-module-desktop {
border:none;
background-color:transparent;
}
/* Show the "?" header icon larger, above the help header */
.growthexperiments-homepage-module-help .growthexperiments-homepage-module-header-icon {
display:block;
align-self:start;
}
.growthexperiments-homepage-module-help .growthexperiments-homepage-module-header-icon span{
width:40px!important;
height:40px!important;
opacity:0.65;
}
.growthexperiments-homepage-module-help .growthexperiments-homepage-module-section-header.growthexperiments-homepage-module-header{
display:flex;
flex-direction:column;
}
.growthexperiments-homepage-module-help .growthexperiments-homepage-module-header-text{
align-self:start;
padding-top:24px;
}
```
==== 5. Structural updates
* **Start module**
* Account avatar email icon should no longer use the white icon, swap the class .oo-ui-image-invert with .oo-ui-image in the relevant <span>.
* Shorten the copy before "account age"
* Confirm email icon should no longer use the white icon, swap the class .oo-ui-image-invert with .oo-ui-image in the relevant <span>.
* Confirm email submodule - confirmation email address and "change" link is in the same text block.
* Additional changes related to the Start module being collapsible on Desktop detailed on T219391
* **Mentor module**
* Change the avatar icon for the mentor to the new mentor icon
* **Help module**
* Change the help module header icon from "oo-ui-icon-helpNotice" to "oo-ui-icon-help"
==== 6. Suggested edits updates
```
.suggested-edits-footer {
margin: 0 -16px -16px!important; /* changed from margin: 0 -1.11111111em -1.11111111em */
}
```b. There should be an extra ~4px gap between the mentor icon and the edit count/last active text block
------c. There should be an extra ~8px gap between the mentor edit count/last active text block
CSS file of the above available at:d. There should be an extra ~4px gap between the grey vertical bar and the mentor message.
https://github.com/reetssydney/prototypes/blob/master/assets/newcomer%20homepage%20desktop%20style%20updates.css> {F31631984}