fix(polls): Update ux according to design
This commit is contained in:
Vlad Piersec
vp8x8
parent
ebb0a206f1
commit
2855642fc3
282
css/_polls.scss
282
css/_polls.scss
|
|
@ -1,5 +1,7 @@
|
|||
.poll-dialog {
|
||||
font-size: 1rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
|
||||
h1, span, li, strong {
|
||||
color: #bce;
|
||||
|
|
@ -16,28 +18,52 @@
|
|||
}
|
||||
|
||||
.poll-header {
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.poll-answer-container{
|
||||
padding: 8px;
|
||||
.poll-answer-container {
|
||||
background: #3D3D3D;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
&> span {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poll-answer-option {
|
||||
font-weight: 400;
|
||||
display: block;
|
||||
margin: 4px;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
font-size: 16px;
|
||||
margin: 11px 8px
|
||||
}
|
||||
}
|
||||
|
||||
.poll-answer-field-list, .poll-answer-list, .poll-result-list {
|
||||
list-style-type: none;
|
||||
padding: 0 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.poll-answer-field-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
ol.poll-result-list {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.poll-result-list > li {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.poll-answer-field {
|
||||
|
|
@ -60,7 +86,7 @@ ol.poll-result-list {
|
|||
.poll-create-container .jsYMHu {
|
||||
background: #292929;
|
||||
border-color: #808090;
|
||||
color: white // #808090
|
||||
color: #fff // #808090
|
||||
}
|
||||
|
||||
.poll-add-button {
|
||||
|
|
@ -72,7 +98,7 @@ ol.poll-result-list {
|
|||
.poll-remove-option-button {
|
||||
background: 0 0;
|
||||
border: none;
|
||||
color: #8B8B8B;
|
||||
color: #E04757;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
|
@ -85,7 +111,7 @@ ol.poll-result-list {
|
|||
|
||||
.poll-icon-button, .poll-drag-handle {
|
||||
.jitsi-icon svg {
|
||||
fill: #bce;
|
||||
fill: #929292;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +120,7 @@ ol.poll-result-list {
|
|||
border: none;
|
||||
cursor: grab;
|
||||
padding-left: 8;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
@ -105,13 +132,12 @@ ol.poll-result-list {
|
|||
}
|
||||
|
||||
.poll-question {
|
||||
font-size: 1.2em;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.poll-answer-voters {
|
||||
font-size: 1em;
|
||||
font-weight: lighter;
|
||||
list-style-type: none;
|
||||
border: #616161 solid 1px;
|
||||
|
|
@ -191,29 +217,40 @@ ol.poll-result-list {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
a.poll-detail-link, a.poll-change-vote-link {
|
||||
color: #669AEC;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #669AEC;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: #669AEC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.poll-detail-link, a.poll-change-vote-link {
|
||||
color: #246FE5;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.polls-pane-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: 600;
|
||||
height: 85%;
|
||||
align-items: stretch;
|
||||
height: calc(100% - 102px);
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
.pane-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.empty-pane-icon {
|
||||
|
|
@ -228,37 +265,41 @@ a.poll-detail-link, a.poll-change-vote-link {
|
|||
}
|
||||
|
||||
.empty-pane-message {
|
||||
color: #fff;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.poll-results {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.poll-answer {
|
||||
h1, strong ,span {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-results, .poll-answer {
|
||||
margin-bottom: 16px;
|
||||
background: #292929;
|
||||
border-radius: 8px;
|
||||
padding: 12px 8px;
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
border-color: #616161;
|
||||
border: 1px solid #666666;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.poll-results {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.poll-answer {
|
||||
|
||||
h1, strong ,span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-create-label {
|
||||
color: white;
|
||||
margin-bottom: 4;
|
||||
color: #C2C2C2;
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
margin-bottom: 4;
|
||||
}
|
||||
|
||||
.expandable-input{
|
||||
line-height: 18px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
|
@ -272,23 +313,26 @@ a.poll-detail-link, a.poll-change-vote-link {
|
|||
}
|
||||
|
||||
.poll-container {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
height: calc(100% - 88px);
|
||||
line-height: 20px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
|
||||
& > * + *:not(.ignore-child) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
@media (max-width: 580px) {
|
||||
height: calc(100% - 102px);
|
||||
}
|
||||
}
|
||||
|
||||
.poll-create-header {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin: 20px 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -297,28 +341,45 @@ a.poll-detail-link, a.poll-change-vote-link {
|
|||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.poll-create-footer {
|
||||
background-color: #141414;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.poll-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 16px;
|
||||
height: 40px;
|
||||
align-items: stretch;
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.poll-primary-button {
|
||||
align-items: center;
|
||||
.poll-answer-footer {
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.poll-button {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
|
||||
&:disabled {
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
@media (max-width: 580px) {
|
||||
min-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-button-primary {
|
||||
background-color: #0056E0;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
font-weight: unset;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
flex: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: #246FE5;
|
||||
|
|
@ -337,23 +398,10 @@ a.poll-detail-link, a.poll-change-vote-link {
|
|||
background-color: #00225A;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-secondary-button {
|
||||
align-items: center;
|
||||
.poll-button-secondary {
|
||||
background-color: #3D3D3D;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
font-weight: unset;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: #525252;
|
||||
|
|
@ -372,79 +420,19 @@ a.poll-detail-link, a.poll-change-vote-link {
|
|||
background-color: #141414;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-small-primary-button {
|
||||
align-items: center;
|
||||
background-color: #0056E0;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
font-weight: unset;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
height: 40px;
|
||||
width: 50%;
|
||||
|
||||
&:hover {
|
||||
background-color: #246FE5;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #0045B3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: #0045B3;
|
||||
border: 3px solid #99BBF3;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #00225A;
|
||||
color: #858585;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.poll-button-short {
|
||||
max-width: 132px;
|
||||
}
|
||||
|
||||
.poll-small-secondary-button {
|
||||
align-items: center;
|
||||
background-color: #3D3D3D;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
font-weight: unset;
|
||||
justify-content: center;
|
||||
font-size: 15px;
|
||||
height: 40px;
|
||||
width: 50%;
|
||||
|
||||
&:hover {
|
||||
background-color: #525252;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #292929;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: #292929;
|
||||
border: 3px solid #858585;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #141414;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.poll-button-shortest {
|
||||
max-width: 117px;
|
||||
}
|
||||
|
||||
.poll-button-short,
|
||||
.poll-button-shortest {
|
||||
@media (max-width: 580px) {
|
||||
min-width: 49%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const PollAnswer = (props: AbstractProps) => {
|
|||
<Checkbox
|
||||
isChecked = { checkBoxStates[index] }
|
||||
key = { index }
|
||||
label = { <span>{ answer.name }</span> }
|
||||
label = { <span className = 'poll-answer-option'>{ answer.name }</span> }
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onChange = { ev => setCheckbox(index, ev.target.checked) }
|
||||
size = 'large' />
|
||||
|
|
@ -41,22 +41,21 @@ const PollAnswer = (props: AbstractProps) => {
|
|||
))
|
||||
}
|
||||
</ol>
|
||||
<div className = { 'poll-footer' }>
|
||||
<div className = 'poll-footer poll-answer-footer' >
|
||||
<button
|
||||
aria-label = { t('polls.answer.skip') }
|
||||
className = { 'poll-small-secondary-button' }
|
||||
className = 'poll-button poll-button-secondary poll-button-shortest'
|
||||
onClick = { skipAnswer } >
|
||||
<span>{t('polls.answer.skip')}</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label = { t('polls.answer.submit') }
|
||||
className = 'poll-small-primary-button'
|
||||
className = 'poll-button poll-button-primary poll-button-shortest'
|
||||
disabled = { isSubmitAnswerDisabled(checkBoxStates) }
|
||||
onClick = { submitAnswer }>
|
||||
<span>{t('polls.answer.submit')}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -212,7 +212,7 @@ const PollCreate = (props: AbstractProps) => {
|
|||
<div className = 'poll-add-button'>
|
||||
<button
|
||||
aria-label = { 'Add option' }
|
||||
className = { 'poll-secondary-button' }
|
||||
className = 'poll-button poll-button-secondary'
|
||||
onClick = { () => {
|
||||
addAnswer();
|
||||
requestFocus(answers.length);
|
||||
|
|
@ -222,17 +222,17 @@ const PollCreate = (props: AbstractProps) => {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className = 'poll-footer'>
|
||||
<div className = 'poll-footer poll-create-footer'>
|
||||
<button
|
||||
aria-label = { t('polls.create.cancel') }
|
||||
className = 'poll-small-secondary-button'
|
||||
className = 'poll-button poll-button-secondary poll-button-short'
|
||||
onClick = { () => setCreateMode(false) }
|
||||
type = 'button' >
|
||||
<span>{t('polls.create.cancel')}</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label = { t('polls.create.send') }
|
||||
className = 'poll-small-primary-button'
|
||||
className = 'poll-button poll-button-primary poll-button-short'
|
||||
disabled = { isSubmitDisabled }
|
||||
type = 'submit' >
|
||||
<span>{t('polls.create.send')}</span>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ const PollsPane = (props: AbstractProps) => {
|
|||
<div className = { 'poll-container' } >
|
||||
<PollsList />
|
||||
</div>
|
||||
<div className = { 'poll-footer' }>
|
||||
<div className = 'poll-footer poll-create-footer'>
|
||||
<button
|
||||
aria-label = { t('polls.create.create') }
|
||||
className = { 'poll-primary-button' }
|
||||
className = 'poll-button poll-button-primary'
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onClick = { onCreate } >
|
||||
<span>{t('polls.create.create')}</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue