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 Growth Zeplin board and in the the images below.
Homepage layout pre-SE-initiation  | Homepage layout after SE initiation  | Start preview - tasks not initiated  | Start preview - after initiation  | Start module - pre-SE-initiation  | Start module after initiation{F31363188} | Mentor module  | Help module  | Impact - no edits  | Impact with edits  | |
This task details the styling changes for mobile, 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  | M. Homepage summary after SE initiation  | M. Start module  | M. Mentor module  | M. Help module  | M. Suggested edits module  |
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
