feat(input) add md-dense and match css to spec #8209

clshortfuse · 2016-04-25T21:46:04Z

I've rewritten many of the scss and js files to conform to Material Design spec. There are many changes, but it wasn't possible to separate much of these into smaller pull requests because of the way they depend on each other. I have changes for md-toolbar that can be used later on another PR.

Here are codepens I've made to show the issues with the current implementations and the new changes. Be sure to set your browser with to less than 960px for toolbar height to match the examples.

Layout Tests
Master: http://codepen.io/shortfuse/full/ZWxYpN/
SpecFix: http://codepen.io/shortfuse/full/qZojGW/

Horizontal Tests
Master: http://codepen.io/shortfuse/full/JKGdQv/
SpecFix: http://codepen.io/shortfuse/full/gMPYjE/

In summary, over JS, input-containers will have the classes md-input-has-label and md-input-has-messages so certain CSS rules can apply dependent on if there is a label and/or messages.

Add md-dense to md-input, md-autocomplete, and md-select
Password spacing set to 2px
Variable top and bottom margins
Intelligently hide md-error-spacer when blank and messages present
Fix md-select to align properly and match spec
Fix checkbox to 18px instead of 20px
Add md-no-border option for md-select
Ensure md-select-menu font-size matches md-select font-size
Fix md-autocomplete spacing
Fix text-less md-checkbox width
Align md-icon to top of input box (support all font-sizes)
Support any font size for md-input
Added missing spaces to counter text (ie: 26 / 30 instead of 26/30)

Material Design Sources:

https://www.google.com/design/spec/components/text-fields.html
https://www.google.com/design/spec/patterns/errors.html

clshortfuse · 2016-04-26T12:46:08Z

Because of the way labels work now, this fixes #7403 on IE

Appears to improve upon (probably minor coincidence) #8167

Tested on IE10 and fixes #7881

Fixes 1px issue with #7772

(removed)

No pixel shift on invalid input, fixing #7175

Fixes md-autocomplete height #7153

New height calculation fixes #6800

New message handling fixes #6767

Fixes centering checkboxes without text #3793

ThomasBurleson · 2016-04-26T14:05:25Z

@clshortfuse - Really EXCELLENT work here. @devversion and I really like the clickable cross-hair to compare alignments.

clshortfuse · 2016-04-26T14:51:42Z

@ThomasBurleson Thanks!

You can probably tell this took a bit of work. This is really my first time playing with SCSS. From a maintainability standpoint, maybe somebody could suggest a better md-dense structure. There's a lot of duplicate code, but I wasn't sure how to make it use one variable for default and another if md-dense was present.

I also didn't know how to support md-dense being anywhere in the parent. Right now, you'd have to add .md-dense to each input-container, but ideally, I would like to just add md-dense to something like md-content and it'll apply to every child input-container.

Some things that might cause issues are

md-autocomplete: moves md-progress-linear to be inside input-container, so it can have a relative position under the input box, overlapping the bottom border.
animate: I added an all-encompassing default to the switch statement. This may cause issues elsewhere on other piece of code, though I personally couldn't find any. I didn't treat font-size like the other attributes (height, width, etc) isn't always represented in px. It's sometimes pt or rem.
md-dense: poor code maintainability
md-label: removed scale transformed and replaced it with font-size transforms. AFAIK, this is the first time this is done in angular-material. I'm not sure if browsers would have an issue with this, but I know it works fine with IE10. IE9 transforms the label, but without any animation.

You may see strange pixel numbers (for example 10px margin-top instead of 8px) but that's because the Material Design spec has 0px font leading for text fields. I couldn't set line-height to anything under 100%, so I had to bake in an approximation. The alternative is to change box-sizing to border-box and manually override height forcefully match font-size. The problem with this is the need of JS needed to implement this and possible rendering issues with browsers. The margin of error is rather small. For example, md-display-1 will have have a height of 93px instead 92px.

clshortfuse · 2016-04-26T14:52:21Z

Just tested on Firefox.

It needs

md-input-container label {
  left: 0px;
}

IE10,11,Edge work fine. Go figure.

clshortfuse · 2016-04-28T17:35:26Z

squashed, rebased and tested on Firefox, IE10, IE11, Safari and Chrome

I also added RTL and Ellipsis examples. No regressions spotted.

devversion · 2016-05-09T16:44:47Z

@clshortfuse Just FYI: It is really difficult to test and review a PR, which contains so many sub-fixes. Separated PR's are more appropriated in my opinion.

Fixes font-size issue with #7477

How does that fix #7477?

clshortfuse · 2016-05-09T16:58:44Z

@devversion You're right. It doesn't. That's my mistake.

I know it's a huge batch of changes, but changing one thing normally breaks another. There are a few things I can separate. I could separate 3 ways

md-dense
counter space
md-no-border on md-select

clshortfuse · 2016-05-27T16:00:29Z

rebased again, I also added blank checkbox checks to the codepen. Checkboxes should now center properly in a table.

ThomasBurleson · 2016-06-02T20:23:01Z

@clshortfuse - I am excited to review this next week. Thanks for your efforts with this.

ThomasBurleson · 2016-06-02T20:23:32Z

@crisbeto - can you review and test ?

crisbeto · 2016-06-02T20:25:57Z

Sure, but it won't be until tomorrow at least. @clshortfuse can you rebase meanwhile?

clshortfuse · 2016-06-03T01:34:16Z

Rebased. it took me a bit because I had to readjust for .md-resize-spacer but it's all working now.

I did find a bug with .md-resize-spacer, but that's both in master and my PR. If the parent height doesn't have a max-height, there are some issues. You'll have to check textarea resizing with this codepen:

http://codepen.io/shortfuse/pen/aZOvVg

Everything else is on the two original codepens.

On another note, node-sass fails on node v6.20 even with master. I had to go back to v5.10.1 (what I used originally). At least now I can run karma tests on ChromeOS without issues, so I can check things much faster now.

ThomasBurleson · 2016-06-03T04:52:20Z

@clshortfuse -

we are aware of the Node6 issue... but have not investigated that yet.
rebasing is always a pain. Thank you for this effort
@crisbeto - fyi on the the textarea resizing issue ^.

crisbeto · 2016-06-03T05:18:31Z

Ah it's not accounting for the scrolling position. I'll file a separate issue for it. Shouldn't stop this from going through, though.

ThomasBurleson · 2016-06-03T15:27:58Z

@crisbeto - one major concern with this PR... does it affect any public CSS that we currently have?

If not (and new CSS is used and/or private CSS is modified), then a merge can happen quickly.
If public CSS is modified, we must identify impacts and possible alternate solutions.

My quick review indicates that YES public css is modified. IMO, only when [md-dense] is present should overrides to the CSS be modified.

crisbeto · 2016-06-03T16:16:41Z

src/components/input/input.scss

-    @include rtl(padding-right, $input-container-padding, 0);
-    @include rtl(padding-left, 0, $input-container-padding);
+    //@include rtl(text-align, right, left);
+    //@include rtl(padding-right, $input-container-padding, 0);


Is this supposed to stay commented?

