Resolve "Polling: Updated poll admin UX"
This commit is contained in:
N Pex
parent
90daf060cc
commit
4f6238bc59
11 changed files with 1531 additions and 1111 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,6 @@
|
|||
.poll-bubble {
|
||||
width: 70%;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.poll-bubble {
|
||||
|
|
@ -36,6 +37,7 @@
|
|||
border-radius: 4px;
|
||||
padding: 15px 14px;
|
||||
margin: 0px;
|
||||
height: 48px;
|
||||
&.winner {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -77,40 +79,190 @@
|
|||
|
||||
.poll-status {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
font-size: 13px;
|
||||
line-height: 117%;
|
||||
margin: 0px;
|
||||
margin: 17px 0px 0px 0px;
|
||||
.poll-status-title {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 117%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
letter-spacing: 0.4px;
|
||||
color: #1d1d1d;
|
||||
opacity: 0.8;
|
||||
.from-admin & {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-status-close {
|
||||
color: $poll-hilite-color;
|
||||
background: transparent;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 32px;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 10px;
|
||||
line-height: 133%;
|
||||
letter-spacing: 0.34px;
|
||||
text-transform: uppercase;
|
||||
color: #181719;
|
||||
padding: 7px 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.poll-status-closed {
|
||||
background: white;
|
||||
border-radius: 32px;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 10px;
|
||||
line-height: 133%;
|
||||
letter-spacing: 0.34px;
|
||||
text-transform: uppercase;
|
||||
color: #181719;
|
||||
padding: 7px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon {
|
||||
width: 9px;
|
||||
height: 8px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poll-submit {
|
||||
.v-btn {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 11 * $chat-text-size;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
background-color: $poll-hilite-color !important;
|
||||
border: 1px solid black;
|
||||
border-radius: 21px !important;
|
||||
height: 42px !important;
|
||||
margin-top: $chat-standard-padding-xs;
|
||||
margin-bottom: $chat-standard-padding-xs;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe;
|
||||
border-radius: 32px;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 11.5411px;
|
||||
line-height: 140%;
|
||||
text-align: center;
|
||||
letter-spacing: 0.34px;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
padding: 14px 18px;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.poll-disclose {
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
letter-spacing: 0.4px;
|
||||
color: #1d1d1d;
|
||||
opacity: 0.8;
|
||||
.poll-disclose-track {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 18px;
|
||||
background: #ededed;
|
||||
border-radius: 16px;
|
||||
transform: rotate(180deg);
|
||||
margin-left: 8px;
|
||||
transition: background-color 0.3s linear;
|
||||
.poll-disclose-knob {
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 16px;
|
||||
transform: rotate(180deg);
|
||||
width: 16px;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
transition: right 0.3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected .poll-disclose-track {
|
||||
background: #1d1d1d;
|
||||
.poll-disclose-knob {
|
||||
right: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Creation dialog
|
||||
//
|
||||
.poll-create-dialog-content {
|
||||
max-height: 50vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.poll-create-status {
|
||||
font-size: 0.7rem;
|
||||
.poll-create {
|
||||
.poll-create-dialog-content {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 117%;
|
||||
letter-spacing: 0.4px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
|
||||
.add-answer-button {
|
||||
border-radius: 4px;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid #242424;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 1s linear, height 0.3s linear;
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
transition: opacity 0s linear, height 0s linear;
|
||||
}
|
||||
img {
|
||||
width: 14.88px;
|
||||
height: 14.88px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filled-button.publish-button {
|
||||
background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe !important;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
height: 42px !important;
|
||||
border-radius: 32px;
|
||||
}
|
||||
.tip {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
line-height: 117%;
|
||||
letter-spacing: 0.4px;
|
||||
color: #1d1d1d;
|
||||
opacity: 0.8;
|
||||
text-align: left;
|
||||
b {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
.poll-create-status {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
src/assets/icons/ic_add.svg
Normal file
4
src/assets/icons/ic_add.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.7674 6.32558H8.55814V1.11628C8.55814 0.483721 8.07442 0 7.44186 0C6.8093 0 6.32558 0.483721 6.32558 1.11628V6.32558H1.11628C0.483721 6.32558 0 6.8093 0 7.44186C0 8.07442 0.483721 8.55814 1.11628 8.55814H6.32558V13.7674C6.32558 14.4 6.8093 14.8837 7.44186 14.8837C8.07442 14.8837 8.55814 14.4 8.55814 13.7674V8.55814H13.7674C14.4 8.55814 14.8837 8.07442 14.8837 7.44186C14.8837 6.8093 14.4 6.32558 13.7674 6.32558Z" fill="black" fill-opacity="0.5"/>
|
||||
<path d="M13.7674 6.32558H8.55814V1.11628C8.55814 0.483721 8.07442 0 7.44186 0C6.8093 0 6.32558 0.483721 6.32558 1.11628V6.32558H1.11628C0.483721 6.32558 0 6.8093 0 7.44186C0 8.07442 0.483721 8.55814 1.11628 8.55814H6.32558V13.7674C6.32558 14.4 6.8093 14.8837 7.44186 14.8837C8.07442 14.8837 8.55814 14.4 8.55814 13.7674V8.55814H13.7674C14.4 8.55814 14.8837 8.07442 14.8837 7.44186C14.8837 6.8093 14.4 6.32558 13.7674 6.32558Z" fill="#242424"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1,010 B |
3
src/assets/icons/ic_check_small.svg
Normal file
3
src/assets/icons/ic_check_small.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.83799 0.185699C8.63338 -0.0470852 8.2762 -0.0635505 8.05605 0.150657L3.00935 5.0643C2.96298 5.11167 2.89351 5.11379 2.84524 5.07047L1.55358 3.95998C1.40102 3.83021 1.22148 3.76012 1.03229 3.76012C0.777422 3.76012 0.536097 3.88787 0.371977 4.10621L0.20399 4.33081C-0.0971529 4.73456 -0.0605251 5.328 0.285096 5.68226L2.31232 7.74863C2.47065 7.91143 2.67725 8 2.88963 8C3.13285 8 3.36453 7.88467 3.52865 7.68068L8.85337 1.05907C9.0542 0.809911 9.04842 0.42676 8.83794 0.185681L8.83799 0.185699Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 620 B |
|
|
@ -238,26 +238,31 @@
|
|||
"download_name": "Download"
|
||||
},
|
||||
"poll_create": {
|
||||
"title": "Create poll",
|
||||
"intro": "Please fill in details below.",
|
||||
"create": "Create",
|
||||
"title": "New Poll",
|
||||
"create": "Publish",
|
||||
"creating": "Creating poll",
|
||||
"poll_disclosed": "Open - current results are shown at all times.",
|
||||
"poll_undisclosed": "Closed - users will see the results when poll is closed.",
|
||||
"add_answer": "Add answer",
|
||||
"failed": "Failed to create poll, please try again later.",
|
||||
"question_label": "Type your question here",
|
||||
"question_label": "Ask your question*",
|
||||
"question_required": "You need to enter a question!",
|
||||
"answer_label": "Answer no {index}",
|
||||
"answer_label_1": "Answer*",
|
||||
"answer_label_n": "Answer",
|
||||
"please_complete": "Please complete",
|
||||
"answer_required": "Answer can't be empty. Please enter some text or remove this option.",
|
||||
"tip_title": "PRO TIP",
|
||||
"tip_text": "Members will see the poll results after they answer. Close the poll when you're done to show results to everyone in the room..",
|
||||
"create_poll_menu_option": "Create poll",
|
||||
"poll_status_closed": "Poll is closed",
|
||||
"poll_status_disclosed": "Results will be shown when poll is closed.",
|
||||
"poll_status_open": "Poll is open",
|
||||
"poll_status_open_not_voted": "Poll is open - vote to see the results",
|
||||
"view_results": "View Results",
|
||||
"close_poll": "Close poll",
|
||||
"poll_submit": "Submit",
|
||||
"num_answered": "{count} have answered"
|
||||
"num_answered": "{count} answers",
|
||||
"results_shared": "Results shared to the room."
|
||||
},
|
||||
"export": {
|
||||
"exported_date": "Exported on {date}",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue