github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-25 00:14:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

mobile

Browse Source
This commit is contained in:
chapoi 2023-10-27 11:12:27 +03:00
parent c36434a145
commit 3b489f52fd
6 changed files with 68 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/common/base/_index.scss
View File

@ -10,7 +10,6 @@
@import "compose";
@import "composer-user-selector";
@import "crawler_layout";
@import "d-form-fields";
@import "d-image-grid";
@import "d-icon";
@import "dialog";

1
app/assets/stylesheets/common/components/_index.scss
View File

@ -9,6 +9,7 @@
@import "calendar-date-time-input";
@import "convert-to-public-topic-modal";
@import "d-lightbox";
@import "d-form-fields";
@import "d-toggle-switch";
@import "date-input";
@import "date-picker";

4
app/assets/stylesheets/common/base/d-form-fields.scss → app/assets/stylesheets/common/components/d-form-fields.scss
View File

@ -16,6 +16,10 @@
margin-top: 1.4em;
}
}
&__group {
display: flex;
gap: 1rem;
}
&__label {
font-weight: bold;

1
app/assets/stylesheets/mobile/components/_index.scss
View File

@ -1,3 +1,4 @@
@import "d-form-fields";
@import "topic-footer-mobile-dropdown";
@import "user-card";
@import "user-stream-item";

19
app/assets/stylesheets/mobile/components/d-form-fields.scss Normal file
View File

@ -0,0 +1,19 @@
.d-form-field {
width: 100%;
&__set {
// flex-direction: column;
flex-wrap: wrap;
}
// &:has(&__input[type="text"]),
// &:has(details.select-kit) {
// width: 100%;
// }
&__content,
&__input[type="text"],
&__input[type="number"],
.select-kit {
width: 100%;
}
}

107
plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/05-input-fields.hbs
View File

@ -6,9 +6,7 @@
<span class="d-form-field__label-optional">(Optional)</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<input class="d-form-field__input" name=" " type="text" size="25" />
</div>
<input class="d-form-field__input" name=" " type="text" size="25" />
<div class="d-form-field__meta">
<span class="d-form-field__meta-text">
Some instructions on what to do.
@ -22,9 +20,7 @@
<span class="d-form-field__label-text">Limited character field</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<input class="d-form-field__input" name=" " type="text" size="25" />
</div>
<input class="d-form-field__input" name=" " type="text" size="25" />
<div class="d-form-field__meta">
<span class="d-form-field__meta-count">0/25</span>
</div>
@ -39,9 +35,7 @@
<span class="d-form-field__label-optional">(Optional)</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<input class="d-form-field__input" name=" " type="text" size="25" />
</div>
<input class="d-form-field__input" name=" " type="text" size="25" />
<div class="d-form-field__meta">
<span class="d-form-field__meta-text">
<span class="d-form-field__input-error-icon">{{d-icon
@ -58,9 +52,7 @@
<span class="d-form-field__label-text">Limited character field</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<input class="d-form-field__input" name=" " type="text" size="25" />
</div>
<input class="d-form-field__input" name=" " type="text" size="25" />
<div class="d-form-field__meta">
<span class="d-form-field__meta-count">0/25</span>
</div>
@ -79,37 +71,32 @@
<span class="d-form-field__label-text">Streetname</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<input class="d-form-field__input" name=" " type="text" size="30" />
</div>
<input class="d-form-field__input" name=" " type="text" size="30" />
</div>
</div>
<div class="d-form-field">
<label class="d-form-field__label" for=" ">
<span class="d-form-field__label-text">Number</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<div class="d-form-field__group">
<div class="d-form-field">
<label class="d-form-field__label" for=" ">
<span class="d-form-field__label-text">Number</span>
</label>
<div class="d-form-field__content">
<input
class="d-form-field__input"
name=" "
type="text"
size="9"
type="number"
size="4"
maxlength="4"
/>
</div>
</div>
</div>
<div class="d-form-field">
<label class="d-form-field__label" for=" ">
<span class="d-form-field__label-text">Bus</span>
<span class="d-form-field__label-optional">(Optional)</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<input class="d-form-field__input" name=" " type="text" size="9" />
<div class="d-form-field">
<label class="d-form-field__label" for=" ">
<span class="d-form-field__label-text">Bus</span>
<span class="d-form-field__label-optional">(Optional)</span>
</label>
<div class="d-form-field__content">
<input class="d-form-field__input" name=" " type="number" size="4" />
</div>
</div>
</div>
@ -119,9 +106,7 @@
<span class="d-form-field__label-text">Country</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
</div>
<MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
</div>
</div>
@ -137,29 +122,27 @@
<span class="d-form-field__label-text">Streetname</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<input class="d-form-field__input" name=" " type="text" size="30" />
<div class="d-form-field__meta">
<span class="d-form-field__meta-text">
<span class="d-form-field__input-error-icon">{{d-icon
"info-circle"
}}</span>Error message
</span>
</div>
<input class="d-form-field__input" name=" " type="text" size="30" />
<div class="d-form-field__meta">
<span class="d-form-field__meta-text">
<span class="d-form-field__input-error-icon">{{d-icon
"info-circle"
}}</span>Error message
</span>
</div>
</div>
</div>
<div class="d-form-field --error">
<label class="d-form-field__label" for=" ">
<span class="d-form-field__label-text">Number</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<div class="d-form-field__group">
<div class="d-form-field --error">
<label class="d-form-field__label" for=" ">
<span class="d-form-field__label-text">Number</span>
</label>
<div class="d-form-field__content">
<input
class="d-form-field__input"
name=" "
type="text"
type="number"
size="9"
maxlength="4"
/>
@ -172,16 +155,14 @@
</div>
</div>
</div>
</div>
<div class="d-form-field --error">
<label class="d-form-field__label" for=" ">
<span class="d-form-field__label-text">Bus</span>
<span class="d-form-field__label-optional">(Optional)</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<input class="d-form-field__input" name=" " type="text" size="9" />
<div class="d-form-field --error">
<label class="d-form-field__label" for=" ">
<span class="d-form-field__label-text">Bus</span>
<span class="d-form-field__label-optional">(Optional)</span>
</label>
<div class="d-form-field__content">
<input class="d-form-field__input" name=" " type="number" size="9" />
<div class="d-form-field__meta">
<span class="d-form-field__meta-text">
<span class="d-form-field__input-error-icon">{{d-icon
@ -198,9 +179,7 @@
<span class="d-form-field__label-text">Country</span>
</label>
<div class="d-form-field__content">
<div class="d-form-field__input-wrapper">
<MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
</div>
<MultiSelect @content={{@dummy.options}} @onChange={{@dummyAction}} />
<div class="d-form-field__meta">
<span class="d-form-field__meta-text">
<span class="d-form-field__input-error-icon">{{d-icon