fix textarea fix textarea padding on focus use md-input-has-label and md-input-has-messages fix spec test add password spacing fix bottom margin hide md-error-spacer when blank and messages present correct md-select and md-checkbox add doc for md-no-border md-select-menu font-size matches md-select font-size fix textarea [rows] support fix hints demo fix autocomplete fix select with label fix text-less checkbox width textarea: use padding only if height isn't 0 remove redundant css release: version revert textarea back to default box-sizing align md-icon to top of input box (support all font-sizes) correct icon top when label present add md-dense fix dense font-size add md-dense for select fix messages and error spacing for md-dense md-dense for typed inputs corrected margin/padding remove box-sizing fix autocomplete dense correct padding-right on textarea with label add force label horizontal position (fixes firefox) fix focused textarea padding size fix formatting rename back to -border-width-default add support for resizable textareas make md-resize-handle dynamically positioned add md-spacing values remove horizontal padding on last-child, md-block, or layout-column add docs for md-spacing change .md-resize-handle float to support rtl (just in case) remove unneeded CSS combine classes in input.js remove bad semicolon revert input demo force new positioning revert new lines renamed variables smarter horizontal end margin layout changes fix .md-inline-form fix md-select sizing on IE10-11 fix md-select sizing on IE10-11 revert default top to 50% rework md-datepicker to new format fix(checkbox) rework checkbox to match Material Design spec automatic 16px horizontal padding when in row configuration change checkbox size from 20px to 18px blank checkboxes are sized properly add md-spacing options for different spacing styles add alignment math support custom margins for md-checkbox fix alignment fix alignment more alignment fixes rebase fix new offset parameters

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support - Add and remove `md-input-has-label` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height 1:1 with font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space bottom border per spec - Use dynamic upper margins dependent on label existance - Add md-dense support This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will not resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Prune unneeded CSS - Correct horizontal offsets per spec - Support dynamic lower margins dependent on message existance - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support - Add and remove `md-input-has-label` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height 1:1 with font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space bottom border per spec - Use dynamic upper margins dependent on label existance - Support dynamic lower margins dependent on message existance - Add md-dense support This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will not resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Revert back to padding-top instead of margin-top and find alterate method for increasing click target - Prune unneeded CSS - Correct horizontal offsets per spec - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support - Add and remove `md-input-has-label` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height 1:1 with font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space bottom border per spec - Use dynamic upper margins dependent on label existance - Support dynamic lower margins dependent on message existance - Add md-dense support This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will not resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Revert back to padding-top instead of margin-top and find alterate method for increasing click target - Create workaround for helper text or just build support for it - Prune unneeded CSS - Correct horizontal offsets per spec - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support and introduced pixel aliasing on certain browsers. - Add and remove `md-input-has-label` class dynamically - Add and remove `md-input-has-messages` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height relative to font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space underline per spec - Use dynamic upper margins dependent on label existance - Use dynamic lower margins dependent on message existance - Correct animation timings for smoother font-size transition - Remove unneeded CSS (ie: `order` is only used in flex layouts) - Add md-dense support This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will now resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Clean up karma issues with textarea being shifted to box-sizing - Fix md-icon alignment issues - Increasing click target for touch interaction - Create workaround for helper text or just build support for it - Prune unneeded CSS ( - Correct horizontal offsets per spec - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support and introduced pixel aliasing on certain browsers. - Add and remove `md-input-has-label` class dynamically - Add and remove `md-input-has-messages` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height relative to font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space underline per spec - Use dynamic upper margins dependent on label existance - Use dynamic lower margins dependent on message existance - Correct animation timings for smoother font-size transition - Remove unneeded CSS (ie: `order` is only used in flex layouts) - Add md-dense support This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will now resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Increasing click target for touch interaction - Create workaround for helper text or just build support for it - Prune unneeded CSS - Correct horizontal offsets per spec - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

clshortfuse · 2016-08-22T15:36:40Z

Rebase in #9344

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support and introduced pixel aliasing on certain browsers. - Add and remove `md-input-has-label` class dynamically - Add and remove `md-input-has-messages` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height relative to font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space underline per spec - Use dynamic upper margins dependent on label existance - Use dynamic lower margins dependent on message existance - Correct animation timings for smoother font-size transition - Remove unneeded CSS (ie: `order` is only used in flex layouts) - Add md-dense support This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will now resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Increasing click target for touch interaction - Create workaround for helper text or just build support for it - Prune unneeded CSS - Correct horizontal offsets per spec - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support and introduced pixel aliasing on certain browsers. - Add and remove `md-input-has-label` class dynamically - Add and remove `md-input-has-messages` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height relative to font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space underline per spec - Use dynamic upper margins dependent on label existance - Use dynamic lower margins dependent on message existance - Correct animation timings for smoother font-size transition - Remove unneeded CSS (ie: `order` is only used in flex layouts) - Add md-dense support - Revert need for wrapping resize handler - Use CSS for message animation, fixing JS issues with ngIf This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will now resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Increasing click target for touch interaction - Create workaround for helper text or just build support for it - Prune unneeded CSS - Correct horizontal offsets per spec - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support and introduced pixel aliasing on certain browsers. - Add and remove `md-input-has-label` class dynamically - Add and remove `md-input-has-messages` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height relative to font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space underline per spec - Use dynamic upper margins dependent on label existance - Use dynamic lower margins dependent on message existance - Correct animation timings for smoother font-size transition - Remove unneeded CSS (ie: leftover rules from when input used flex) - Add md-dense support - Revert need for wrapping resize handler - Use CSS for message animation, fixing JS issues with ngIf This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will now resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Increasing click target for touch interaction - Create workaround for helper text or just build support for it - Prune unneeded CSS - Correct horizontal offsets per spec - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

** WIP DO NOT MERGE ** md-input always had extra margins for placement of labels and messages without every reducing or removing them if said elements were not present. Label components were not properly changing based on font-size, but instead, used a scaling system that had poor dynamic font-size support and introduced pixel aliasing on certain browsers. - Add and remove `md-input-has-label` class dynamically - Add and remove `md-input-has-messages` class dynamically - Position label with the proper distance from the top per spec - Transition label position and font-size depending on focus state per spec - Use `will-change` CSS to alert browser of animation change for smoothness - Set input height relative to font-size with a minimum of 16px per spec - Revert `box-sizing` to default to properly space underline per spec - Use dynamic upper margins dependent on label existance - Use dynamic lower margins dependent on message existance - Correct animation timings for smoother font-size transition - Remove unneeded CSS (ie: leftover rules from when input used flex) - Add md-dense support - Revert need for wrapping resize handler - Use CSS for message animation, fixing JS issues with ngIf This commit allows more flexibility with labels and input boxes. Input elements can now support any font-size. Labels will now resize dynamically, correcting issues related to text with width longer than space available. Various costly CSS rules have also been removed. Performance should also be better due to use of `will-change` and initialization with `transform3d`. TODO: - Increasing click target for touch interaction - Prune unneeded CSS - Correct horizontal offsets per spec - Correct md-select positioning - Correct md-autocomplete positioning - Correct md-datepicker positioning Rebase of angular#8209 Fixes: (TODO)

clshortfuse changed the title ~~feat(md-input) add md-dense and match css to spec~~ feat(input) add md-dense and match css to spec Apr 25, 2016

clshortfuse force-pushed the specFix branch from 544585b to 863b44b Compare April 25, 2016 22:20

clshortfuse force-pushed the specFix branch from bcb7519 to 9c23b73 Compare April 28, 2016 17:32

nikclayton mentioned this pull request May 18, 2016

mdSelect: Need spacing for ngMessages #6903

Closed

clshortfuse force-pushed the specFix branch 2 times, most recently from 07e0443 to bbf6c64 Compare May 27, 2016 15:22

clshortfuse mentioned this pull request May 27, 2016

fix(md-checkbox) support horizontal centering of blank md-checkbox #7851

Closed

ThomasBurleson added this to the 1.1.0 milestone Jun 2, 2016

ThomasBurleson self-assigned this Jun 2, 2016

ThomasBurleson added the CSS: High Density label Jun 2, 2016

clshortfuse force-pushed the specFix branch from bbf6c64 to bd1dcdb Compare June 3, 2016 01:22

crisbeto reviewed Jun 3, 2016
View reviewed changes

clshortfuse force-pushed the specFix branch 2 times, most recently from e10a5d0 to f5d5f4a Compare June 18, 2016 15:56

clshortfuse force-pushed the specFix branch 2 times, most recently from c428de8 to c87bff5 Compare July 11, 2016 17:04

clshortfuse force-pushed the specFix branch from c87bff5 to be11f58 Compare July 11, 2016 23:53

clshortfuse added the in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs label Aug 4, 2016

ThomasBurleson modified the milestones: 1.1.0, 1.1.1 Aug 5, 2016

clshortfuse mentioned this pull request Aug 18, 2016

feat(md-input) add mdDense support and realign to spec #9344

Closed

7 tasks

clshortfuse closed this Aug 22, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(input) add md-dense and match css to spec #8209

feat(input) add md-dense and match css to spec #8209

clshortfuse commented Apr 25, 2016 •

edited

Loading

clshortfuse commented Apr 26, 2016 •

edited

Loading

ThomasBurleson commented Apr 26, 2016

clshortfuse commented Apr 26, 2016

clshortfuse commented Apr 26, 2016

clshortfuse commented Apr 28, 2016 •

edited

Loading

devversion commented May 9, 2016

clshortfuse commented May 9, 2016

clshortfuse commented May 27, 2016 •

edited

Loading

ThomasBurleson commented Jun 2, 2016

ThomasBurleson commented Jun 2, 2016

crisbeto commented Jun 2, 2016

clshortfuse commented Jun 3, 2016 •

edited

Loading

ThomasBurleson commented Jun 3, 2016

crisbeto commented Jun 3, 2016

ThomasBurleson commented Jun 3, 2016 •

edited

Loading

crisbeto Jun 3, 2016

clshortfuse commented Aug 22, 2016

feat(input) add md-dense and match css to spec #8209

feat(input) add md-dense and match css to spec #8209

Conversation

clshortfuse commented Apr 25, 2016 • edited Loading

clshortfuse commented Apr 26, 2016 • edited Loading

ThomasBurleson commented Apr 26, 2016

clshortfuse commented Apr 26, 2016

clshortfuse commented Apr 26, 2016

clshortfuse commented Apr 28, 2016 • edited Loading

devversion commented May 9, 2016

clshortfuse commented May 9, 2016

clshortfuse commented May 27, 2016 • edited Loading

ThomasBurleson commented Jun 2, 2016

ThomasBurleson commented Jun 2, 2016

crisbeto commented Jun 2, 2016

clshortfuse commented Jun 3, 2016 • edited Loading

ThomasBurleson commented Jun 3, 2016

crisbeto commented Jun 3, 2016

ThomasBurleson commented Jun 3, 2016 • edited Loading

crisbeto Jun 3, 2016

Choose a reason for hiding this comment

clshortfuse commented Aug 22, 2016

clshortfuse commented Apr 25, 2016 •

edited

Loading

clshortfuse commented Apr 26, 2016 •

edited

Loading

clshortfuse commented Apr 28, 2016 •

edited

Loading

clshortfuse commented May 27, 2016 •

edited

Loading

clshortfuse commented Jun 3, 2016 •

edited

Loading

ThomasBurleson commented Jun 3, 2016 •

edited

Loading