mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
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:
parent
be000f2572
commit
f8e98cd5c6
4 changed files with 60 additions and 17 deletions
|
@ -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">
|
||||
|
|
|
@ -19,24 +19,26 @@ export default function SurveyWidget() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="project-list-sidebar-survey">
|
||||
{survey.preText}
|
||||
<a
|
||||
className="project-list-sidebar-survey-link"
|
||||
href={survey.url}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
{survey.linkText}
|
||||
</a>
|
||||
<>
|
||||
<button
|
||||
className="project-list-sidebar-survey-dismiss"
|
||||
type="button"
|
||||
title="Dismiss Overleaf survey"
|
||||
onClick={dismissSurvey}
|
||||
>
|
||||
<span aria-hidden> ×</span>
|
||||
<span aria-hidden>×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="project-list-sidebar-survey">
|
||||
{survey.preText}
|
||||
<a
|
||||
className="project-list-sidebar-survey-link"
|
||||
href={survey.url}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
{survey.linkText}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue