Skip to content

Commit f3562b0

Browse files
akinseyakinsey
authored
Merge pull request #22 from epochtalk/poll-creator
Poll creator
2 parents 13e8d04 + be8094f commit f3562b0

File tree

6 files changed

+572
-391
lines changed

6 files changed

+572
-391
lines changed

‎src/api/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export const postsApi = {
9393
byNewbie: params => $http('/api/posts/patrol', { params })
9494
}
9595
export const pollsApi = {
96+
create: (threadId, params) => $http(`/api/threads/${threadId}/polls`, { method: 'POST', data: params }),
9697
vote: (threadId, pollId, answerIds) => $http(`/api/threads/${threadId}/polls/${pollId}/vote`, { method: 'POST', data: { answer_ids: answerIds }}),
9798
removeVote: (threadId, pollId) => $http(`/api/threads/${threadId}/polls/${pollId}/vote`, { method: 'DELETE' }),
9899
editPoll: (threadId, pollId, options) => $http(`/api/threads/${threadId}/polls/${pollId}`, { method: 'PUT', data: options }),

‎src/assets/scss/_global-components.scss

+369
Original file line numberDiff line numberDiff line change
@@ -767,3 +767,372 @@ input[disabled].toggle-switch:checked + label:after { background-color: lighten(
767767
}
768768
}
769769
}
770+
771+
/*-- Polls --*/
772+
.polls {
773+
@include border-radius(4px);
774+
flex: 2 0 40vh;
775+
border: 1px solid $border-color;
776+
box-shadow: 0 2px 24px rgba(0, 0, 0, .1);
777+
color: $sub-header-font-color;
778+
margin: 1.5rem 0;
779+
max-height: calc(100vh - 16rem);
780+
min-height: 200px;
781+
overflow-x: hidden;
782+
overflow-y: auto;
783+
button { margin: 0.5rem 0 0; width: 100%; }
784+
label { font-size: $font-size-xs; }
785+
.editor-container & {
786+
border-radius: 0;
787+
border: none;
788+
box-shadow: none;
789+
}
790+
791+
// poll creation
792+
&.poll-form {
793+
max-height: 100%;
794+
padding: 1rem 1rem 2rem;
795+
796+
.editor-container & {
797+
border-bottom: $border;;
798+
border-top: $border;
799+
margin: 0;
800+
}
801+
802+
.section-poll-questions {
803+
border-bottom: $border;
804+
margin-bottom: 1rem;
805+
}
806+
807+
h1 {
808+
color: $secondary-font-color;
809+
font-size: $font-size-lg;
810+
font-weight: 400;
811+
text-transform: initial;
812+
}
813+
814+
.checkbox-group {
815+
align-items: center;
816+
display: flex;
817+
margin-bottom: 0.5rem;
818+
}
819+
820+
input[type="checkbox"] {
821+
margin: 0;
822+
margin-right: 0.5rem;
823+
padding: 0;
824+
}
825+
826+
label {
827+
margin: 0;
828+
}
829+
830+
.actions {
831+
display: flex;
832+
align-items: center;
833+
justify-content: flex-end;
834+
padding: 1rem 0;
835+
}
836+
837+
button {
838+
margin: 0;
839+
width: max-content;
840+
}
841+
842+
.answer-row {
843+
margin-bottom: 0.625rem;
844+
&:last-of-type { margin-bottom: 1rem; }
845+
846+
input {
847+
margin-bottom: 0;
848+
}
849+
850+
851+
.field-inline-action {
852+
position: relative;
853+
854+
input {
855+
display: inline-block; margin-bottom: 0;
856+
}
857+
858+
button {
859+
border: none;
860+
display: inline-block;
861+
margin: 0;
862+
right: 0.25rem;
863+
top: 0.25rem;
864+
padding: 0;
865+
height: 1.825rem;
866+
width: 1.825rem;
867+
position: absolute;
868+
869+
i {
870+
margin: 0;
871+
}
872+
}
873+
}
874+
}
875+
876+
.poll-options-expiration {
877+
margin-bottom: 1rem;
878+
label { height: auto; }
879+
880+
.fieldgroup {
881+
display: grid;
882+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
883+
884+
input {
885+
margin-bottom: 0;
886+
}
887+
}
888+
}
889+
}
890+
891+
.poll-title {
892+
background-color: $base-background-color;
893+
border-bottom: $border;
894+
color: $secondary-font-color;
895+
display: flex;
896+
align-items: center;
897+
font-size: $font-size-xs;
898+
padding: 0.5rem 1rem;
899+
position: sticky;
900+
top: 0;
901+
z-index: 1000;
902+
text-transform: uppercase;
903+
904+
.poll-title-text {
905+
flex: 1 0 auto;
906+
}
907+
908+
.poll-controls {
909+
display: flex;
910+
justify-self: flex-end;
911+
912+
@include break-mobile-sm {
913+
text-align: right;
914+
}
915+
}
916+
.poll-control {
917+
margin-left: 0.5rem;
918+
919+
label {
920+
display: flex;
921+
align-items: center;
922+
}
923+
924+
.icon {
925+
display: none;
926+
& + label:before { font-size: 1.4rem; color: $secondary-font-color-light; }
927+
&:checked + label:before { color: $color-primary; }
928+
}
929+
930+
svg {
931+
width: 0.875rem;
932+
}
933+
934+
&.is_locked {
935+
svg {
936+
fill: $color-primary;
937+
}
938+
}
939+
}
940+
}
941+
942+
.poll-body {
943+
padding: 1rem;
944+
}
945+
946+
// header section
947+
.poll-header {
948+
display: flex;
949+
flex-direction: column;
950+
// flex-wrap: wrap;
951+
margin-bottom: 0.5rem;
952+
953+
.poll-question {
954+
color: $base-font-color;
955+
font-size: $font-size-base;
956+
margin-bottom: 0.5rem;
957+
line-height: 1.2;
958+
text-transform: none;
959+
}
960+
961+
.poll-header-main {
962+
// flex: 4 1 auto;
963+
margin-bottom: 0.5rem;
964+
}
965+
966+
.poll-details {
967+
line-height: 1;
968+
969+
.poll-info {
970+
color: $secondary-font-color-dark;
971+
font-size: $font-size-xs;
972+
// font-weight: bold;
973+
@include transition(color 0.25s ease-in);
974+
&.highlight { color: red; }
975+
}
976+
&.small { width: 8rem; }
977+
}
978+
}
979+
// poll edit section
980+
.poll-edit-container {
981+
padding: 0.5rem 1rem 1rem;
982+
background-color: $sub-header-color;
983+
984+
.panelTitle {
985+
color: $secondary-font-color;
986+
font-size: $font-size-sm;
987+
margin-bottom: 0.5rem;
988+
}
989+
}
990+
991+
.pollEdit__expiration {
992+
margin-bottom: 1rem;
993+
input {
994+
margin-bottom: 0.25rem;
995+
}
996+
}
997+
998+
.pollGroup__header {
999+
font-size: $font-size-sm;
1000+
}
1001+
1002+
// poll answers section
1003+
$poll__questionOffset: 1.5rem;
1004+
1005+
.poll-answer {
1006+
margin: 0.5rem 0;
1007+
padding-bottom: 0.5rem;
1008+
&:first { margin-top: 0;}
1009+
.fill-row:not(:last-child) { margin-bottom: 0.5rem; }
1010+
.one-third-column { padding-top: 0.2rem; }
1011+
1012+
.poll-select {
1013+
border-radius: 3px;
1014+
padding: 0.5rem 0 0.5rem $poll__questionOffset;
1015+
color: $sub-header-secondary-font-color;
1016+
font-size: $font-size-base;
1017+
font-weight: normal;
1018+
line-height: 1.2;
1019+
position: relative;
1020+
height: auto;
1021+
input {
1022+
margin-bottom: 0;
1023+
margin-left: -1.25rem;
1024+
margin-right: .5rem;
1025+
}
1026+
1027+
&.voted {
1028+
// margin-left: $poll__questionOffset;
1029+
}
1030+
1031+
&.active { border-color: $color-primary-transparent; background-color: $color-primary-transparent; }
1032+
}
1033+
// votes bar
1034+
.poll-results {
1035+
display: flex;
1036+
flex-direction: column;
1037+
margin-left: $poll__questionOffset;
1038+
margin-top: 0.125rem;
1039+
margin-bottom: 0.25rem;
1040+
}
1041+
.poll-results-data {
1042+
color: $secondary-font-color-dark;
1043+
// flex: 1 0 220px;
1044+
font-size: 0.875rem;
1045+
margin-bottom: 0.25rem;
1046+
// padding: 0 1rem;
1047+
// order: 2;
1048+
}
1049+
1050+
.poll-results-value {
1051+
font-weight: 600;
1052+
}
1053+
1054+
.poll-bar {
1055+
@include transition(250ms linear all);
1056+
position: relative;
1057+
height: 0.25rem;
1058+
background-color: $border-color;
1059+
margin-right: 1rem;
1060+
// flex: 4 0 auto;
1061+
span {
1062+
position: absolute;
1063+
overflow: hidden;
1064+
white-space: nowrap;
1065+
text-overflow: ellipsis;
1066+
line-height: 1.4625rem;
1067+
}
1068+
.poll-answer-fill { max-width: 20%; right: 0.625rem; }
1069+
section {
1070+
background-color: $color-primary;
1071+
border-right: 1px solid $base-background-color;
1072+
height: 100%;
1073+
}
1074+
}
1075+
1076+
.selected-answer {
1077+
.selected-answer-icon {
1078+
position: absolute;
1079+
top: 10px;
1080+
left: 0;
1081+
svg {
1082+
fill: $color-primary;
1083+
}
1084+
}
1085+
1086+
section {
1087+
background-color: $color-primary;
1088+
}
1089+
}
1090+
}
1091+
1092+
button,
1093+
.button {
1094+
// float: none;
1095+
// margin-left: $poll__questionOffset;
1096+
// margin-top: 2rem;
1097+
max-width: 320px;
1098+
}
1099+
1100+
.actionsBar {
1101+
background-color: $base-background-color;
1102+
padding: 1rem;
1103+
position: sticky;
1104+
bottom: 0;
1105+
}
1106+
1107+
@include break-mobile-sm {
1108+
.poll-info .fourth-columns { margin-bottom: 0.5rem; }
1109+
.poll-answer .poll-bar .poll-answer-fill { max-width: 30%; }
1110+
.poll-answer .poll-select.active { background-color: transparent; }
1111+
.poll-answer .one-third-column { padding-top: 0; }
1112+
// .poll-header .poll-controls { width: 100%; text-align: center; }
1113+
.poll-header .poll-control { margin: 0.5rem; }
1114+
// .poll-header .poll-details .poll-info { display: block; }
1115+
.poll-header .poll-details, .poll-header .poll-details.small { width: 100%; padding-left: 0; }
1116+
}
1117+
1118+
@include break-mobile-sm {
1119+
poll-header {
1120+
flex-direction: column;
1121+
1122+
.poll-header-main {
1123+
flex: none;
1124+
}
1125+
}
1126+
1127+
.poll-answer {
1128+
.poll-results-data {
1129+
flex: none;
1130+
}
1131+
}
1132+
1133+
button, .button {
1134+
margin-left: 0;
1135+
margin-top: 1rem;
1136+
}
1137+
}
1138+
}

0 commit comments

Comments
 (0)