diff options
author | dartcafe <github@dartcafe.de> | 2021-07-14 00:16:50 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2021-07-28 11:59:34 +0300 |
commit | a66677d7ad9b8c1c3a78671d6f5d0804938efd1b (patch) | |
tree | 7d3e867a3d4c46ee8fbc75ff26ce19ea2dfdc4c0 /src/js/components/Options | |
parent | f35d8a9f3086cd06207bc544e5f8c86535298b21 (diff) |
fine tuning round 1
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src/js/components/Options')
-rw-r--r-- | src/js/components/Options/OptionItem.vue | 107 | ||||
-rw-r--r-- | src/js/components/Options/OptionProposals.vue | 8 | ||||
-rw-r--r-- | src/js/components/Options/OptionsDateAdd.vue | 9 | ||||
-rw-r--r-- | src/js/components/Options/OptionsTextAdd.vue | 9 |
4 files changed, 85 insertions, 48 deletions
diff --git a/src/js/components/Options/OptionItem.vue b/src/js/components/Options/OptionItem.vue index d741039c..08451340 100644 --- a/src/js/components/Options/OptionItem.vue +++ b/src/js/components/Options/OptionItem.vue @@ -42,6 +42,12 @@ <div class="dow"> {{ event.from.dow }} </div> + <div v-if="!event.dayLong" class="time"> + {{ event.from.time }} + <span v-if="!event.dayLong && option.duration && event.to.sameDay"> + - {{ event.to.time }} + </span> + </div> </div> <div v-if="option.duration && !event.to.sameDay" class="devider"> - @@ -56,17 +62,20 @@ <div class="dow"> {{ event.to.dow }} </div> + <div v-if=" !event.dayLong" class="time"> + {{ event.to.time }} + </div> </div> </div> - <div class="event-time"> - <div v-if="!event.dayLong" class="time-from"> + <!-- <div class="event-time"> + <div v-if="!event.dayLong" class="time"> {{ event.from.time }} </div> - <div v-if="option.duration && !event.dayLong" class="time-to"> + <div v-if="option.duration && !event.dayLong" class="time"> {{ event.to.time }} </div> - </div> + </div> --> </div> <slot name="actions" /> @@ -200,6 +209,8 @@ export default { </script> <style lang="scss"> + + .option-item { display: flex; align-items: center; @@ -212,36 +223,68 @@ export default { } } - [class*='event'] { - display: flex; - flex-direction: column; - align-items: center; - } - + // [class*='event'] { + // display: flex; + // flex-direction: column; + // align-items: center; + // } + // .devider { align-self: center; color: var(--color-text-lighter); } + .option-item__option--datebox { + display: flex; + // flex-direction: column; + // padding: 0 2px; + align-items: stretch; + justify-content: flex-start; + text-align: center; + hyphens: auto; + } + .event-date { - flex-direction: row !important; - align-items: stretch !important; + display: flex; + flex: 1; + flex-direction: row; + align-items: stretch; justify-content: center; - .event-from { - padding-bottom: 8px; - flex: 0; - } - .event-to { - flex: 0; - font-size: 0.8em; - justify-content: flex-end; + background-color: var(--color-primary-light); + + .event-from, .event-to { + display: flex; + flex-direction: column; + align-items: stretch; + flex: 1; + // flex-direction: column; + // align-items: center; + // padding-bottom: 8px; + // flex: 0; + + .month, .dow, .time { + white-space: pre; + font-size: 1.1em; + padding: 0 4px; + color: var(--color-text-lighter); + } .day { - margin: 0; + font-size: 1.4em; + margin: 5px 0 5px 0; + padding: 0 4px; + } + + .time { + font-size: 0.8em; + padding: 0 4px; } } } .event-time { + display: flex; + flex-direction: column; + align-items: center; margin-top: 8px; .time-to { font-size: 0.8em; @@ -252,7 +295,7 @@ export default { flex: 1; opacity: 1; white-space: normal; - padding-right: 4px; + // padding-right: 4px; } .option-item__option--text { @@ -286,24 +329,4 @@ export default { margin-right: 8px; } - .option-item__option--datebox { - display: flex; - flex-direction: column; - padding: 0 2px; - align-items: stretch; - justify-content: flex-start; - text-align: center; - hyphens: auto; - - .month, .dow, .time { - white-space: pre; - font-size: 1.1em; - color: var(--color-text-lighter); - } - .day { - font-size: 1.4em; - margin: 5px 0 5px 0; - } - } - </style> diff --git a/src/js/components/Options/OptionProposals.vue b/src/js/components/Options/OptionProposals.vue index fc0d1fb7..6a1296aa 100644 --- a/src/js/components/Options/OptionProposals.vue +++ b/src/js/components/Options/OptionProposals.vue @@ -23,9 +23,9 @@ <template> <div class="option-proposals"> <div class="option-proposals__header"> - <div v-if="proposalsOpen"> + <!-- <div v-if="proposalsOpen"> {{ t('polls', 'You are asked to propose more options for this poll.') }} - </div> + </div> --> <!-- <div v-if="proposalsExpirySet && !proposalsExpired"> {{ t('polls', 'Adding proposals ends {timeRelative}.', {timeRelative: proposalsExpireRelative}) }} </div> --> @@ -34,8 +34,8 @@ </div> </div> <div v-if="proposalsOpen" class="option-proposals__add-proposal"> - <OptionsDateAdd v-if="pollType === 'datePoll'" /> - <OptionsTextAdd v-if="pollType === 'textPoll'" /> + <OptionsDateAdd v-if="pollType === 'datePoll'" caption="Propose a new date" /> + <OptionsTextAdd v-if="pollType === 'textPoll'" placeholder="Propose a new vote option" /> </div> </div> </template> diff --git a/src/js/components/Options/OptionsDateAdd.vue b/src/js/components/Options/OptionsDateAdd.vue index c13d2238..0abd44b8 100644 --- a/src/js/components/Options/OptionsDateAdd.vue +++ b/src/js/components/Options/OptionsDateAdd.vue @@ -28,7 +28,7 @@ @change="changedDate" @pick="pickedDate"> <template #input> - <ButtonDiv :title="t('polls', 'Add option')" /> + <ButtonDiv :title="caption" /> </template> <template #header> @@ -84,6 +84,13 @@ export default { Spacer, }, + props: { + caption: { + type: String, + default: t('polls', 'Add date'), + }, + }, + data() { return { pickerSelection: null, diff --git a/src/js/components/Options/OptionsTextAdd.vue b/src/js/components/Options/OptionsTextAdd.vue index 2476cf73..5125131e 100644 --- a/src/js/components/Options/OptionsTextAdd.vue +++ b/src/js/components/Options/OptionsTextAdd.vue @@ -22,7 +22,7 @@ <template> <InputDiv v-model="newPollText" - :placeholder="t('polls', 'Add option')" + :placeholder="placeholder" @submit="addOption()" /> </template> @@ -37,6 +37,13 @@ export default { InputDiv, }, + props: { + placeholder: { + type: String, + default: t('polls', 'Add option'), + }, + }, + data() { return { newPollText: '', |