Merge pull request #10030 from overleaf/ii-dashboard-survey-react-mobile-view

[web] Project dashboard survey mobile view

GitOrigin-RevId: 19612f75a9987625f10626f5f9ea9b53321d5fe2
This commit is contained in:
ilkin-overleaf 2022-10-21 14:32:50 +03:00 committed by Copybot
parent be000f2572
commit f8e98cd5c6
4 changed files with 60 additions and 17 deletions

View file

@ -94,6 +94,11 @@ function ProjectListPageContent() {
</div>
</Col>
</Row>
<div className="project-list-sidebar-survey-wrapper">
<div className="project-list-sidebar-survey-subwrapper">
<SurveyWidget />
</div>
</div>
<div className="visible-xs mt-1">
<div role="toolbar" className="projects-toolbar">
<ProjectsDropdown />
@ -127,11 +132,6 @@ function ProjectListPageContent() {
</Col>
</Row>
</div>
<div className="project-list-sidebar-survey-wrapper hidden-xs">
<div className="project-list-sidebar-survey-subwrapper">
<SurveyWidget />
</div>
</div>
</>
) : (
<div className="project-list-welcome-wrapper">

View file

@ -19,6 +19,15 @@ export default function SurveyWidget() {
}
return (
<>
<button
className="project-list-sidebar-survey-dismiss"
type="button"
title="Dismiss Overleaf survey"
onClick={dismissSurvey}
>
<span aria-hidden>&times;</span>
</button>
<div className="project-list-sidebar-survey">
{survey.preText}&nbsp;
<a
@ -29,14 +38,7 @@ export default function SurveyWidget() {
>
{survey.linkText}
</a>
<button
className="project-list-sidebar-survey-dismiss"
type="button"
title="Dismiss Overleaf survey"
onClick={dismissSurvey}
>
<span aria-hidden> &times;</span>
</button>
</div>
</>
)
}

View file

@ -50,6 +50,7 @@
padding-top: @content-margin-vertical;
padding-bottom: @content-margin-vertical;
color: @sidebar-color;
.small {
color: @sidebar-color;
}
@ -710,6 +711,43 @@
.project-list-sidebar-survey-subwrapper {
flex: @project-list-sidebar-wrapper-flex;
@media (max-width: @screen-xs-max) {
line-height: @mobile-action-element-height;
}
}
.project-list-sidebar-survey-dismiss {
position: relative;
z-index: 1;
float: right;
}
@media (max-width: @screen-xs-max) {
position: static;
display: block;
margin-top: @margin-sm;
.project-list-sidebar-survey {
font-size: unset;
&:before {
display: none;
}
.project-list-sidebar-survey-link {
display: inline-flex;
align-items: center;
min-width: @mobile-action-element-width;
min-height: @mobile-action-element-height;
}
}
.project-list-sidebar-survey-dismiss {
width: @mobile-action-element-width;
height: @mobile-action-element-height;
border: 0;
}
}
}

View file

@ -1136,3 +1136,6 @@
// Editor fonts
@editor-font-lucida: 'Lucida Console', 'Source Code Pro', monospace;
@editor-font-monaco: Monaco, Menlo, 'Ubuntu Mono', 'Consolas', monospace;
@mobile-action-element-width: 48px;
@mobile-action-element-height: @mobile-action-element-width;