From d97cbb0da60f32c9e7e60445af329173b0df1aa7 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 6 Mar 2019 04:53:37 +0100 Subject: Add UI for creating polls (#10184) * Add actions and reducers for polls * Add poll button * Disable media upload if poll enabled * Add poll form * Make delete & redraft work with polls --- app/javascript/styles/mastodon/polls.scss | 88 +++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index 7c6e61d63..d86cef44c 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -33,9 +33,34 @@ display: none; } + input[type=text] { + display: block; + box-sizing: border-box; + flex: 1 1 auto; + width: 20px; + font-size: 14px; + color: $inverted-text-color; + display: block; + outline: 0; + font-family: inherit; + background: $simple-background-color; + border: 1px solid darken($simple-background-color, 14%); + border-radius: 4px; + padding: 6px 10px; + + &:focus { + border-color: $highlight-text-color; + } + } + &.selectable { cursor: pointer; } + + &.editable { + display: flex; + align-items: center; + } } &__input { @@ -45,6 +70,7 @@ box-sizing: border-box; width: 18px; height: 18px; + flex: 0 0 auto; margin-right: 10px; top: -1px; border-radius: 50%; @@ -98,3 +124,65 @@ font-size: 14px; } } + +.compose-form__poll-wrapper { + border-top: 1px solid darken($simple-background-color, 8%); + + ul { + padding: 10px; + } + + .poll__footer { + border-top: 1px solid darken($simple-background-color, 8%); + padding: 10px; + display: flex; + align-items: center; + + button, + select { + flex: 1 1 50%; + } + } + + .button.button-secondary { + font-size: 14px; + font-weight: 400; + padding: 6px 10px; + height: auto; + line-height: inherit; + color: $action-button-color; + border-color: $action-button-color; + margin-right: 5px; + } + + li { + display: flex; + align-items: center; + + .poll__text { + flex: 0 0 auto; + width: calc(100% - (23px + 6px)); + margin-right: 6px; + } + } + + select { + appearance: none; + box-sizing: border-box; + font-size: 14px; + color: $inverted-text-color; + display: inline-block; + width: auto; + outline: 0; + font-family: inherit; + background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; + border: 1px solid darken($simple-background-color, 14%); + border-radius: 4px; + padding: 6px 10px; + padding-right: 30px; + } + + .icon-button.disabled { + color: darken($simple-background-color, 14%); + } +} -- cgit From 57643557b64bc1853c4aeb65fc652dac3467fa18 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 6 Mar 2019 04:54:32 +0100 Subject: Avoid line breaks in poll options (#10188) --- app/javascript/styles/mastodon/polls.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss index d86cef44c..4f8c94d83 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.scss @@ -5,6 +5,7 @@ li { margin-bottom: 10px; position: relative; + height: 18px + 12px; } &__chart { @@ -27,6 +28,9 @@ padding: 6px 0; line-height: 18px; cursor: default; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; input[type=radio], input[type=checkbox] { -- cgit