TimeFieldtype styling: too wide

[sauerbraten]

After https://github.com/statamic/three-cms/issues/395 is fixed now, the time still looks a bit wrong 🙃

[jackmcdade]

How do you have that configured? Here's what I get...

[sauerbraten]

In the blueprint we only configure required: true on our wrapping fieldtype and pass that along with some more settings:

<template>
    <date-fieldtype
        :value="isoString"
        :config="{ ...this.config, time_enabled:true, time_required:this.config.required }"
        @input="onInput"
    ></date-fieldtype>
</template>

<script>
export default {

    mixins: [ Fieldtype ],

    computed: {
        nonZeroUnixTimestamp() {
            if (this.value == null || this.value == undefined) {
                return null;
            }
            return this.value === 0 ? window.moment().unix() : this.value;
        },

        isoString() {
            if (this.nonZeroUnixTimestamp == null) {
                return null;
            }
            let datetime = this.toISOString(this.nonZeroUnixTimestamp);
            const time = datetime.substring(11, 19);
            // if no time required, a '00:00:00' time means
            // the user cleared the time. in that case, we
            // cut off the time to let Statamic render a
            // button to add a time.
            if (time === '00:00:00' && !this.config.time_required) {
                datetime = datetime.substring(0, 10);
            }
            return datetime;
        }
    },

    methods: {
        toISOString(unixTimestamp) {
            return window.moment.unix(unixTimestamp).format();
        },

        fromISOString(isoDateString) {
            return window.moment(isoDateString).unix();
        },

        onInput(value) {
            this.update(this.fromISOString(value));
        },
    },
}
</script>

No styling or anything.

[sauerbraten]

The problem is probably the same as here: https://github.com/statamic/three-cms/issues/441

[jackmcdade]

Ah yes, since the .date-fieldtype classname isn't being applied in the publish-fields loop because that's not the name of your field. 🤔

[sauerbraten]

I guess since https://github.com/statamic/three-cms/commit/de200bc647aa29f286cca9e02b034bca2ed626b2 I could just pass component: 'date' in :config="{ ... }"?

[jackmcdade]

Or you could probably literally wrap <div class="date-fieldtype"> around your <date-fieldtype> :)

However, I need to spend a little time thinking this through - i want to make sure the fields are easily reusable and I think a refactor in inheritance/classnames might be in order here.

[jackmcdade]

This should be fixed now.

[sauerbraten]

Sadly no, still happens in Firefox:

BTW, as you can see, read_only handling seems to be broken, too.

[jasonvarga]

Add these props to your <date-fieldtype>

:meta="meta"
:read-only="isReadOnly"
@input="$emit('input', $event)"
@focus="$emit('focus')"
@blur="$emit('blur')"

That should fix the read only state and probably other stuff too.

[sauerbraten]

I did that because it's certainly good, but it doesn't fix the styling issue unfortunately.

This is what I have right now:

<date-fieldtype
    :value="isoString"
    :config="{ ...this.config, mode:'single', time_enabled:true, time_required:this.config.required }"
    :name="name"
    :meta="meta"
    :read-only="readOnly"
    @input="onInput"
    @focus="$emit('focus')"
    @blur="$emit('blur')"
></date-fieldtype>

[jackmcdade]

Are you up to date on statamic/three-cms as of today? I just pushed some new element-query responsive tweaks.

[sauerbraten]

Today yes, but not on the latest changes you did. Let's see...

[jasonvarga]

(The comment I made was not intended to fix anything related to styling)

[sauerbraten]

Oh right, yeah, read only. Thanks!

[jackmcdade]

Any luck @sauerbraten?

[jackmcdade]

Fixed.