butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

More poll styling

Browse source
This commit is contained in:
N Pex 2022-05-17 15:16:53 +00:00
parent 98ed17723d
commit 32ebd86c5d
12 changed files with 361 additions and 344 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/assets/css/_variables.scss
View file

@ -15,5 +15,5 @@ $chat-button-height: 50px;
$voice-recorder-color: #6f6f6f;
$voice-recording-color: red;
$voice-recorded-color: #3ae17d;
$poll-hilite-color: $very-very-purple;
$poll-hilite-color: #6360f0;
$poll-hilite-color-bg: #d6d5fc;

4
src/assets/css/chat.scss
View file

@ -611,6 +611,10 @@ $admin-fg: white;
box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
}
.send-options {
z-index: 11; // Above mic button
}
.message-operations-picker {
background-color: white;
text-align: center;

83
src/assets/css/components/_poll.scss
View file

@ -2,19 +2,57 @@
width: 70%;
}
.poll-bubble {
color: black;
padding: $chat-standard-padding-s !important;
font-family: "Inter", sans-serif;
font-size: 16 * $chat-text-size;
line-height: 16 * $chat-text-size;
}
.from-admin .poll-bubble {
color: rgba(white, 0.9);
}
.poll-icon {
path {
fill: currentColor;
}
}
.poll-check-icon {
width: 14.18px;
height: 12px;
}
.poll-question {
font-weight: 700;
margin-top: $chat-standard-padding-xs;
margin-bottom: $chat-standard-padding-s;
}
.poll-answer {
border: 1px solid #666;
border-radius: 5px;
padding: 10px;
margin: 10px;
border: 1px solid currentColor;
border-radius: 4px;
padding: 15px 14px;
margin: 0px;
&.winner {
font-weight: 700;
}
&.selected {
border: 1px solid $poll-hilite-color;
background-color: $poll-hilite-color-bg;
color: #1d1d1d;
font-weight: 700;
}
&.result {
border: none;
padding: 15px 0px;
}
.poll-answer-title {
color: #444;
}
.poll-answer-num-votes {
font-size: 0.7rem;
font-size: 0.75rem;
}
justify-content: space-between;
position: relative;
@ -23,32 +61,49 @@
.poll-percent-indicator {
position: absolute;
bottom: 2px;
left: 2px;
right: 2px;
height: 4px;
left: 0px;
right: 0px;
height: 8px;
margin-top: 4px;
.bar {
background-color: $poll-hilite-color;
background-color: #7e7cf8;
position: absolute;
bottom: 0px;
left: 0px;
top: 0px;
border-radius: 3px;
border-radius: 4px;
}
}
.poll-status {
margin: 10px;
justify-content: space-between;
font-size: 13px;
line-height: 117%;
margin: 0px;
.poll-status-title {
font-size: 0.7rem;
}
.poll-status-close {
font-size: 0.7rem;
color: $poll-hilite-color;
}
}
.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;
}
}
// Creation dialog
//
.poll-create-dialog-content {

3
src/assets/icons/ic_check.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9265 0.278549C13.6041 -0.0706278 13.0413 -0.0953257 12.6944 0.225985L4.74201 7.59645C4.66894 7.6675 4.55947 7.67068 4.48341 7.6057L2.44807 5.93997C2.20767 5.74531 1.92476 5.64018 1.62665 5.64018C1.22503 5.64018 0.844759 5.83181 0.586146 6.15932L0.321439 6.49622C-0.153089 7.10185 -0.095373 7.992 0.449243 8.52339L3.64365 11.6229C3.89315 11.8671 4.2187 12 4.55335 12C4.93661 12 5.30168 11.827 5.5603 11.521L13.9508 1.5886C14.2672 1.21487 14.2581 0.64014 13.9265 0.278521L13.9265 0.278549Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 620 B

6
src/assets/icons/ic_poll.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.31462 16.4718C3.31462 16.9496 3.70026 17.3368 4.17609 17.3368L16.1385 17.3368C16.6144 17.3368 17 16.9496 17 16.4718L16.9998 13.6229C16.9998 13.1452 16.6142 12.7579 16.1383 12.7579L4.1764 12.7579C3.70056 12.7579 3.31492 13.1452 3.31492 13.6229L3.31512 16.4718L3.31462 16.4718Z" fill="white"/>
<path d="M3.31462 10.4557C3.31462 10.9335 3.70026 11.3208 4.17609 11.3208L11.3428 11.3208C11.8186 11.3208 12.2043 10.9335 12.2043 10.4557L12.2043 7.60711C12.2043 7.12931 11.8186 6.74208 11.3428 6.74208L4.17609 6.74208C3.70026 6.74208 3.31462 7.12932 3.31462 7.60711L3.31462 10.4557Z" fill="white"/>
<path d="M3.31451 1.59127L3.31451 4.44011C3.31451 4.91791 3.70016 5.30514 4.17598 5.30514L6.99509 5.30514C7.47093 5.30514 7.85657 4.91791 7.85657 4.44011L7.85637 1.59127C7.85637 1.11347 7.47073 0.726242 6.9949 0.726242L4.17599 0.726242C3.70035 0.726242 3.31452 1.11348 3.31452 1.59127L3.31451 1.59127Z" fill="white"/>
<path d="M-2.00529e-05 0.587841L-2.0791e-05 17.4747C-2.08052e-05 17.7995 0.262306 18.0625 0.585404 18.0625L1.38198 18.0625C1.70528 18.0625 1.96741 17.7995 1.96741 17.4747L1.96741 0.587841C1.96741 0.263208 1.70508 -1.14667e-08 1.38198 -2.55897e-08L0.585405 -6.04092e-08C0.261911 -7.45496e-08 -2.00387e-05 0.263213 -2.00529e-05 0.587841Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
src/assets/translations/en.json
View file

@ -254,6 +254,8 @@
"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",
"close_poll": "Close poll"
"close_poll": "Close poll",
"poll_submit": "Submit",
"num_answered": "{count} have answered"
}
}