In mockups for the newcomer tasks project, we started exploring some changes to the styling of the mobile homepage preview cards and modules. These are shown in the [[ https://zpl.io/a3KgRQA | Growth Zeplin board ]] and in the the images below.
| Homepage layout pre-SE-initiation {F31363206} | Homepage layout after SE initiation {F31363164} | Start preview - tasks not initiated {F31363176} | Start preview - after initiation {F31363194} | Start module - pre-SE-initiation {F31363182} | Start module after initiation{F31363188} | Mentor module {F31363199} | Help module {F31363226} | Impact - no edits {F31363214} | Impact with edits {F31363220} |
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 Mobile newcomer homepage it should update to look like the following:
| M. Homepage summary pre-SE initiation {F31456552}| M. Homepage summary after SE initiation {F31456551} | M. Start module {F31456555} | M. Mentor module {F31456556} | M. Help module {F31456558} | M. Suggested edits module {F31456561}
====1. Mobile summary layout
```
body.mw-special-Homepage.growthexperiments-homepage-mobile-summary .growthexperiments-homepage-container > a > .growthexperiments-homepage-module {
padding: 0 16px 16px 16px; /* change from 0 0.6875em 0.6875em 0.6875em */
}
/* ** Hide icons ** */
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-header-icon {
display:none; /* no longer show icons before module headers */
}
.growthexperiments-homepage-module-mobile-summary h2.growthexperiments-homepage-module-section-header.growthexperiments-homepage-module-header {
margin: 12px 0px!important;
padding:0!important;
}
/* ** Fix header padding on all mobile summary modules ** */
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-header-text{
padding:0!important;
}
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module {
box-shadow: none; /* remove box-shadow */
}
body.mw-special-Homepage.growthexperiments-homepage-mobile-summary .growthexperiments-homepage-container > a > .growthexperiments-homepage-module h2.growthexperiments-homepage-module-section-header .growthexperiments-homepage-module-header-text{
font-size:14px; /*change from 0.875em */
line-height:20px;
}
```
==== 2. MOBILE Start summary
```
.growthexperiments-homepage-module-start .growthexperiments-homepage-module-section.growthexperiments-homepage-module-section-body.growthexperiments-homepage-module-body{
padding-left:0!important;
padding-right:0!important;
}
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-start-startediting-completed{
border:solid 1px rgba(234,243,255,.5)!important; /* this makes the border the same color as the background around the start module when start editing is completed */
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module{
flex-basis:25%; /* change from 50% */
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module{
margin-top:0px; /* change from .5em */
padding:8px 4px 24px; /* change from padding:0 0.5em */
}
/* shift position of icons inside start submodules */
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon span{
left:0px;
top:4px;
}
/* Add connecting lines in the middle of circular icons */
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module:nth-child(1) {
background-repeat: no-repeat;
background-image:
linear-gradient(#54595d 100%, transparent 0);
background-size:
33% 1px;
background-position:
100% 24px;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module:nth-child(2), .growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module:nth-child(3) {
background-repeat: no-repeat;
background-image:
linear-gradient(#54595d 100%, transparent 0),
linear-gradient(#54595d 100%, transparent 0);
background-size:
33% 1px,
33% 1px;
background-position:
0% 24px,
100% 24px;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module:nth-child(4) {
background-repeat: no-repeat;
background-image:
linear-gradient(#54595d 100%, transparent 0);
background-size:
33% 1px;
background-position:
0% 24px;
}
/* Re-position text for each submodule below the icons as if inline */
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-summary > .growthexperiments-homepage-module-section-body {
position:relative;
}
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-text{
font-size:12px;
position:absolute;
white-space:nowrap;
overflow:hidden;
width:50%;
background-color:transparent;
}
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-text::before {
content:'•';
margin-right:10px;
}
.growthexperiments-homepage-module.growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-header-text {
top:48px;
left:8px;
}
.growthexperiments-homepage-module.growthexperiments-homepage-module-start-email .growthexperiments-homepage-module-header-text {
top:48px;
right:8px;
}
.growthexperiments-homepage-module.growthexperiments-homepage-module-start-tutorial .growthexperiments-homepage-module-header-text {
top:64px;
left:8px;
}
.growthexperiments-homepage-module.growthexperiments-homepage-module-start-startediting .growthexperiments-homepage-module-header-text {
top:64px;
right:8px;
}
/* Change bullet to tick and text to green30 for completed items*/
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-completed.growthexperiments-homepage-module .growthexperiments-homepage-module-header-text {
color:#14866D;
}
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-completed.growthexperiments-homepage-module .growthexperiments-homepage-module-header-text.growthexperiments-homepage-module-header-text::before {
content:'✓';
}
/* Change bullet to tick and text to green30 for completed items*/
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-completed, .growthexperiments-homepage-module-completed .growthexperiments-homepage-module-header-text{
background-color:transparent;
}
```
==== 3. MOBILE Mentor summary
```
.growthexperiments-homepage-module.growthexperiments-homepage-module-mentorship {
background-color: #F8F9FA;
}
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-mentorship-userlink{
font-size:16px; /* change from font-size:1.2em */
}
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-mentorship-editcount, .growthexperiments-homepage-mentorship-lastactive {
font-size:12.8px; /* change from font-size:0.85em */
color:#54595d; /* change from #72777d */
}
.growthexperiments-homepage-module-mobile-summary .growthexperiments-homepage-module-text-light{
color:#54595d!important; /* change from #72777d */
font-size:14.8px; /* change from font-size:0.85em */
}
```
==== 4. MOBILE Help summary
```
/* ** Make help heading in mobile summary a row ** */
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-help .growthexperiments-homepage-module-section-header.growthexperiments-homepage-module-header{
flex-direction:row;
}
/* ** Hide icon ** */
.growthexperiments-homepage-module-mobile-summary.growthexperiments-homepage-module-help .growthexperiments-homepage-module-header-icon {
display:none;
}
```
==== 5. MOBILE Structural updates
* change icon on the top right on the summary header from OOUI 'next' icon to 'arrowNext'
==== 6. MOBILE Suggested edits summary
```
.growthexperiments-homepage-module-mobile-summary .suggested-edits-main {
padding:8px 16px 8px 0!important;
}
```
=== 7. MOBILE Start module
```
.homepage-module-overlay .growthexperiments-homepage-module-suggested-edits{
background-color:rgba(234,243,255,.5)!important;
}
body.mw-special-Homepage .overlay-content .growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-section-header{
margin-top:0; /* change from .5em */
margin-bottom:0; /* change from .5em */
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-section .growthexperiments-homepage-module-section-body{
margin: 0px 8px 0px 48px;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module .growthexperiments-homepage-module-section-body{
padding-left:48px;/* change from 46px */
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-userinfo {
margin-bottom: 0;/* change from 1em */
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay {
background-color:rgba(234,243,255,0.5)!important;
box-shadow:0 0 0 3em rgba(234,243,255,0.5)!important;
}
.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-completed{
background-color:rgba(234,243,255,1)!important;
}
.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-completed:first-child{
box-shadow:0 -24px 0 0 rgba(234,243,255,1)!important;
margin-top:8px!important;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module{
border-bottom:#fff 1px solid; /* change from border-bottom: #c8ccd1 1px solid */
padding:16px 16px 24px; /* change from padding:1em 0 1.85em 0 */
}
.growthexperiments-homepage-module.growthexperiments-homepage-module-start-startediting.growthexperiments-homepage-module-mobile-overlay {
padding-bottom: 32px!important;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon{
width:32px;
height:32px;
margin-right: 16px;
min-width: 32px;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon span{
width:20px;
height:20px;
left:0px; /* change from left:6px */
top:2px;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-header-text{
font-size:18.2px!important;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-editcount {
margin: 8px 0 0 -44px!important;
}
.growthexperiments-homepage-module-start.growthexperiments-homepage-module-mobile-overlay > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-accountage{
font-size:13.6px;
margin:0;
padding:0;
}
```
==== 8. MOBILE Mentor module
```
.growthexperiments-homepage-module-mobile-overlay.growthexperiments-homepage-module-mentorship{
height:calc(100vh - 48px);
background-color:#F8F9FA!important;
}
.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-mentorship-intro {
font-family:'Charter', 'Georgia', serif;
line-height:1.65;
}
.growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-mentorship-intro{
margin: 8px;
padding: 8px 16px;
background-color: #fff;
box-shadow: 0 -1em 0 88px #fff;
}
.growthexperiments-homepage-module-mobile-overlay .recent-questions-growthexperiments-mentor-questions-list{
margin-top:8px;
}
.growthexperiments-homepage-module-mobile-overlay.growthexperiments-homepage-module-mentorship {
padding: 16px!important;
}
```
==== 9. MOBILE Suggested edits module
```
.growthexperiments-homepage-module-mobile-overlay.growthexperiments-homepage-module-suggested-edits{
height:calc(100vh - 48px);
background-color:rgba(234,243,255,.5)!important;
}
.growthexperiments-homepage-module-mobile-overlay .suggested-edits-footer{
margin-top:16px!important;
}
```
NOTE: These changes presume the css updates on T232546 to the Desktop styles have been made.
___________
CSS file of the above available at:
https://github.com/reetssydney/prototypes/blob/master/assets/newcomer%20homepage%20MOBILE%20style%20updates.css